My design workflow including Sketching, Sketch, Invision, and Zeplin

By Baltazar Pazos

My design process is something I work really hard at perfecting. I have believed from day one that if you have a great process in place you will not only be successful but also keep enjoying what you do.

I was so excited when I got invited to Zeplin while it was still in beta because I HATE having to create styleguides. As you may already know, Zeplin not only eliminates the need for styleguides but also includes a ton of useful features for developers and designers alike.

My process

Sketching

Every project I work on begins on paper. I wireframe ideas and work on the flow of the product.

I have found that trying to figure a design layout on your design platform (Sketch, Photoshop) is much harder than simply jotting down simple ideas that you might not have otherwise tried.

Sketch

Once I have a solid idea of what the layout and flow should be, I move on to Sketch. I always try to save as much time as possible while working on projects so I use wireframe kits to piece together the initial frame. There are a ton out there but some of my favorites are from UI8 and Market byDesignmodo.

For inspiration I also use sites like Dribbble, Behance, Pttrnsand Land Book.

Once I have finalized a low fidelity wireframe I begin applying the style to the design. A couple of the main features that brought me to Sketch are the ability to have multiple pages in one single document as well as the ability to export sliced items from within the entire document at once (and in multiple sizes!).

Invision App

Once I have an established design, I move on to create a prototype using Invision. I spoke to another designer recently and he mentioned that he couldn’t possibly see himself ever completing a project without first using Invision and I absolutely agree.

Invision has become a second nature tool for most designers. Aside from being a great tool, I am also really happy to use a tool built by a team that has given so much and continues to give to the design community.

Because of Sketch’s incredible abilities, I can easily export all my screens at once and upload them to Invision. I then organize them and set up links between each screen using hotspots and instantly share with my team or client.

My Invision dashboard for my current project

Zeplin

Many of you have probably heard all the rave about Zeplin, and let me tell you that it’s all true. If there is one tool I am super excited about right now it has to be this.

Once my design is finalized and ready to move on to engineering, I can easily select my artboard in Sketch, open up Zeplin and click Command + E to automatically upload my artboard to Zeplin.

Once in Zeplin, I can select the colors I want to add to my guideline and easily invite my engineers onto the project to get started.

Zeplin Guideline and Project views

Hope this will help your process. If you try out any of these tools let me know how they have improved your design process. I’m excited to hear!

 

What do you think?