When clients tell me about their vision of their dream website design, there’s always one word in common: clean. Even when a website is filled with personality or color, everyone still wants the design to “feel clean.”
What does that really even mean?
It’s not that you want your website to feel bland or sterile—in fact, it’s quite the opposite. You want to convey a LOT of interesting information and personality to a website user… but it can’t happen all at once.
If you tried to hit your viewer with ALL of your content at the same time, none of it would actually come through to the viewer. It’s too much.
Our brains can’t make sense of the information. We need a visual hierarchy to tell our brains which elements to process first.
“Visual Hierarchy” is the presentation of design elements in a way that assigns priority or importance. It’s at the root of all visual processing. It’s the foundation to any design—and it can make or break your website.
Imagine a traditional newspaper. Our eyes are immediately drawn to the headline: a short title in big letters, sitting above the fold at the top of the page. We read the headline first without even thinking about it. Our brains have prioritized those letters as being much more significant than the tiny italicized caption at the bottom right corner of the page.
The same is true within your website design.
Usually, a “clean” look really comes down to a well-established visual hierarchy.
If you’ve ever tried to DIY your own website design, you know that “clean” is not as easy as you might think! Sometimes simplicity is actually incredibly difficult to achieve… that’s why graphic designers spend years studying the Principles of Design (including visual hierarchy)!
Visual hierarchy makes your information easy to navigate and aesthetically pleasing. On the other hand, a lack of visual hierarchy makes your website look cluttered.
You want to convey a lot of information to a website visitor… but you need to choose the order in which that information is presented. Which information is most important / urgent? Which details can wait? Establishing visual priority helps our brains organize all of that information quickly.
And in our industry, there are a few common mistakes that I see all the time. These design choices are a near guarantee to make your website feel clunky and cluttered. If you can eliminate these problems from your design, it will do wonders to help your site feel so fresh and so clean (clean)!
Most common clutter mistakes:
- Too many fonts. This is an easy mistake to make, but fixing it can drastically improve your site design! If you aren’t working with a designer, limit yourself to two (maybe three) fonts on the entire site. You can take this a step further by defining a consistent style for each font. Always use the same size and formatting (for example, Garamond Size 20 for all titles; Garamond Size 14 for all body text.) Bonus points for consistent colors too! A consistent type hierarchy will help your viewer’s brain organize, prioritize, and categorize all the information across your entire site.
- Overusing script fonts. Script fonts can lend a lot of personality to your site, but you must be discerning about their use. Scripts are designed to be accent fonts; they should be used for short titles or signatures… never for body text.Script fonts are detailed, and often hard to read. Your brain actually has to work harder to read and process a script font. They should be used strategically and carefully to add to the design hierarchy rather than detract from it.
One last thing: never, ever use a script font in all caps!
- Featured logos in different colors. Do not use all the full-color logos for your features / publications / press section. I can’t tell you what a drastic improvement this will make! YOUR brand should stand out on the page—not another company’s logo!
Think about it: each business’s logo was designed to grab a viewer’s attention and convey a particular personality. When you put them all together in one canvas, they compete against each other. It feels cluttered and disorganized; our eye doesn’t know where to go. On top of that, you’re persuading a viewer to click over to another business’s website (where they are likely to discover your competitors!).
Do yourself a favor: eliminate the clutter. Change all of those press logos to the same color (white often works well). Need help? Here’s a quick tutorial. I promise this will be well worth your time! You can also swap the logos for text, featuring your publications in a simple and clean list.
- Broken links. Websites rely on links to help us navigate (or to pull in information from another site, like an Instagram feed). Sometimes they break. Maybe you changed a password or missed an update. But a broken link can have a major negative effect on user experience: missing Instagram feeds, broken contact forms, or “Page Not Found” errors.
Give yourself a quarterly website audit to click through the entire site and make sure you aren’t missing any links!
- Not enough white space. This is the number one cause of clutter. Our eyes need visual rest to prevent our brains from overwhelm. White space helps us take in information and organize content appropriately.
Lack of negative space makes everything feel cramped—and it’s difficult for our brain to decipher, navigate, and categorize the information. When in doubt, add more space.
If you just avoid these clutter crimes, your website will look so much cleaner already!
You can implement these small changes to achieve a clean layout and well-established visual hierarchy. Good luck!
If you want more tips to help you refine your brand and website, be sure to sign up for my email list—that’s where I’ll share all my favorite resources, starting with a 5-page workbook to Build Your Brand. And of course, if you decide that you need professional assistance with your website… I’d love to hear more about your vision!
*Disclaimer: I’m generalizing here. Of course, there are talented designers who have been able to create interesting concepts by breaking these guidelines. But for most people working on their own websites… stick to the rules! 😉