Michael Epps Utley {kind=image/jpg}
In our previous article, we explained the value of developing wireframes before building a business website. This guide explains the steps you must take to create solid wireframes. Let’s get started.
1. Determine the Purpose of the Website
Before creating a wireframe, you must understand why you’re building a website and the goals you want to achieve through it. It’s given that you want to bring in as much quality traffic as possible. You must go beyond this and figure out what you want your visitors to see, experience, and do while navigating your site. Consider the following:
Should they end their visit by making a purchase?
Do you want them to download an app?
Perhaps you’d like them to make an appointment or offer contact information.
Whatever your goals are, ensure your team is aligned around them to smooth the site development process.
2. Understand the Visitor Journey
Wireframes help you come up with — and evaluate — user flows. This allows everyone on your website development team to understand how visitors should interact with each page and navigate through the site.
List every possible way a visitor could arrive on the homepage or landing page. Use this list of entry points to create different journeys through the site.
Outline user flows in text format before moving on to a wireframe sketch. It’s faster and easier to change written user journeys than mess with mocked-up wireframes.
3. Determine Your Wireframe Sizes
Wireframes will vary in size based on the screens you’re creating them for. Smartphones, tablets, and desktop screens come in different sizes. On top of this, the window on a desktop can be scaled to a range of sizes.
Use pixels rather than inches or points for the most accurate wireframe measurements. Here are standard sizes for different screens:
Mobile: 1080px wide x 1920px long
Eight-inch tablet: 800px wide x 1280px long
Ten-inch tablet: 1200px wide x 1920px long
Desktop screen: 768px wide x 1366px long
It’s smart to start wireframing with the smartphone size since most visitors today will arrive at your site via their phones — also, Google rates the smartphone experience of a site higher than others when assigning rankings.
4. Create Your Wireframes
Now, it’s time to document your user experience and flow in wireframes.
If you prefer using physical pen and paper to develop your diagrams, use dotted or grid paper to keep things aligned.
If you prefer digital design, choose a tool that makes it easy to consistently size elements, snap and lock them in place, and move them around. Adobe Illustrator is one example.
5. Determine Conversion Points
Once you’ve created your wireframes, you must decide how visitors should move through each part of the online experience. Even though you’ve outlined the steps the user should take in writing, it doesn’t mean they’re intuitive or easy to navigate. Determine the buttons, links, graphics, and other page elements that will guide the visitor through the site until they reach the goals you outlined in step one of this article.
6. Remove Unnecessary Steps and Elements
Wireframing takes time. It’s an iterative process. It typically takes rounds of sketching wireframes until you come up with production-ready ones. Along the way, you may identify redundant web pages and elements that can be removed, resulting in fewer visitor clicks and less confusion.
Simplify your wireframes wherever you find opportunities to do so. Taking the extra time could result in a significantly better user experience and business results.
7. Get Feedback on Your Wireframes
Ask prospective website visitors their opinions of your wireframes. Get their thoughts on the design and flow. Getting input early on prevents time-consuming and costly issues from being uncovered later in the web development process.
In the end, the dual value of wireframing is that it can help avoid mistakes that could jeopardize the web development project while cultivating the optimal website visitor experience to help you achieve your business goals.
