persP
Develop while you design, with no code, in the browser
We have developed focus mode as a way to test the design's responsiveness inside the editor.
In focus mode, there are no slide dimensions. The page becomes fluid. And you can only see one slide on the screen at the same time (hence the focus part).
We think we have found the sweetest spot between "design" views like the ones on Sketch, Figma, XD ... and browser "focus" views (box paradigm) like Webflow. Best of all is that you can switch instantly between them by clicking on the icons or using the shortcuts "F" for focus or "D" for design.
We also think that there is no faster way to add controlled responsiveness to your projects than using the breakpoint editor in Focus view:
Resize the stage using the slider, create a breakpoint, reorganize the elements in the breakpoint to your taste, change their properties like color, font sizes, visibility, style, media source ... test and create a new breakpoint if needed. Repeat :)
One of the benefits of redoing both the logical structures and the data and join everything together is that implementing something like design systems become almost easy.
We have implemented a complete design system that right now includes: colors, fonts and styles. In the future we will expand it to assets, actions, animation presets and choreographies.
Colors can be created ad-hoc or just saved directly from the color pop up, and can be named and be arbitrarily organized between primary, accent and color swatches. If you redefine a color, everywhere this color is used will be instantly updated.
Every saved color will appear inside the color popup.
Fonts work pretty much the same, but additionally, the saved fonts will always be displayed first in the fonts pup. Because if you did define a font, you'll probably want to use it right?
You can define graphical or Text styles.
In order for Tapiz and delta changes to work as intended, we have fully rewritten the socket architecture.
One side effect of the new architecture is that team systems are ready. You can now work faster than ever and unlike the Alpha, any change, in any property you make is transmitted and rendered in real-time for the rest of the team.
Also, when a user has an actor selected, both the actor list and the canvas display the locked item properly.
Briefly, Tapiz ( Spanish word for tapestry ) is the framework we have developed and on which persP beta is built upon.
Tapiz is an extremely small javascript library that can connect/subscribe any number of objects or object properties or variables (threads) to an arbitrary number of other objects, variables or HTML nodes (other threads). Like a tapestry. If any of the connected values changes, all its connections are instantly updated. Think of it as our own version of a react + redux combo absolutely optimized for persP. It's not really based on them, but functionality-wise works quite similar.
We have created it to solve one of the biggest issues the Alpha version had. Reliable, automatic connections between the input or dropdown controls of the interface and the nodes in the canvas. Accidentally it also solves in a dead-simple way team updates via socket connections.
The system works great and it's extremely fast and responsive. It works so well in fact that we keep smiling like idiots when we test it :)
Gabi has joined our Team to help with one of the worst tasks ever. Trying to document everything Ivan and I did in code with the alpha version and everything we are doing right now.
We plan to grow the team at some point in the near future and we need to have as many structured documented as possible.
First of all:
We have started implementing the new interface and it looks great. Dark but great. We will keep improving it over time. It's a refreshing visual change from the Alpha.
Everything is different now, ie, We have added new collapsible 4/3 to 1 controls for border-radius, rotation, and text padding (!).
And many, many more things. We even have wireframe view!
and then ... Zoom:
One of the biggest compromises We made on the Alpha version was that you could not zoom on the design. You were always forced to work at 100%.
On one side, 100% is good because you are always working in the final size and no surprises will come when tested on different devices.
On the other side, yes, as much as I like to work 100%, sometimes you just need to be able to zoom on your design.
After fighting to maintain the alpha version and struggling with it, now that we have the chance to do it right, we have decided to completely rewrite the core and start over.
Some background first: Alpha grow was completely organic. We incorporated functionality as we needed it, so we improvised a lot. Basically we learn by developing real projects with it. Those projects along with projects developed in React, plain javascript or even Wordpress ... helped to pay the bills and our salaries before the investment. That means that we couldn't really focus full time in persP as we would have liked to do.
Now the time to fix all those design decisions and make it rock solid has come.
The first thing we're going to change is the object format. The alpha version relied mostly on arrays of objects. Now, We plan to move everything to objects of objects. That way We will get rid of as many loops as we can.
Some people (heroes ?) have decided to trust us and invest their hard-earned money on our project. 235.000 Thanks to all of them!
I could not be more proud or frightened by the responsibility it creates.
That will allow us to keep working full time on the project and hire more people for the Team
I did it through a Medium article: https://blog.prototypr.io/and-finally-the-day-has-come-world-this-is-persp-13269d6181bf
We have created a really nice video that showcases all the things you can do with persP, starting with the design, then Animation, interactions, collaboration in real-time and finally publishing. With just one click.
It still cannot believe we did it!
Now that we are a company, it's time to start hiring our team. Right now we can only afford to have them half time, but hopefully, they will become full time soon.
Ane will help us to document the app for our users, i.e creating and compiling the Help website and creating video tutorials and tips and tricks.
Endika will help us with QA. He is trying to create and replicate websites to find and identify errors and shortcomings.
2 Comments
Is this an alternative to Bubble.io? You have an amazing product. I haven't tested on desktop yet.
Confirmation email was sent to my spam box. I think your domain email records are not functional.
Buttons inside the email are not clickable. Can't verify my account
Thank you very much for telling us!
We will look into this. And I will let you know once it's solved.
Regarding your question ...
I think it's in fact, an alternative to bubble.io, but I think our approach is a bit different, although I'm not a bubble.io user so I have no real experience with it and I cannot be completely sure. In fact, I think I discovered that bubble.io exists only 2 weeks ago :{
In our app, projects start exactly like any design project in any design app like Sketch, Figma ... Not by using pre-configured blocks, nor following the blocks (divs) approach, you are completely free to design anything you need.
After that, if needed, you can assign alignment/pin constraints, breakpoints, and responsiveness.
Then you can add animation, behaviors, logic and complex interactions through actions.
Finally, you can import any kind of data as long as it can be converted to JSON and reduce it visually to endpoints and views. Once the views are created you can connect those views to your previously created components or grids. You can use actions to filter and refresh endpoints. Your components will update instantly, No need to worry about that.
To publish your project You click the publish button. Everything will move to your own server (you can configure staging and production FTPs).
I don't know if this helps with the differences between the 2 apps, but I think you'll find they are quite different.