These five seemingly subtle web design tips will mean the difference between a website that looks DIY and one that looks totally pro.
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 designer and creator.
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.
It’s the details that make all the difference.
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.
These web design tips are all about nuance.
Below are five web design tips that, when implemented properly, will take your website design to that next level.
Tip #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.
Tip #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.
If you’re looking to learn more, Canva has a nice easy-to-understand guide on visual hierarchy.
Tip #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.
Tip #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! To dive into fonts deeper check out my popular post, Fonts 101.
Tip #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!
In Closing
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.
For more from Janelle (that’s me!) at Ellanyze on ways to improve your website, check out these other quick reads:
Website Homepage Ideas: 3 Designs That Will Inspire You
Website Content Ideas: 20 ways to “Freshen Up” Your Website
