The 2021 Guide to Wireframing a Website or Mobile App
Why you should wireframe, when to do it and a step-by-step tutorial on how to do it.
Though wireframes and prototypes are used at opposite ends of the design cycle, they have a naturally symbiotic relationship. Wireframes allow you to define the information hierarchy of your design, making it easier for you to plan your website or app design according to how you want your user to process the information. This in turn leads to much less guesswork during the prototyping phase, which can instead focus on refining the details in as realistic a way as possible. In this guide, we’ll share everything you need to know about:
- What a wireframe is
- Wireframes vs. mockups
- Wireframing vs. prototyping
- Why you should wireframe
- Wireframing a website vs. an app
- Two wireframe examples
- Best practices when wireframing a website or app
- 4 steps to create your first wireframe
- Wireframing resources
First, though, the most important question of all: just what is a wireframe exactly?
What is a wireframe?
Think of a wireframe as a basic map or diagram of a website, mobile app, or desktop software; the bare bones, minus any decoration. If we make a comparison with architecture, a wireframe is like a basic floor-plan of a building. And just like an architectural floor plan, a wireframe shows exactly where every space is located, and how each space connects to the others; but without going into superficial, non-structural detail. So we’re primarily talking page structure, information architecture, user-flow, and overall form.
Everything that appears in a wireframe must have a functional purpose. That means buttons, menus, headings, search fields, and any other navigation tools or interactive parts of the product. On the other hand, it wouldn’t include styling, colors, or graphics. These are all important elements, of course, but they don’t contribute to the user experience in a structural way.
And because wireframing is all about function rather than form, wireframes are usually designed very simply indeed. Often using only black, white, and perhaps gray. Indeed, many of the best examples of wireframing actually start life as no more than a hand-drawn sketch on paper. Though they may end up being transferred to the digital realm later for easier editing and sharing.
Now that we’ve gained a clearer understanding of the meaning of the word wireframing, it can be helpful to contrast this with a couple of similar UI design concepts with which the wireframe is often confused.
Wireframes vs mockups
Although the terms wireframe and mockups are often used interchangeably, they are actually two distinct concepts. And each performs a very different function to the other – at quite different stages of the design process.
As we’ve just seen, we can define wireframing as creating the basic floorplan of an app or website. In contrast, a mockup is like a 3D render of the interior design. I.e. a mockup is all about giving the viewer an idea of how the finished product will look from an aesthetic and branding point of view, but it tells us little about either its spacial layout nor its functionality.
Wireframing vs prototyping
A wireframe should provide just enough indication of layout and functionality to get the whole team working on the same page, but doesn’t need to deliver any more than this; either in terms of looks or usability. Conversely, prototyping refers to the process of designing an interactive experience – a working model of the product. What matters with a prototype, then, is not how the product is lain out(wireframe), nor how it looks(mockup), but how it works. Accordingly, prototypes can be produced at either low or high fidelity, depending on your needs.
The prototyping stage is when you should focus on the practical details of how a user will interact with your design. And because of the high level of fidelity you can achieve by designing in Framer, prototypes are often used to test and validate the product with end users.
Why wireframe?
The purpose of wireframing is, firstly, to identify any potential problems in the structure of your UX. And, secondly, to solve them.
Although it might be tempting to skip wireframing, by dealing with any issues at this stage you will save a lot of wasted time and energy in the long run. It’s common sense: like making sure that the beams and joists of your house are fully stable before fitting sheetrock and painting the walls.
But this brings us to another important reason why wireframing a website or app at the start of the design process is so crucial. Imagine you show your newly built and freshly decorated home to friends; they know just how much work has gone into building the house, so if there’s anything they strongly dislike about the design they are unlikely to be brutally honest about it.
Instead, if you wanted honest advice, it would have been better to show the plans to your friends right from the start. Knowing that you had only just begun working on the project, they would likely have been much less shy about offering a critical opinion. After all, it’s better to tell you while you can still do something about the problem.
It’s the same with wireframing a website or app; show people a simple and basic map of the project, and few will shy away from telling you what they really think of it. But go to the trouble of developing a fully polished mockup or prototype before asking for advice, and that effort will show. As a result, people will be more likely to water down any criticism.In short, there’s nothing like wireframing to garner honest and reliable user feedback. And what’s more, wireframes are extremely quick and cheap to create. Put like this, why wouldn’t you wireframe every product?
Wireframing a website vs an app
Although the basic principles of wireframing always remain the same, there are a few differences when it comes to wireframing a website vs an app. Let’s look at two of the most important points.
Screen space
Mobile apps come with limited on-screen real estate, and your wireframe will need to take this into account. For a start, this means setting up your art-board with the correct aspect ratio. Or, if you’re designing your initial wireframe by hand, choosing a size and orientation of paper that roughly corresponds to just a couple of screen columns(at most).
Tap target sizings are also important; make sure that your buttons are big enough to accommodate even the most generously endowed digits, while leaving ample space around the buttons. This way there will be no risk of users accidentally selecting the wrong option. Check that your wireframe design conforms to industry standards here too.Putting together a wireframe for a mobile app isn’t just about dimensions, but also about simplicity of design. The more streamlined and logical the architecture of your app, the easier it will be for users to navigate.
When wireframing websites and desktop apps, though, you have a little more freedom in the design process. And at the very least you get to extend your design across several columns. What’s more, as desktop users generally can’t tap or swipe, but will instead interact with your app or site via a trackpad or mouse, it’s less important that buttons adhere to strict minimum size limits.
Nonetheless, it’s hard to fault a simple and succinct site structure, so try to keep your wireframe minimal and to the point even when designing for desktop.
Interactive behavior
Minimalism usually works out being the best approach to app behavior when wireframing for mobile apps, too. Fussy interactions just aren’t practical here. Instead you’ll need to limit them to a simple tap or swipe. This doesn’t mean compromising on usability, though. Instead you should make the most of the limited screen space available through clever use of compact interactions such as card lists, modal windows, and bottom sheets.
Meanwhile, when designing desktop software you have a lot more options open to you. With more space to play with, you can design the product so that users can access extra information through a variety of more complicated interactions, keeping the design clean and spacious. For example, hovering might reveal tooltips, while a click may open up a tab menu, image gallery, or carousel.
Two wireframing examples
To get a better idea of what’s possible when wireframing, let’s now take a look at a couple of wireframing examples. One for mobile, one for desktop.
Mobile wireframe example: a travel guide app
In this example, we’re looking at a wireframe for a mobile-based travel guide app. Here the designer has made good use of both modal windows and bottom sheet interactions to produce an application that is simple to use on the move, but also highly functional. Bold buttons and icons help to keep navigation easy, with users always clear as to exactly where they are located within the app at any time. Additionally the designer has employed familiar design conventions so that users can intuitively find functions such as the search field and back button whenever they need them.
Desktop wireframe example: a fashion e-commerce store
In our second wireframe example the designer has also kept to a monochrome theme, but this time added subtle shading to help differentiate certain important sections of the design. This makes it much easier to understand what could otherwise have been a slightly confusing layout. In this case the purpose of our example website is to sell fashion apparel. And because the brand’s customers can’t physically try on the clothes, they will expect to find as much info about the products as possible – with a minimum of effort – if they are to be convinced to add an item to their shopping cart. For this reason, the designer has devised a simple system using icons that reveal information on hover, and included pop-up modal windows for viewing alternative photographs of the products.
Best practices when wireframing a website or app
What follows is a list of best practices to keep in mind when wireframing for apps and websites.
1. Know your target
Before you do anything, make sure you have a clear idea of who the end user of your app is. This will define almost every decision you make as you design your wireframe. Do your research.
2. Consider user expectations
Once you are confident that you know your user, consider exactly what it is that they want to achieve when they open your app or land on your site. I.e. what problems does your user have, and how will you solve these for them?
3. Choose your tools wisely
The best wireframing tool is the one that you’re most comfortable using. If that’s pen and paper, then start out with this – at least in the beginning. Or if you prefer working with a tool like Framer right from the word go, then do it this way. There’s no right or wrong way.
Framer interface
4. Iterate
Wireframes should be iterative. Maybe start with simple pen and paper sketches, get feedback, then build out from there; only moving up to a digital wireframe once you’re ready to share your progress with a wider audience.
5. Keep it simple and logical
Consider info hierarchy as you layout your wireframe. Follow conventions where possible; don’t confuse users by placing common items in unexpected places.
6. Form follows function
Remember, wireframes are about layout and usability, not aesthetics. A good wireframe is functional. But not necessarily beautiful. And it certainly doesn’t need to be visually perfect.
4 steps to create your first wireframe
If you’re interested in wireframing, Framer offers a free wireframing template that comes packed with tons of placeholder elements, multiple device sizes, and a smart preview that allows for fully responsive views. Sign up to Framer for free and open the wireframing template on your canvas. Then follow along with this step-by-step tutorial:
1. Set layout and structure
Start by determining the hierarchy of your content using blocks and grids. Don’t focus on the content itself, just how it’s presented. In terms of layout, the mobile-first approach works because it allows you to prioritize only the essentials and scale up as needed. In Framer, any screen you set up will responsively adapt across all devices, always retaining their layout and structure.
2. Determine information hierarchy
Next, think about the order of information that you would like to present to your visitors, from top to bottom, left to right. Designate where individual links, buttons and icons will go, as well as user flows. Keep your wireframe intentionally bare bones, but with enough visual hierarchy to generate constructive feedback.
3. Fine-tune flows and details
Once you’ve incorporated input from UX researchers, product writers and fellow designers, it could be helpful to add more details to your wireframe for context. Keep it low fidelity and focus on broad issues like layout and navigation. Use color and type intentionally, such as to determine font size or showcase a prominent CTA.
4. Present for feedback
For your final step, remember to get the green light from all project stakeholders. In Framer, open the Preview and share the link directly from your address bar.Framer’s Preview offersmultiple ways for you to configurehow your prototype will be displayed to viewers, from devices and hands, to themes and backgrounds. This ensures that you can control just how your wireframes are received, even when sharing remotely.
More resources
Bring your best ideas to life
Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.
