August 20, 2017

A simple design process to keep you sane

Trough the years I’ve found that when I try to work on a hurry, my work process becomes a mess. I iterate without any order, and I almost always end up overwhelmed by the thing I’m designing or building. The working experience turns bad and the end result suffers. It may be not too bad, but it’s not great either.

I’m not an organized person. I struggle to keep order, and if I leave any chance for chaos to enter my work process, it usually takes over. This is why I consider a good design process to be of primary importance in any of my work, mainly to keep me focused on one task at a time. Every decision that falls outside the step I’m taking is safely ignored, and I found that very relieving.

I’m not talking about a super special and magical process, though, even a very simple and straightforward one works very well for me. The following is what I do when designing user interfaces and websites.

Every stage has its goals, and it’s very important not to continue to the next step until completing the current one.

Starting on paper

Goal: to take all the main design decisions before jumping to the computer. This is usually making sure I’m solving the problem I’m designing for, then structure and layout.

It’s funny because I too roll my eyes very hard (just how you just did) when somebody mentions this start-on-paper thing, but the reality is, when I jump to software without having my main direction already set up, I end up taking too many guesses.

Designing visuals

Goal: to have all the specific visuals defined from broad to fine detail. Color, type, logos, illustrations and decorations. Also, in this stage I set up a rough version of the copy.

I’m pretty proficient in Adobe Illustrator, but when I’m doing web or mobile UI I prefer sketch, just because I feel it’s closer to the final results I’m going to be looking for, visually. I know I can set up my Illustrator to do just that, but why bother. I like the smaller set of tools sketch has.

In this stage, I always have the temptation of declaring what I have “good enough to jump to code” and to leave the finer decisions for later in the process, but when I follow those temptations I end up with lousy products. Designing in the browser seems like a good idea, but in my experience, it doesn’t work very well.


Goal: to actually build the thing.

Note: I only do this when it’s a website. I work with plain HTML + CSS, and also with WordPress, but if the project goes any thing beyond that, my work ends on the previous step, and then I hand stuff over to development.

I work in Atom, with pretty common tools (Emmet and Live Reload, mainly). I do version control with Git. If working with WordPress, I use Local by Flywheel to set up things locally, as it is pretty straighforward (but a little buggy lately, to be honest) and SequelPro to manage my databases.


If at any time you need to go back to a previous step on the process, that’s ok, but you need to make sure you follow trough with the changes in every single following step. This is important for consistency (and again, to keep chaos from taking over).

Also, save your directions. If you’re iterating and the design changed significantly, it is a good idea to make copies of the work you already have and start over on a new version. For design files I usually just do copies (although there’s stuff like Abstract that allows you to version control your design files). For code, use Git and set up another branch when you’re taking a new approach.

As you can see, this is a very simplified process. When I’m working on products for myself, or fairly simple websites, it works as it is. For more complex stuff, some steps are usually added, mostly for collaboration with other designers and developers, but I try my best to keep things as simple as posible.

The beauty of following every step of a process like this one, is that you focus on a single task and free your brain from everything else. Freeing your brain from clutter is a great thing to do for productivity and sanity, and it also makes you enjoy your work.

What do you think? Have something to share? Hit me up on Twitter!

↜ Previous Panic in the streets of Morrissey

Next ↝ A notepad in the browser