Bringing the Magazine to the Web

Bringing the Magazine to the Web

on Jun 23rd 2010 with 48 comments

The rise of blogs on the web has brought a quick and easy way for anyone to publish their thoughts online without having to get down and dirty with HTML. Just write your content, hit ‘Publish,’ and your thoughts are instantly available for the masses to read.

For all the good that blogs have done, they’ve made the internet look predictable when compared to articles printed in a magazine which look completely unique, each with their own art style and layout. As Greg Storey pointed out in a blog post from 2006, “before there were blogs we had websites. Beautiful, random websites that felt more like a zine – one page looking nothing like the one before or after it”.

Most larger blogs may have a unique theme, but each blog post looks the same. Most posts we read everyday share the same common layout:

In breaking this trend, several bloggers have begun giving each post a unique layout, colour scheme and art style. Their posts look more akin to a magazine article than the typical blog post. The posts stand out from the crowd, like a zebra amongst a field of horses.

“Before there were blogs we had websites. Beautiful, random websites that felt more like a zine – one page looking nothing like the one before or after it” – Greg Storey

Below is a round-up of forty beautiful looking blog posts from fourteen sites which break out of the mentality that every page on a website should look the same.

1. Gregory Wood

2. Marcel’s Blogazine

3. Jason Santa Maria

4. PeepCode

5. Danny Garcia

6. Chris Coyier

7. Avoid Contact With Eyes

8. Paddy Donnelly

9. iamsteve

10. Jack Cheng

11. Dustin Curtis

12. Metalab Design

13. Smashing Magazine

14. Panic Blog

