The blueprint of a website — not the code, HTML or CSS — is its design.
News organization websites face a problem in their design — they have to arrange a lot of content, mostly text, and still make it interesting, as web designer Steven Snell explains in Smashing Magazine.
Don’t:
Screenshot of Friday Freebies page
The Friday Freebies page on wtop.com lists free things for people to do or get. People are interested in anything free. But the page has too much text to focus on.
The list currently uses bullets and sections include “Free Food,” “Free Stuff” and “Free Things to Do.”
Since it’s hard to focus on a large amount of text, the long list should be broken down with:
- subheadings
- bullets
- pictures
- graphics
More interactive features should be added to increase web traffic and sharing of the page on social media sites, like:
- polls
- pictures
- comments
- a place or way for viewers to leave their own suggestions
Friday Freebies is a great idea, but its current design doesn’t make viewers want to read it.
The limited number of free stuff on the page makes it manageable. A Friday freebies email is provided for readers to share ideas.
Here is a different version of Friday Freebies, from KSAT.com, a San Antonio, Texas television news station. The page has its own graphic which makes it recognizable.
Don’t:
Screenshot of CBS DC
The CBS DC website uses top navigation buttons, which makes it easy to browse the site and find specific content. But the buttons blend into each other because there’s no lines separating them, like NBC4’s website.
As you scroll down, the page looks very similar. Nothing sticks out or grabs the viewer. Content is broken up in tables by region or subject, like sports or politics. Two stories are left aligned with bigger headlines and photos and on the right are more linked headlines. This design gets tired very quickly.
The pale blue font color used throughout the site — for headlines, hyperlinks and headers — is monotonous. A splash of a different color in the headlines or links would draw the viewer’s eye.
Do:
Screenshot of NBC4 Washington’s website
CBS DC and NBC4 Washington’s website backgrounds are similar — they include a picture of the Washington Monument or the House of Representatives behind the headlines, videos and photos, which are arranged in the center of the page. This is expert branding. The viewer instantly knows where the television stations are located and where the news is coming from.
Though the top navigation buttons blend into each other because they are all the same blue color, the lines between them help. The teaser photos below the navigation bar and logo are colorful and catch viewers’ eyes.
NBC4’s website is designed simply with different tables of content all down the front page. These tables have a slight border on the top and large headline to differentiate between them. This is an effective use of typography.
Typography is one of the most important aspects in web design. Changing the typography, font size or color can draw the viewer’s attention somewhere. But if there’s multiple font styles, sizes and color used in one area or on one web page, it gets crowded and confusing.
NBC4 has a better color scheme than CBS DC. The darker blue, white and black are easier on the eyes. The use of colors in the logo also increases viewers’ interest.
Color is also an important aspect of web design. Like typography, it’s important not to use too many different colors. But adding a different color as an accent is an effective use of color.
Do:
Screenshot of USA Today beta version
USA Today is undergoing a website redesign.
The new website is streamlined and uses three clear columns to separate different information and news. The different colors in the columns helps make them stand out.
Top navigation buttons are used for the sections — an easier way to navigate and find different content. Some media websites use left, right or bottom navigation, which can be harder to find. When the sections are at the top, viewers always know where to find them.
Viewers have the ability to switch headlines from a grid format with photos or list format with more text. This option gives viewers more control — an important aspect to remember when media organizations are designing their websites. Interactivity is becoming more important in this age of social media and hyper-local news.
Media websites have to post a large amount of content. But effectively using graphics, bullets, easy-to-read colors, simple navigation (toolbars, subjects), typography, colors and not being afraid to have white space is beneficial and makes for overall better design.