The Website Spruce Up

As we design our websites and continue to add content once it's up and running, we can run into a problem where our homepage can start to look rather cluttered.

We can lose our key messages, and sometimes it's great to take a step back and have a quick ‘Strategy Session’, even if that's on the back of a scrap piece of paper, or in your own mind. In today's blog post, we're going to talk about five key points that we use at PixelHaze to keep us on point when we're reviewing and tweaking an existing live website.

Signposting, do you know the way?

When people begin creating their website, they'll often try to put all the information they want to display to the user on the homepage, as naturally, they believe that's what the usual user will be seeking first. However, with home pages, ideally, you want to categorise your content into signposted sections which then lead off to other pages. This helps to avoid creating cluttered pages with lots of content fighting one another. Instead, you can have clear concise content layered throughout the site without jeopardising the overall design. 

This was especially an issue way back in the 2000s when we were building websites and had a limited framework with a traditional fold line, where we would have it in 1024x768 pixels. When we were designing within that framework, the incentive was always to try and make sure we got as much information in that prime retail area as we could. That concept was alien to graphic design, because generally, even though you are still limited to the amount of material you've got to work with, graphic design back then was a more mature industry, so therefore, there was a natural approach to the weighting of content. 

For example on an event poster, you would have a huge introductory title to say what is going on, and then some of the additional information will be much smaller and further down out of the line of sight. This is because if you can entice someone in with the main headline, they're more likely to have a look at the additional information, like for example, where it is or when it is, because you've already piqued their interest. 

The same can be said for websites - if you can maximise the use of that billboard area, when someone first lands on your website to capture their imagination, they’re far more likely to be signposted to the area that they want to access in order to find out more information. One caveat, try not to make that to be such a prolonged operation; short, snappy signposting ideally with one click and you're there is often the best.

Be Ruthless!

Grrr!

It's a statement I often say to clients, especially those who are designing for the first time and involved in the process, where they come to me and say “well, it's all really important”. I'm not doubting that the content is important. But as with everything, even important information has a hierarchy. What is the most crucial important first information that you need your visitor to see? This can change over time, as your campaigns change, or it can even change as your business grows or moves into a different industry.

We tend to work in tiers of priority. Tier one contains your crucial information that needs to be displayed on almost any page regardless of whether it's a mobile phone, or a 27-inch desktop. This would be the information above what we call the traditional fold line. The fold line is that invisible line where your screen ends. With modern responsive web design, we're working on so many different screen sizes, it’s impossible to have one fixed fold line. But, as you become more experienced working with websites, you will test your website on multiple screen sizes. For example, test it on a desktop computer, a laptop, a tablet in both portrait and landscape and take the average of where that line falls. Then we move into tier two which is information just below that which is still important, but not as high priority as tier one. Then we move into tier three which is information that could even be optional on your page. If you can do that and be ruthless in your prioritisation, you can find you can declutter your website by an enormous amount.

Mobile-first

Although we don't design our websites, mobile-first, we do design our websites with mobile in mind. Content that would be easily displayed on a 27 inch Mac screen may not be easy to see on an iPhone or Samsung Galaxy. Images, such as the main banner images would be cropped and condensed and sometimes the focal point of these images may be cropped out, therefore we have to consider how we lay out the pages on a smaller screen, because the user flow is quite different.

When viewing on a mobile screen, you're not pointing, clicking, scrolling or dragging on a mouse, you are instead, holding the device, generally in portrait mode, and using your thumb to flick through. So even though we can't see as much content on the screen, scrolling is much easier. It’s a natural flow with a flick of the thumb and you can see this, the screen just moves up gracefully. No mouse that I've owned has that same nice luxurious feel to it, as it is scrolling through a device on a mobile phone. Your end-users are trained for this, if they use any social media channel, they will be used to scrolling with a thumb to probably to a point where they may start worrying about having repetitive strain injury.

It Hangs in the Balance

Every well experienced designer will have an eye for balance, but if you're building your websites as a DIY project and you haven't had a huge amount of experience in design, always think about how you're going to map out your content. For example, if you go 90% image and 10% text content, you will have an issue where the website may look amazing, but you're not getting the messages across because sometimes people need large headlines (maybe with a descriptive paragraph explaining information) before you signpost you off to an individual page for more information.

Having said that, on the flip side if you're 90% text content and 10% image content, it may work in certain online white papers or technical information where the visual appeal of the website is very much bottom of the list of priorities, then you can get away it. However, most of the time and this can be said for the majority of our clients running small businesses online, you will need to have a good balance between text and images.

For example, you can have offset content. You can start off with a paragraph, halfway across the width of the page, aligned to the left, you have an image offset to the right, roughly the same height as a paragraph of text if you can. Then you can swap that around on the next section down, and that can generate a really nice visual appeal and give the website a certain symmetry

Banding 

The great news is that Squarespace 7.1 has this nailed down to a fine art. At PixelHaze we love designing many of our projects with visual banding where you’d start with a banner image, for example, which has a striking image or video background, a key message with a large font, and potentially a call to action. Then the next section down might contain a very short paragraph about the organisation which could then signpost off to a full ‘About’ page. That second section could be on a neutral white background, contrasting that image above. 

We can then move back into either a dark colour background to contrast once more of a silver colour if we wanted to be more subtle, or we could bring in another image. But by having those three sections, alternating, almost like a Dennis the Menace t-shirt, we can trick the user's eye into separating that content, and sometimes that can reflect exactly the tiers of priority that we set out earlier in this blog post. We try to use every trick at our disposal to make that user experience as nice for the user as possible.

Although some of these points may not be possible in your specific project especially if it's a niche area, we'd strongly recommend you consider these when designing a new website, or sprucing up your existing one.

If you feel it's not quite nailing it at the moment. Follow these five steps and we'd love to hear how you get on.