Conquer Your Blog Design with These 3 Foundational Rules by Liza Wilde Co.

Conquer Your Blog Design with These 3 Foundational Rules

By | Branding, Design, Wordpress | No Comments

Conquer Your Blog Design with These 3 Foundational Rules by Liza Wilde Co.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.

A Beautiful Mess

Simple and intuitive navigation on A Beautiful mess

 

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

Simple website navigation on Rock N Roll Bride

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

Simple website navigation from The Real Female Entrepreneur website

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.

2. Whitespace

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.

A Beautiful Mess

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.

Whitespace on A Beautiful Mess

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.

Blog styles on A Beautiful MessMore blog styles on A Beautiful mess

Rock N Roll Bride

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.

The Real Female Entrepreneur

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!

Whitespace use on The Real Female Entrepreneur website

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:

  • H1
  • H1
  • H3
  • H2

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

Heading 1 styles on Liza Wilde Co.

Clear, light, and sans-serif

Heading styles on Liza Wilde Co.

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.

Blockquotes

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.

Clear links/buttons

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.

Button styles on Liza Wilde Co.

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.

More button styles on Liza Wilde Co.

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.”

What Next?

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.

The Ultimate Website Planning Guide from Liza Wilde Co.

Learn how to plan your website from the ground up.

Download my Ultimate Website Planning Guide and get started revamping your website so you can build a consistent and memorable brand.

Why Your Blog Needs a Style Guide and How to Make One on Liza Wilde Co.

Why Your Blog Needs a Style Guide and How to Make One

By | Branding, Business, Design | No Comments

Why Your Blog Needs a Style Guide and How to Make One (Plus a free template!) from Liza Wilde Co.When you were first starting out with your online business, what was the first thing you thought you needed?

A name? A logo? A website?

There are a lot of things that we rush to create in the beginning. It’s exciting, it’s new, and we have ALL THE IDEAS.

Unfortunately – and I say this from experience – in all that excitement, we tend to move too fast and put out something that doesn’t represent us or just looks shitty.

Sorry, I said it, but you know what I mean. You’ve had those moments where you look at your website and cringe at the random colors or weird fonts that pop up when you install a new plugin.

I’m all for the “make it work, then make it better” motto. But when it comes to launching your blog or website, there are just some things you need to do, otherwise, your site will look inconsistent and piecemeal.

In my experience, nothing drives away people faster than lousy content and when lousy content looks even worse than it reads.

I love how Karla Cook over on Hubspot put it, “The best brands stick in our brains because their presence is defined by the repetition of the same logo, fonts, colors, and images. Once we see them enough, they become instantly recognizable, bringing us a clear sense of reliability and security.”

So today, we’re going to talk about how to take your website to the next level and make your content and site look good. I promise it’s not going to be as much work as you think it is!

What is a style guide?

Usually, a style guide is a PDF document put together by a designer, that details how every element on your site should look as far as fonts, colors, spacing, graphic elements, etc. You can search “style guide” on Pinterest and finds all kinds of inspiration!

an example of style guides on Pinterest

Style guides can also contain information about written elements such as language or specific phrases and terms used with your brand, or voice and tone.

When it comes to working with my clients, I have a handful of items I always include in their style guide.

Usually, I build my guides out in Adobe Illustrator, but I recreated my template in Canva so I could share it with you.

Things to include in your style guide:

  • a logo (if you have one, light and dark version) or your business name
  • heading levels 1-5
  • body text
  • block quotes
  • primary and secondary colors
  • graphic elements (textures, patterns, blog graphic styles)
  • buttons and links

Grab your style guide template here!

Make sure to go to File > Make a Copy, so you’re not overwriting my or anyone else’s template.

So before you get started, here are the main three reasons you need a style guide for your blog or website:

Consistency

It’ll save you time when your creating content if you know what things are supposed to look like every time, and it will make it easier for your readers to consume that content.

Memorability

By having a style guide, you’re setting yourself up to be memorable. Visitors will know when they come across something you’ve written or created because it looks like it belongs.

Scalability

By setting up how your site should look now, you are paving the way for guest contributors and team members to be able to quickly and efficiently help you on your website. It’ll be as simple as handing them the rulebook – your style guide!

If you’re looking for more information on how to create a style guide or resources for doing so, download my Ultimate Website Planning Guide. In it, I talk about style guides and each element.

The Ultimate Website Planning Guide from Liza Wilde Co.

Stop cringing at your website

Download my Ultimate Website Planning Guide and get started revamping your website so you can build a consistent and memorable brand.