Wireframe in web design for free - A complete guide to wireframing for Squarespace

15 Mar

Wireframing is an essential process when designing a website. In this article, we look into wireframes in-depth, what they are, what to consider, the components, and how to prioritize content for your website.

What is wireframing?

Wireframing is a process where you sketch out the bare bones of a structure, usually for software or a website. The wireframe then gives you a visual representation of how the website is going to be structured and potentially linked together so that you can go into the design process fully confident that, in most cases, you haven't made any major errors. Wireframing gives you an incentive to delve in and think about how your website is going to function before you go ahead and construct it. A wireframe should be constructed to plan the content and layout of the website before the design process including styling, colour, or graphics is tackled.

A big mistake that many junior designers make is delving straight into the design process, but without considering all of the different moving parts they need and so it becomes much harder to do a good job. A few years ago, before the development of website builders like Squarespace and Wix, it was even more perilous going down this route, because designers would have a design that was fully thought out to about 80%, so that visually it looks really impressive, but maybe they haven't considered the final 20% and thought about how the content is going to impact the design.

Wireframe in web design for free - Our YouTube guide to wireframing for Squarespace

An example of this would be where a designer has created a homepage with enough space for three columns, with a paragraph in each column. The issue may come when the client perhaps creates two paragraphs for two of those three columns and one paragraph for the other: all of a sudden that could break the entire design. This is just one example of not effectively planning ahead.

Wireframing is very much like having an architect draw out the plans of a house before you start building it; it is that essential planning process. The good news is it doesn't need to take long to be done in minutes for most small websites. In the PixelHaze Studio, we use chalk paint on our walls so we can draw up a website wireframe quickly and make changes by simply rubbing out lines.

What are the most important aspects to consider when creating a wireframe?

The top priority is to consider your audience or users. It’s key to understand that as a designer, you're not designing the website for the client (although they need to be fully immersed in the project and sign it off). It's important to reaffirm to your client that it's the end-user who's the most important party in this conversation.

By understanding your target audience, perhaps even building personas of your potential clientele or individual fictional characters who you are going to be regular visitors to the website, you can effectively plan your website design and content to meet the users’ needs.

Wireframing allows us to start a conversation with our potential clients. One example might be Dave. Dave is a 23-year-old solicitor starting out in the professional services industry. He's going to be visiting the website to do X, Y, and Z. We need to consider:

How would he interact with the website?
What style would he like?
Does it need to look very corporate?
- Because Dave is in the professional services sector as a solicitor, he is now very important, therefore the website needs to reflect that importance and element of luxury in the design.
What sections of the site is he going to navigate to?
If it's an e-commerce website, what products is he, as your main audience, most likely to buy?
What products could accompany that?
- This then drives into cross-selling and upselling.

There are so many questions we can ask if we build these personas. Then when it comes to the wireframing process, we're building structures for Dave. Then we could bring in another persona if your website is targeting multiple demographics. For example, Sue could be 48 years old and also in the professional services sector, but what might appeal to her could be slightly different to Dave.

It's a balancing act because you don't want to be spending months going through this and overthinking it. However, the more you go through the wireframing process, the more efficient you become which allows you to get the most from your wireframes.

One final point is that it's not about the software when you create a wireframe, it's about the process. Wireframing allows you to plan so that you can efficiently get from a point where you're unsure about the outline structure of your website, to a point where you have confidence that the structure you put in, even if it's not the most successful website in its sector, will not make any major blunders that will turn potential good customers away.

What are the components of a wireframe?

Within website wireframes, there are consistent elements and variable elements. The consistent elements are areas like the masthead and the footer. The masthead is often referred to as a header and it usually sits above the main banner and is the first thing you see. It tends to encompass the logo and navigation system for the website and potentially telephone numbers, a call to action, or a book now button.

