Wireframe 101

Reading Time: 2 mins

wireframe101_sq.jpg

Anything you do online (from checking out on an online store to navigating the website to using the search tool) started out as a simple sketch. This “sketch” is called a wireframe, aka the skeleton of a website.

Every software development project begins with creating a wireframe, and it’s a skill every UI designer should possess. Here is a breakdown of wireframes, including what they are, how to create one and which tools to use.

The basics

Wireframes are a visual representation of an interface using simple shapes and filler text. They’re used in the beginning stages of a project when much of the product’s structure is still undetermined. This documentation focuses on structure, content placement and functionality.  

The advantages are clear. Wireframes allow you to quickly and easily create and present ideas for a web development project. Making changes is simpler when you can adjust a wireframe rather than re-coding part of a website.

When you start creating a prototype, you should already know where each feature will be placed and how the end user will interact with the site (which is the primary purpose of a wireframe).

UI designers create and present wireframes to project managers, developers and clients.

Developers rely on this documentation to understand the solution’s functionality and technical requirements. It helps them see how the user interactions should work together.

Project managers ensure that all stakeholders understand the project plans and verify the solution will meet all their needs.

The wireframe is also presented to clients to help them understand what is being developed and to demonstrate how it will provide their desired solution.

Getting started with wireframes

Wireframe sketches

Wireframes help you visualize the interface structure in the early stages. Here are a few things to consider before creating a wireframe:

1. Align yourself with the project goals

Make sure you and your team understand the end goal and what features are important.

2. Determine the type of wireframe

A low-fidelity wireframe is a simple abstract with basic images and mock content as filler. Convert to high-fidelity wireframes before hand-off to the engineering team.

3. Consider the end user

The end user, their needs, motives and objectives should always be at the center of your wireframe designs.

How to create a wireframe

Wireframe

Once you understand the project goals and the end user’s needs, you’re ready to start creating a wireframe. Follow these five steps to create a wireframe from idea to presentation.

Step 1: Understand the purpose of the screen

Knowing the screen’s purpose drives the layout and what information should be displayed so the user can accomplish their goals.

Step 2: Set layout and structure

Don’t focus on content at this point, just how it’s presented. Many UI designers use "X" in place of images and filler text (Lorem Ipsum) in place of written content.

Step 3: Determine information hierarchy

Think about the order of information you want to present to users from top to bottom and left to right.

Step 4: Fine-tune flows and details

Add more details. Keep it low-fidelity and focus on broad issues such as layout and navigation.

Step 5: Present for feedback  

Present your wireframe to stakeholders. This allows you to receive feedback and make changes before you devote time to creating a prototype.

When creating wireframes, our UX/UI Designer Jocelyn Ma says, "Be observant, be creative and be confident."

Embody these traits as a designer from the brainstorming session to presenting a wireframe.

Be observant, be creative and be confident.
— Jocelyn Ma, UX/UI Designer

Be observant: The solution might not be obvious, even if it seems that way. Think of several different ideas.

Be creative: To get your mind flowing with ideas, divide a paper into different sections and sketch out several different wireframes.

Be confident: Once you have several wireframes, pick your best ones and create a polished wireframe using wireframe tools (our UX/UI designer uses Balsamiq). Present your ideas to project stakeholders with confidence.

Wireframe software

Knowing how to create a wireframe is a vital skill for UI designers, and having the right tools is a big piece of creating a quality document. Here’s a list of three popular wireframe tools to get you started.

Balsamiq

Our UX/UI designer uses Balsamiq to create wireframes. With sketch-style controls, you can focus on brainstorming rather than fine details, just the way a wireframe is meant to be. A clean wireframe option allows you to present your idea to managers or stakeholders.

MockFlow

MockFlow is a good option if you’re looking for free wireframe software. This tool offers a few different apps, including WireframePro for drawing user interface mockups and SiteMap for creating sitemaps and UI flows. 

Moqups

Moqups brands themselves as an all-in-one online design platform to use in each step of the design process from creating a wireframe to presenting a prototype.

These are just a few of the many tools available, so conduct your own research to find one that works best for your needs and budget.

Before turning to online tools, some designers like to sketch their ideas on paper first. This helps you focus on the placement and structure rather than getting caught up in the fine details too early.

Creating a wireframe is just the beginning. It’s a way to brainstorm solutions that meet the end user’s needs. Don’t worry about creating something polished; a wireframe is not a prototype. Focus on the structure, content placement and how the end user will navigate the site.

Beginning each software development project with this crucial step doesn’t take long, but it will save you countless hours as you enter the later stages of the project.


About the Author

Shaelynn Miller

Shaelynn Miller is Six Vertical’s Content Marketing Coordinator. She appreciates everything she’s learned throughout her career journey, starting from pursuing two internships to earning her bachelor’s degree to today as a member of the Six Vertical team. When she’s not writing and marketing, she’s playing with her dog, walking in the park or baking. 


More from our blog