When it comes to blogging, it’s not entirely about what you publish.
When a new visitors lands on your blog, you have to catch their attention. Otherwise you might have hard time getting them to scroll down and read.
Reviewz ‘N’ Tips is up and running since more than three years now and I went through a lot of design changes throughout that time…
The next few paragraphs consist of five blog design tips that will walk you through some of the most important design components I added to my blog over time, why you should also consider them and why they matter:
A Move Towards Simplicity
As months passed, a couple of changes took place:
- Text background - Back then I used grey. I didn’t think it was bad until I got a couple of complaints. The reality is that on different monitors colors appear differently. Therefore white is the best choice.
- Blog background – I guess some remember the wood-like background texture I used. Truth be told it was kind of amateurish. All in all solid color is what you’d like to have if you want to be taken seriously.
- The sidebar - Mine was green. Green is one of my theme colors and I wanted to show that. However visibility proved a problem once again. Changing to a white-like color resulted in more clicks and was the next step towards a less amateurish design.
I guess you’ve got the main idea. Flashy is simply not the trend anymore. Contrast between letters and text background is always to be taken into consideration. The background color should not be too imposing as well. Everything should “point” to the actual content.
Header Text with a Clear Message
If people aren’t familiar with your blog, the first thing you need to tell them when they land is what to expect. Having a description of some sort within your header can greatly help with the task.
A well-designed logo is a must, but that alone is rarely descriptive enough…
You probably noticed what my header message states:
“Make a head start in blogging and social media”
The three keywords here are:
- Short – Ten words at most.
- Descriptive – Straight to the point, no fluff, no hidden messages.
- Eye-catching – Many use simple Arial text. It might work, but adding some design touches makes it stand out.
About the Author Widget
Creating a simple “About the author” widget is one of the design elements I believe are crucial for every blog in terms of authenticity.
The concept is self-explanatory and you can see it in action on the left, in the sidebar.
The ingredients are:
- A photo of yourself – Visual information is perceived faster than text. Seeing your face, people will instantly identify you with your blog.
- Actual text and a link – It’s good to supplement the photo with a brief bio. Thirty to forty words will do. At the end place a link pointing to your About page for those, who want to learn more about you (more people than you think do, trust me).
- Social proof and buttons – in my case I have included a Twitter follow button, which also shows the number of followers I have. It is a way to build credibility. I have also placed a LinkedIn and a Google plus button. That way people can see who I am, learn more about me and subscribe – all from one place.
Sharing Buttons on Key Locations
Taking a look at my Twitter mentions, reveals that most of the retweeting on my posts is done from within Twitter. It’s simple to notice, since links, shared from my blog use the t.co shortener and most retweets I receive are shortenend with bit.ly. Can’t tell for Google plus or Facebook, but the trend is probably similar.
What I want to say is that sharing buttons are not as widely used as people think they are. So to get the most out of them, you need to make them obvious.
To do that, I’ve added social buttons:
- Below the title of each blog post
- At the end of each blog post
- Via a fixed sharebar that scrolls with the viewer
I have basically covered all possible positions. Less is more doesn’t apply here. The more you have, the better the chance for someone taking action.
Some Neat CSS3 Effects Here and There
I know, I know. I said that simplicity is what you should be striving to achieve. A bit of eye-candy, if done right, is never a bad thing though. And after all a couple of well-made visual effects can still result in simple yet neat design job.
As you might have probably noticed, throughout the last couple of weeks I’ve been experimenting with shadows and gradients (would really appreciate to hear your opinion by the way!) and I am happy with the overall result.
If you don’t have the knowledge to create those yourself here are two useful tools to help you:
- CSS3 Gradient Generator - You can add as much swatches as you like so with a bit of tweaking you all kinds of gradients are possible. Don’t forget to include the “background” property with a solid color in your CSS for browsers that don’t recognise gradients!
- CSS3 Box Shadow Generator - That’s the tool for you if you need shadows. Use the sliders and look at the preview to get the desired result. Then simply copy and paste the code to your CSS file.
All in all when it comes to creating a good design, it is all about being able to present the right visual information at the right place, while keeping your blog posts the focal point. Now on to you! Does design matter in your opinion? What is the first thing to catch your attention when you land on a new blog? Let me know what you think!