From wireframes to mockups

Wireframing is an essential part of the Product design process. Let's start with some definitions:

1. Paper Wireframes

Creating the design of your screen with rectangles, a few text boxes and buttons. This should take a few seconds per screen.

Wireframes help you and your team understand the big picture. For you, rapid prototyping helps you explore more ideas, faster. For your team, wireframing helps you communicate high-level aspects of the design and get consensus early in the process. Don't let yourself get bogged down in unnecessary details too early.

I recommend starting with A3 paper and a black bic. Ruler is optional.

Simply put your ideas on paper.

Can't I design directly?

No. Wireframing enables you to

  • Focus on improving your screen flow
  • Have a direct input/output flow with your brain. Any tool more complex than paper and pen reduce this flow and will ultimately slow you down
  • Avoid spending time on font sizes, colors or designing complex elements
  • Iterate more quickly

What your results should look like.
What your results should look like.

Based on your Information architecture and Flowchart creating those first rectangle should be a breath.

Best practices

  • Draw rectangles with X inside for images, illustrations.
  • Draw arrows in between your screens
  • Annotate screens as you have ideas
  • Make sure you can go back to the previous screen with back arrows

🎆 Once you're happy with your general flow and layout it's time to

  • Scan it using your smartphone
  • Insert it in your Figma file

2. Figma Wireframes

I've used several standalone wireframing tools before, but I've always come across limitations. It might not have an element I need, prototyping capabilities, or good collaboration. This first iteration will also be the base of your future mockups. I'm doing on purpose everything on the same tool, this save me precious back and forth time between tools.

Now starts the time to recreate your drawings in Figma. To do so, you can either

  • Start from scratch
    • Great to be as close as possible from your initial idea
    • Great to improve your Figma skills
  • Reuse a wireframe library (available in premium pack)
    • Great to find the perfect design pattern
    • Should be avoided if your wireframes don't follow generic patterns on purpose

Wireframe example using the Figma library
Wireframe example using the Figma library

Figma Wireframing best practices

  • Only use one random accent color in your color palette
  • Use a large library of icons to save you time (available in premium pack)
  • You can have a few variations of greys to start playing with visual contrasts between elements
  • Improve your paper flow as you transition to wireframing. You may find flows on your previous designs that you should improve.
  • Create a testable prototype using Prototyping

🎆 Once you're happy with your first testable prototype

3. Mockups

Congratulations, you've validated your prototype. Now it's time to create Mockups. This will be super easy thanks to your previous work with wireframes.

To make sure you're following the right methodology, you can follow the Product design master checklist (available in premium pack)

Next up

Corner cases