How to Wireframe

10 Things I Learnt From Over 17,450 Hours of Wireframing

Posted in Design, Design Process, How To by

Learn Something New Every Week — My Weekly Newsletter

Join over 6,000+ readers and unlock the secrets to a successful career. I write about design, entrepreneurship and my learnings from my personal journey every week.

I write about design, entreprenuership and life every week.

Be honest with yourself.
How often do you start your design process in Sketch or Photoshop?
How much time do you spend wireframing?

*Raises hand* Guilty is charged. I’ve committed both many times in the past. However over time I’ve learnt to love wireframing and noticed how much value it has added to my skillset and project outcomes.

Today you’re going to learn why wireframing is so important, how it will help you become a better designer and ultimately how you can improve your wireframing process!

Lets get right into it..

Why is wireframing more important than you think?

You’re focusing all your energy on the functional side (information architecture and flow) of the experience.
No one idea is perfect. Wireframing has allowed me to become far more open minded when tackling UX challenges. I’m far less likely to fall in love with ideas and am always trying to iterate and improve on concepts. As your Ideas are new and unpolished, wireframing helps you develop and flesh out your ideas. It’s a great time to do research, understand the problem and focus on solving the problem through a functional POV instead of an aesthetic one.
I’ve worked with a handful of designers who have jumped straight into Photoshop or Sketch once handed a brief. There’s no right or wrong process to design. However in my opinion there’s a more effective one. When you’re ‘wireframing’ in Sketch or Photoshop you naturally start worrying about the details in the aesthetics.

What’s my take on wireframing?

Everyone has a different style and process but this is how I approach it. With most projects I spend at least a week wireframing (strictly no visual design begins until all wireframes are completed). It’s a 3 step process.

  1. First off I sketch out the sitemap. This will help you grasp a better idea of how a product will flow visually. Not only does this help you, but your client will definitely benefit from it as well.
  2. Once the general flow is agreed on, I’ll begin to start tackling each screen. Low-fidelity style. I keep things [very] rough. I scribble. My goal is to throw all my ideas onto the page without thinking too much.
  3. Now that I’ve got the general flow and structure, I start refining each screen. Thinking critically about the details and coming up with high-fidelity wireframes.

New to wireframing? I’ve got your back.


10 best practices to improve your wireframing skills

  1. Keep it dirty
    The goal of wireframing is to explore and test as many ideas as possible. You can’t if you’re worrying about pixel perfect wireframes.
  2. Iterate fast
    The wireframe life isn’t just about being dirty, you need to be fast as well. It’s all related. When you keep it fast and dirty, you’ll be less attached to concepts which I’ll talk about below.
  3. Prioritise
    Coming up with intuitive layouts isn’t all magic. There’s a simple mental framework I use to help guide my decisions. Watch my short clip about how to create more intuitive layouts here (share it if you find it useful).
  4. Avoid using colour
    Keep your wireframes monochromatic. 50 shades of grey works well for layout hierarchy ;). No seriously, the more dull you can get it the better. Remember we actually don’t want to make these look nice at this stage. It should just ‘function’ and ‘work well’.
  5. Keep it to pen and paper
    Pen not pencil because you don’t want to be wasting time rubbing ideas out. No idea is a bad idea. If you think there’s a better solution, draw it up again. Try to have as many ideas out on paper as you can. The best ideas evolve from tinkering and continuous exploration
  6. Don’t fall in love
    The cold hard truth. Love hurts I know 😉 So don’t fall in love with your wireframes. As a designer it’s our job to be more open minded and collaborative. I’m a designer as well and I know it’s hard but once you can drop the pride, then great things will happen.
  7. Articulate your thoughts
    Keep your mind clear when wireframing. When you’ve got a clear mind, that’s when cretivity and magic happens. So don’t clutter your mind with your ideas and thoughts about the problem. Write them out so you can always refer to them later on.
  8. Get a second opinion
    Do you have a design friend or someone you ask for second opinions? No matter how great of a designer you are, when you’ve had your head down for a number of hours you’ll need a input from a fresh perspective. They will help identify things which you might not have thought of.
  9. Use real content
    As a designer I strongly believe that we should be copy writers as well. We boast about ‘creating delightful experiences’. Guess what? copy makes up a huge part of the experience! Lorem ipsum should only be used for ‘blocks of content’ such as a blog post.
  10. Cover all use cases
    It’s great to focus on the bigger picture but don’t forget to wireframe the micro interactions as well. Once you’ve got the sitemap a set of high fidelity wireframes with the micro interactions covered, the design phase will flow smoothly. You’re focus will then purely be on the visual aesthetics.

This article was originally published in my weekly newsletter. For more awesomeness, don’t forget to subscribe.

Leave a Comment