How to Wireframe a Website (In 6 Steps)

• SHARED HOSTING
• TUTORIALS

June 27, 2019by Ellice

If you’re in the process of creating a website, either for yourself or a client, you’re likely concerned about User Experience (UX). After all, your site won’t be very successful if visitors can’t figure out how to navigate it and find the information they need.

Fortunately, there’s a handy strategy you can use to work on improving UX before your site ever hits the web. By using a wireframe, you can test drive user flows and page layouts, so you know exactly how they’ll work on your live website.

In this post, we’ll discuss what wireframes are and why they’re essential in web design. Then we’ll share six steps to help you create mockups for your own site. Let’s get started!

Get a Beautiful Website You’re Proud Of

Our designers will create a gorgeous website from scratch to perfectly match your brand.

Learn More

An Introduction to Wireframes (And Why They’re Useful)

A wireframe is like a UX blueprint for your website. It maps out certain features of your site, such as menus, buttons, and layouts, while stripping away the visual design. This gives you an idea of your site’s underlying functionality and navigation, without distracting elements such as its color scheme and content.

The purpose of a wireframe is to maximize a site’s UX potential before it’s even available to visitors. By creating mockups of your site’s UX on paper or with a digital wireframing tool, you can troubleshoot issues before they become a problem for your users. This can save you time and money down the line.

Whether you’re planning a small one-page site, a huge company portal, or something in between, wireframing can be a beneficial part of the planning process. Unless you’re reusing a tried-and-true template with a UX design you’re confident in, wireframing could provide significant benefits to your site.

After all, effective UX design focuses on getting your site’s key functionality just right. Without a design that supports a strong, positive UX, you run the risk of higher bounce rates and lower conversion rates. A wireframe will not only smooth out your creative process; it could also help promote your site’s overall success.

Related: How to Optimize Your Website with Responsive Design

How to Wireframe a Website (In 6 Steps)

Creating a wireframe can become a time-consuming process, especially if things don’t go well during the testing stage. However, taking the time to iron out UX issues ahead of time will give your site a much better chance of success down the line. The six steps listed below will help you get started.

Step 1: Gather the Tools for Wireframing

There are two main methods for creating wireframes — by hand or digitally. If you’re going with the former option, all you’ll need is a pen and paper to get started. Some designers begin with a ‘low-fidelity’ paper wireframe for brainstorming and then create a ‘high-fidelity’ digital version later.

As far as digital options go, there are a wide variety of wireframe tools available. If this is your first wireframe, or if you’re a single Do It Yourself (DIY) site owner and not a designer, you might try a free tool such as Wireframe.cc.

This simple wireframing tool keeps your drafts from becoming cluttered by limiting your color palette. You can create easy designs with its drag-and-drop interface, and annotate your drafts so that you don’t forget important information.

Another option is Wirify, a bookmarklet that you can add to your browser.

This tool’s interface turns existing web pages into wireframes. Rather than helping you draft UX design for a new site, it’s most helpful for website redesigns.

If you’re willing to spend a little money, on the other hand, you might look into Balsamiq mockups.

It boasts an easy-to-use, collaborative wireframing interface that’s great for teams and professionals who need real-time collaboration. However, it is limited to static wireframing. If you’d like a more comprehensive tool that can also be used for prototyping (which we’ll discuss later in this post), you might try out Prott.

Step 2: Do Your Target User and UX Design Research

Before you start drafting your wireframe, it’s helpful to do some research. For starters, you’ll want to know who your target audience is. This can help you determine which features need to be most prominent on your site so that visitors can find what they need.

User personas can be a helpful design tool for this part of the process. Try creating some for your potential user groups, so you have a reference you can return to throughout the wireframe design process. Personas can also help create a marketing strategy later on, so hang on to them.

It’s also wise to research some UX design trends and best practices. This can provide insight into elements such as menu layouts, the positioning of your logo and other significant branding elements, and content layouts. Users find it easier to navigate a website that follows convention when it comes to these features.

Step 3: Determine Your Optimal User Flows

A ‘user flow’ refers to the path a visitor takes to complete a specific goal on your website. So for example, if you have an e-commerce site, one user flow might be from a product page to the end of the checkout process.

