Line25

Tips for Designing Unique and Attractive Blog Posts

Read the full post

Designers have began to inject increasing levels of creativity into their blog posts and articles, throwing out the traditional and generic style of blog posts in favour of a much more attractive layout that’s themed specifically to the content. Let’s take a look at some of the best examples, and see what makes them work so well.

In his fantastic article ‘The Death of the Boring Blog Post‘, Paddy Donnelly sums up this method of fusing together a blog post with the style and design of a traditional magazine article and coins the name, ‘Blogazine’. Be sure to check it out for a great introduction, and to hear from some of the pioneers of this style of blogging.

Examples of the best

View the article

View the article

View the article

View the article

View the article

View the article

View the article

View the article

View the article

View the article

Scrap the traditional website layout

A traditional blog layout

We’re all used to blog themes with the traditional two-column content and sidebar layout. But to really create a custom and unique post design, all the common practices are thrown out of the window in order to give yourself a blank canvas to start from. There’s no header, there’s no footer, there’s no sidebar. Instead, the whole page is open to housing the content any way you wish; you really have to break free of the usual web design mindset, and think out of the box in terms of creativity to portray your information in an interesting and enticing way, but also keeping everything readable and accessible. This does subsequently induce a lot of work, as your whole post needs to be completely designed and styled from scratch, using a unique CSS stylesheet and HTML code, but the main advantage is having a unique post that captures the user’s interest and easily puts across your message.

Take inspiration from print design

Magazine layout

Magazine layout

For decades, designers working in print have used the core design principles to create balanced layouts in magazines and posters. To create the best designed blog post, go back to basics and follow the basic rules of space, colour, shape and type. For inspiration, check out any magazine article for ideas on how to combine images and text, using different type sizes, weights and fonts to portray a certain feeling, or to highlight particular elements of the content.

A grid is your friend

The grid behind a well designed blog post

Because we’re now working with a completely blank canvas, it’s important to achieve balance in your new post design. Basing your design on an underlying grid will help develop an eye-pleasing design that’s easily consumed by the reader. On the contrary, simply placing elements where you see fit could end up with a page that’s difficult to follow and doesn’t flow from one element to the next.

Don’t worry about scrolling

Read Paddy's article on Life Below 600px

Unlike a magazine that can span across multiple pages, as web designers we’re stuck with continuously moving downwards. After balancing out your design with lots of large elements and plenty of white space, it’s highly likely that your post will take up maybe 5 times the space it would have done if it was written as plain old text in the traditional format. Unfortunately this is one sacrifice that has to be made. While an excessive amount of scrolling could impact the usability of your page, it’s safe to say that users are used to navigating with the scroll wheel, so don’t worry about stretching out your page length in favour of a unique design.

Get creative

As designer’s we’re always wanting to break free from limitations and let our creativity shine. Here’s your chance! Next time you’re fleshing out ideas for a blog post, try starting from scratch and design the whole content, creating an attractive post that really gets the point across.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