Dan Harper is danharper on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Dan is passionate about an open, semantic web and loves playing around with the latest bleeding-edge technologies in our industry. He works mostly in PHP, but wishes he only had the time/job to pick up Rails fully. He’s studying Web Technologies at the University of Portsmouth and is currently Lead Developer at Radweb.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.fatlizardmedia.com Juan C. Rois

    Interesting to see how originality and creativity are all over the place.
    Nice read,
    Thanks

  • http://www.vagrantradio.com Jason

    Awesome post Dan, you just provided me with a months worth of inspiration.

  • Tey

    This is like a cauldron of inspiration. I give all of these sites much respect for pretty much redoing their CSS every time they post

  • Stefan Matei

    I’d never go with the unique type of post design as seen in Smashing’s example. See what happens to it? After a while, stuff starts to break (see header and footer).

    The Panic approach that only styles the actual post content differently (and within its specified boundaries) seems like a viable solution.

    • http://danharper.me Dan Harper
      Author

      I think that’s just bad implementation on Smashing’s part. I didn’t get a chance to see the post before it broke, but stuff like that can be prevented by including an external header file (eg. with PHP).

  • http://taylorhutchison.com Taylor Hutchison

    Styling each post would take such a level of artistic and design skill that this is not a viable option for 99% of bloggers. The point of the blog is to make your thoughts available with the least friction possible, not take more time styling than it did writing. That being said the ease-of-use has lead to an abundance of crap around the web. I think the unique, magazine style posts would be a great way to instantly convey to the reader that the content is quality.

    Bravo Dan on a very quality post.

  • http://twitter.com/luker Luke Robinson

    Thanks Dan! Another great example is ‘Illumination Magazine’, Research at University of Missouri: http://illumination.missouri.edu

    Cheers,
    Luke

    • http://designinformer.com Design Informer

      Awesome Luke! Thanks for sharing that link.

  • http://www.zacvineyard.com Zac

    This is awesome!

  • tomeekgd

    Great article!

  • http://eyoosuf.com Yoosuf

    Superb post, you guys missed the design informers posts they also publish stunning posts such as http://designinformer.com/the-process-behind-good-illustration-part-2/

    • http://designinformer.com Design Informer

      Thanks for suggesting Design Informer. :)

  • http://contempographicdesign.com Chris Robinson

    Some great art directed sites/posts

  • http://csscomposer.com Denny

    Awesome design! Great and unusual layout. Good for inspiration.

  • http://www.anansedesign.com Barbie Liz Rudd

    Awesomely inspiring!!!

  • http://designinformer.com Design Informer

    Thanks for publishing this post Dan. I’m a big fan of art directed blog posts. These are just 14 sites but there are plenty more of them.

    I’ve actually started a gallery (Heart Directed) just to showcase these different types of sites.

    http://heartdirected.com

    • http://danharper.me Dan Harper
      Author

      Oh, wow! Seems I won’t be getting any work done for a while ;)

    • Andy

      Wow, that’s one great site for inspiration! Thanks you!!!

  • http://www.johnsthomas.com John

    One glaring omission that I want to point out is the lack of ads on these sites. Back in the first half of the 2000s there were hardly any blogs with ads, then Web 2.0 became a buzzword, the marketing departments took over the web, and now people blog to make money instead of expressing themselves. And it shows. The personal site has been taken over with blogs.

    I have been designing a CMS that would allow people to make a personal site, each page/post would have its own structure, and CSS. Eventually I will code round one, and open-source it.

    Anyway, very nice post, thank you!

    • http://danharper.me Dan Harper
      Author

      That’s a good point. I think the only site in round-up with ads is Jack Cheng’s site. I suppose people will have to be a bit more creative if they want to include adverts on their site.

      • http://www.johnsthomas.com John

        Very true, a lot of people think they can throw Adsense on a site and retire. Most users are savvy enough to avoid those ads these days.

        I definitely agree that creativity is the name of the game on any site. I think smart placements could work on sites like these, but it is refreshing to see sites without.

  • http://vfxboy.co.cc vfxboy

    It would really be great if every blog post is unique.
    but what about the guys like me who blog for fun, We have our day job to keep and blogging Is our hobby. Making unique posts can be lot of work.

  • http://creapptives.net Creapptives

    I was expecting a tutorial on how to make one. Not a lame list post of the existing design that is people already see.

    Bad one nettus.

    • http://danharper.me Dan Harper
      Author

      You may like Chris Coyier’s screencast: http://css-tricks.com/video-screencasts/77-styling-an-individual-article/ at CSS-Tricks.

    • http://www.ajithrindia.tk Ajith R

      Its categorized under web roundups, and is great inspiration. And I don’t think there is any unique way to create magazine style sites- depends on how you apply what you already know.

  • http://www.crearedesign.co.uk Steve Maggs

    Yes, yes, yes. I’ve been a massive fan of a lot of these for a while, Jason Santa Maria and Dustin Curtis especially. Some really aren’t blogs at all but a new style of magazine site. A blogazine perhaps as someone called it?

    All excellent though and as many people have said, inspirational regardless of whether you have time to read them cover to cover (or whatever the screen based equivalent is!

  • http://forums.doooni.com دنيا الدلع

    thanks a lots

  • http://www.seodivers.com SEO Divers

    These are all stunning, I’ve always been a big fan of magazine-style posts

  • http://www.jordanwalker.net Jordan Walker

    Great list of inspirational websites that have brought the magazine format to the web.

  • arnold

    ooh love it , especially the blog of Jason Santa Maria, lol hope someone will teach me how to style individual articles in wordpress

  • http://noobowned.com/ CyrusKafaiWu

    Holy! This is likee the bestt article I have seen in awhile. I need to start a personal blogzine.

    But some of the questions, I am wondering about what type of platforms did they use to achieve this.

    If they did justt full html for each article. Then, wow!

  • http://www.freshclickmedia.com Shane

    I tend to overlook this type of post, since they often have banal titles such as ‘green sites’ or ‘sites with interesting sidebars’. Whilst some inspiration can be drawn, their content is often rather generic and staid.

    These sites, on the other hand, though not universally, offer a refreshing change, and they’re often with interesting content too.

    Possibly the best post of this type I’ve seen for a while Dan – good compilation.

  • http://www.tylertermini.com Tyler

    Awesome article! It sounds like a great way for designers to not only keep their writing skills up to par, but their graphic skills, too. (This would also make for intense WP theming :P)

  • http://helloxie.com Zhuoshi

    I really like the Panic blog.

  • http://noobowned.com/ CyrusKafaiWu

    A note for you guys.

    I have been trying to figure out how you would do this wordpress.

    Just make an template thats pree basic.

    Then, install the artdirection plugin for wordpress. And then your own css in the artdirection box. And then make divs and add images thru that.

    And if your gonna totally redesign the site. Like change it from white to black. Have an external css file to link to in art direction to save time.

    And then publish it when your done and think its perfect.

    Link to plugin:
    Art Direction

  • http://www.chicoobispo.com David

    @Mr. Harper, a suggestion: a tutorial to do a blogazine style website design using html, css, etc. I would enjoy it.

  • http://www.dynamicpalette.com Chris

    Do all of these examples use some sort of blogging technology like WordPress? Some of those examples look like custom-built sites.

  • Aussiedude

    When looking over these I couldn’t help but remember everything I’ve read in my web design books telling me about how consistancy is the key to a usable web design, along with simple logical structures and design elements.

    I think this is great for a magazine style website, or any website where the main focus is producing high quality articles. But there is other websites I’d say this would be more of a hindrance. Some websites could be thought of as being more like software in a web browser than an online magazine (eg: Google Maps/Gmail/Docs, most email services, youtube, Livemocha). And having each page styled differently would probably create confusion for the users.

    But I do like the examples, and does give plenty of inspiration for what could be done.

    Ofcourse for some blogs you wouldn’t want this either. Like a blog posting news updates to something (I know some online services with blogs where they post about service outages for instance), and you wouldn’t want to be bothered to design the entire page for just to notify your users that your server is offline and will be back in one hour.

    Really depends on the website I guess, but some websites would really not need anything that fancy for everyday style posts. Not to mention how much work it would be for each post. Might be alright though for a subscription based website where you are paying for that quality?

  • http://randombashes.blogspot.com Ajith R

    It may be lot of hard work, but its worth it! Jason Santa Maria’s is I think the best!

  • Dom

    Before there were blogs there were websites? lol.. one page looking nothing like the other because there was only one page. and it was very long with anchor tags and animated gifs. Yeah I miss geocities… not =P

    Some very cool inspiring websites though!

  • http://www.dharmakelleher.com Dharma Kelleher

    I just started doing this on my blog. It’s more work but I think it’s improving my design skills. It’s like a challenge on one of those Bravo Channel shows like “Work of Art”.

  • http://www.tiffanybestsilver.com Cheap Silver Jewlry

    It’s the very thing i want to catch. Thanks!

  • http://www.acwe.co.uk Adam Walker

    Extremely happy to be featured with all these great blogs. Thanks :)

  • http://www.d2i.in Anuj Gupta

    I loved it so much that I have incorporated this concept in my portal’s magazine section – http://www.d2i.in/mag/index.htm. If you like it please click on ‘LIKE’ at the top right corner of the page.

    Thanks

  • http://iamsteve.tumblr.com Steve

    Dan,

    Great article! Thank you for featuring two of my posts here. I wanted to let you know that my URL has changed so that the two links could be updated. The new URL is http://iamsteve.tumblr.com

    Regards,
    Steve Best