Determining the key tasks users will need to complete on your site can help you create the most straightforward user flow for each potential goal. This will help maximize UX by making your website easy and enjoyable to use.

That said, it can be hard to get into the mind of a hypothetical user. Asking yourself these questions can help when you’re trying to work out your primary user flows:

• What problems do you intend to solve for users? What goals might they be hoping to achieve by coming to your site?
• How can you organize your content (such as buttons, links, and menus) to support those goals?
• What should users see first when they arrive on your site, which can help orient them and let them know they’re in the right place?
• What are the user expectations for a site like yours?
• What Call to Action (CTA) buttons will you provide, and where can you place them so users will notice?

Each of these answers will suggest something vital about the way you’ll need to design your pages.

Related: 7 Tips for Writing Winning Calls to Action for Your Website

Step 4: Start Drafting Your Wireframe

Now that you’ve gathered your tools and key information for your wireframe, you can start drafting. Keep in mind that the purpose of this task is not to create a complete design for your website. You’re focusing solely on UX, and how you can create a page that is easy to navigate and understand.

To that end, your wireframe should include features and formats that are important to how your users will interact with and make use of your website. These might include:

• A layout noting where you’ll place any images, branding elements, written content, and video players
• Your navigation menu, including a list of each item it will include and the order in which they will appear
• Any links and buttons present on the page
• Footer content, such as your contact information and social media links

Your answers to the questions in the previous step will likely help with this stage of the process as well. Remember to consider web design conventions, user expectations, and information hierarchies when placing these elements on your page.

There are also several elements that aren’t appropriate for a wireframe. Visual design features, such as your color scheme, typography, and any decorative displays, should be left off of your wireframe. In fact, it’s best to keep your wireframe in grayscale so that you can focus on usability.

You also don’t need to insert images, videos, written content, or your actual brand elements such as your logo and tagline. Placeholders for these features will get the job done. The idea is to avoid incorporating anything that could provide a distraction from user flows and navigation elements that are fundamental to UX.

Ready to Improve Your Site's Design?

Whether you need to wireframe a website, find stellar stock photos, or improve the user experience, we can help! Subscribe to our monthly digest so you never miss an article.

Sign Me Up

Step 5: Perform Usability Testing to Try Out Your Design

Once you have your initial wireframe completed, you’ll need to carry out some testing. This will help you determine if it has accomplished its goal of mapping out the simplest and most natural user flows and UX for your site. There are several ways to go about this.

If you’re working with a team, your first round of testing will probably take place internally. Each team member should spend some time with the wireframe to see if it makes sense. Have everyone work independently so as not to influence one another, and take notes on any issues they run into.

However, there are also tools that can provide more objective usability testing for your wireframe. These tests are meant to imitate actual users, which can be particularly helpful. Just because your team of web designers finds your wireframe logical doesn’t mean that the average site user will.

UsabilityHub is a platform that connects designs with real users to give you feedback on how the average visitor perceives your wireframe.

It offers a free plan so that even small sites and non-designers can put this tool to good use. For professional designers and teams, there are also plans that provide advanced features to help with more extensive and in-depth testing.

Related: Top 6 Basic Elements of Web Design

Step 6: Turn Your Wireframe Into a Prototype

After your wireframe has undergone testing, and you’ve determined the best possible UX design for your site, it’s time to turn it into a prototype. Unlike wireframes, which are static, prototypes include some basic functionality so that you can test out user flows more realistically.

As we mentioned in the first step, it can be helpful to choose a platform that can turn your wireframe into a prototype. Prott, for instance, enables you to create interactive, high-fidelity prototypes from your wireframe.

However, if you prefer a different wireframing tool, some platforms focus specifically on prototyping. InVision is a high-quality platform that makes it easy for teams to work together and communicate about mockups.

Whichever tool you choose, you’ll want to put your prototype through another round of user testing once it’s complete. After your prototype has passed, you can get to building your actual site with the confidence that your UX will be top-notch right from your launch date.

Making Wireframes to Improve UX

When it comes to designing a website, solid UX is crucial if you want to set your project up for success. Wireframing your website before you start building pages can help you get UX right before you’ve even launched your site.

After you’ve finished designing your site, you’ll need a hosting plan that can keep up with your stellar UX. At DreamHost, we provide high-quality shared hosting plans that won’t let your users down. Check them out today!