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.

  • http://circleboxblog.com/ Callum Chapman

    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! :)

  • http://www.crearedesign.co.uk/ jay design

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

  • http://designinformer.com Design Informer

    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. :)

  • http://www.littleboxofideas.com Sneh Roy

    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!

  • http://mikaelhalen.com Mikael Halén

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

  • http://www.ahmasud.com Masud

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

    Thanks Chris…

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    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!

  • http://www.codesquid.co.uk Codesquid

    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!

  • http://dropthedigibomb.com digibomb

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

  • http://themegamag.com Fatma

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

  • http://www.alan-horne.com Alan

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

    Great blog post Chris, keep up the good work.

  • http://bit.ly/markedlines Stratos

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

    • http://twitter.com/chrisspooner Chris Spooner

      The research for this article has certainly inspired me to do so. There’s every chance I’ll have a go at a couple on my personal blog!

  • http://www.mjcreations.co.uk Mark James

    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!

    • http://twitter.com/chrisspooner Chris Spooner

      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.

  • http://www.webdesigns-rosenheim.de michael

    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!

    • http://twitter.com/chrisspooner Chris Spooner

      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.

      • kees

        Hmm i’m not sure about that

  • http://www.anythinggraphic.net Anything Graphic

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

  • http://www.nusantarawalk.com Saiful Amri

    awesome!! great posting, thanks

  • http://www.chrisspada.com Chris Spada

    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.

  • http://nikhilmisal.com Nikhil

    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.

  • http://graphicdesignblender.com Preston D Lee

    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.

    • http://designlovr.com DesignLovr

      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).

  • http://onlinemarketingmashup.com Zack

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

  • http://azzcatdesign.com Catherine Azzarello

    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. ;-)

  • http://www.activwebdesign.com Ben

    A great post,

    This gives me some fantastic inspiration for my own blog!

  • Andrew

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

  • http://www.nymcnj.org Jose

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

  • http://www.visualswirl.com Chris Thurman

    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?

  • http://www.amberweinberg.com Amber Weinberg

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

  • http://go.zuneo.net/2BG ¥€$

    Hey, but… that sucks! =D

  • http://go.zuneo.net/SR ¥€$

    No sorry that’s awesome!

  • Rebecca Aguilar

    Excellent information! Thanks for sharing!

  • http://www.spunkz.co.cc aziq

    Nice post.Thanks for the guide.

    • http://www.kickreclame.nl Gerben Lievers

      It really is a nice guide!

  • http://www.novelgazer.com Sean Edison-Albright

    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.

  • http://travisneilson.com Travis Neilson

    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’.

  • http://www.geekandhype.com Joffrey

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

  • http://www.atomicdust.com/blog/ Danielle

    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…

  • Tom Something

    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.

    • http://www.novelgazer.com Sean Edison-Albright

      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.

  • http://www.smash.ro Dan

    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.

  • http://blog.aceinfowayindia.com Ajay

    Awesome post! Great work again.

  • http://brandcream.com Jakub

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

  • http://www.drollexhaust.com G*J

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

  • http://andysowards.com Andy Sowards

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

  • http://www.mixitupmagazine.com Ed Troxell

    Great post! Love the different design examples.

    What’s your story? Mixitupmagazine.com

  • Luca Bartoli

    Great review Chris!! ;)

  • http://www.scottish-media.co.uk John Loudon

    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.

  • http://www.theteasr.com Azzrizal

    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.

  • http://www.ingledow.co.uk David Ingledow

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

  • http://www.induswebi.com website designing

    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.

  • http://www.happykennels.net French bulldog puppies

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

  • http://night-fairy-tales.com/ SM

    Great examples. Thanks for shared!

  • http://www.globalnerds.com Roseann

    Wow! Really Cool! Thanks!

  • http://www.webinsights.ca Jose

    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”.

  • http://www.rocket55.com/ Minneapolis Web Design Guru

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

  • http://www.empfehlenswert-wien.at wien

    great post, thanks for sharing

  • http://www.banana.munki.se Munki

    This is a very interesting post. Thank you.

  • http://pietro.open-lab.com Pietro Polsinelli

    Talked about your post here: Improving the writing style of technical blog posts

    http://pietro.open-lab.com/2010/02/23/improving-the-writing-style-of-technical-blog-posts/

  • http://www.webrextech.com/ web designing companies delhi

    really its awesome ….
    very useful for designing

  • http://www.go-shape.com Daniel Bidmon

    Thank you for this nice article.

  • http://www.onextrapixel.com Aidan

    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.

  • Azeem

    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?