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.

1.) Sketching (paper and pen) — every great design begins on paper. Get out that paper and pen and start drawing some shapes.

2.) 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.

3.) 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.

4.) Now realize you need a dropdown menu so re-do those wires in Balsamiq.

5.) Next, realize you f***ing hate Balsamiq and redo them in Axure.

6.) Next, realize you f***ing hate Axure so switch over to Adobe Illustrator and use that UI Wireframing kit you bought for $89.

7.) Now export those wires to PNGs and import them into Invision so you can share them with your team.

8.) 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.

9.) Agree to never use Invision again ever. Because f**k Jonathan.

10.) Redo your prototype in Marvel and hope that Jonathan can’t figure out how to leave comments on Marvel.

11.) You succeeded. Wireframes are finally approved. No thanks to Jonathan. Time to start working on a higher fidelity prototype.

12.) Grab the same stock photos that everyone else uses and then use Photoshop to optimize them.

13.) Now, open up Sketch and start creating the UI for your app. It’s starting to look like a real product now!

14.) Now export these as PNGs and import screens into Flinto Lite.

15.) Realize you need gestures so pay $99 for Flinto for Mac so you can add Gestures.

16.) Your CEO/Stakeholder/Client “doesn’t need another app on his phone” and refuses to download the Flinto app for iphone.

17.) Import your designs into Principle and add the interactions.

18.) Realize Principle exports as a f***ing video? and give up for a brief moment. It’s going to be OK, right?

19.) Download Pixate because its free and why not?

20.) Try to learn how to use Pixate. (good luck with this one.)

21.) What you’re going to want to do is bash your computer. I would say, if you can, resist the urge to do this. It’s all part of the creative process. You need to get knocked down before you get back up again. They’re never going to keep you down.

22.) Once Pixate has driven you to the brink of insanity, switch gears and download the free trial for Framer.

23.) Now go get some lunch. You’ve earned it.

24.) Come back from lunch and realize your Framer trial has expired. (Seriously, they give you a 32 minute trial)

25.) Rebuild your prototype in Justinmind.

26.) Get roasted by your teammates for sending them a Justinmind file that no one can open because no one knows what the f*** Justinmind is.

27.) Consider jumping off the building, but realize that it’s ok because your friend tells you about a brand new awesome prototyping tool they heard about at that meetup/conference/blog post/TED talk/Product Hunt.

Thanks for reading. I hope this helps my fellow designers out there.

Shoutout to Krishen Kotecha for inspiring this post and putting up with my sarcasm in general.