76 Comments

  1. Another incredible post Chris, I especially like these post designs: ‘ How I go about choosing typefaces for the web’ and ‘Top 5 reasons to learn to dive’. Stumbled! :)

  2. jay design says:

    Thanks for posting this Chris, its refreshing to see how (especially longer) posts can be formatted to make them more appealing to readers.

  3. Awesome! I did a post on this as well a while back. Anyway, I really love these type of sites but they won’t work for a frequent blogger like me. :)

  4. Sneh Roy says:

    These are so cool! [Although I have found some to be laboriously hard to follow, they were all over the place], I reckon they probably take a lot of time to put together :(

    Thanks for posting these and the tips, as I said before, they are pretty cool!

  5. This way of layouting blog posts will get me out of the google reader trap! Great article!

  6. Masud says:

    Another rocking article, i like “how to hack your brain” article.

    Thanks Chris…

  7. More people should care less about scrolling. I personally scroll straight away when I hit a page and start the whole zig zagging around until I find what I want.

    Lovely post mate!

  8. Codesquid says:

    All of these are simply stunning! I think it’s really great when blog posts take on their own unique style and personality. Would love to try something like this myself in the future!

  9. digibomb says:

    great stuff…i love when bloggers go all out, but as mentioned, does take a long time and is definitely geared towards certain audiences…

  10. Fatma says:

    Stunning post , This is seducing me more and more to try it .. Thanks Chris :) Keep positing those useful article .

  11. Alan says:

    That layout for the Spielberg bog post was excellent, love it.

    Great blog post Chris, keep up the good work.

  12. Stratos says:

    Thanks for your post, it was really nice. We’ re waiting a unique post from you now :)

  13. Mark James says:

    Thanks for the great post. I’m glad you touched on the scrolling issue. Far too many people are concerned with having to scroll to see additional information. have they not realised that the scroll wheel is there for a reason!

    Keep up the good work!

    • I think Paddy’s article (Life Below 600px) does a great job of promoting this, and the way it’s put together as a unique post really puts across the information fantastically.

      …Imagine if that article was just a plain old blog post.

  14. michael says:

    Greate post chris!
    But I don’t exactly understand what you mean by “Scrap the traditional website layout”. Sure one should leave the traditional sectioning but you can’t do a layout similar to those in magazines. I still think it’s a litte (or big) difference wether you design stuff for printed media or online media.

    But thanks for those inspiring lines!

    • The ‘traditional’ way is to design the website, then insert your text content in the designated ‘content’ area, with little styling to the actual article itself.

      These ‘blogazines’ are taking an approach where the whole content is designed, rather than the surrounding website. The result (examples above) are unique posts that really put across the info they contain.

  15. The Spielberg website is SWEET! Nice post man, good tips.

  16. Saiful Amri says:

    awesome!! great posting, thanks

  17. Chris Spada says:

    Great article Chris,

    Good point about scrolling, It’s a risk but it’s worth it to get layouts like the ones you have featured.

  18. Nikhil says:

    Awesome!
    When we come to the blog first thing come to mind is sidebar. But all the examples you have shared are wonderful inspiration for some creative work. Now its time to move on and change the well know blog layout.

  19. I agree with Design Informer, I love this idea, but it’s hard when you are trying to get out articles to your readers 2 or 3 times a week.

    One thing that has confused me as well is how to call a unique CSS file for each wp post. Is there a plugin for this or something? I’ve admired blogs like Jason Santamaria’s for a long time but have been stumped as to the best way to achieve a custom CSS for each post.

    Any help here would be great. Thanks.

    • DesignLovr says:

      I personally prefer this kind of post with high-quality content and styling once a week (or even less) over plain blog posts several times a week.

      There are actually several wordpress plugins for this purpose: Art Direction is used by Jason Santa Maria. You can also have a look at WP Post Styling.

      I’m thinking a lot about this kind of blogazine and once I established DesignLovr I’ll definitely create such a blog (even though it won’t be web design related).

  20. Zack says:

    very cool. design is a very important, but often overlooked aspect of blogging.

  21. No doubt about it, these are beautiful examples. And also no doubt–they took exponentially more time to produce, as they require a custom single.php file.

    Which means, depending on how often you post, you have to weigh the pros and cons about the time necessary for individual layouts.

    Out of the ordinary article layouts are also out of the realm of DIY for most bloggers. Making it less likely to see these layouts beyond web designers’ sites, unless clients are willing to pay for unique article layouts.

    Could be a potential niche market there. ;-)

  22. Ben says:

    A great post,

    This gives me some fantastic inspiration for my own blog!

  23. Andrew says:

    Great post!
    Some great examples, the last two I especially like.

  24. Jose says:

    AWESOME POST CHRIS!!!! I love the creativity.

  25. A lot of these type of posts are on blogs that aren’t as frequently updated. I wonder if/when some of the more frequent design bloggers will start to incorporate it. I know Jad over at Design Informer had one like this last week and I’ve started kicking the idea around., What about you, Chris?

  26. I wish I had time to do something like that everyday :P

  27. ¥€$ says:

    Hey, but… that sucks! =D

  28. ¥€$ says:

    No sorry that’s awesome!

  29. Rebecca Aguilar says:

    Excellent information! Thanks for sharing!

  30. aziq says:

    Nice post.Thanks for the guide.

  31. Many of these designs are quite tall, whereas the aspect ratio of most computers is wide (handheld devices notwithstanding.) I recognize the merits of embracing the scroll wheel, but shouldn’t we also take into account the fact that these designs will _never_ be viewed by readers as they are presented here? The browser will always represent a small porthole on the overall design, potentially obscuring the bigger picture. Sometimes that will be really cool, admittedly, but an argument should be made for innovative design that targets the medium, rather than ignores it.

  32. I am glad to see this type of blogging become more noticed. Soon the ’roundup’ and ‘top ten’ blog posts will become second rate, and interesting content accompanied by thoughtful layout will be requisite to be considered a ‘good’ blog post. The times they are a changin’.

  33. Joffrey says:

    Very inspiring! My posts are very common, I think I should do something make them more attractive, with a different layout.

  34. Danielle says:

    These designs are great, but my question is, do they really matter? Yes, design matters. I know that. But a lot of people (me included) read their blogs in a format like Google Reader don’t even see the design, all they see is the content. This was actually something we have been thinking about a lot in our office- this idea of content vs creative (http://www.atomicdust.com/blog/single/content-is-the-new-black/), and would love to hear more thoughts on the subject…

  35. Tom Something says:

    While certain comprimises have to be for these beautiful layouts, some of these examples strayed from some personal ground rules I have about scrolling. If there are four consecutive graphs, and the object is to allow the user to compare them, I think they should all be visible within the same scroll span on a reasonably-sized monitor. Also, if your text columns are too long, a person has to scroll down, then back up, then down again to read them. These a really nice to look at, though.

    • I agree — I think some of these designs, though beautiful, stretch the bounds of practicality. If I’m being presented with text, design shouldn’t interfere with my ability to read it.

  36. Dan says:

    Uau. Nice tips. However I don’t think this are to be used on content websites. Maybe on those websites where the text is not that long.

    And they also take a while to customise on each post. I’m not sure it is worth to use such designs on the Web. They should stay on print.

  37. Ajay says:

    Awesome post! Great work again.

  38. Jakub says:

    yeah ! great examples – more print-style layouts in the web !

  39. G*J says:

    This is great. Sometimes to think out of the box it’s good to push yourself out of the traditional methods.

  40. Andy Sowards says:

    Love those type of posts, Definitely hope the web goes that way – dugg/bumped!

  41. Ed Troxell says:

    Great post! Love the different design examples.

    What’s your story? Mixitupmagazine.com

  42. Luca Bartoli says:

    Great review Chris!! ;)

  43. John Loudon says:

    Really love the one with the shark and for style I really like “Roulette” but they all have something to offer I think.

    good post cheers for sharing dude.

  44. Azzrizal says:

    I have something similar.
    Still new, im learning and trying to do my best.

    Pls take a look and tell me what you think. Thanx Chris.

  45. They are some really nice ideas for blog post design – does anyone know of some really great inspirational print design websites?

  46. That article will help the freshers to gain more knowledge about designing. induswebi provides the web design, web development and logo design service with the latest and effective techniques.

  47. Nice example, the ideas are really very cool, thanks for sharing….

  48. SM says:

    Great examples. Thanks for shared!

  49. Roseann says:

    Wow! Really Cool! Thanks!

  50. Jose says:

    Changing the design of the post is an interesting idea. However, I wonder how effective this alternative templates are in achieving the goals of your blog.

    Where this new post designs tested for performance against a more simple and plain version? Will people actually read more and be more engaged with a user experience that is different and more complex than the more simple ones they are use to see every day?

    Most probably each situation will show different results. In any case the only way to tell will be analyze your audience and if relevant test it. Remember, it has to be effective, not only “look cool”.

  51. These are great, I think text only is boring, spice it up, make people want to come to ur blog… works for me.

  52. wien says:

    great post, thanks for sharing

  53. Munki says:

    This is a very interesting post. Thank you.

  54. really its awesome ….
    very useful for designing

  55. Thank you for this nice article.

  56. Aidan says:

    It’s always a debate between readability and usability vs creativity and uniqueness.

    I quote an example – why go to the cinema when you can have superb home theater at the comfort of your own home. Some time, traditionally are still being preferred.

  57. Azeem says:

    would it be possible to create something like this in wordpress with a special template?

    Already present css selectors seem to mess up any attempt at "far out" styling.

    Any help on that?

Comments are now closed