In this episode, you’ll learn how to improve your website’s design by taking away elements.
The websites featured in this episode are Propeller Consulting’s “What We Do” page, and Winton Gibbon’s “What I Do” page.
[Slides]Transcript
Welcome to Consulting Website Design 008: Addition By Subtraction.
In today’s episode, you’re going to learn about visual hierarchy and creating a “path” for your prospects with your website’s design.
And to demonstrate, we’re going to look at a consulting web page that does this well: Propeller’s “What We Do” page.
And one that doesn’t do it so well: Winton Gibbons’s “What I Do” page.
On each of these consulting websites, we have the services page: the consultants are explaining what they do to their potential clients.
Propeller’s page is really well-designed. You have this alternating pattern where they include what they do, and then a big image background which takes you to their case study.
They want their prospects to read their case study so that they can demonstrate their expertise and build trust.
Winton’s page is a lot more cluttered and disorganized. There is no real plan for the content, and it feels like it’s kind of just thrown together.
He’s got some good images here that explains what he does…but there are a lot of elements that really take away our attention from what’s important.
Now here’s how I would change these websites to clean up the design and make more sense of the visual hierarchy.
For Winton’s website, the main thing I would do here is basically remove the sidebar.
There is no visual indicator that it’s an actual sidebar, with the image here and the quick bio, and the Twitter feed.
And it takes up just about half of the page, and it takes our attention away from the title of the page, which is focused on what he does.
So what I’m going to do here is basically delete these sidebars.
And then what I’m going to do is center this content here.
This makes his content much easier to read and there is an actual path for the user to take.
He could take his content and work it into his footer, and that makes it so his reader can read his content without being distracted by other elements of his website.
For the Propeller website, which is already really well-designed, I’m going to make a simple change here.
And that is getting rid of this hero background image, changing this background to white, and then changing the text to match the rest of the page.
The reason I made this change to their “What We Do” page is because I feel that the hero background image detracts from the case study images, and what we’re trying to do here is draw your attention to the case study images, because as you see once I hover over it I can actually click on it and it takes me to their case study.
This is what I mean by addition by subtraction: taking away elements to make the important elements stand out more.
And this quote, from designer Jarrod Drysdale, highlights the importance of what we try to do with our visual hierarchy of our consulting websites.
When a user sees your design, their subconscious mind will process the visual hierarchy in a fraction of a second, and their eyes will follow the path you created. If you planned that path well, you can guide the user to look at important areas in your design, like a “buy” button, signup form, etc.
What the Propeller website does well is guide your eyes to the important areas in the design: the case study images, which take their reader to read their case studies, which builds trust and showcases their expertise to their potential clients.
Whereas on Winton Gibbins website before I made these changes, there is no real path. You don’t know where to go, and that makes it look and feel clumsy.
Action Step
Today’s action step is to remove an element, or elements, from one of your website’s pages to help clear the path for your user so that they can reach your goal you set for them.
One neat test you can do is called the Eye Test: close your eyes for five seconds, and then open them on one of your pages.
Where is the first place that you look? That element is what dominates the visual hierarchy of the page.
When you really break down your design, you’ll find that you have a lot of clutter and barriers in your design, and you can make a design better by taking away the elements that you don’t need.