Building a new website? Planning to launch another app? If you are flooded with creative ideas at the moment and are eager to start with the design process, hold on. Going ahead without a structure to base your thoughts on is a disaster waiting to happen.
Get to wireframing your idea. Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your website. They are devoid of color, font choices, logos or any real design items that take away from purely focusing on a site’s structure. We often say that they are much like a blueprint for a home, where you can easily see the structural placement of your plumbing, electrical and other structural elements without any interior design treatments.
Not sure how to wireframe your next site or application? Here’s a concise guide to help you.
Get some wireframing inspiration
Start by looking at awesome wireframes (app/web) in the same category as your product. Look at wireframes that are easy to test, understand, improve, distribute and discuss. A good wireframe must be able to close information gaps between a designer and a developer. It should spark ideas and uncover the fundamental solution at the right time. Simple online apps like Wirify can let you create wireframes of your favorite websites with a single click.
Let’s say; you are planning to build a hotel booking app. Evaluate the following wireframes to start with:
If you are creating a social networking site, this beautiful wireframe is something you must look at:
Own a creative or marketing agency? This wireframe for WebSoco tells you how to design your site the right way.
Looking for some more inspiration? Smashing Magazine Resources Guide, DesignsCrazed, Mockup Builder and I ♥ wireframes are some awesome resources.
Plan Your Content
Wireframing involves 90 percent of planning your content. Some designers find working with wireframing exercises to be a good starting point.
Pro Tip: Designer Brad Frost explains some fantastic content-related exercises which helped him with ideas to plan content.
Let’s start with defining the user personas. Who is your end user? What is the problem that you can solve for him/her? Why is he visiting your site? Once you have the personas ready, you can go ahead and think about the content and other elements that work on your web page.
- Avoid using dummy text. Create and include real content for better clarity.
- Deliberate on what page elements or features need to be put together. Do not use color, graphics, or typography in the wireframe.
- Decide on the hierarchy of the content. What will be the position, size and labeling of each feature? But this doesn’t mean the wireframe needs to detail the actual design of the web page. A wireframe should show how the site will function and not how it will look.
- Your wireframe should describe how the features will interact with the users and in conjunction with each other.
Jot down the features of your site or its intended application at this stage. Make a comprehensive feature list by asking these questions with your team and stakeholders. Set expectations clear at this point. Apart from general elements like headers, footers, sidebars and content areas, focus on features such as:
- Can you content benefit from dynamic widgets?
- Will you be embedding video links?
- How will they be displayed?
- Will you have a news feed?
And so on. Inform your client about the wireframing process and make sure everyone is on the same page.
Choose the Right Type of Wireframe
Different designers like to design their wireframes differently. It’s best to begin with a low fidelity wireframe and then move higher up depending on how comfortable and detailed you and the developer are at each iteration.
Though, there are three types of wireframes – Lo-fidelity, mid-fidelity, and high-fidelity. Lo-fidelity wireframes are hand-drawn sketches which usually come to life either on paper or computer software like Balsamiq. The aim of these wireframes is to list down probable ideas and layout suggestions, and decide what works and what doesn’t. Most designers find this as a good starting point for conversations. Below is an example of a lo-fidelity wireframe. It’s devoid of any text, images or colors. This is done to avoid distraction and bring out as many iterations as fast as possible.
Mid-fidelity wireframes, however, are more detailed and start to define the user interface. You can see elements of gray in these wireframes (example below). Designer tidies the lo-fidelity wireframe at this stage using tools like
- Axure, – a right choice if you’re looking to create quickly an HTML wireframe prototype
- Omnigraffle, – boasts of a great iPad app for those who like to switch platforms, and
- Illustrator, – if you’re a fan of the Adobe Creative Cloud
You will now see that the result is beginning to resemble a website or an app more closely. However, the mid-fidelity wireframe is still loose enough to accommodate feedback.
Hi-fidelity wireframes appear very similar to a finished website or an app. There’s more use of color and the wireframe now includes original images and text. At this stage, the wireframe is at 100 percent scale, and can be pixel-perfect too.
Collaborate with All Stakeholders
Never finalize a wireframe before accepting ample amount of feedback. When you share ideas, their greatness doubles. So set aside any apprehensions and be great together.
Defining the problem first will tell you what process and tools to best communicate with stakeholders involve others in making design decisions. Wireframe as an instrument will go a long way in this process. People can be unfriendly, and processes may be unkind, but wireframes are agnostic.
Last but not the least, don’t be too attached to your wires. With so much ideation going on, you must be ready to make constant changes.
Annotate Your Wireframes
Annotate your wires to help your audience understand your design rationale.
Keep the annotations short and easy to read. Mention the user benefits of the design elements. Number each annotation, place them in an orderly manner across the page from left to right and explain each enumerated point in a column on the right of the wireframe. Here’s a depiction on how to get annotations right:
Get Customer Feedback – Early and Often
Use the rough sketches you have drawn to convey the basic idea and get detailed feedback from the final approving authority. Ask them the right questions and determine the kind of feedback you need – Answers, Approval or Acknowledgment. Do this as often as possible, and as early as possible. Don’t worry about the fidelity of your visual frames. Basic pointers to focus on during a client feedback session:
- What other elements do you want to add to the wireframe?
- Would you want to change the content flow?
- How did you like the focus on various elements?
In case you are left wanting for more detail to come up with a better draft, encourage the participants to tell their stories and explain their process to you.
Feedback sessions are also a good opportunity to understand your wireframes’ efficiency from the user’s point of view. Never guide the users while they interact with the wireframe. Observe how your design responds to them and optimizes accordingly.
Incorporate the Feedback and Address Issues
It’s now time to iterate and refine your wireframe. Make sure you address all the key issues, mainly clearing out remaining distraction or noise in your drawing. Noise could be present in the form of flashy images, too many links or a lot of content. Determine if the wire generates user confidence. Ensure that the users will be able to navigate through it without facing obstacles. Use friction-reducing elements like shorter sentences and bulleted points, which will ultimately help in increasing conversions. This Kissmetrics blog explains ten simple ways of reducing friction and increasing conversion.
Here’s an example of a completed wireframe of the popular website, LifehackerPando.
Notice how websites customized their layouts depending on the type of content they create. While Lifehacker provides its audience with innumerable tips on productivity with an intensity of a news site, Pando takes a more relaxed, bloggish approach towards its content. And this is very apparent in their wireframes too.
Once you are satisfied with how elements are laid out on the wireframe, you can start adding other content pieces to see if the information hierarchy and structure are making sense. Experiment with different font sizes and typography. As you start filling more detail, you may feel that the original layout is not working for you. Go ahead, try something different. That’s the whole point of having wireframes.
Exploit the Capabilities of a Responsive Design
Keep one desktop-size and phone screen-size template each ready for every client demo. Don’t just talk about jargons like breakpoints and multi-device functionality. These terms can look pretty meaningless unless your wireframe can exhibit their use cases. In case it helps, sketch the wireframe on a piece of paper and then demonstrate how the elements move while changing devices.
Here’s a useful tip by designer Sam Hardacre on responsive sketching: ““The best thing about A4 sheets of paper for sensitive sketching, aside from being cheap, is the fact that a single sheet can fold multiple times and give us the basic screen sizes we may be designing for. The plain A4 sheet can be used to sketch a desktop layout, fold it in half, and you have two tablet sized canvases on which to sketch out portrait and landscape layouts, fold three more times and you have a basic smartphone canvas to sketch on”.
Adobe’s James Miller explains a responsive wireframe like this:
To give your elements some visual strength, make full spectrum use of grayscale. It will facilitate the visual design process immensely. Now, go ahead, add some more details, and churn out a high-definition wireframe. This would mean adding as much information as possible without going too granular into the visuals. You may add your original copy into the wire and determine the ideal font size. You may also add colors at this stage. This will ensure that by the time you go to the coding phase, you have a polished frame on the table.