If you’ve never used wireframes, you might think they sound like something from the borders of geek-land, but they’re an amazing tool everyone should know about.
Wireframes make website creation ( and marketing collateral like email templates) so much easier:
Used well, wireframes can:
- show what content your site requires.
- enable decisions to be made about content structure and required content length.
- link the content together to demonstrate effective user journeys
- create outlines (frames!) for how content blocks will look, in the same way an architect’s drawing show the structure of a building.
- indicate where calls-to-action (CTAs) need to be.
- experiment with sliders, carousels and pop-ups without doing any site build.
- develop functioning headers and footers.
- understand where downloads, archiving and outside linking will be needed.
Not only that, but you can make all these crucial decisions before the expensive parts of creating a site, designing it and building it, even begin, saving significant time and money in design and build.
Where do we start?:
You need to understand who you’re trying to influence and what you want them to do. These objectives are called site goals and your site needs to be structured to help your users reach these goals.
If the communication you use to drive traffic to your site is working well, people will be coming to the site for the right purpose, so it’s the site’s job to deliver on the promise you have made.
Planning how to get your users from their landing page to the site goal involves mapping their ‘user journey’. Check here for advice on how to create effective user journeys.
Wireframing in practice:
If you’ve never worked with wireframes before, do some reading up on current user experience (UX) principles. Just search ‘user experience’ and you’ll see lots of good resources.
If you already have a good relationship with either a designer or a site builder, by all means get them involved in the process early on. My experience is that wireframing dramatically improves the briefing process and helps everyone understand what the site is there to achieve.
You should certainly allow your designer and builder to have input into the wireframes, but do not allow the user journeys to become disrupted or over-complicated.
You could actually just draw wireframes on paper but there are many wire-framing tools available. I use Mockplus (www.mockplus.com). It has a ton of flexibility and mainly works using drag and drop functionality. It is easy to share wireframes and all users can leave notes on layouts.
‘Responsive’ layouts:
There’s an argument to say that providing the best user experience means separate sites for desktop and mobile. However, the cost and practicalities of maintenance generally mean organisations have one site that works across all platforms. Software that supports a multi-platform site is known as responsive because it enables the site to ‘respond’ to the screen size and format of the user’s device and present the content accordingly.
In practice, this usually means re-arranging rows of content into one long column so when you’re working with content use one, two or three rows, not more. This is why so many sites use this format.
Wireframing your home page:
Unsurprisingly, start with the home page.
The home page is still the main landing page for most sites, so deserves special consideration. You have seconds, literally, to grab a user and engage them enough to begin their journey. So you need to have identified the most compelling content for that user and it needs to be prominent on your home page. All the user journeys for your priority audiences need to start high up on your home page.
Make sure you have an attention-grabbing piece of content at the top of your home page. This will normally be a visual of some kind, imagery or video. Carousels (a 2/3 image slide show at the top of the home page) are extremely common and can work well but make sure the animation moves quickly. I you do use video , optimise it so it so it doesn’t slow down your page load time (even a 2 or 3 second delay will cause a user to leave your site).
Use the 2 or 3 column idea to arrange your content and make sure there’s a good balance of text and imagery. Imagery will grab users but good SEO also relies on text. An image-only homepage will not work well in search.
Move onto the next level pages on your site which will contain the next most important content to keep a user on their journey. Progress through each level until you reach the goals you’ve set. In most cases, there should not be more than five levels, including interactions like contact forms or downloads.
Header and footer:
Once you have a good idea of your most important content and user journeys, you can begin to plan out what will be in the header and footer.
Complex drop-down menus in the header are not mobile-friendly so avoid them, especially if your audience loves mobile. Create links to your main content pages and add a search box if you’re, say, a retailer and have a relatively complex site. Header should also contain a contact mechanic of some kind and your phone number.
Do not have more than one row of navigation options in your header. Remember, you have 3 or 4 priority audiences and you know which content is most important to them, so use the header to create direct links to it.
There has been a move towards ‘expanded’ footers in the last couple of years and for some simple sites an expanded footer can almost become a site map. Expanded footers are more mobile-friendly and people are used to the idea of swiping down a site to find content. Organise the footer using the stages of each user journey in list form and link to the content in your site. Add social links as needed and a contact mechanism.
So download a wireframing tool and get started!
Wireframes are so easy and quick to edit you can experiment until you’re happy with what you have. And combined with effective user journeys, they transform website planning, making your site much more likely to engage your users and delivering your website goals.