One of the most important aspects of a web site is what people first see on the initial page. In this case, it is primarily advertisement areas with some disturbing balding heads. While the ad areas are better designed than most I have seen, it is important to note that people come to a site for its content. Forcing people to scroll down significantly to view the news is not a good idea.
The navigation on the site is very well done— it is bright and obvious with a large font that contrasts well, and the names of sections are clear.
Important interactive elements, such as the poll, are all shoved down to the very bottom of the page. Most first-time visitors will not bother to scroll that far.
Elements that were well done include the news headlines and excerpts. They are a good readable size, with the authors visible and enough excerpt to entice without cluttering. The headlines were fairly well written— short and effective. There is a decent sense of white space— on content heavy sites it has to be used sparingly, but should not be tossed out altogether. The accent colours were used well— just enough to emphasize important points without becoming overwhelming or vulgar.
This shows how a strong contrasting background helps a heavy content site pop for its readers. When the background is also a light colour, it all blends together confusing the eye. The rich blue helps this site appear as a concise block and draws the eye right to the text.
The same cannot be said of the navigation— it blends right into the background and looks identical to the main font of the web site. Look over the Politico navigation and see how it comes right to the forefront, unlike this site.
Daily Political does have a better use of the initial page— most important information is right there, and the photos aren’t cut off at strange angles. It could learn something from Politico in its use of spot colour for the news headlines.
While thumbnail spot photos are interesting, they are not the most effective means of visual communication. They are too small to make an impact, and a large number of them seems like a patchwork quilt. It is better to use larger and fewer images.
This site has a more interesting visual masthead than most news web sites, which quickly drew my eye. The navigation was obvious and well structured, although a trifle small.
Notice that the text is all jammed up against the side— never do this. It is far better to have a narrow, newspaper style column than text running up against its boundaries. Notice also that the hierarchy is confused— it is not clear where to look first or what is most important. When having to read long articles, it is crucial to have a relaxing environment in which to read them.
Notice that while many items are “below the fold” on the homepage, the site keeps two columns filled with the most relevant information right up front. “Happening Now” is in the prime location— top left. The list of latest editorials is also in an obvious location.
On this particular site, instead of a slideshow of images, the headline story has its own hero shot and featured homepage slot. This is an interesting idea— although I would recommend less height on the hero so that people do not have to scroll in order to view the headline.
The top navigation, while a readable size, has insufficient contrast. The grey under “News” is too close to the grey of the link colour. Main navigation needs to be of the sort that a quick glance tells the visitor all they need to know.
By site stats, this is probably one of the most popular political news sites online. Notice that its navigation is clean and makes quick sense, with the main headline blatantly huge. Its columns are well organized with a variety of image sizes, although the subheads could stand being slightly larger. They repeat the navigation at the bottom of the page, which is helpful after having scrolled past all the news stories. The site has a strong connection with social media and duplicates references to it on each part of the page.
This is a good example of how a strong masthead can help even a bit of a mess down below appear to hang together. The site is well anchored in the bold red and black of the top navigation area, which is a similar method to having a dark overall background.
I have noticed many news sites attempt to replicate a newspaper look. This makes some logical sense, but there are many better ways to use online features. Imagine this page with coloured headlines— it would be so much easier to do a quick scan of the main news items and choose one to click on.
If you go to the bottom of their homepage, they have a very well designed “Other News” area with tasteful columns and logos. This is an excellent look to use— very elegant and airy.
So far this is one of the best sites available for hierarchy. Your eye goes straight from the logo to the main headline, taking a quick pause on the ad banners. Subtitles are still obvious, but not vying with the headline, and subtle accent colour is used where necessary. Links are obvious and the photos quite attractive.
I particularly liked their “Follow Us” on the subpages:
Large and clear with the main three quick and easy to access. While their homepage could still use some improvement, I believe their individual article pages were the best I’ve seen on a political site, other than their lack of commenting ability.
I liked the idea of a coloured bar breaking into the background to display the navigation— they also have a very large font size for the nav as well, which is admirable.
Their use of a horizontal display of news items with thumbnail images is excellent. It is able to give several news stories prime real estate with no scrolling and without having to go through a slide show. The various columns are different enough that they read as clearly unique areas, rather than a mass of tangled information. It begins to lose that sense the lower down the page it goes.
The bottom area is particularly well put together with the various categories spelled out. It is an intriguing idea to use different colours in areas to obviously show where one is on the site. I’ve used it a few times, and in a news arena it might be quite effective. Used poorly, multiple colours can also entirely sink a web site, particularly if all used on the homepage.
Tech Learned:
- Always have commenting available, this is universal and put to use
- Include Facebook & Twitter repost ability on news posts
Design Learned:
- Be careful what is visible ‘above the fold’ on a web site
- Reduce scrolling to find interactive elements
- Use accent colours carefully
- Always keep some white space, even on text heavy sites
- Newspapers aren’t always right– colours are allowed!
Tuesday, July 20th, 2010, 4:20 pm | 
Content, Navigation, Typography, Visual Design | 
RSS feed
| 
Respond | 
Trackback
Recent Comments