12 minute read
Want to make a Whiteboard of your own? Try Lucidspark. It's quick, easy, and completely free.
What is a wireframe?
Imagine you’ve been contracted to build a house. What’s your first step? You would need to create a floor plan, something to establish the layout before any actual construction begins. Better to redraft a blueprint now than remodel the entire house later.
But you’re not here to learn about construction—you’re building an app, or maybe a website. The process isn’t entirely different: You shouldn’t begin building an app or website without creating wireframe diagrams first.
Like a floorplan, a wireframe is a stripped-back drawing focused on structure and layout. Think of a wireframe as the “skeleton” of your website or app.
Wireframing is all about organization and structure, what goes where—save any detailed styling for later. A wireframe is made up of basic shapes which represent the visual elements of a page, such as search bars, header images, and other containers.
Wireframing may seem intimidating, but this activity isn’t limited to UX professionals. It doesn’t require specialized software or extensive experience. Many wireframes begin as sketches on a legal pad or even a napkin—whatever is on hand when inspiration strikes. To get the most from your wireframes, however, don’t leave them as sketches. As your initial idea develops, redraft your diagrams using a digital wireframing platform—this allows you to add detail and simulate the user experience. The most functional wireframes show page layout as well as user flow, information architecture, and intended user behaviors.
Wireframing has two main benefits: It gives all stakeholders a clear vision for your product’s design and also keeps your design user-focused.
Types of wireframes
Wireframes are typically divided into three categories: low fidelity, mid fidelity, and high fidelity. A wireframe’s fidelity refers to the amount of detail it contains. Low-fidelity wireframes are rough outlines focused primarily on layout, and high-fidelity wireframes include filler text and mimic some user functionality.
Let’s go over these distinctions in more detail and explore use cases for each level of wireframe.
Creating a low-fidelity wireframe is usually one of the first steps in the design process. Think of these diagrams as rough drafts, a way to quickly visualize the basic layout of your app or website. If you’re creating a low-fidelity wireframe, keep it simple: Include only essential text and basic shapes. Leave out images, filler text, and icons—each can be represented by simply a box or “X,” etc.
Remember: quick doesn’t mean sloppy. Who wants to hand a grubby napkin to their manager? Using a digital wireframing platform will keep your wireframes neat and professional, while also facilitating collaboration. There’s no photocopying or taking pictures of a whiteboard—just click “share.”
Once you’ve gotten your ideas down using low-fidelity wireframes, it’s time to refine them a bit. When creating a mid-fidelity wireframe, your focus should be on scale and proportion: How big is each element in relation to the window or screen as a whole? To the other elements? Styling is still kept to a minimum. Where appropriate, you can include generic icons and important text.
Low-fidelity wireframes help secure stakeholder buy-in, but their functionality ends there. A mid-fidelity wireframe develops those initial sketches into a cleaner, more detailed form. They are typically created early in the design process.
Some digital platforms for creating wireframes allow you to add user functionality to your diagrams. A mid-fidelity wireframe should give the viewer a sense of user flow. If a button alters the page layout or navigates to a new page, link it to a wireframe that depicts the new screen.
With high-fidelity wireframes, precision is the name of the game. Every element in the diagram should be in exactly the right place, down to the pixel. Where possible, you should include the images and text that will be in the final product. Menus and other clickable aspects of the page should be functional and include the same level of detail.
Because of the level of detail in a high-fidelity wireframe, these diagrams are usually created by UX designers. Whereas the other two wireframe types typically help non-designers communicate their ideas to designers, high-fidelity wireframes go the other direction: Designers use high-fidelity wireframes to allow other stakeholders to check off the final design.
Wireframes, especially high-fidelity wireframes, are often mistaken for mockup diagrams. If you’re unsure of the differences between these two diagram types, the following section goes over their respective features and uses.
Wireframes vs mockups
If wireframes are essentially floor plans for apps and websites, a mockup is a full-color 3D model built to scale. Just as you would never mistake a floorplan for a finished house, you would never mistake a wireframe, even a high-fidelity one, for the completed product. And that’s ok! Wireframes aren’t meant to be visually stunning—they’re primarily used to communicate structure and functionality.
Mockups, on the other hand, are meant to model the final product as accurately as possible. Fonts, colors, images—the styling is all included in a mockup, but with none of a wireframe’s functionality.
As discussed above, wireframes are used throughout the design process and are often created by individuals outside of the design team. Wireframes help stakeholders iron out any structural design flaws and agree on how the app or website will work. Most aesthetic elements are left out.
Mockups focus on how the product will look and are usually created by designers once the wireframing process is complete. Once a product’s mockups are approved by the necessary stakeholders, the project can move on to development.
What is wireframing in UX?
Anyone can create a wireframe. However, wireframes are most commonly used by UX designers—and this section will explain why.
As the job title suggests, UX designers (or user experience designers) determine the ways in which users engage with a product. For apps and websites, this means UX designers are responsible for interface design. Wireframes allow UX designers to simulate the user interface and perfect the design before any actual coding begins.
So what does this look like in practice? If a UX team is designing a web interface, there are several user behaviors to consider: How do users navigate through the page? Are there pop-ups? Drop-down menus? And if so, where are these features located?
By creating website wireframes, UX designers are able to draft both the website’s layout and its user flow. Objects within a wireframe can be made clickable, simulating the actual user experience. Designers can then share these wireframes with other teams for feedback. UX designers use app wireframes to similar effect.
When to begin wireframing
When it comes to wireframing, the earlier you start, the better. (Within reason, of course.) Different projects require different workflows, but as a general rule, you should draw up your first wireframe in either the initiation or planning phase of the project life cycle.
If you begin wireframing during the initiation phase, you should start with low-fidelity wireframes. The initiation phase is a time for experimentation: You’ve had an idea for a website or app, but don’t know exactly what it’ll look like. Low-fidelity wireframes are quick and easy to create, making them the perfect brainstorming tool. Get your ideas down, send them to other stakeholders for feedback, and then go back to the drawing board.
As your project moves into the planning phase, you should start to generate mid- and high-fidelity wireframes. The planning phase is when designs become concrete, and you’ll need robust wireframes before you can move on to the next phase—execution.
Your wireframes should develop in complexity and polish as the project moves forward through those first two phases. By the time you hand the designs over to the development team for coding (the execution phase), you should be finished with the wireframing process.
Elements of a wireframe
Wireframes look simple on the surface—aesthetically, there’s not a lot going on. In part, this is why they’re so effective. In web and app development, it’s tempting to rush into the world of fonts and colors before you’ve properly planned out the user experience. In wireframing, you set these distractions aside, focusing instead on three fundamental aspects of your product: information design, navigation design, and interface design.
As users interact with your app or website, they constantly take in information: What sort of website are they visiting? How can they interact with it? What is the “purpose” of the site? The process is automatic and largely subliminal. As the designer, you facilitate this interaction—you choose how to present the information on a page.
So what does this look like in practice?
As an example, if your website provides a messaging service, most users visiting the site will fall into one of two categories: returning users and new visitors. Returning users will likely want to sign in, and new visitors might want to create an account or simply learn more about your service. On your homepage, you need to account for each type of visitor and provide them with enough information to achieve their respective goals. Perhaps this information is communicated via buttons: log in, sign up, or more info. Information design is deciding which to include and where to place them.
We’ve all spent way too long looking for the “Settings” menu on one app or another. And we’ve all gotten the sense that a website is taking us in circles—that moment when you feel like the “Account Information” page is just a click away, only to end up back on the home page or worse, a 404 error page. The point is, as users we experience poor navigation design all the time.
As the name suggests, navigation design determines the ways in which users move through your app or website. From any given screen, a user can navigate to a number of other screens. They won’t know this, however, unless you tell them: drop-down menus, clickable links, and scrolling bars are all examples of visual elements which help the user navigate your product.
Interface design brings it all together: information, navigation, and, well, everything else in your wireframe. Both navigation design and information design have on screen components—buttons, menus, etc. Interface design refers to how those elements are incorporated into the user interface as a whole, which includes other elements, such as text boxes, header images, and sidebars.
How to make a wireframe
With understanding wireframing theory provided in this guide, it’s time to put that knowledge into practice. Here are some steps to begin wireframing:
1. Map out a plan
Whether you’re wireframing for an app or a website, there’s one thing you can be sure of: You’ll need to create more than one wireframe. Wireframing is all about user flow. How does the user move through your app? Is there a certain place you want them to end up?
Before you start on your diagrams, map out the possible routes a user can take, listing each new screen they might encounter. For each additional screen, you’ll need an additional wireframe.
This preliminary work may seem overkill, but it’s worth it. Jumping right into the wireframing process without a clear idea of user flow leads to confusing and messy diagrams.
2. Start adding basic shapes
After a thorough planning session or two, you should be ready to get drafting. Start by selecting a “frame” for your diagram. If you’re creating an app wireframe, select a shape similar to the screen of a mobile device. For a website wireframe, choose a shape that resembles a browser window. Most digital wireframing platforms will have both basic frames available in their shape library.
Next, add the largest elements of the wireframe. These should be basic shapes and containers, which represent items like a header bar, side column, text box, etc. There’s no need to include text or images at this point—just establish the general layout.
Repeat this process for each wireframe you need to create.
3. Add buttons and link wireframes
Once you’ve established the layout of your wireframes, it’s time to add some functionality. On any given screen in your product, there are likely several buttons that will direct the user to a new screen. You may have added these as shapes in the last step, but if not, select a basic shape to represent each button and add them now. You can also add any text that will appear on the button (“home,” for example).
If your wireframing platform includes linking capabilities, link each button to the wireframe it should direct the user to.
Tip: Select one font to use for your wireframe. Apply bold text and italics where applicable, but save any other text styling for mockups and prototypes.
4. Gather feedback and edit
You’ve poured hours into your wireframes. The layout seems just right, and you’ve linked them together to simulate user flow. Now it’s time to share them with other stakeholders. There are likely aspects of your wireframes that can be improved—and that’s why it’s important to get them in front of fresh eyes before you add additional detail.
Perhaps the location of a button feels slightly off. Or maybe the menu bar is too big and dominates the page. Whatever your colleagues’ feedback is, listen to them and consider their ideas—this is a collaborative process.
Apply any suggested changes that will improve your wireframes. Rinse and repeat until your designs have been approved by all the necessary stakeholders.
5. Add detail
At this point, your diagrams are likely mid-fidelity wireframes. With the basic design approved, you can begin to refine the details. Add images and text. Use color to differentiate various elements on the page, but stick to grayscale. Make sure everything is the proper size down to the pixel.
6. Share your wireframes
You should now have a set of functional high-fidelity wireframes. Share them with project stakeholders and relevant teams.