The purpose of a wireframe is to communicate a page or interface’s structure, story and information hierarchy. It’s important to remember that a wireframe is a design, a blueprint for the eventual artwork, but doesn’t need to look pretty. However a good wireframe should follow basic design principles.
Getting Started
Number, title and label your templates
For clarity and organisation it’s really important to number, title and label your templates. Template numbers can be used in other assets such as the sitemap. Titles such as ‘Home’, ‘About Us’ or ‘Product Page’ may seem obvious to you but you should leave no doubt. Attaching an ID to each page makes a wireframe easy to reference. E.g. ‘2.1 About Us (Template 3)’.
Use a Grid System
Grid systems are a fundamental part of any design practice. Using one will keep your column widths consistent and help you easily keep elements aligned. Gridulator is a really useful tool for quickly working out column and gutter sizes.
Sketchy vs straight lines
The sharpness of your lines should reflect how sure you are about your design. Use rough sketchy lines for early unpolished ideas and use straight sharp lines when you have near final text, images and are close to sign off.
State your intentions
It’s important to remember that a wireframe is all about communicating ideas, so make sure that they are clear and require as little explanation as possible.
Consider colour
It’s important that clients understand the difference between a wireframe and a design proposal, so it’s wise to avoid using colour. This will help the client focus on the important things and not feedback on your colour choices.
Content
Content is an important part of the overall website story and having real copy helps dictate a page’s layout, so use it whenever you can. Remember the idea is to state your intentions, so if you don’t have real content then just make something up if you can, instead of using lorem ipsum.
Using images that reflect the kind of visuals you eventually want will help your designer and also help communicate your intent to the client. If you can’t use an image, draw a box and describe the photo inside it.
Page Hierarchy
Structure should be well arranged
Wireframes should use clear styles. H1, H2, H3 headings, paragraphs, bullet lists, underlined links and buttons. Make sure elements are consistent across all your wireframes and clearly defined. For example make sure you can clearly differentiate between a top level heading (H1) and a subheading (H2) when picking font sizes, remembering that the visual designer will decide the final sizes.
Focus on what’s most important
Cascade the content in order of importance. Keep in mind the order in which it will be read and make sure it makes sense and tells a story. A clear hierarchy will also reduce the appearance of complexity.
Consistent vertical/horizontal flow
Western users read from left to right, top to bottom, so make sure the arrangement of your page content flows in a readable fashion. Aside content can flow in a vertical column, but try and avoid magazine style vertical column layouts on the web as they force a user to scroll up and down as they read, which results in a poor experience. Scrolling is the key bit there.
Grouping
Proximity implies relation, so make sure that items are well grouped together. Try to avoid doing this by putting things into boxes, use a hierarchy of elements combined with good spacing.
Alignment
Alignment is key in terms of organised, structured presentation, but also contributes towards a strong hierarchy.
Consistency
Consistency is one of the most important aspects of a wireframe. It is key in terms of effectively communicating ideas to a client, so ensure that spacing, font sizes and column widths are consistent across all your wires.
Density and whitespace
It’s important to let content breathe, so don’t be scared of being liberal in your use of whitespace. Failing to do so may result in your design appearing cluttered. Also when grouping elements together make sure that each one has it’s own personal space.
Concepts
Provide a natural next step
Part of telling a story is to lead the user through each page on their journey through a site, so it’s important to provide a natural next step through a user journey and always avoid dead ends.
Designed elements should look like how they behave
Be sure that your wireframe elements are true unambiguous representations. For example, a button should look like a clickable button, a link should be underlined, a video container should have a play button.
Clear language and trigger words
Users respond to familiar language, so be sure to provide clear instructions, feedback in error messages and trigger words in navigation. For example use ‘about us’ instead of ‘who we are’, ‘solutions’ instead of ‘what we do’. Avoid questions, for example ‘How do I insure my home?’ could be ‘Home insurance products’.
Text
Be really careful with text in a wireframe. The optimum length of a line of 65 characters. It’s also really important to watch font sizes, make sure text is readable and well spaced out with a good line height. In most cases paragraph text should be left aligned so that each line starts in the same place, making it easier to read.
Summary
The ultimate aim of a wireframe is to communicate your ideas of hierarchy, placement of content and flow between pages to your client and or design & build teams. Every project is different, and so use these guidelines but scale the fidelity as you see fit!