Bringing the Magazine to the Web
T he 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
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
danmoore - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Interesting to see how originality and creativity are all over the place.
Nice read,
Thanks
Awesome post Dan, you just provided me with a months worth of inspiration.
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
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.
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).
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.
Thanks Dan! Another great example is ‘Illumination Magazine’, Research at University of Missouri: http://illumination.missouri.edu
Cheers,
Luke
Awesome Luke! Thanks for sharing that link.
This is awesome!
Great article!
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/
Thanks for suggesting Design Informer.
Some great art directed sites/posts
Awesome design! Great and unusual layout. Good for inspiration.
Awesomely inspiring!!!
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
Oh, wow! Seems I won’t be getting any work done for a while
Wow, that’s one great site for inspiration! Thanks you!!!
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!
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.
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.
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.
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.
You may like Chris Coyier’s screencast: http://css-tricks.com/video-screencasts/77-styling-an-individual-article/ at CSS-Tricks.
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.
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!
thanks a lots
These are all stunning, I’ve always been a big fan of magazine-style posts
Great list of inspirational websites that have brought the magazine format to the web.
ooh love it , especially the blog of Jason Santa Maria, lol hope someone will teach me how to style individual articles in wordpress
Check out Chris Coyier’s screencast at CSS-Tricks: http://css-tricks.com/video-screencasts/77-styling-an-individual-article/
ooh thanks man
He uses ExpressionEngine, and there are a lot of custom things you can do with it. Like custom fields, custom tags.
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!
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.
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
)
I really like the Panic blog.
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
@Mr. Harper, a suggestion: a tutorial to do a blogazine style website design using html, css, etc. I would enjoy it.
Do all of these examples use some sort of blogging technology like WordPress? Some of those examples look like custom-built sites.
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?
It may be lot of hard work, but its worth it! Jason Santa Maria’s is I think the best!
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!
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”.
It’s the very thing i want to catch. Thanks!