One local newspaper follows the motto “less is more” on its website.
This motto can create strong, attractive website design.
Eliminating the clutter
The Gazette website has very clean design. One aspect of this is white space.
There is a good amount of blank space — no content — in between stories and photos. This gives the reader a rest and allows content to stand out.
There seems to be less on the Gazette website’s homepage than larger news outlets — and there is. The website is less cluttered and each section and headline is spaced out. Headlines don’t run together and it is easy to tell apart different sections.
white space: the unprinted area of a piece of printing, blank space
–dictionary.com
It doesn’t take long to reach the end of the homepage — unlike the New York Times or the Washington Post sites, where you can find yourself scrolling forever. This is an important choice the Gazette made. Keeping the website “shorter” holds readers’ attention. The bottom parts of a website generally receive less attention than the top and middle.
Knowing where you’re going
The top navigation bar — in teal blue — is clearly labeled and distinguished from the white background. There are lines between each section for further clarity. It is very easy to switch from one section to another, because the pages in each section have uniform design and the navigation remains at the top.
Providing reference
Example of a grid design.
Just like maps help people find where they are or get to where they need to go, the grid in web design helps readers find similar information and navigate a news website.
News websites often follow a set pattern to arrange their content. This is called the grid — a technique web designers use to separate information on a website in a uniform and logical way. It is arranged with different columns and rectangular boxes. Newspapers use this column or grid system for layout as well.
The grid system allows information to be more clearly arranged and to group similar content in different tables or rectangular boxes. Using a grid design can offer a website:
- consistent design
- separation between different elements on a website
- separate but similar items to be grouped
For content to appear like it belongs together, it should have similar or the same font and be arranged close together. The most important information or news story should appear at the top in the biggest font size and the lesser important stories should be under it in smaller font. The Gazette’s website follows these methods.
For most of the homepage, the site is broken up into three distinct columns. Headlines don’t blur together and different topics are clearly separated. In the left column there is Montgomery, Prince George’s and Frederick county news, milestones like weddings and arts and entertainment stories bulleted. The middle column has opinion columns, editorials, letters to the editor, photo galleries and contests. And ads are in the right column.
Screenshot of the Gazette.net four-column design.
The bottom of the page is separated with an ad across the page. Under the ad are four columns — politics and business, sports, editor’s picks and regional school news — with one dominant photo and story at the top of each column. There is another ad across the page under these four columns. Then there are different information resources, such as special publications, a business directory, an about the Gazette section, related sites and a few headlines from the washingtonpost.com.
Lighting the site up
The white background is a better choice than black or other dark colors. It is easier to read black text on white backgrounds — instead of white text on a black background. White gives the site a clean feel. You scroll down the page and photos and headlines jump out and grab your attention because they are placed on a simple white background. Sometimes staying with the basics provides better clarity.
Though the Gazette is not a national paper and has a smaller readership than the Post, its website is incredibly well laid out and designed.