Wireframes are the simple layouts we make just after determining the sitemap, but prior to creating the full color web page designs. They’re kind of like a sketch, but with more thought and purpose put into them. Here’s how they fit into our website design process.
Inventory and Hierarchy
The wireframe serves two purposes. 1) It is a visual inventory of what belongs on that page. 2) It allows you to arrange the content in a hierarchy from most important to least. How do you know what belongs on the page, and what order it belongs in?
Brand / Audience / Conversion
Before starting on the wireframes, we hold a Brand Discovery session to help us, and the client, understand what their brand really is. If you think of brand in terms of audience perception, we need to understand how the audience perceives our client’s product or service before we know what to say to them. We discuss who the most likely audiences are, and what solutions they are looking for. And finally we define what the conversions are (buy, lead capture, mailing list signup, etc.)
Messaging & Hierarchy
Once we know who we’re talking to and what their needs are, we know what to say to them. Messaging includes much more than what’s in the headlines. Colors and photos set the mood. Diagrams and icons help clarify the main points. We can’t start looking for photos until we know all of this.
What if We’re Targeting Two Different Audiences?
Once you define the audiences, you need to prioritize them. You have to take into consideration current conversion rates as well as potential conversions for new audiences. Ideally on the home page, you can find some common messaging (usually brand-related) that convinces most of your audiences that you have a quality offering and they’re in the right place. Next, you want the customer to choose what they’re looking for so you can start talking specifically to them about their specific needs. That’s where user funnels come in.
User Funnels
A user funnel is a block of content that grabs the user’s attention. If your website is a pizza shop, most users are either looking to place an order, view the menu, or get directions to your shop. Through the Brand Discovery process, you can determine rough percentages for those needs. The user funnels then become; an area to place an order, a link to the menu, and clear contact info – perhaps with a link for directions. Showing anything else on the home page will delay them getting what they want.
The Rest of the Wireframe
Most wireframes include a top navigation area, a “hero area” where you make that initial brand statement, and have branded imagery, user funnels, and a footer. Latest announcements, news, and blog can all appear on your home page, but not at the expense of quickly directing users to the content they need.
Level of Detail Required
This varies for different clients. Wireframes should be in black and white, with little to no icons and logos. No photos or illustrations should be on them as they’re distracting. That said, the more details you include in the wireframe, the fewer questions everyone has going into the design phase. Details such as where buttons link to, interactive or technical thoughts, and other content thoughts definitely help. But too much detail can stifle the creative process in the next phase. You really want time to explore different user interface designs, navigations, fonts, and overall themes. And those aren’t the point of the wireframe. Remember: Inventory & Hierarchy.
Conclusion
A solid set of wireframes is the first visual solution the customer has for their website. Keep it clean and simple with clear explanations of user funnels and conversions. When done right, it will clarify how the website captures the attention of the target audiences, and show a clear path to conversion. This will save the designer (and the client) time in the long run because it puts everyone on a clear and confident path towards the design phase.