Metropolis Creative on Twitter Metropolis Creative on Facebook Menu

What is a wireframe?

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.

 

About the Author: Michael Flint

Michael founded Metropolis Creative in 1999. He is currently an instructor at Northeastern University and has also taught at Bentley College. Speaking engagements include The Boston Chamber of Commerce, the Mass Health Data Consortium, and The Enterprise Center. Michael holds a BFA in Graphic Design from Rochester Institute of Technology and has won numerous design awards. Michael actively supports the entrepreneurial and startup community by participating as a mentor with MITX-Up and is e member of OpenHub. He also runs the annual Extreme Website Makeover event which supports local startups and non-profit organizations. When not at work, Michael enjoys painting, brewing beer, and playing hockey.

Recent Blog Posts

Expand

Create a Custom Pumpkin Carving Template

Expand

Artists Are Awesome

SnapSuites Customer Spotlight
Expand

Client Spotlight: SnapSuites

Contact Us

  • This field is for validation purposes and should be left unchanged.