Give it some awesome.
Guest Post by Dustin Stout.
Often times one of the most overwhelming aspects of building a business blog is design. Web design in general can be an intimidating, confusing, frustrating, and expensive part of building online success, especially when you know how relatively easy the other parts of building a successful corporate blog can be in comparison!
Well, here is some more bad news (if you can take it): You have about 5 seconds at most to make a visual impression on a visitor before they decide if your site is credible and worth their time. The good news is that you can communicate credibility and value by following my 5 simple keys!
One big thing that you should keep in mind when implementing the following keys is simplicity. The most successful business blogs out there incorporate the following keys, and they do it with simplicity (well, most of them anyways).
The five keys I’ll be covering are:
- Colors
- Content Focus
- White Space
- Typography
- Social Prominence
Lets jump right into it!
1. Colors
The dominant colors of your business blog will set the tone for a visitor within their first 5 seconds on your site. You don’t want to screw this up. When a visitor lands on your homepage, you want them to have the right impression and emotional response immediately. While staying true to your brand’s identity, it is helpful to keep the following in mind in regards to what colors communicate:
- red – increases the heart rate; draws attention
- orange – communicates youthfulness and action
- yellow – increases energy and inspires cheerfulness
- green – easiest color for the eye to process; encourages relaxation and growth
- blue – associated with trustworthiness and authority
- black – elegance, style, strength
- white – balance, cleanliness, and purity
Always be sure that there is enough contrast between the background color and the color of your text. This would seem like a no-brainer, but I’ve seen far too many people make the mistake of making their text nearly blend into the background.
2. Content Focus
You want your content to be the visual focus of your blog. The purpose is to display value and authority through your content. Therefore, make sure that the majority of your screen space is dedicated to just that– your content!
Sidebars, menus, footers, banners, logos– all secondary to your content. To make sure of this, take a screen shot of your blog and divide it up into sections. Out of the 100% of screen space that you can see in a single screen shot, what percentage of that space is dedicated only to content? Here’s an example:
As you can see from the image above my content takes up the majority of my screen real estate. This is what I would encourage you to do with your business blog. Don’t let anything even come close to visually overpowering your content. Period.
3. White Space
Clutter communicates chaos. Chaos is not good for business. Unless your in league with that shady Joker character from the Batman movie. In which case you’ll probably want lots and lots of explosions to happen when people read your blog, and since I’m not an expert in Flash animation, I can’t help you. However if you are not into the whole chaos thing, white space is your best friend!
Give your content and your readers room to breathe (so to speak). Our eyes need room to visually “breathe” in order to process all that they are taking in. If everything is small, cramped and cluttered, then the brain has trouble taking it all in. When things are nicely spaced out with some empty space surrounding the main objects of focus, we can process things better with more enjoyment.
The space doesn’t have to be white, any color will do, as long as its just plain color with nothing to focus on or be distracted by. The space surrounding your content should be the most down-played color within your color scheme. Your readers will thank you– if not verbally, then with their ongoing return visits.
4. Typography
Typography refers to the type or fonts that you use throughout your site. Most people just stick to the defaults, and that is just fine. However if you want to optimise your typography, it can make a world of difference for a user’s experience and really take the wow-factor of your site up a notch.
A good place to find fonts is from our good friends over at Google Webfonts. They’ve made hundreds of high-quality fonts available to the digital public for free. Don’t get carried away with this though. It’s best to stick with 2 fonts. Not too fancy, not too ordinary, and for the love of God stay away from Comic Sans or Papyrus.
Here are the two types of text to consider using unique fonts for:
- Titles, headings, and sub-headings. This should be the more bold of the 2 fonts. Could be a script or a display font, but not too fancy that it becomes difficult to read.
- Paragraph text font. Something simple and easy to read. And when I say easy to read, I mean super-duper easy to read.
One extra mile you might go is one that most bloggers wont– that is to take the time to optimize the size of your fonts. Without taking your through an entire lesson on readability and comprehension philosophy here’s what it boils down to: You want your content to read like a book. Meaning if someone holds up an average book to their computer screen and compares the size of the fonts, they should be pretty similar in size.
Practically, this translates to 60-75 characters per line of text. This way, each line is not too long, making it difficult to keep track of where you are when you start a new line. Also, the lines aren’t too short, forcing the eyes to have to reset too often, making it very annoying.
5. Social Prominence
One thing that kills me when visiting a corporate blog is when I feel like I’m spending more time trying to figure out how to share something I’m reading than actually reading. Or even worse, I have to dig to find links to their social media profiles. There is no better way to kill your corporate blogs growth potential than to make social sharing difficult or cumbersome.
Make sure that you include an easy and seamless way for readers to share your content. Make it prominent, make it obvious, and make sure it’s not in the way. Confused yet? How about a perfect example? Boom, you got one directly to the left of this post. You see that beautiful social share bar? Get one for your site. Non-negotiable.
If you have an awesome blogging theme like Standard Theme , it comes built in and you don’t even have to do anything but activate it in the settings menu. However if you don’t have a theme that already comes with one built in, the best one on the market is the “Digg Digg” plugin (owned by the nice folks over at Buffer). It’s simple, easy to use, non-intrusive, and will follow your readers down the page as they read, making it obvious, simple and seamless to share your content across the interwebs.
And that about sums it all up! All of these are just to get you pointed in the right direction. Don’t be intimidated by them, but take them into consideration one bite at a time. It will surely pay off in the end! If you understand the these 4 keys to making your business blog visually appealing, you will have more success, less stress, and be a step ahead of all the rest when it comes to starting a profitable business blog.
Do you have any questions about any of these keys to visual awesomeness?
[This is part of the Building a Killer Business and Corporate Blog Series. Guest Post by one of our Community Leaders, Dustin who actually runs a web design shop where he can help you out in this area of need!
John, I totally agree. And for my business I knew what I wanted it to look like but didn’t have the ability to make the code happen. Tom More (@TomMcFarlin) did a great job implementing my design.
Tom is a whole lot of awesome!
Enjoyed the post, Dustin. I noticed that with the resolution on newer computer screens getting tighter, I needed to increase the content font size so it’s easier to read. I mean a 12px font looked bigger on lower res screens a few years ago. I am using 16px now. Thanks Again!
I know exactly what you mean Greg! I’m still waiting to test out the new iPad retina display to see how it translates my blog’s font sizes. Screen resolutions cant get much higher than RETINA… Or can they?
Great post, Dustin. I’ve got some work to do.
Thanks Charles! Let me know if I can help in any way!
Love the post Dustin!
I’ve been wanting to add color to my blog but have been struggling with which colors to use. I think I’ve decided on the colors thanks to this post and now have to figure out if they will mesh well and how to implement them into a color scheme.
Awesome Joe! You’ve done a great job so far, let me know if I can help!
This is something that has been on my mind. I’ve been focusing on cranking content, but know that my design is lacking. Waiting for Standard Theme 3.0 to before I do too much custom work.
You’ve got your priorities right Brent! Content should always come first! I’m on pins & needles waiting for ST3.0 to be released as well! I’m currently testing the preview on a dummy site, but I know the final version is going to be even better!
Thanks for the tips Dustin, I never thought much about the color on my blog. But I am now!
Well I’m glad I could offer a new perspective Chris! I’d love to see what you come up with!
Thanks for the tips Dustin!
I think social prominence is one of my weak points. Sure I can throw a social sharing totem pole to the left, but I still really don’t know which ones are the best except the obvious, like Twitter and Facebook.
I am trying to work on my social skills which includes using Twitter, and I know there are other social groups that are popular to the masses, but I just don’t know that much about them.
Would be interesting to see a percentage of popularity for each social sharing site.
Would also like to know what is more preferred, the content on the right of the side bar or on the left.
You’re welcome Bloggoround! Can I call you Bloggo for short?
Seeing that your site (very cool btw) already has 2/3 of the biggest sharing sites incorporated to your social sharer, I’d say all you have to do is add a Google +1 button and you’re set. Those 3 sites are where most of the action is happening. If you want to get really fancy, you could always activate the StumbleUpon and ShareThis buttons like John (and myself) incorporate to the right.
It really comes down to your audience though. Where does your audience hang out most? That’s the question you should be asking, then deciding which sharer icons get the most prominence.
As far as sidebar goes, right sidebar seems to be the newest trend, whereas left sidebar is reminiscent of early web design when the navigation was always on the left for every single website that existed.
I enjoyed this post. I especially appreciated the characters per line guideline. I may have to adjust mine.
I agree too about the importance of design. When I visit a site, the design influences my attitude toward the site and it’s content.
Awesome Randy! Glad you liked it, and I’d love to know the typography settings you land on!
I made some adjustments: I narrowed my content block from 700px to 620px and switched from Georgia 15px to Helvetica 16px. After that, my character counts has gone from just over 100 to just over 80.
Since reading this post, I’ve been paying more attention to characters per line and am noticing that I much prefer few characters per line.
Thanks again!
Great job so far!
Typography can be a killer if you are not a designer. I have found a few resources, but I think I still fall for choosing a font I like over something readable. It is hard to know what fonts do go together or don’t.
I was the same way at first Susan! I would always want to go with something super elegant looking but was completely distracting and taking away from the readability. It takes some time to build up a little self-control since there’s just so darn many awesome fonts out there!
a very few blogs use text alignment as ‘justify’. What’s harm in using it
Thanks for the tips! They were very timely, because I’m going through a blog redesign myself and was feeling a little lost. Tip #4 is especially appreciated!
Great post Dustin! I have been thinking about the that very thing for my blog. I really want to get a different theme, but I haven’t found one that I like. I am with WordPress. Com, so it is hard to find some free themes. On regular WordPress ss, I have found many!
What do you think about the color scheme on my blog? Should I go with a whiter theme?
Keep it as simple as possible. 2-4 colors MAX and make the content the focus. Anything that is fancier than the content distracts from it.
Awesome stuff as always! I will need to go through my blog when I get home next week and use this as a guide
Well if I remember correctly, you own some of my time for this exact purpose!
I do…and I have the hosting chilling out waiting for just the right time to unleash your talents and my content on the blogoshpere. Or is it that I can’t find the time to get together to make this happen…LOL. Well…my Disney days are on Hiatis till the summer opening of CarsLand and Cliques will end soon so I see a light at the end of the tunnel and this time it’s not a train.
Great post Dustn (Dang I always spelled your name without “i” haha)
I haven’t thought of what to place on my header yet.. but thanks to your post.. gave me some thoughts on how to improve it
Great post Dustn (Dang I always spelled your name without “i” haha)
I haven’t thought of what to place on my header yet.. but thanks to your post.. gave me some thoughts on how to improve it
Glad I could help Valerie! And don’t worry about the “I” because it’s not about “I”, but Christ in me anyways.
Hi Dustin, great article! This is just the blueprint I was looking for in redesigning my blog. You answered a lot of questions I’ve had but have been unable to find the answers to elsewhere.
Font, color, spacing are very important but knowing what works was too much trial and error for me so I gave up for a while. With your excellent guidance, I will get back to it.
My only disagreement with your post is Digg Digg. I am reading this on an iPhone and came from your site where Digg Digg was blocking the text. I wish Digg Digg had an option for a right side placement for the sharing bar.
Speaking of sharing, I’m off to share this with others.
Thanks for the feedback Carolyn! I’m glad my post was a timely help for you!
I get what you’re saying about Digg Digg. However the one on my blog isn’t actually Digg Digg. It just happens to look like it. I modified mine to follow the edge of the screen on purpose– otherwise it would be hidden altogether. I have yet to find an all-around better solution. Do you have a sharing plugin that you prefer?
Great post, Dustin!
I had to figure most of this out by trying and experimenting. Wish I had had this list 10 months ago haha