How to create a wireframe: The ultimate guide

Getting started on your product’s design with a blank page is daunting. But rather than trying to create a perfect design from scratch, why not spark your creativity with one of your most useful design tools — a wireframe?

In this article, we’ll be going over how to create a wireframe from scratch — and why you might need it.

Why create a wireframe?

When you’re in the ideation stage of your design process, it’s useful to have a quick way to communicate your biggest ideas. Imagine getting started on building a house without a blueprint — it would never work. Before you can allocate a ton of resources to working on a project, you need to fine-tune your plan and have a clear idea of what the end result will look like.

By framing your design concept in a minimalistic structural design, you can make quick adjustments. Plus, you can give everyone an idea of how your future design will look. Best of all, it means you can share your ideas early, without worrying about more complex design elements like colors, shading or intricate menus.

How to create a wireframe

We will be focusing on how to create a medium-fidelity wireframe specifically. You can design them using digital design tools and we’ll be using Sketch for our guide. You can use these steps to create your very own wireframe — but for this example, we’re going to create a blueprint for a travel app.

1. Research and ideate

Before you start any design project, it’s important to really think about what you want to achieve. And research can help. Start by looking at other similar products — focusing on what works, what doesn’t, and what you want to do differently.

User research is also a great way to get started with your product discovery. Surveying potential users can help you figure out pain points that your product can solve. It can also help you focus on your product’s main use-cases. Don’t forget to document everything you learn — you’ll definitely want to refer back to it later.

2. Plot the user journey

Now that you have an idea of what you want to build and your users’ pain points, it’s time to put your ideas into action. The goal is to work out what the screens should look like in your final product. Ask yourself — from the moment your users open your app, how will they reach their desired goal? This is what you call the user journey.

In the case of our travel app, we know that users will want to find travel destinations, hotel details, and prices. And they’ll also want a profile so they can keep track of what they’ve done. We can use that information to plan our user journey and create our wireframe. Start by sketching out your wireframe on paper. This isn’t essential, but it can help you visualize and translate your low-fidelity sketch into a wireframe.

3. Basic wireframe rules

With the prep work done, it’s time to create your wireframe. For this guide, we’ll be using Sketch to create our wireframe. Open up the Mac app and create a new document to get started. But before we get to drawing, there are a few basic rules to wireframing that you should keep in mind:

• Grayscale only — Wireframes don’t use any colors — keep shading to a minimum.
• No images — Again, we’re trying to keep things as simple as possible so placeholders will do the job for most images. You can use a temporary stock image or just add a cross to your image frame to signify an image will eventually sit there.
• Limited or no copy — Some designers prefer to add copy for primary menus and anything important to the functionality of the app. Other than that, you should avoid text or use placeholder copy.
• Limited fonts — If you’re adding any sort of text, limit yourself to two fonts — one for headings and one for body copy.
• Scale, but don’t measure — It’s important that you consider scale — i.e. how big or small a tile, icon or image is going to be — but don’t worry about exact measurements. Until you have the final images and copy, your design will have to change and evolve anyway.

Now, let’s move on to creating the building blocks we’ll be using for our wireframe.

4. Create your building blocks

Creating a wireframe involves a lot of building blocks that have basic designs. To help us work even faster and more efficiently we will be using Symbols in Sketch to create these building blocks for our wireframe.

Depending on what you’re making, you may have different building blocks. But for our travel app, we’ll be focusing on showing destination options, hotel pricing and other details. We’ll use Symbols to create a collection of placeholder boxes, cards, icons and table rows for our app.

There is no rule for what you should or shouldn’t create a Symbol for, but it’s typically good practice to create a Symbol for any component you’ll repeat throughout your project — even if you plan to edit them down the line. Since we aren’t focusing on copy or specific details, placeholder data is enough and you can safely duplicate them without altering much.

5. Putting it all together

Now that we have everything ready and you’ve created your Symbols, it’s time to put together everything we’ve done so far and create a wireframe.

Create your different screens with Artboards

Following our user journey, we can figure out how many different screens we’ll need in our wireframe. From the Mac app, use the Insert menu to create as many Artboards as you need for your app. Use the preset sizes to create Artboards for the device you’re designing for. Name your Artboards to make it easy to see which screen does what at a glance. You should have a Canvas that looks something like this:

Use your Symbols

By now you should be able to see how your idea and user journey will start to look on your Canvas. It’s time to dip into your Symbols or add completely new layers to start creating your wireframe screen-by-screen.

Make the most of shading

Even though we’re not relying on any colors for our wireframes, it’s still useful to show separation between sections on a particular screen. You can use shading to differentiate between different layers. Adding contrast like this will help your eye pull out details in your design and understand what will draw focus in the finished product.

Wrapping up

Once we’ve made some finishing touches, our travel app wireframe looks like this:

Step back and look at your own wireframe. Does it address the pain points you identified earlier in the process? And is there a clear user journey from one screen to the next?

Our wireframe looks good, but we might need to add a little more detailed copy to help other stakeholders quickly understand what each screen shows. Keep tweaking your wireframe until you’re happy with the rough layout and flow.

With your wireframe now done, it’s important to remember to involve members of your team in the process. Wireframes are flexible and subject to constant changes, the earlier you get feedback the better the final result.

Make sure you go through several rounds of feedback before moving on to the next stage of your design process. When you’re satisfied with your wireframe you might want to consider creating a mockup or prototype to get closer to your final design.