In last week’s post, I talked to you about the importance of having a blog style guide and how to make one. Style guides are important for consistency and making your blog memorable.
This week, I’d like to go over my three ground rules for any website or blog design. These are the big three because they will help prevent your visitors from feeling overwhelmed by clutter and content. If you keep these in mind when building your website and later, when you’re maintaining it, you’ll find yourself less overwhelmed as well.
1. Simple, Intuitive Navigation
Having a simple and intuitive navigation system might seem like a no-brainer, but this is where most people get tripped up when they’re building or expanding their website.
If you’re just starting out, writing content can be daunting. We always seem to think we need more than we do. Realistically, most visitors only read 1-2 pages per visit anyway.
Research shows that the most frequently visited pages are your homepage, about page, blog, and contact page.
These pages, right there, are the most simple, intuitive navigation a visitor could ask for. Nothing fancy or crazy, just 3-4 destinations with the promise of value on the other end.
If you’ve had your blog or website for a while and you’re looking at your navigation from an expanded view, there’s probably more to it. You might have a services page or a portfolio of your past work like I do. The longer you’re online, the easier it is to want to start adding things to your navigation. Try to resist that temptation.
When it comes to design, less is always more, and this includes your navigation.
Let’s take a quick look at some websites that have different levels of navigation and see how they manage.
This is a lifestyle and DIY blog that I’ve been following for years, and they’d been around for several years before I started following them. They have a lot of content.
Since they’re primarily a blog, their visitors are mainly coming to read articles, and since they’ve expanded their categories over the years, a simple chronological list of articles isn’t enough. Instead, what they’ve done, is provided two menus.
Their main navigation, to the right of their logo, are links to various archive pages around their site. It’s their top-level post categories, and then each has a dropdown of subcategories. This is a lot, but they’ve broken it up into the most manageable chunks they can to help their users navigate their content as quickly as possible.
For the subset of visitors who are there to talk about sponsorships or check out their products, they’ve included a secondary navigation that’s tied to the top of their site. It’s more subtle so as not to distract, but provides several landing pages that visitors might need to learn more about their products and services.
Two menus might sound like the opposite of simple, but it actually helps break up their large site to help their two demographics find what they’re looking for.
Bonus: it’s styled in a way that is clutter free, with a drop-down menu and short top-level links.
Rock N Roll Bride is the website home of an alternative bridal magazine run by Kat Williams. (It’s awesome!) They approach their navigation a little differently.
Since the website itself is just a blog, when you land on the homepage, you only get their blogroll. This means they don’t have a “blog” option in their menu. Instead, they focus on their shop and ways to interact with the magazine.
Where A Beautiful Mess broke up their menu into two forms with separate focuses, Rock N Roll Bride keeps their visitors reading chronologically. They only break off their sponsorship interests but keep everyone else reading their blog.
Between the A Beautiful Mess and Rock N Roll Bride menus, neither is a bad method and will come down to personal preference and reader feedback.
My opinion is, while technically including more links, A Beautiful Mess has to the more intuitive navigation. I can quickly find the exact dessert recipe I was looking for. On Rock N Roll Bride, I had to remember the title or name of a wedding venue in the article to search by. Even then I have to hope the post I’m looking for pops up in the search results.
This type of navigation comes down to how these websites are categorizing their posts, which is a beast for another day. So let’s look at one more website that has a simple and intuitive navigation.
The Real Female Entrepreneur is a podcast run by Lauren Frontiera, and I love how Lauren does a great job of using action words in her menu.
When I arrive at her site, and I’m prompted to “Learn More,” “Join” or “Watch.” Her navigation is short, never being longer than a few characters. She provides depth to her menu through dropdowns, as ABM did with their subcategories.
The Home Link Debate
One other thing I want to touch on is the debate between including “Home” as a navigation item and using your logo as your “Home” link.
There is a valid argument that some users need the word “Home” spelled out to navigate back to your homepage. However, the convention is that using your logo is perfectly acceptable. This choice will ultimately come down to your target audience.
In my experience, websites which are targeting an older demographic find more users asking for a “home” link. Sites aimed at millennials and younger generations have been totally fine with excluding it, and therefore simplifying their menu further.
If asked, any print and web designer will tell you that whitespace (or negative space) is critical to a good design.
In the same way having a simple navigation helps your users find their content, having ample amounts of whitespace in your design helps them consume your content with ease.
Now, that’s not saying you can’t include color in your designs. In fact, whitespace can help your color and graphics stand out more, by giving them room to “breathe” and making things less cluttered.
Fortunately, most websites these days are trending heavily towards more whitespace. But let’s look back at the three examples I used when talking about navigation.
ABM uses a lot of white space on the outside of their design (page margins) and in between the various articles. This helps bring the focus on their bright brand colors and beautiful photography.
However, when I first opened their site, I have to admit I feel a bit of overwhelm. They have several colors that they’re using throughout their site (see the social icons for their palette), and the slider at the top feels like a lot.
The further you scroll down the page, the more they try and break content up, but there are several different styles of blog views, and my eye doesn’t know where to go. They also pull in their Instagram feed and store inventory, for more visual stimulation.
While it’s obvious that they’re all about bright colors, they could be using more whitespace to make their homepage feel less cluttered. By increasing margins and padding between blog post previews, and their grid items, they allow their visitors to focus on one thing at a time.
Rock N Roll Bride makes a valiant attempt at including a lot of whitespace in their design. Kat is also all about colors (check out her Insta feed for all kinds of rainbow goodness!) so the site is built on a white background for a clean slate.
Like A Beautiful Mess, I think they could’ve taken advantage of some more padding between their blog post and sidebar. And the number of advertisements throughout the site, specifically under the logo, make things seem just a bit more cluttered then it should be.
Out of all of my examples, I think Lauren at TRFE pulls off whitespace the best.
While she includes the grid boxes on their homepage, she has a ton of whitespace everywhere else to make up for it. She’s given her text and images room to breathe, and it makes you want to keep reading!
3. Content is king
For my third guideline, I have to tip my hat to the old adage that content is king because it is. Regardless of what the rest of your website looks like, if your content isn’t written and presented in a way that visitors will find easy to read, then no amount of whitespace will keep them on your website.
When it comes to designing a blog’s content, there are a few items you need to keep in mind.
Headings and subheadings
The proper use of headings and subheadings is the best way to break up your content for your reader. Within HTML (the language behind text and blogs) there are six levels of headings, h1-h6.
Your browser renders these with h1 being the largest, like your page title, and h6 being the smallest.
When it comes to using headings within your content, there is a right and wrong way to do so. And while your website won’t break if you use them out of order, you are setting yourself up to damage your SEO and breaking some accessibility standards while you’re at it. I wrote more about this in my post 5 Crazy Easy Things You Can Tweak Now For Better SEO.
My advice on how to use headings properly is to think of them as a book.
- H1 – The Book Title / Blog post or page title
- H2 – The Table of Contents / Top 2-3 takeaways you’re talking about in said post
- H3 – Chapter Titles / 2-3 key points from each takeaway
- H4-H6 – appendices, glossaries, etc. / Specific examples or case studies in your blog post.
The heading hierarchy for this post, for example, is as follows:
- H1: POST TITLE
- H2: 1. Simple, Intuitive Navigation
- H3: A Beautiful Mess
- H3: Rock N Roll Bridge
- H3: The Real Female Entrepreneur
- H2: Whitespace
- H3: A Beautiful Mess
- H3: Rock N Roll Bridge
- H3: The Real Female Entrepreneur
- H2: Content is King
- H3: Headings and subheadings
- H3: Blockquotes
- H3: Clear links and buttons
You’ll see I never get so far down as needing h4-h6, but my content follows a distinct outline. This is super important to search engine bots, but also to your readers. It guides them through your post and helps break up what they’re reading into more memorable pieces.
The most significant mistake I see people making with headings is using them for how they look versus how they’re supposed to function.
If you have a blog post and your structure looks more like this, then you’re doing it wrong:
Headings should always follow a clear hierarchy. As for the aesthetics, it’s better to use CSS to create class selectors so you can style anything to look that way, regardless of its heading level.
For example, on my site, I have h1’s that look two different ways depending on the page.
Big, bold, and script
Clear, light, and sans-serif
If you’re struggling with how to style your headers or you’re not sure how to set up a CSS class, let’s chat about it during one of my Virtual Office Hours.
Another method of breaking up your content for readers is using blockquotes to bring focus to important parts of your material.
Blockquotes can look however you want them to, but usually, they’re a way of pulling out an actual quote from someone or a key point you’re trying to make. When I’m styling these, I like to make sure they still fit well into the flow of content. Try to avoid designing them in a way that takes them out of the natural reading flow, or else repeat them in a blockquote.
Smashing Magazine has a great article on all the different kinds of quotes that can be used and some good and bad ways of displaying them.
Finally, when it comes to your content and helping your readers make the most out of it, it’s very important that you have a clear style of how links and buttons look.
Nothing is more frustrating than when I’m reading a post and go to click on something, but it’s not a link. This usually happens when something is styled to look button-like (background color or borders), but it’s not actually a button.
My suggestion when styling your links is to make sure that if a link is in-line and in a paragraph, that it be underlined and a different color than your regular body copy.
If you’re using call-to-actions and other callouts (and you should be) make sure that wherever you want the user to click is clearly defined.
I’m using two styles of buttons throughout my site, depending on where. Buttons drawing visitors to my case studies and previous work are underlined pink and turn solid on hover. All other buttons are a solid color that transitions to a complementary color on hover.
And with these, I try to use my pink buttons the most because all of my other links are pink (consistency!) I only rely on another color button if the pink button is hard to read against a background color.
Good Design Keeps You Focused
These guidelines aren’t meant to limit your creativity, but to help you focus on the task at hand – delivering amazing content to your readers. By having a set style guide that focuses on simplicity and helping your reader consume content quickly, you’re making your life easier in the publishing process.
No more second guessing what color to make something, or how to format it. You’ll ask yourself the one question that every small business owner needs to ask themselves constantly: “Does this help my visitor do what they need to do?”
If you answered anything except yes, then trash it or change it or do whatever you need to do to turn it into a “yes.”
If you’re struggling with the best way to put your style guide together, you can grab this Canva template I put together to get you started. (Make sure to go to File > Make a Copy, so you’re not overwriting my or anyone else’s template!)
I also have an awesome FREE guide to help you plan your website from start to finish. Download my Ultimate Website Planning Guide if you’re struggling with where to start.
And if you already have a website going, and you’re not sure how to make it better, or you’re fighting with yourself about where to start, grab my Website Intensive Review + Personalized Action Plan. I’ll go through your site from front to back and tell you how to make it better and give you the tools so that you can do it yourself.