Do you have a website that looks ok but you feel it could do with a little tweak to get it looking great?
In this article, I’ll cover a number of small things that can sometimes get over looked during a website design. Hopefully, these tips can help you take your website from good to great.
Visual Hierarchy
Have you ever gone to a website and been overwhelmed by the amount of content on the page. You’re not sure where to look or what to click on, so you inevitably end up leaving the page without exploring the site or finding the information you were looking for, to begin with.
This issue occurs due to a poor visual hierarchy; showing the user what the most important thing on the page is and then leading the user’s eye through the rest of the content.
Visual hierarchy is incredibly important if you are trying to get the user to perform a specific action when they arrive at your website, if this action isn’t completely clear to the user, it is highly unlikely you will be able to convince them to take the action you require. Such as signing up for a newsletter or purchasing your core product.
The rest of the tips below, all feed in to creating a good visual hierarchy.
Grids and Whitespace
A very common issue that occurs with designs that aren’t quite right is the alignment of content and the use of whitespace.
Ensuring that all of the content is on a ‘grid’ meaning that all of the content lines up with one another. All titles are aligned, all paragraphs are aligned. Even if it is a few pixels off, people may not know exactly what’s wrong with the design, but they’ll be able to tell it’s not quite right.
Whitespace is just as important and if you’ve used a grid correctly, white space generally won’t be an issue. When a website is crowded with content and there is no visual hierarchy, there is a lack of whitespace. Whitespace helps lead the eye and provides emphasis on important content as well as improving overall readability.
All of this is basically to say that you should ensure the content is laid out so that it is neat, tidy and not overcrowded.
Pick Your Colours
People can get carried away when picking the colour palette for their website. Just because your logo has pink and purple in it, that doesn’t mean that the background of your website should be pink and the text purple. Yes, this colour scheme can be pulled off, however, it is highly unlikely it will work out well, and at the end of the day, your goal should be to make your website as easy to read and comprehend as possible.
The further you move away from standard colour schemes and basic colour theory; contrast being a major one, the more likely it is that your website will put the end user off and drive them away from your site.
Adobe Color is a good resource to start playing around with colour schemes and getting a better idea of what colours work together.
Font Choice
Font choice. When it comes to the style of the font you’d like to use on your website, the simpler the style of paragraph font, the better. If you’d like to use some more creative styles of font, it is best to try and use these for headings, as headings are a larger font size and generally don’t have more than one line of text, which negates the issue of font ascents and descents blending together.
A good resource to explore different font styles is Google Fonts. Play around, find out what styles you enjoy. Using a good web font can set your website apart from all the others that use standard Arial or Helvetica. Just ensure your choices improve the overall design and don’t distract the user.
Conclusion
The main thing you should keep in mind when trying to get your website to look as good as possible is ensuring there is a good visual hierarchy. As I mentioned earlier, this encompasses all of the pointers in this article, as well as more. To get a more in-depth look at Visual Hierarchy, such as creating contrast, the F-Pattern and the Z-Pattern, take a look at this article on Awwwards.com
If you have any further questions in regards to any of this information, feel free to get in touch and ask away.