The footer is the mirror of the masthead, where the masthead has the most important, essential information that anchors you to the website, the footer finishes it off. So if you scroll through your page, the footer needs to perfectly accompany and complement the website. The footer will often house information that’s less critical, but it could be information that you want to nudge the user for. One example could be your three most recent videos from your YouTube channel in the website footer to encourage users to subscribe to your channel. So even though it’s never top priority on any individual page, what it lacks in priority, it makes up for in quantity and spread because it’ll be on every page the user views.

Then we go into variable elements which, although the processes are the same, how you lay it out can be very different depending on the website. This is where we bring in our content prioritization process where we have three tiers of priority to help us decide where each aspect of our content sits.

What are the tiers of priority?

The three tiers of priority in summary are:

Tier one - crucial information
Tier two - important for the home page but non-essential information
Tier three - lower priority information

Wire Frame Tier one

Tier one contains the most important content on your website. This will often be the masthead plus, on the homepage, for example, the hero unit which is our big banner with a bold message usually saying something along the lines of, ‘This is who we are, what we do, what we can do for you and why we’re amazing at what we do’. Or alternatively, the hero unit can have a client focus and say something like, ‘This is who we work with and this is how we’ve helped them’.

The message will be individual to the project, but in around 80% of websites, we would have some sort of hero unit because it's a really good, short, snappy way of getting our initial message across, especially for small businesses, where you don't have the luxury of everyone knowing who you are. The area where this often changes is on e-commerce websites, where we're selling products. This changes the focus to the product more so than the company selling the product.

Using our example audience from earlier, with professional services, we had a law firm website. In tier one of priority, we might have the logo and menu system in our masthead. and then have our hero unit with a key message of why they care about the customers.

Wire Frame Tier two

Tier two is important but non-essential information. This usually encompasses signposting, where we have a button or link that takes the user from one page to another. The signposting could be, ‘Our services’, ‘How we can help you’ and ‘Customer case studies,’ for example. Therefore depending on the question the user has when they visit your website, we can signpost them to a place where they can get more information.

We can signpost our users via questions or via services. An example would be instead of having one single ‘Services’ signpost which captures everyone in one call to action button to the services section of the website, you could signpost with your top three services, for example. Signposting is generally present in tier two so that we can capitalize on helping our customers now they know who we are.

Additionally, depending on the website and audience, tier two could contain news stories, which is especially useful for organizations that update their blog and news stories regularly so you could put a summary feed for the blog section of the website on the homepage. This could be a big selling point showing how active your company is, especially if the content is really helpful, so we wouldn’t want to hide it at the bottom of the page.

Elwyn discusses wireframing in our Squarespace Box of Tricks course

You may want to consider putting in some reassurance for the visitors through testimonials. A classic old-fashioned technique, testimonials are still very effective because the majority of people seek reassurance that a company is reputable and does a good job. If you can have testimonials that reference where it was added, that would be even better - for example, ‘This company is amazing,’ Sue, 48 via Google reviews. Testimonials build up authority within your industry and showcase the respect you have with your existing customers, so can be an essential part of the homepage.

Wire Frame Tier three

Tier three is non-essential information which always includes the footer at the bottom of the site. This could be a jumbo photo that can contain aspects such as an Instagram gallery, Twitter feeds, contact details, location, or map. This could also be a further ‘about us’ section if you didn’t want to put too much information at the top of the website. There are a whole host of other potential things that are non-essential but you want to put them in to make your website and company look like there’s a lot going on.

In summary

By breaking down each page of your website into three tiers of priority, you are forced to segregate the content into bands of importance, which then can sometimes transfer into literal bands with alternating colored backgrounds, to separate content on the website. Some sites don’t need a third tier if they are simple sites, but the majority of sites will benefit from prioritizing the content into three tiers and using a wireframe to organize the content functionality before considering visual design elements. We prefer to construct our wireframes using chalkboards - you can use software of course, but we find this can be a bit clunky, and sketching out ideas with clients seems to work well for us.

We hope you learned something new about wireframing, and if you’re interested in learning more, check out our Squarespace Box of Tricks course, available for $50 as a standalone through our Campus, or as part of the VIP membership at only $60 per year.