Susan Snipes / Posted 4.5.2011
A wireframe is worth a thousand spreadsheets: Wireframing 101
Everyone involved in creating a web site benefits from wireframes: designers, developers and clients. This guide introduces clients or people new to wireframing to their advantages.
What is a wireframe?
A wireframe is a diagram of the content, arrangement and hierarchy of elements of a web page or set of pages on a website. Wireframes are typically created in grayscale or with minimal color. They are kept free of design elements (no color palettes, no fancy borders or line styles, no shadows or other design treats.) A set of wireframes will demonstrate how users navigate a website and the flow users take to accomplish key tasks such as downloading a product, or creating a new account.
- Focus on Structure. Wireframes focus on website structure without the distraction of how the web page design looks. Because wireframes are created with little to no color, with very simple font choices, and a basic design style, it's much easier to focus on the contents and arrangement of the page.
- Visualize Ideas. Wireframes help stakeholders see the reality of their ideas. It's difficult to imagine an idea without seeing how it looks and acts on screen.
- Define Project Scope. Wireframes are essential for defining a project’s scope - and are often used as part of the project spec. They bring the web team and the client team in sync on what's being built.
- Clarify Hierarchy. Wireframes help the design team and client team focus on the hierarchy of items on a page. Should the “call to action” to sign up for the newsletter be more prominent? Is the balance of photo size to copy size correct?
- Identify Content Needs. Wireframes identify the content a website will need for completion. They’re a great resource for the content team to use when gathering content. It will help them know what sizes (3 paragraphs) and styles (list format, or subheadings) are needed.
- Refine Content. Wireframes also make it easy to see what content is missing or extraneous on a web page.
- Promote Discussion. Wireframes promote discussion of design and functional features. Because they’re sketched out and unfinished, it’s easier for clients to visualize changes, adjustments and improvements without being worried about drawing on top of a beautiful web design.
- Reduce Problems Early. Wireframes reveal design pitfalls that are hard to imagine before creating the actual layout and structure of a site. For example, initial design concepts might not reveal the challenge of requiring three clicks to get to an important piece of content. However, when paging through a wireframe, excessive clicking will become a much more apparent issue, and can quickly be addressed.
- Keep Process Enjoyable. Wireframes are also just more fun to work with than a spreadsheet of fields that will go into a database.
Who benefits from the wireframing process?
Everyone involved in creating a web site benefits from wireframes: designers, developers and clients. Designers use them to create and understand patterns and visual hierarchy when they’re creating their web design compositions. Developers use them to inform the specs of what they’re building. Clients use them as a tool to make sure their website goals are addressed. Wireframes are a great way to help everyone understand the project goals and to build a comprehensive project plan.
What should clients look for in wireframes?
- What content is missing? What content doesn't need to be on the page?
- Are the most important features clearly visible and easy to spot on the page? (Tip: On first glance of a page, what is the first thing you see?)
- Do you know what you can do on specific pages?
- Do you know where you are on the site? Can you figure out how to get to another page of your choice?
- Is it clear how to do your key actions (such as contact the company, or download a product manual)?
What should designers look for in wireframes?
- Do the wireframes capture the appropriate visual hierarchy of each page?
- What methods are used to identify where a user is on page/site?
- Is the navigation consistent from page to page?
- Are common features in appropriate locations (search box, contact button, etc.)?
- Do the wireframes have consistent visual patterns? (For example: from page to page, are lists of content similar in structure with heading, description and link?)
What should developers look for in wireframes?
- Should anything be clarified? Can you build the site from these diagrams?
- Can you suggest anything to make the structure simpler? (For example: Can the same structure of content fields be used for different content types?)
- Is there enough specificity? Are the number of items in lists or characters in an excerpt identified?
What projects need wireframes?
Wireframes are appropriate for any website bigger than a few pages and with more than one person involved in its creation. Wireframes are especially critical when multiple parties are involved in defining the scope and features of a website (such as a design team, development team and client team). When using a content management system that has custom fields and custom types of content (such as ExpressionEngine or Drupal), wireframes are often a key part of the project requirements process.
Will my team understand wireframes?
Yes! Wireframes are much easier for non-programmers to understand than a sitemap of pages or a spreadsheet of fields that will be in the database.
If you're worried a non-tech savvy group will have a hard time working with a wireframe, consider showing a smaller number of wireframes first, like only the home page and two or three key interior pages. In addition, when releasing the wireframes, be sure to walk the audience through the wireframes on common user paths to show how people will really be interacting with the site.
Any other reasons you like to wireframe? What kinds of projects do you create wireframes for? Join in the conversation. Happy Wireframing!
At our studio we use paper and Balsamiq Mockups for our wireframes. A lot of time I like to work out very rough concepts and make the layouts in paper, but after that, I move into Balsamiq. Other common wireframe tools are Axure, Illustrator, InDesign, Mockingbird, iPlotz.
Varying schools of thought exist on how flexible wireframes should be when moving to the design phase. Our project process always has some flexibility built in.
Once wireframes are approved, some things our studio remains flexible on are on the sizes of elements (e.g. how big the photo is, or how many characters are in a column.) We aren't flexible on what the elements have in them, and we won’t just let a new image or file slip in without discussion.
You might hear wireframes referred to as "low fidelity." That means they're less detailed than a design composition, or a prototype website where users can fully interact with a site in a browser. It’s a little like saying they’re “low tech.” We like to keep our wireframes nice and rough so they feel like sketches and encourage web teams and client teams to mark them up and change them.
Owner and principal of Q Digital Studio
Susan Snipes is the owner and principal of Q Digital Studio. Friends of Susan used to call her Susie Q, Miss Q, or just Q. The nicknames may not have stuck, but that infamous letter Q became the namesake for Susan's dream: her own business. Now Miss Q is making a name for herself as a community-minded web entrepreneur and ExpressionEngine expert.
As a college student at Case Western Reserve University, Susan became interested in web design, and self-taught her way into a number of freelance gigs. She left Cleveland with a degree in Art History and Architecture, but found her true calling in web design and development. Susan worked in New Orleans before migrating west to Denver, a place she happily calls home with her husband Corey and dog, Marla Muttlesworth.
Susan quickly achieved distinction in the Denver design community as a forward-thinking web developer whose work is both creative and consistent. Q Digital Studio is founded on principals of sustainability and integrity, values that are near and dear to Susan's heart.
When Susan's not planning design conferences or fearlessly leading the Q Digital Studio team, she enjoys cooking and watching movies.
Follow Susan on Twitter @SusanSnipes.