
website success tips
Visual hierarchy and how to use it effectively on your website
Today’s tip is about creating a visual hierarchy on your website. I want you to be thinking about what happens when you land on your website homepage or any other corresponding page secondary page. How is it that your eye moves through the page? Sometimes it’s really hard to look at that when you’re the one building your own site. I always recommend starting with wireframes for this purpose. If you’re struggling to create a visual hierarchy on your own site, I suggest taking a look at websites that you like to frequent and taking note of how they create visual hierarchy. How are they creating balance and how are you as the viewer moving through the page naturally?
Here are a few things you can do to create this on your own site:
- You can use images and color blocking as a way to create a visual hierarchy by breaking the page into sections. It allows your eye to focus on different locations.
- You can also utilize scale in your imagery and copy. Creating standard looks for headlines, subheads, and body copy is just going to help people understand where they should look first, second, and third, and finally where they should land.
- Finally be thinking about that call to action and how does that fit into the visual hierarchy? This is important because your call to action is what you want people to gravitate toward on your website.
A visual hierarchy works quickly and subconsciously to guide users through your content. We just look at a page or a composition and we’re naturally moving through the information/imagery. Again, try to take a look at some sites that you enjoy visiting and you’ll start to see what’s working and how they’re doing it. Then you can take some ideas you pulled from looking at those other sites and begin implementing them into your own brand visuals.
Want to know more website success tips? Download my FREE Website Checklist!