In this post, 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 we 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.
In above image, these two header layouts show how balance can work in design. The layout on the top creates balance with a symmetrical design. On the bottom, the layout shifts the diamond to the left but
provides balance with a large block of text beside the diamond.
If you’re considering adding a functional element to your blog design, such as a special button or grouping of links, consider these questions:
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 restaurantat 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.
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.
Communicate with your blog's 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.
As you can see in the above image, the blog's design features a smiley face in the header and a prominent Welcome! in the sidebar to make readers feel welcome. In addition, it use plenty of formatting in the blog posts to make them easy to follow.
As you can see in the above image, the blog's design features a smiley face in the header and a prominent Welcome! in the sidebar to make readers feel welcome. In addition, it use plenty of formatting in the blog posts to make them easy to follow.
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.
However, navigation design can also mean offering your readers little (or big) surprises that go above and beyond the basics. For example, From Away focuses on cooking and eating in Maine, with a page called Our Favorite Places in Portland that covers Portland’s best breakfast sandwiches, pizzas, lobster rolls, and more.
In image, 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.
Your navigation design should always be focused around helping blog visitors find their way around your site in the simplest, most logical way possible.
However, navigation design can also mean offering your readers little (or big) surprises that go above and beyond the basics. For example, From Away focuses on cooking and eating in Maine, with a page called Our Favorite Places in Portland that covers Portland’s best breakfast sandwiches, pizzas, lobster rolls, and more.
In image, 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.
Discovering How Readers Visually Travel Your Blog
Here are a couple of ways to recognize how blog visitors typically behave when they land on a blog.
Exploring Click-through
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 showed that web users spent 69 percent of their viewing time looking at the left half of a page — and because 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.
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 NormanGroup .
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.
If you want to try out heat mapping to see how your blog design performs, you can try :
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 NormanGroup .
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.
If you want to try out heat mapping to see how your blog design performs, you can try :
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 post word for word. But don’t worry — I’m not offended!
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.
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.
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.
Use Design Elements That Complement Your Message
You started your blog for a reason. 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.
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.
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, shown in image, 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.
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.
The header design from the Pile O’ Fabric blog rotates close-up images of fabric. These colorful images make a vibrant impact to reinforce what the blog is about.
Applying 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.
Creating a Great-Looking Blog
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.
Strive for Simplicity
What’s the sure sign of amateur designers? Overkill. Too many colors, too manyfonts, too many different sized elements. Confident designers know that a blog design with minimal design elements can make a big statement.
The blog In Jennie’s Kitchen presents a perfect example of a simple, clean, and effective blog design.
The blog header uses only a warm, neutral color with a small blue line under her blog name. The small blog header size allows more of the photo from the most recent blog post to show, drawing your attention down into the content.
Building an intuitive blog
When you turn a doorknob, you instinctively know to turn it to the right. Because of this, you might be a little confused if you tried to open a door with a doorknob that turned to the left. Intuitive design means that your blog works in a way that most people expect it to, much like that doorknob.
Keeping Design balanced
Is your blog header really “heavy” with design elements or text on one side but sparse on the other? Balance helps tie elements together so the design is more evenly weighted. The two types of balance are symmetrical and asymmetrical.
You see asymmetrical blog designs more often than symmetrical, but both work when done well.In above image, these two header layouts show how balance can work in design. The layout on the top creates balance with a symmetrical design. On the bottom, the layout shifts the diamond to the left but
provides balance with a large block of text beside the diamond.
Stay Away from Clutter
One goal of good blog design is to draw attention to important parts of your blog, whether you want readers to notice an e-mail signup box or just your actual blog post. Think of clutter as attention’s arch-nemesis. Too much clutter scatters your reader’s attention all over the place; so, not only can that reader not home in on something, but he also has a harder time finding something he is looking for. And because most blog readers are skimmers, there’s only so much attention to go around.
The solution? Be ruthless in limiting what to add to your blog design. Good designers know that each element needs a purpose. You need a filter for what to include and what to remove. To help you filter, ask yourself these questions before adding new things to your blog design:
- Does this design element solve a problem, like add balance to your design?
- Are you adding a design element just to fill up space?
- Does your overall design maintain a focal point when you add a new design element?
If you’re considering adding a functional element to your blog design, such as a special button or grouping of links, consider these questions:
- How does this element fit into the purpose of my blog?
- Does this element support one of my blog goals?
- Is there a more effective place for this?
This is it for this post check out next for more on blogging :) .
Post a Comment