Making Useful Wireframes For Your Website
Table of contents
What are wireframes?
Wireframes are blueprints, outlines or sketches of the important details of your website pages. They are used in the planning phase of a project to bring ideas together and to move the project forward with everyone in agreement.
There are many different types of wireframes and different ways to use them.
If you’re a client and you’re working with a web design agency, this article will help understand the whether you need wireframes created and how to use them. There are times when you may wish to draw a quick wireframe sketch to convey your ideas.
If you’re a designer, planner, SEO specialist, should understand how to wireframe in conjunction with other techniques and offer the right level of detail to your client in your wireframes so that they focus on what’s important.
A little context
A lot of the wisdom out there relates to mobile apps and bigger websites. Starfish makes all types of websites simple ones and complex ones.
We don’t make mobile apps or complex website applications. The information in this article is related to the work we do.
The purpose of wireframes
Visual planning
The overview you see in a wireframe will be help you to mentally plan the work ahead and pick out problems that the future website may have, allowing you to solve any tech, design or business communication problems early on in the planning phase.
Visual communication
Wireframes allow easy communication of ideas between all parties involved in the website project. If wireframes aren’t telling you anything, if they seem to lack information then wireframes aren’t done in the right way.
Content planning
Wireframes help you see how much content needs to be created and if you put content into the wireframe allows you to work on content in the early stages of making a website.
Consistency
Websites need to have a visual language, a balance and harmony between pages. They should not have different widths or layout styles.
You can easily create a visual layout language with wireframes and then use it to make sure you have the right content.
You can decide on grid patterns or layout patterns in general. Themes that you can carry through to each of the pages.
You can iterate through all the pages quickly to get an overview.
Problem solving
The purpose of a business website tends to be information communication and this would be the problem at hand – how to solve the problem of understanding what the business does.
Wireframes address this problem first, leaving other problems such as brand identity to other design activities.
Wireframing saves time
An inexperienced person may see design planning as unnecessary. “Let’s just go straight to the design phase because the designers know what they are doing” – they may say.
And sometimes, they may be right. But often haste makes waste and you find you’re faced with the same design problem either in the design phase or worse – in the development phase.
Create documentation for the next phases
A wireframe can be used to show the designer what they need to design or the developer what needs to be developed.
Along with the wireframe, there will be other documents such as the scope of work and the creative brief.
Map out user journeys
Wireframing can map out what people are meant to do on your website. This is needed for more complex websites where there is a certain set of steps that the user should take.
10 wireframing tips
- Iterate quickly in the early stages using very rough throw-away drawings.
- Increase the fidelity of your wireframes and things become more certain and you want to bring in other dimensions of planning into the project.
- Don’t use Lorem Ipsum. Use fake text if your don’t have real text.
- Use real photos or things that look like photos
- Make the wireframes rough and ugly. This isn’t a design competition. Making them pretty will mean that people start thinking about the bits that are not pretty, rather than the content flow.
- Know what details you need to convey in your particular wireframe and what things you are not conveying. This will help you make easy to understand wireframes.
- Get a good idea of the problems you are solving, before you begin, that way your wireframes will have the best level of detail to resolve that problem.
- Use wireframes in conjunction with other activities.
- Wireframe and prototype
- Wireframe and write content
- Wireframe and do a competitive analysis.
- Anyone who can plan can wireframe. It’s not the job of a designer to plan. You don’t need to be a UX expert either.
- Share your wireframes often with different people on the team.
5 things to avoid when wireframing
- Not knowing the purpose of your wireframe
- Not annotating
- Designing with a wireframe tool
- Skipping wireframe stages
Combining wireframes with other techniques
Wireframes are just one of the tools you use for planning. You need to do other things along with Wireframing, otherwise your wireframes won’t mean a lot.
Templates and wireframes
Wireframes can be used with a template-driven design process. Just because your website is going to use premade layout, it doesn’t mean you can’t plan visually.
In fact, templates and wireframes go hand in hand to create quick to make, visually consistent websites.
Custom Websites and wireframes
If the website is going to be custom designed, it doesn’t mean it should be custom designed in a wireframe. It may be better to go for a full-on design tool for this.
Content driven design
A content driven website is one in which the content is planned out first. Wireframes fit perfectly into this scenario because wireframes allow you to concentrate on the content in context of the overall layout without the visuals distracting everyone from what is important.
This works just as well for SEO optimized content as it does for content writing.
Visual driven design
Some projects are more about the photos and colors. Text is secondary importance. Wireframes aren’t very helpful for these types of projects but they can still be used as a secondary planning tool.
Responsive web design
Responsive web design is the norm. How do you design for them in wireframes?
Do you need to make wireframes for all screen sizes?
If your design is custom and you’re not planning on using a template, then creating wireframes in both mobile and desktop versions will help the designer and developer understand the practicality of the design.
It may take more design budget to do this but you’ll save a lot in development time since the developer is not left guessing as to how to make the website responsive.
Business websites
If you’re making a website for your business, a wireframe will allow you to have early discussions about content and the function of the website with business partners without everyone worrying about the aesthetics.
Design Conceptualization
Design conceptualizing, design concepts or designing terms used to describe the process of making full-color, accurate representations of a website.
Wireframes can become design concepts and design concepts can be used as a reference for creating wireframes.
Design concepts are there to solve different problems. The problem of visual aesthetics and wireframes are there to solve the problem of information communication.
6 types of wireframes and their usage
The paper hand sketch (the 1 minute wireframe)
You need to quickly convey what you want done. Get pen to paper, sketch, photograph. Attach to email. It’s easier than writing.
The paper drawing (The 5-minute wireframe)
You want to make clear your mind, bring a few ideas together on where things could go on the page. See if you need three boxes for the services or four. Do you have enough testimonials?
Use this one to go through several layout concepts quickly and efficiently.
You could call it layout brainstorming.
Low Fidelity Wireframes
This is what you call any wireframe that doesn’t pay much attention to accuracy of sizes and spacing of objects.
Low level wireframes are not the earliest iterations, they are more like the settled layout plan that can be used as the basis of content planning.
They help developers understand the basic mechanics of the website and the client and the design team see eye to eye.
Medium Fidelity Wireframes
Increase the fidelity when your low-level wireframes seem like they will work and the most important problems are solved.
Adding further details and features will bring up more questions.
You may need to be know the amount of content needed and whether titles will fit, rather than just the type of content.
You may need to double check whether layouts are realistically going to work, given the photos the client provides.
You can extra details such as content hierarchy and the right fonts and font sizes, real icons but not use realistic buttons.
Wireframes with color photos
It’s usually not considered important to have photos on a wireframe. This may be true for mobile applications and software applications but website, which rely heavily on photos, placing a photo, even a grainy black and white photo can help everyone picture the final effect.
Wireframes with real text
When you’re making a website, as opposed to an app, the text makes the difference between understanding the layout and seeing random shaped on a screen.
Most website are nothing more than text and images, so if all you have in your wireframe are squares and Lorem Ipsum, how is that going to help anyone?
High Fidelity wireframes
At a higher level of fidelity, you’re one level down from a full-color accurate representation of content, images, layout, spacing, font sizes, styles.
You’re one level down from a mockup. So what’s the difference.
With high fidelity wireframes, you’re still conveying information, some of it being emotional but you’re not trying to impress the viewer – you’re not saying: “this is what the website will look like”.
What is accurate, however, is the amount of content, photos. Spacing and layout are given more consideration but aren’t pixel perfect. Nothing needs to be pixel perfect.
Color ideas may be brought in, even if they are muted, but the design can still be predominantly black and white and inaccurate in terms of size and spacing.
Collaborative Wireframing
With modern tools such as Figma, it’s much easier to work as a team.
Planning is the best time to work together before everyone goes away to concentrate on their job.
Planning remotely is even more efficient than planning around a table because people can concentrate on their job and contribute when they have the time.
This means wireframes can be the input of several people rather than just one.
People who may wish to contribute to the wireframe are:
The client
The client is the one providing the business context and a lot of the content. They can check to see whether the wireframe makes sense to them.
The writer
The writer is the one writing, they can get a feel for the topics they will need to research.
The front end developer
The developer is the one that needs to make sure the website will work on all devices. Looking at the layouts early before they evolves too far will allow the developer to advise on improvements to make the job easier.
The back end developer
The backend developer can check the wireframe and see if anything need prototyping or if anyone is making unrealistic functional requests.
The account manager
The account manager needs to be clear on what’s the goal and whether it’s being met. They need to be able to understand
The project manager
They project manager needs to see if the scope of work is being followed or is there scope creep. A quick look at the wireframe and the written scope of work will help ensure that everything is in order.
The SEO expert
Too often, SEO is an afterthought. However, with online Wireframing, you can bring in the SEO specialist or any special like a doctor, and let them see the plan through their lens.
The business strategist
This is the person that makes sure that the website or web application is meeting the overall goal of the business. Sometimes, the business person hides in the background until the product is made – only to discover it’s not meeting the strategic goals of the company.
The designer
In smaller agencies, the designer is quite often in charge of making the wireframes. Though they are not really experts in Wireframing but experts in visual aesthetics. When this is the case, the wireframes end up being pretty but not strategic or user centric.
