The Process of a Junior Designer:

The above illustration is from Julie Zhou’s article, Junior Designers vs. Senior Designers. It captures a trap that’s easy to fall into: Running with the first idea that comes to mind. If I could just make it look better maybe it’ll work.

It’s still common for junior designers to focus on visual design over functional design. Visual design is an obvious place to start as it’s easily shared and judged: Does this screen look like the current trend? Did it get many Dribbble likes? Is it flat enough? Do the gradients gradient enough?

The Process of a Senior Designer

After a decade in the design world, I’ve learnt that how something works or why something is the way it is, is much more important than how something looks. Senior designers spend much less time on cosmetics, and much more time validating that they’re going the right direction. As shown above, senior designers come to solutions in a very different way.

Painting a broken car, no matter how great the paint job is, doesn’t make the car useful.

So, how do you avoid polishing the first idea you have? How do you come up with multiple approaches without investing a lot of time? How you decide if one approach is better than the last? Or, better than the next?

Wireframes that are useful

I want to share a simple technique I now use to force myself to explore and validate multiple directions before I dive into visual design. For the rest of this article, a “wireframe” is a sketch on paper. Paper wireframes are quick to make and reinforce that ideas are cheap and safe to throw away. Paper, also allows anyone on the team to take part in wireframing.

By using paper, we avoid confusing well-designed wireframes for good ideas.

The setup

Let’s get started. Grab a notebook (I like Borden & Riley’s Paris Paper for Pens) and draw a grid of at least 20 small rectangles. If you’re working on a mobile UI, make them roughly the aspect ratio of the device you’re designing for. For desktop UI, make them the aspect ratio of a computer monitor.

The process

Now, with your pen (I like PaperMate Flairs) fill each box with a different approach to the design problem you’re trying to solve. Sketch the most obvious ideas first. Get them out of your head, don’t stop until you’ve filled every box with an idea.

There’s little chance you’re going to be able to fill every box with a great solution, and that’s the point. You want to cover as much breadth as possible to move your mind from the comfortable into the unknown. If you’re struggling to come up with a new idea, push yourself to do something constrained: What if the menu is a radial? What if it’s only images? What if there are no images? What would Apple do? What would Google do? What if there are no lists or grids? What are different ways to place the most important elements closest to the user’s thumb? For me, more often than not, things start to get interesting after the first ~10 sketches.

If you’re trying to find the best way to layout a screen, it’s handy to create a key such as: T (title), V (video), RV (related videos), Sub (sub-navigation), etc, allowing you to focus on layout instead of UI elements:

Or perhaps a