And finally the day has come: World, This is Persp.

I think I’ve been working on it a little bit over 5 years now. OMG 5 years!. I’ve never worked on a project for so long. Ever. It has been an amazing and difficult, really difficult period. So, no more delays. Here it is:

try.persp.info

About the name

First let me tell you about the name: It comes from perspective. There is a complete philosophy behind that name that persP is based on, but let’s get to this in it’s own post. We still need to add some key parts to persP.

What it is

Now, rather than define persP, let me explain what persP does:

persP is a tool that lets you start designing completely from scratch (if you have ever used sketch, you already know how to use it ), add behaviors, actions, logic, some event based animations to that design and just hit the export button.

And that’s it. Your web/app/presentation/pdf/whatever is ready to run/download. And I really mean it. No handoff needed. Of course, if you only want to create prototypes with it, is up to you, no hard feelings :).

if you want to try the alpha version: try.persp.info

persP interface. Circa 2018.

I developed it for me, to help me with real projects…

And I’ve used it for real projects every single time I have had the chance to. And let me tell you something I learned by doing that: You can only evolve a product when you face real problems. Drawing random color boxes or texts in a canvas can hardly solve anything.

So far, it has gone thru 3 mayor revisions and a myriad of small ones. And I’ve worked on it almost everyday. Sometimes developing it and expanding it, sometimes just using it as a production tool. Yes, I ate my own dog food.

And since Ivan and Josemi joined the project 2 years ago, I can honestly say that We have evolved persP a lot :)

Agnostic

persP has been designed to be completely platform/medium agnostic. Outputs are just that, outputs; a web, a presentation, a PDF or a native app. For that reason everything inside persP is an abstract data structure until you click the export button.

I.e. let’s say we are designing a web page. Data in persP only transforms into a HTML webpage when you click the export HTML button. That’s extremely important because we have designed actions and animations to be abstract too: logic and animation can be transformed to any platform, let’s say … react or swift? You choose. We will start working on the first exporters as we approach the release date. Any suggestions are welcome.

Context

I believe it’s best to think of persP not as a design, prototyping or development tool. I’d rather consider it a design workflow tool. I strongly believe that everything in a project should be integrated and connected: design, interaction, development and communications. That way, we can keep something extraordinary important, intact: context.

The moment you start jumping between tools you always lose it. And that is a main source of issues and frustrations.

In order to mitigate that as much as possible, we have transparently integrated internal messaging, to-dos and time-tracking systems. And you’ll be able to export or connect the data gathered to the software you use normally.

I.e, if your issue/tracking system is Jira, you can always connect the internal to-do system to the jira integration: you’ll have most of Jira functionality but right inside the app always accesible, keeping the context.

Or let’s consider time-tracking, that it’s always tricky (I always forgot to start the timer). persP is continuously measuring the time you are actively working and saves it. It also closes your session if you have not been active for the last ten minutes. So you don’t need to track your time or the time of other user in the team. if you use a tool like Toggl, you can always connect the internal tracking system to it.

Any application that you want us to integrate when we are ready? Let us know in the comments.

Focus

When you have limited resources, like us, you cannot concentrate on everything at the same time, so alpha is (and beta will be) really focused on the HTML exporter. So much that it may seems that persP is a web design tool. Please remember this: It’s not. It’s much more. It would have been way easier if it was only web.

Features:

Let me review some of the main points in no particular order:

• Cloud based. Platform agnostic. It can work offline if you lose internet connection.
• Instant on. It just opens where you left it. Pinned projects are always up to date (with notifications if they have been changed by other user). You can copy/paste between pinned projects.
• No save action needed. Versions, backup.
• Real time multiuser editing. That means that the only limitation is that you cannot select the same element another user has already selected, but you can request it in a single click.
• Most of usual layout tools are there: Multiple slides, Boxes, Ovals, Rounded boxes, Texts, Media boxes , Components (Symbols). Align, Distribute, Grids, Guides, Snaps. Let’s leave vector editing and photo editing to the apps that do it really well for the moment.
• Media, Components, Styles (text, graphic and animation) drag and drop browsers. So you can define your own Design system.
• Slide browser, Current slide navigation (like sublime Text) to jump to a section of the page directly.
• Multi-language support. You have never created multi language systems so fast and so easy. Trust me.
• Actions rule language that we are improving each week. Right now it allows connect to external APIs and integrate the results with components, execute javascript commands, add CSS on the fly …
• Rule based Components.
• Event based animations. Each actor can have creation, exit and specific animations that can be triggered by events or actions or a combination of both.
• One click export. And we have defined the three servers: development (persP itself), staging (user defined), ftp (user defined). We will not force you to stay on our servers. Your projects are yours.
• Javascript API so you can access the actors from you custom code. We used it a lot.

Handoff:

There is no handoff in persP.

This is what happens when you click the Export FTP button:

• Complete site is exported and files are moved between servers, following these rules: Media files, CSS files, Persp core js and index.html files are overriden only if needed.
• Every other file is kept.

Two rules on persP side:

• Name your elements correctly so you can refer them later in code.
• If you need to add modules (google analytics, external css, …) to the index, you can do it from the project settings in persP.

Two rules on the code side:

• You should start your custom code inside the main.js file and you must invoke your functions from inside the function main().
• You should refer to the actors on the slide using our functions (we have only 3, now worries) . I.e. actor(“header”)

Every time you make changes on persP, just export again and reload the site. And that’s it. Nothing more. Code stays on the code side and design stays on persP. No handoff.

About what it was before, it is not now and will be again soon:

Over the development of persP we have worked on several things that were super important at one particular moment, suddenly priority shifted and we had to stop working on them.

Among those, we have two that we’ll try to get back as soon as possible:

CMS

We had to stop working on it the moment we incorporated Components because of the amount of rewrite we must face. But it worked like a champ. An will do it again soon.

Sketch importer.

It has been working well enough over 2 years (with no maintenance ). It copied and pasted, elements, slides or whole documents as fully editable persP elements. Some moths ago, I guess sketch changed the inner structure of the files, I don’t know, honestly I haven’t keeping track of it. So, right now, we can only paste texts. We will work on it again in a few weeks, and will let you know when its ready.

The alpha:

It has quirks for sure, many. But this is to be expected, isn’t it?.

We are currently working solving some stability issues and we will open the alpha version for any of you that want to try it, this week.

Again, please take into account that it is, indeed, an alpha version.

You can join here try.persp.info.

We will invite people in batches to be sure that our servers can handle it.

The alpha will open with one project already created so you can see how it’s done, modify, torture it and even delete all its content and create new content inside. The alpha only limitations are:

• You cannot create a new project.
• You will not be able to export the project.
• Your changes will be keep only for one day.

Other than that, you can test everything, you will even be able to share the project with some friends and work together on it.

And If some of you are crazy enough to try it with real projects, please let us know. We may be able to help you. We already use it in real projects, but we do also know how to fix the problems.

So this is it for now. Thank you for getting down here. I know it has been a long read.

Please, let me know what you think, below in the comments.

Hope you give persP a try!