top of page
logo-500.jpg

0161 266 1040

Visual Hierarchy in Web Design: What is it and Why is it Key to Online Success? (Part Two)

Writer's picture: Christian MichaelsChristian Michaels

Updated: Apr 26, 2019



Visual hierarchy in web design

A week has passed and we are back on track with all things visual hierarchy in web design. In our last article we began by sharing what visual hierarchy is – visual communication with your users to tell them where they should look next – and focused on a few features of visual hierarchy. The first feature was size, where a web designer will utilise the innate human desire to make patterns and sequences by following text and images in decreasing size order. The second feature was colour, where a chosen colour can simultaneously build branding and indicate a new section of information or an action.

It was all very exciting and we’re sure that you have been eagerly awaiting this second and equally exciting instalment. Again with the help of our in-house web designer, we will take you through the final need-to-knows when it comes to visual hierarchy.

White Space in Web Design

For amateur web designers, white space can be scary. There seems to be some pull that in order to make the most of a page, it must be filled with as much text, and as many images as possible to excite the reader. WARNING: THIS IS A MISTAKE. Not always of course, last week we looked at how Netflix manages to use contrasting colours and a grid layout to allow ‘Netflix and Chill’, rather than ‘Netflix and Get really frustrated trying to navigate the site’. Generally though, making use of white space is a great way to keep your website looking clean, smart, and professional. Not only that, white or blank space in web design prevents the users from becoming overwhelmed and allows them to follow a path through the page. It also allows the web designer to isolate points of focus and create sections. Here is the homepage on a website that we created for one of our wonderful clients, KP Aesthetics:

In this example, the white space is indeed white, however white space refers to any space around text and images.

Telling with Typography

Be honest; given the choice would you rather read a copy of Spot the Dog, or War and Peace? We aren’t afraid to say that Spot the Dog is far more approachable and certainly less of a challenge. That is the key to web design; it shouldn’t be a challenge at all. The effective use of typography is able to take away the challenge of page navigation and make for an easy-breezy user experience.

The power of typography is something that we have focused on in previous blogs. Able to build your brand, excite and engage your users, and importantly, tell your users the route that their gaze should follow, typography is essential for online success. It is all very well and good to have informative and engrossing written content, but unless it’s aesthetically pleasing and easily digestible, we probably won’t take it on board. Creating web design with creative typography sees web designers play around with font, text density, italics, size and colours. Here’s an example of brand-building typography on the website for Manchester eatery Luck lust Liquor and Burn:

web design effective typography

Have a Better Idea of Visual Hierarchy?

We hope so; because it’s pretty cool, and whether you’re conscious of it or not, visual hierarchy is fundamental to a website’s success. If you have an existing website which having read this, you feel is lacking in personality and potential for a positive user experience, fear not, the team at Christian Michaels can help. If you require a website for a new or expanding business, guess what, we can do that too. Get in touch for a free consultation today.

23 views0 comments

Recent Posts

See All

Commentaires


bottom of page