Read an Excerpt
Blog Design For Dummies
By Melissa Culbertson
John Wiley & SonsCopyright © 2013 John Wiley & Sons, Ltd
All rights reserved.
Recognizing Components of a Well-Designed Blog
In This Chapter
* Exploring why good blog design matters in the first place
* Looking at how readers generally look through websites and blogs
* Aligning your blog's message with your design
* Identifying blog design tips for nondesigners
* Discovering the basic tools needed for designing a blog
Blogging introduces a way for people to have a platform for sharing their words with anyone in the world. Along with that opportunity comes the chance to build a blog design that complements your words and leaves a lasting impression.
When you think of blog design, the first things that come to mind might be colors, fonts, or an overall blog layout. However, blog design goes deeper than that. In fact, this quote from Apple founder Steve Jobs pretty much sums it up: "Design is not just what it looks like and feels like. Design is how it works."
The main purpose of this book is to teach design to bloggers who aren't designers. Few things about design are required because designing a blog is more like part art and part science. We all have different tastes and styles, but in the end, design should function to give a visitor a positive experience.
In this chapter, I introduce you to how good blog design benefits your blog. You also get a glimpse at how web users generally look at websites — and blogs in particular. Then I tackle foundations of good blog design so you can recognize good design and understand why it's good. Additionally, this chapter introduces a few tools to help you start designing (or re-designing) your blog.
Knowing Why Blog Design Matters
I'm sure this has happened to you: You're hungry, so you search online for local restaurants and click a result that sounds interesting. The restaurant's website has shockingly ugly colors, auto-playing music, and flashing graphics. The menu is at the bottom of the last page you'd look for it and offers no descriptions, no prices, and no pictures. And even if you wanted to go to this restaurant at this point, the address is nowhere to be found. This restaurant may be the best one in town, but you just formed an impression of the food solely from its website.
Great blog design matters in the same way that restaurant's website does. When your design looks polished and professional, and is straight-forward to use, readers automatically trust that you also have good content. Good design also implies that you're committed not only to keeping your content fresh but committed to your readers as well.
So, does design matter more than content? Nope. If you had walked into that restaurant from the street, ate there, and loved it, you probably wouldn't care what its website looks like because you know the "content" is solid. But without an appealing blog design, a reader may never take a minute to actually read your content. After all, if your design is bad, why would your content be any better?
Good blog design reinforces the idea that your content is awesome. The ins and outs of your design keep your new visitors exploring your content, help you meet your blog goals, and draw attention to your blog's most important asset: your content.
Communicating with design
In the face-to-face world, facial expressions and body language often speak more than the words coming from someone's mouth. Your blog's design communicates in the same way, speaking even before your content does. The colors you use, the fonts you select, the images you showcase, and even the layout you choose all communicate something to the reader.
Design should reinforce the personality of your blog or help convey what your blog is about. A powerful image in your header can communicate emotion or a single design element can give readers a clearer picture of your blog's message. Even text can make a bold statement, serving as a graphical element to attract a reader's eye.
On my blog Momcomm (www.momcomm.com), I write about blogging and social media. I want my blog to be perceived as fun and approachable as well as communicate that this blog makes even complex topics easy to understand. As you can see in Figure 1-1, my blog design features a smiley face in the header and a prominent Welcome! in the sidebar to make readers feel welcome. In addition, I use plenty of formatting in my blog posts to make them easy to follow.
In addition, the placement of certain blog elements within your design can communicate what you want a reader to do. For example, an e-mail subscription's prominent location at the top of the page communicates its importance.
In Chapter 3, I talk a lot about how to showcase your voice, determine your tone, and more to help build a strong, purposeful design.
Orienting users with navigation design
When people think about blog design, they usually think of colors, fonts, and images first. But design also includes navigation design, which is design centered around how visitors move through your blog.
Your navigation design should always be focused around helping blog visitors find their way around your site in the simplest, most logical way possible. Part III of this book is entirely devoted to making your blog easy to navigate and to use.
However, navigation design can also mean offering your readers little (or big) surprises that go above and beyond the basics. For example, the blog From Away (www.fromaway.com) focuses on cooking and eating in Maine, with a page called Our Favorite Places in Portland (www.fromaway.com/ our-favorites) that covers Portland's best breakfast sandwiches, pizzas, lobster rolls, and more.
In Figure 1-2, you can see the breakfast sandwich section, where a visitor can navigate to each restaurant's website, see a map of those restaurants, and click a link to go to reviews of those sandwiches. Plus, each sandwich is clearly numbered and represented by a close-up image. The result is a useful tool that readers will return to when they want to eat in Portland. An image toward the bottom of their homepage calls attention to the page, and it's also linked from their main navigation menu.
After you get the basics out of the way on your own blog's navigation design, consider ways you can add bonuses like this to get readers deeper into your content or other useful content elsewhere.
Discovering How Readers Visually Travel Your Blog
Humans may be diverse and dynamic, but we typically surf through web pages in a similar way. Images, color, and fonts attract attention, serving as little marks on a road map that pull you through a website's or blog's design. This section covers a couple of ways to recognize how blog visitors typically behave when they land on a blog.
Exploring how visitors click through websites
Just as humans are diverse, we're also creatures of habit. We do things in similar ways and feel more comfortable when things are a certain way and in a certain order. Certain web and blog designs work because they follow the way most people work through websites.
Many studies show that visitors spend more time looking at the left side of a web page than the right. In fact, one study from Nielsen Norman Group (www.nngroup.com/articles/horizontal-attention-leans-left/) showed that web users spent 69 percent of their viewing time looking at the left half of a page — and because (in this Western culture) we read from left to right, this makes sense. Due to this convention, you probably notice that many blog designs have a header and navigation menu at the top, a main column of content on the left, and a sidebar on the right.
Many well-designed blogs use other layout types successfully (see Chapter 7 for some examples) by using attention-grabbing design elements to pull readers to other parts of the blog design.
In addition, website visitors spend about 80 percent of their time on the part of a web page that's above the fold (what's viewable on a page before the visitor has to scroll down), according to another study from Nielsen Norman Group (www.nngroup.com/articles/scrolling-and-attention/).
Although you can stick with conventions like these to help with your blog design, the web's ever-changing nature means that conventions can change over time. The only sure-fire way to see how visitors behave on your own blog is to track mouse clicks. You can track mouse clicks using heat maps. A heat map is a visual representation of website traffic that uses color-spot intensity to show how readers click through a website.
For example, I tracked my blog's clicks for a period of time to see what results I'd get. With a color spectrum where blue means fewer clicks and red means more clicks, I noticed that my About page tab on the top left of the page and my Twitter icon in my sidebar got the strongest amount of clicks (see Figure 1-3). In addition, some of my navigation tabs — Online Course & E-book, Page Critiques, and Find a Designer — were clicked more often than my Advertising and Contact tabs, as denoted by the green spots on those tabs.
If you want to try out heat mapping to see how your blog design performs, you can try
[check] Crazy Egg: www.crazyegg.com
[check] Clicky: www.clicky.com
[check] Mouseflow: http://mouseflow.com
[check] ClickTale: www.clicktale.com
All the preceding websites except Crazy Egg offer a limited, free plan as well as pay versions. With mouse tracking services like these, you can see exactly where visitors click, even when they click an area that isn't clickable — meaning that you could discover people are clicking a design element that isn't linking to anywhere but should be.
Recognizing that people are skimmers
Come on, admit it. You skim, too! Think about all the content out there to consume: blogs, news sites, social media sites, and so on. With so much to read, you can easily get overwhelmed. In fact, I know you won't read this entire book word for word. But don't worry — I'm not offended!
People skim through blogs because time is limited, they're searching for something specific, or both. It doesn't mean they don't like your content (although they may skim to get a feel for your blog). It does mean, though, that you have to account for the fact people skim when you work on your blog design.
The goal in designing with skimmers in mind isn't necessarily to make people change their skimming ways but rather to account for the fact that some people just have time to skim and to also acknowledge that others you may convince to stop and take action.
In your actual blog post, consider adding subheadings that stand out from your main text. For visitors who are skimming, subheadings give them your key points. If something catches their eye, they might stop to read your entire post.
In your sidebar, think about using a pop of color on your e-mail signup form that gets the reader to stop and take action. Purposeful design like this might entice a visitor to stop and sign up for your newsletter.
Using Design Elements That Complement Your Message
You started your blog for a reason. Maybe you have funny stories about life to tell or helpful tips to share. Maybe you have a passion for inspiring others or encouraging people to do something. Every blogger has a message to share. Good blog design reinforces that message.
Communicating your brand through design
Good branding is the reason you know you get an amazing quality if you buy your favorite name-brand product. Branding is also the reason you first think safety or luxury when someone says a car manufacturer's name, rather than just thinking car manufacturer.
Even if you never really thought about what your brand is, you still have one. Your brand is how people perceive your blog. Blogs with strong brands make emotional connections with their readers and are consistent both in their design and their voice, even if they blog about many different topics.
Your blog readers probably don't think that much about the ins and outs of your blog's brand, but branding works for that very reason. Good branding makes you devoted to a product, an evangelist for a service, or a fan of a blog, mostly for reasons people don't think too hard about. It's that emotional connection and that consistency that keeps them coming back.
If you're unsure just what your brand is or should be, just ask yourself this: What do I want my blog to be known for? Then list a few things that come to mind. Your design should support the things you jot down.
Colors, fonts, and images are obvious ways to infuse a brand into your blog design, but branding extends into the way you format your posts, too. For example, if you write quick-witted, punchy blog posts, your paragraphs should be short and punchy as well.
To what extent you (yes, you!) become part of your blog's brand depends on your blog's goals. For example, Brittany Van der Linden's lifestyle blog That's Vandy (www.thatsvandy.com), shown in Figure 1-4, is a play off her last name. Because her blog is about making life awesome "the Vandy way," her blog's header design signifies her as part of the brand. A pink circle around her headshot makes the connection that Vandy relates to her, while the bold blue tagline unmistakably lets readers know what to expect from her blog.
Acknowledging the importance of images
The usage of imagery can make or break any blog design. Great images command attention, and poor quality images lessen an image's ability to make a positive impression. In fact, images are so crucial to a blog's design that I devote all of Chapter 15 to using images in your blog. When using images for your blog design, use those that help tell your story or support your blog's message.
The header design from the Pile O' Fabric (www.pileofabric.com) blog rotates close-up images of fabric (see Figure 1-5). These colorful images make a vibrant impact to reinforce what the blog is about.
Applying enough formatting
Formatting often gets overlooked when it comes to blog design. I mean, colors and fonts are way more fun, right? But formatting your content in a way that's easily readable can be the difference between someone actually reading or sharing your blog post or page and someone just hitting their browser's back button, never to return.
Even if you aren't a designer, keep in mind that even text should be visually appealing. If you're writing a tutorial to make something easy to understand, your tutorial layout should be easy to follow with clearly marked steps and possibly images to support certain steps.
Think about it. What's easier to read: long paragraphs that say "First you do this. Next you do this." Or a numbered list of steps? Of course, the clear list of steps is a better way because that makes each step distinct and easy to follow along. Otherwise, your readers may get lost in the instructions.
In Chapter 16, I get into ways that you can make your content easy to digest, from using lists to including subheadings.
Creating a Great-Looking Blog (When You Aren't a Designer)
Good designers don't slap a design together. They think critically about each element that goes into the complete design, from the overall layout down to the colors.
This book isn't meant to make you a full-fledged blog design expert, but you don't have to be a design expert to whip up a nice-looking blog. Sure, you might want to know how to do this and that. The more you learn, though, the more you can add to your blog design over time, whether you're enhancing the design or the functionality. These next sections cover a few key tips that I want to stick into your mind like superglue as you go through the rest of this book.
Striving for simplicity
What's the sure sign of amateur designers? Overkill. Too many colors, too many fonts, too many different-sized thingamabobbers. Confident designers know that a blog design with minimal design elements can make a big statement.
Excerpted from Blog Design For Dummies by Melissa Culbertson. Copyright © 2013 John Wiley & Sons, Ltd. Excerpted by permission of John Wiley & Sons.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.