The Ideal Design Workflow

As designers, we are constantly experimenting with tools and processes in an attempt to find the one that works best. After a great deal of experimentation, I’ve discovered the perfect design workflow, and I’m going to share it with you now. Design is a process and the process I’m going to share is the one I’ve used on all my projects to build habit-forming products that people love.Sketching (paper and pen) — every great design begins on paper. Get out that paper and pen and start drawing some shapes.Your next step is to take photos of your sketches on your smart phone and throw those babies into POP so you can test your prototype.

“Your next step is to make wireframes. Having sketches is never enough.”

Wireframes are a must 100% of the time. There is simply no way around it. Go ahead and open Omnigraffle and make your wires. Now realize you need a dropdown menu so re-do those wires in Balsamiq. Good when designing for 3rd graders. Next, realize you f***ing hate Balsamiq and redo them in Axure.Next, realize you f***ing hate Axure so switch over to Adobe Illustrator and use that UI Wireframing kit you bought for $89.

Now export those wires to PNGs and import them into Invision so you can share them with your team.Wake up the next morning and cry into your bowl of Honey Bunches of Oats because of all the mean comments that Jonathan left on your Invision prototype. This shit’s delicious. Agree to never use Invision again ever. Because f**k Jonathan.Redo your prototype in Marvel and hope that Jonathan can’t figure out how to leave comments on Marvel.You succeeded. Wireframes are finally approved. No thanks to Jonathan. Time to start working on a higher fidelity prototype.Grab the same stock photos that everyone else uses and then use Photoshop to optimize them. Looks pretty optimized.Now, open up Sketch and start creating the UI for your app. It’s starting to look like a real product now! Now export these as PNGs and import screens into Flinto Lite.