Designers of news websites face significant challenges in trying to develop an attractive, usable site that gets all of the necessary items on the page with as little clutter as possible. Studying the layouts and design techniques used on news sites can be a beneficial experience even for designers who only work on smaller sites and blog design.
Most large news sites have strengths and weaknesses, both of which can provide excellent learning opportunities. All designers face challenges involving which content should be featured on a page and how the layout can be designed to support all of the needed content.
In this post we’ll take a look at over 40 large news sites, all of which provide some lessons that can be used in designing sites of all sizes. Often, one of the hardest things to do when designing a site is to take an objective look at it from the perspective of a visitor. When visiting news sites it’s easy to find some things that are distracting and cluttered, and you may find some ways of laying out content that you really like from user’s point of view.
For inspirational design galleries, see:
The Best News Websites:
The following ten sites are the ones that I consider to be the best in terms of layout and overall design (not taking coding into consideration here). Following these ten, we’ll see a number of other news sites, some better than others. These ten sites stand out from the others for one reason or another. Some make better use of colors, whitespace, headers, etc. All of them do a pretty good job of dealing with massive amounts of content on the front page.
Other News Sites:
The remaining 30+ news sites shown here will all provide some learning experiences, good and bad. Take a look through them and see how the design and layout affects you as a visitor in terms of finding the content and navigation through the site. These same elements are issues that you will deal with on your own projects, particularly in blog design where lots of content is involved and freshness is a factor in what visitors will want to find.
Major News Sites:
Newspapers:
Business News:
Sports News:
UK News:
Other News:
September 21st, 2008
thestranger.com is where I get my news.
September 22nd, 2008
wow. Every single one of them has a “FEATURED” post with a big image for the post and also all of them have a “recent news(esque)” section with small icons next to the titles/excerpts. Very similar to how a lot of the magazine style themes are with wordpress.
One thing I think though with blogs and going the “magazine style” route is making sure you’re going to be writing articles on a consistent basis. I did this for http://www.bootstrappingblog.com and have let it go and if you go to the main page, you see the same articles you would have seen a month ago
So, consistent articles will make a layout like this work very well.
Good article here with some good links. Never knew a few of those news sites. Most have the same news though
September 22nd, 2008
Thank you great post! With all these news sites you will probably learn all about grid design :). I think you are missing maybe the most important “timesonline.co.uk” beautiful grid design. This post will definitely help finding new inspirations for my CSS Framework
September 22nd, 2008
I think the BBC (http://www.bbc.co.uk/news) has one of the best news layout.
September 22nd, 2008
Interesting stuff. The major websites also spend huge amounts of money, so also they could have the best thought-out design. Nice list!
September 23rd, 2008
I’m a fan of the L.A. Times site compared to the other Tribune sites. Just always preferred the cleaner design. Although Chicago Tribune’s recent design changes makes it much more appealing than 3 months ago.
As for Tribune’s competitor’s…I like NYT’s site. Very clean and easy to read. Newsweek would be second with a very interactive layout.
Brent D. Payne
SEO Manager
Tribune
September 26th, 2008
[...] got to be a happy medium somewhere between the ‘Major News Websites [Observations]‘ and part 4 of the ‘25 Beautiful Minimalistic Website Designs‘ both enumerated [...]
September 29th, 2008
[...] sites de notícias do mundo? É eu também não. Mas pra compensar essa minha desatenção o site Vandelay Design publicou uma lista com os principais sites d notícias pelo mundo. A lista é internacional por [...]
October 4th, 2008
[...] Vandelay boş durmamış, bir çoğunu sık sık tasarımcı’nın el çantası’nda örnek olarak gösterdiğimiz dünya çapındaki haber portallarının en iyilerini derleyerek yayınlamış. [...]
October 7th, 2008
[...] En iyi yabancı kaynaklı haber siteleri. Dış basını da takip etmek lazım [...]
October 10th, 2008
There is a great local news site here in Perth called http://www.inmycommunity.com.au which focuses on very local news and views. It also seems to be combining its news side with some online community features like groups, reader blogs etc. Very interesting local news site.
October 12th, 2008
why not found this website from Google Germany with teh most informative and usefull Content.hope wrote mor usefull articles on Internet will come back again
October 17th, 2008
cnn.com very good
January 30th, 2009
[...] design is a mature industry. You don’t even need to hire someone, but at least do some do some reading or buy a book and learn a bit about web design before doing something like [...]
February 24th, 2009
Ещё http://euronews.eu/
June 14th, 2009
There is obviously a lot to know about this. I think you made some good points in Features also.