These five seemingly small nuances in web design are the difference between a website that’s pretty good and a website that makes your jaw drop.
I had a rather eccentric professor in college who loved repeating his favorite sayings to us over and over again. And one that continues to stand out from all the rest is:
“Success is in the details.”
I never really understood what he meant – until I fully stepped into my life and career as a creator. As a jazz musician, I created an ensemble, I created compositions, and I created an album. As a Web Designer, Messaging Artist, and Branding Expert, I create words, stories, visuals, and designs every day.
When creating something – whether it be a website, a logo, a tagline, or a song – the details are what separate the ho-hum from the exceptional. The details are what separate the pretty good from the maaah-velous.
In other words, it’s the details that make all the difference.
So what does nuance have to do with details? Nuance is defined as “a subtle difference in or shade of meaning, expression, or sound.”
If that’s not the details, then I don’t know what is.
I’m often contacted by heart-centered entrepreneurs who have attempted to DIY their website. In the end, they get all their content up successfully, but something “just doesn’t feel right” and they can’t tell what it is. Ultimately frustrated beyond their wit’s end, they finally decide to call a professional. “What is my website missing?” they ask.
Nine times out of ten, it’s the nuances they’re missing. Below are five nuances in web design that, when implemented properly, will take your website design to that next level.
Website Nuance #1: Use of Whitespace.
Picture your living room.
Now imagine that there are piles of papers and books everywhere, clothes strewn across the couch, and some empty frozen dinner trays on the end tables. With this image in mind, how do you feel? If you’re like me, you’re probably feeling a panicky feeling in your chest (!)
Now imagine the same room, but all that is in this room are a few simple pieces of furniture you love, an absolutely gorgeous piece of artwork hanging on the wall, and a coffee table in the middle room with a single candle lit. How does that feel? I literally just sighed involuntarily without even realizing it.
The difference we feel when imaging these two rooms is the same as how a visitor feels when there is plenty of whitespace on a website versus none at all.
Most of us understand, in theory, what whitespace is (“It’s space that’s white, right?!”). The trick to whitespace is to tune in to how it makes your visitor feel: clearheaded, relaxed, peaceful, and easy. Look at your website and ask yourself if it conveys those feelings. If not, you may want some more breathing room.
Website Nuance #2: Visual Hierarchy.
Visual Hierarchy refers to the arrangement of various elements that communicate levels of importance for each. On a website with a strong visual hierarchy, it’s immediately clear (without having to think about it) where to look first, then second, then third. Without a strong Visual Hierarchy, it might be confusing or overwhelming where to go first.
So how can you achieve a strong visual hierarchy on your website? A few general rules of thumb: 1) Make your most important headline the largest size text on the page. 2) Use brighter colors in areas where you want to draw attention. 3) Keep elements of content that are related to one another (i.e. headline, text, photos) grouped together. Keep collections of content that are not related to one another spaced more apart.
Website Nuance #3: A Clear User Path.
Remember the last time someone gave you absolutely amazing driving directions? It’s complete peace of mind, isn’t it? I drive down this road until I see a McDonalds on the right (there it is!) and then make the next left (easy!) and then go through three stop signs (1, 2, 3!) and it’s the very next house on the right (we’re there!). Ahhhhhh.
Fantastic user experience on a website should be just the same way – in other words – don’t make them think! Their next step should always be easy, clear, and obvious. You can achieve this by using only one or two call-to-action buttons at a time, making text brief and skimmable, and turning your website into a fun “Choose Your Own Adventure” book.
Website Nuance #4: Consistency of Fonts.
Generally, one font is great. Two fonts is great. But three fonts? That’s maybe a crowd. Aim for one font for body text (i.e. paragraphs) and one font for headlines (i.e. your larger titles). Consistency of fonts is one of those nuances that no one will notice if you’ve done it right (drat!) – but if you miss the mark, people who don’t know anything about design will sense that your website is “crowded” or “overwhelming” or “all over the map” (although they won’t be able to articulate why – but does it matter?) And once you’ve defined the two fonts for your brand, stick with them!
Website Nuance #5: Flourishes.
A flourish is a small and simple design element that can be used over and over throughout your design to provide a sense of repetition and unity. Often a flourish can be taken from a part of your logo, business name, or other elements of your brand. Once you’ve got your flourish, you can use it as a divider between elements, as a light background image, as a bullet point for lists, or anywhere else you can think of!
It’s no mystery that anyone can gather content and put up a website these days. But when your website has these nuances in web design: whitespace, visual hierarchy, a clear user experience, consistent fonts, and flourishes to boot? It really makes all the difference in the world.