Each year brings us new trends be it fashion, films, web design of blogging. I am not a professional designer or anything – just a curious student of life who spends hours looking at great blog designs and taking notes of what pleases me about it.
I do have quite a stack of notes on design, and for the longest time have I been itching to put most of those notes into a fully developed article. I have quite a bit to say, so I hope you enjoy my guide to creating a memorable blog design.
First things first: It all comes down to User Experience
UX or User Experience is the need of the hours. Blogussion is a blog about blogging and there are thousands of others who are in the same exact niche. Some may be even better. But why in the world am I stuck here? – It’s experience.
Design is not just about having a fancy pants website – it’s about creating a well crafted user experience.
What Can You Do?
UX is too broad a topic to be covered in just a single post. In fact, it needs a blog of it’s own. But here is my all time favourite tip: Talk to your readers (or scan your site analytic data) to find out what users are looking for and make it easier for them to find it. Create bridges, not barriers.
Some Sites with Awesome UX
Mobile Browsing on the uprise
As smart phones are growing ever more popular, it is important for us to get our blogs ready for a mobile audience. How well does your blog perform on a screen as small as that of an iPhone or a BlackBerry?
Your blog is accessible from just about any phone made within the last couple of years. Mobile internet browsing is rising, and with new devices such as Apple’s iPad possibly developing even more mobile trends – you have a lot to think about when it comes to your mobile audience.
What Can You Do?
It doesn’t hurt to prepare early. The best thing you can do for your blog and your mobile audience now is to try to create a separate design that will be loaded only for your mobile users.
The reason why you would want to do that is because a blog design that was made on your 20″ iMac will not look so hot on your 4″ iPhone. If you use WordPress, you should look into either WP Mobile Edition or WP Touch, which will create great looking mobile themes for your blog without any effort on your part.
Great Mobile Sites
The Grid Sandwich
Gird based design continue to rise. Now, if you are wise and are using the Thesis theme for WordPress, chances are your site is already working on a grid and you don’t have to worry too much (unless you have done some major customizing and messed it all up).
But for the rest of best – consider taking the time to set your blog up on a grid system.
If you are using free themes, take a screen shot and work on changes in CSS. Don’t lose sight of your goal – clear visual hierarchy is what we are trying to achieve with girds and ease of visual flow of design elements follow.
Good uses of grid systems
Bold Typeface
Another reason to be fan of Alex, it’s like he knew what was coming, is because of the bold typefaces he has throughout a lot of his work. Bold typeface creates emphasis, and you want to put that emphasis into the area of your design that is the most important: your blog headlines.
Overusing this technique (as in making every text area on your blog bold) can create a lot of confusion and some pretty ugly typography. That is why, again, we save bold for the more important areas of the blog – the logo, and the main headlines.
What Can You Do?
Go edit your CSS files and use combinations of font sizes, bold and non-bold typefaces to create a clear visual hierarchy.
Sites Using Bold Typefaces effectively
White Space
We love the sound of it! As a student of Buddhism and particularly Zen, I know how important it is for mind. Look at the text on your blog – that’s mind. Now look at the empty space with single colour – that’s pure mind! Err… white space. White space is like breathe of fresh air and is just freaking awesome.
What Can You Do?
Give your design some space! Honestly, I wouldn’t recommend you getting your hands dirty on this one unless you know what you’re doing. Believe it or not, simple themes that rely more on white space than anything else can often be very complicated to create (if you’re doing it the right way).
Sites with Breath of Fresh Air (White Space)
- Zen Habits
- Design View ( Parental Warning: Contains Awesome Design Lessons)
- Google Well…
Return of the Colours
As if they ever really went anywhere, right? Why not try to mix things up a bit and use different color schemes in your design? I’m not saying you should go out and design to match the rainbow – but pick colors people wouldn’t normally expect.
Just take Blogussion for example. Did you know that, from a marketing standpoint, Blogussion has the absolute worst colours in its design? Black, gray and red. These are actually quite depressing colours, and when combined – pretty terrible for branding. Yet, the design was so well received by the community that it went up for sale, and is a design loved by many.
It doesn’t hurt to try and do something different, because you may just come out with something that is truly remarkable.
What Can You Do?
Take a look at the colour scheme of your blog and decide if it has an overused color scheme, or if it is something that can stand out amongst others. If you don’t see anything amazing, why not try and find something a little more different and unique?
Colourful Sites
The ‘Simplify’ Jinx
The simplify jinx has hit many sites – including Mashable. There is a difference between ugly and simple. So get it right.
If you’ve noticed, even Google has simpler home page. Well, until you start digging deeper and notice how cluttered some of their other pages are.
What Can You Do?
Write down five things that you want your users to see on your site that you think they will value the most. Don’t be greedy – five. Now, go to your site. Keep those five things in front, above the fold (the area of your site that is visible before any scrolling is required).
Sites with Simple & Effective Design
Pleasure of “Use Me”
Does your site say “read me,” “watch me” or “explore me?” The basic underlying principle is – “use me”. And here is my promise: I will not use your site if it doesn’t pleases me to use it.
Let me explain. If your site takes ages to load after I click a link, if you keep stuffing ads in every corner, if you have annoying sign-up forms then I am not returning. No matter who you are (better be careful Mashable, I’m talking to you).
What Can You Do?
Remove distractions, annoying pop-ups and screen blockers; optimize your site so it is as fast as possible. Getting a better web host can is a good idea if your blog loads slow on a regular basis.
Think in terms of users: If I like your site. I will look for your newsletter, your products, and your affiliate links. Your responsibility is not blind me with obtrusive ads about them. Just make sure that when I am looking, I find it in an obvious place.
If you are good enough and don’t have a newsletter – I will ask you to start one. But never will I – the loyal, paying, filthy rich, advocate reader- respond to your interference with my decision and style to surf a site.
Tip: Align your design to match your users actions, and no one else. Remember, they are a “user” and if they can’t use it – you will be a loser!
Sites That’ll Please You
Shakespeare of JavaScript
This is the magic word that scares many people off into the bushes! With so many excellent JavaScript/jQuery resources available, it’s almost a crime not to use them in your design.
There are so many different kinds of scripts out there that can simplify content. Sliders, rotators, random generators – take your pick.
What Can You Do?
Ask yourself a question: Is that JavaScripct you are using bringing peace to your user? No? Throw it away! Can you create more peace using JavaScript? Use it. Create peace, not war. We’ve had enough of war – so don’t fight your user.
Tip: Test for graceful degradation of JavaScript on multiple browser. It again depends on your end-user. Most people keep JavaScript active anyways, so this shouldn’t be much of a worry on your end.
Effective Usage of JavaScript
- TeuxDeux Sign-up and use it to experience awesomeness.
- Facebook Comments
- WordPress Backend
The New Web Standards
CSS 3 & HTML 5
Why does this always happen? Every time we have new technology, we use it for the fun of it. And later we always decide to use if necessary. Go out – every one is using text-shadows and rounded corners even when they don’t need it. CSS3 is to save us – not to stuff us.
Do you really need that text shadow on title of every blog post? Why not keep it for some rare cases where you want to drive attention to a link or something?
Again, don’t depend of CSS3 or HTML 5 to serve your site in usable format. IE is still behind in the race of technology as usual and still ahead in race of market share – and it doesn’t support CSS3.
@font-face
It is the latest buzz. This new technology will bring us more fonts to play with. But use it with caution – not all browsers will embrace it. Cufon is still the best text-replacement and if you are a WordPress user – they have a plug-in for you.
Tip: Use JavaScript to render HTML 5 and CSS3 correctly in older browsers.
Some more Tips for Bloggers:
- If you haven’t already – learn the basics of HTML and CSS. It will serve you well.
- Use design to express not to impress – people who get impressed by those who want to impress have short attention span and are no use for us bloggers.
- Once in a week, write an awesome post and design it with heart – taking inspiration from Print Design.
- Social Media: Make it easier for people to talk about you. Can they update their status about you from your site? Can they leave a comment, invite their friends or email the article? How easy and obvious is it for them to use?
Selfless Shame Promotion (Self Invented Pun)
As I said, I am not a pro designer but I know a thing or two about it. So if you are a regular reader of Blogussion (I’d know if you lie) you can have my eyes look into your site and give you some free advice on improvements. It’s just free advice.
Here is what you have to do:
- Just one thing you have to do – join Blogussion’s fan page on facebook (if you are not already there). You can even post links to your articles on our wall!
- And ask for advice in your comment. You can be impolite for a change.
What’s your favorite design tip?
I shared with you mine, now I am interested in what your best blog design tips are. How could you improve my very long list?
The Discussion
Leave a Comment Read Again?I appreciate that you provided lists of examples of sites that demonstrate each of your points. I agree that it is very important to ask your readers what they’re looking for.
.-= Julius´s last blog ..A Day Through The Eyes of a Blind Woman: Part 3 =-.
Thanks for appreciation Julius. Yes it is indeed very important to ask them, because the site is for them – not for us.
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
Wow, what an amazing post King!
I think you covered just about everything, awesome post! Was also very helpful to me as I’m in the process of designing my new site, so thanks!
.-= Simon | Teenius´s last blog ..How Much Do You Believe In Yourself? =-.
Let me know if you need a desigenr’s eyes to have a look on the new site …LOL just kiding, but do lemme know if you need any help. Looking forward to see what you come out with – it’s always so interesting to listen and see your ideas.
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
I love graphic designing but I’m far from this level! Hahaha. Can I just say… comprehensive and impressive King? I think I’ll just stick to pure graphic designing though. Involving coding would make my head crack. I’m not very fond of fixing bugs and code errors especially.
let’s just leave those things to people like you and Alex
Hey Liane,
I don’t agree – you are so damn near this level. Talk about the new poster you launched. Thanks for the awesome and appreciative words …comprehensive and impressive Love em!
It isn’t that hard, in fact, it is fun. Fixing bug is not that much fun but when you discover 10 different ways to do same things and test them and all – it’s so much fun! But yes it’s a choice too.
Oh My! Alex is someone I look up to. LOL That last line was such an ego booster
Rock on, and do share your tips.
.-= King Sidharth´s last blog ..19 Awesome Places Where You Can Meditate =-.
To tell you the truth, Blogussion is still on the top list of my best looking blogs I’m currently reading right now. This site is so structured, complete with the summary at each end of the post. Just WOW!
Hey, King, I don’t really get the “grid sandwich design”…can you explain it a bit more to this mere mortal? ^-^ Nice post, btw.
.-= Andi | WebMarketerDepot´s last blog ..Is There Money in Making Your Own Web Show? =-.
I agree man, it is just Wow I mean I can’t think of any improvement but still Alex manages to improve it somehow.
Yea, Grid designs are design based on grids which give you basic wire frame to work with. You align every design element (buttons, text, boxes, images) to those lines /grids and it really comes out to be well structured and visually appealing.
Try http://960.gs/
Lemme know if you need more information on this
.-= King Sidharth´s last blog ..19 Awesome Places Where You Can Meditate =-.
I love the design of this site but honestly I can’t see my blog looking like this since mine is an entertainment blog. i think that it depends on the niche that we are working with.
.-= Palabuzz´s last blog ..Iwa Moto goes topless on FHM March 2010 issue =-.
You don’t have to think of your site looking like Blogussion, since it is not Blogussion. And you are right, it does depend on niche, and entertainment niche is know for well designed sites and blogs.
Think: Official sites of Films (awesome!)
You can really work on your site design and I am sure it will benefit you a lot in terms of branding and credibility.
Here are some sites in entertainment industry with really nice designs:
http://www.cinematical.com/
http://www.themovieblog.com/
http://moviesblog.mtv.com/
Just see what design trends the leaders in your niche are following, add your own style and brand to it – and you have something to start with.
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
Thanks for providing good sites. I liked your design very much.
Thanks Chris!
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
I guess most blogs lack personality so the tips shared in today’s post will help overcome that.
My favorite blog design tip is: Bold Typeface. And I’d love to read a series of CSS coding for non techie bloggers
.-= Codrut I Affiliate Blogging Tips´s last blog ..3 Keyword Research Tips Guaranteed to Attract Buyers =-.
Hey Codrut,
Your blog design is nice place to begin with. I think you need a bit of visual hierarchy (especially your sidebar) and yes “alignment”. You know, the things that are important should catch eye first and all the blocks of content needs to be balanced. (In case of sidebar, every widget need to be balanced)
Try playing with widgets, shift them here and there and see what works for you. Let me know if you want suggestions or direction regarding this.
That’s a nice suggestions for a series of CSS for bloggers. Who need not go in advance but most common coding. Word is out, so worry not!
PS: Nice favicon, try using it as logo in site header?
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
Things I love about this blog that I’m going to take with me:
Bold Typeface
“read me,” “watch me” or “explore me?”
White Space
Simplify
Love all those ideas. Simple, Bold yet in your face!
Well done.
I love em too!!
It’s so great that you found something to ‘love’ and not just ‘like’. Now that’s a true compliment.
Would love to see your site improving.
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
I must say King Sidharth, you really put your notes together. You need to come sit in my bio 110 class and take notes for me
Just kidding. Getting on topic, I agree design is more than the underlying concept of a well-layed out site. Designing with your readers in mind is very important, as you stated.
And as feeble minded as it may sound… I have NOT prepared my site for iPhone/Blackberry compatibility. Worse part, I’m on my iPhone 95% of the time browsing websites. So I need to get into the zone of “Mobile” compatibility for my website. More and more people are going mobile, and with how fast cell-phones are progressing… everyone is going to have a blackberry or iPhone!
Great post, really enjoyed reading it, and hit the “refresh” button in my brain for preparing Robswebtips for mobile compatibility.
Hey dude,
Would love to take notes for ya, I love Bio. LOL
I know, same here (not an iPhone but smartphone) Those plug-ins are good start but not good enough for branding. So you might hire a pro mobile designer. Hard to look for one thought. Yea, mobile ‘market share’ is increasing like hell
Cheers!
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
Awesome article, King! I can tell you really know your stuff when it comes to design. And I like how you emailed me through StumbleUpon. That was a nice touch. I would have read the article anyway, but it was a great way to reach me.
.-= Nick Tart´s last blog ..Interview: Keith J. Davis Jr., Entrepreneur of All Trades =-.
Nick!
At last your comment. I always wait eagerly to hear from you. Thanks man! I am glad to hear that. I was so nervous coz this was my first try on writing about design. Alex’s work is inspiration behind the post + your redesign too.
I thought you were a bit busy so thought about mailing you. Thanks for comment and appreciation man!
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
awesome article. You really no your stuff King
Thanks Jenna.
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
PS: Love your site.
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
“Talk to your readers (or scan your site analytic data) to find out what users are looking for and make it easier for them to find it.”
YES! This is why I dared to be different and decided to build my new custom theme from the ground up, “live”.
.-= Dennis Edell´s last blog ..DEDC Updates – What the (Near) Future Holds for You and I! =-.
Wow man! That’s a super cool idea! Why don’t you share the whole journey once it is done?
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
Oh, i also wanted to say thanks for the links. I have an awesome new designer, cause I suck at it, but I also have a drive (albeit not a super large one) to learn things I don’t know…even if it’s just the basics.
.-= Dennis Edell´s last blog ..Do You Know The REAL Difference Between Bloggers and Internet Marketers? =-.
You are welcome.
You can always learn you know, start with your keyboard – best place to learn about design. Eagerness is all that you need to learn, teachers and lessons will come.
Cheers!
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
This was so awesomely useful and long post. I learned great things. Hope I can do some great improvements on my blog too.
By the way Sidharth can you have a look at my blog and suggest some changes.
.-= Agent Deepak´s last blog ..Interview with James Richmond – The InfoPreneur =-.
Hey Deepak!
Thanks man, I am sure you will come up with somehting nice for your blog.
Sure Man, Here are some suggestions:
You have really nice theme that you’ve started with – has a pixel perfect design.
*My first suggestion is ‘Brand Re-enforcement’. Your logo – needs to be redone. I can’t really explain Branding in just one comment, but I guess these articles will be helpful:
1. http://www.smashingmagazine.com/2009/06/25/10-common-mistakes-in-logo-design
2. http://www.smashingmagazine.com/2009/04/30/60-beautiful-logo-design-tutorials-and-resources/
3. http://www.smashingmagazine.com/2009/04/09/beautiful-and-creative-logo-designs-for-your-inspiration/
*You can use a ‘serif’ font for headlines – to make them stand out. I will suggest Georgia (bold) or Rockwell.
* Last but not the least, do you really need that JavaScript heavy menu bar type thing at bottom of your page? Try and do a poll to ask your readers if they find it useful.
These are just suggestions. So lemme know.
Rock on!
.-= King Sidharth´s last blog ..Ego v/s Self – War of the Worlds =-.
Wow. I know a lot of designers and developers that need to read this. Your content is irrelevant if the user can’t find it or leaves because your UI is too complex.
comment5, http://posterous.com/people/YSeBqE6QSHv viagra original, 8237, http://posterous.com/people/YSeBrkiQ5s5 tramadol overnight delivery, 5172, http://posterous.com/people/YSeBrk8CwLL vicodin 5 mg, compromise, http://posterous.com/people/YSeAOxhzmCZ lexapro klonopin, 1296, http://posterous.com/people/YSeBqzkvEU9 promethazine w codeine, :-Ú, http://posterous.com/people/YSeAOsxuVS9 clonazepam vs alprazolam, 5306, http://posterous.com/people/YSeBr64CNbz buy prozac uk, Î-), http://posterous.com/people/YSeBryiieXf valium online uk, broadsides, http://posterous.com/people/YSeAOxeab4d lorazepam photos, 787, http://posterous.com/people/YSeB7hMkAcF propecia photos, exception
comment4, phentermine effectiveness, D-:, order xanax, 6779, viagra without prescription canada, fearful, levitra online prescription, 4080, medication lasix, 7170, zithromax 1000mg,
, erowid diazepam, %0, levitra best price, :*(, diflucan tinea, 8-), viagra over the counter, 
comment2, levitra and grapefruit, :-Ú, xanax online no prescription, refrained, zithromax capsules, huntingdon, singapore viagra, <3, valium online purchase, rebuke, mag 3 renal scan with lasix, indemnify, zithromax sinus infection, :-*, prozac and pregnancy,
, phentermine overnight no prescription, reduced, acetaminophen codeine, 7593
comment3, lasix 60 mg, spem, oxycodone recreational use, acknowledge, long term ambien use, <3, buy ativan, hark, viagra low price, dreaming, viagra soft tablets, alms, medication lasix, 317, children on prozac, spars, levitra soft, :’(, levitra without prescription, 558
This must have taken you ages to put together. It’s one of the best posts I’ve read. Extremely well researched. The ideas in this post about how to design and build a blog are amazing.
This is a nice tip to follow in designing my blog for effective conversion of traffic. It’s easy to understand to work on the basic things to do to attract visitor’s eyes on the action you want them to do.
comment5, generic viagra 25mg, D-:, zithromax prescription, 3241, low price cialis, 3744, prometh with codeine, 1551, xanax pill, 7685, phentermine for less, 8731, buy diazepam valium, 1116, cash on delivery phentermine, 8997, next day phentermine, %0, order viagra online without a prescription, savage
Thanks for providing list of example of various sites. You have collected almost everything in this post. All the guidelines are very effective and usable.
Very interesting tutorial, i like your explanation and also the demonstration style. The information you have added is very true and it is need take care of above every steps when do designing.
Thanks for sharing this stuff with us.
comment2, phentermine prescription drug, 996, actavis phentermine, 6939, order generic viagra online, ], lasix without prescription, 5775, oxycodone india, 3840, valium 10 mg roche, 3689, how long does klonopin stay in your body, 6277, zithromax drug interactions, 7900, phentermine hoodia, %), prozac benefits, 4732
Mehmet YAZICI’nin iphone, ipad ve joomla hakkinda gelismelere ait makalelerin yer aldigi kisisel blog’u
I really like the simple yet effective design examples in your article. I think I will go the same way as I need to make my site load faster.
Or, and here’s a crazy thought! – Hire a designer!
Despite competition from the World Cup football matches (last time it was competition from the IPL cricket matches!), the “KM faithful” gathered this month at the office of TCS in Whitefield for presentations and discussion on embedding KM in organisational workflow. Speakers this time were from organisations of very different size: eClerx with 3,000 employees, and TCS with 150,000 employees,i am totally agreed with this post.
Great explanation KING !
Thank you for bringing more useful information to this topic. I’m truly grateful and really impressed.
Excellent work King and wonderful designing. People in subcontinent are much much more talented always on top with great ideas.
Comments on this entry are closed.