This New Style Guide Uses Colors for Coding Stories Online

The Guardian put out a design guide explaining their new website design with containers which allows them to group stories in the same theme together. Inside the containers are expandable cards for each story. This is nothing more than a basic grid pattern with content blocks almost every other news website uses. Changing the names of elements does not make them unique.

There are different card sizes to show the importance of each story and card types to match the tone of the story. With the cards together, there is no white space, It's difficult to know where to focus. While the largest cards are obviously important stories, the others sizes look as if they were chosen to fill in a space. Some images are large, some small, but they compete for your attention. Images are great, but it's possible to have too many.

The style guide mentions they use colors as navigational aids, with red for news, orange for editorials, blue for sports, tan for culture and pink for lifestyle. Sports stories have blue headlines, presumably for those people who cannot read the large Sports header.

The style guide has text in the left column to explain the design shown. Unfortunately, the text overlaps the column and makes the site look amateurish. If you're going to publish a design guide, your text shouldn't overlap the column.

The Guardian’s in-house web design team created the new website. Commercial Type designed the new logo who also created the new font for the masthead. Now the logo is an upper care G instead of a lowercase g and it looks like a stencil. The font, Guardian Headline, is supposed to look more impactful.

Katharine Viner, editor-in-chief of Guardian News & Media, says, "It has also been a fantastic opportunity to redesign our website and apps." For more information click here https://design.theguardian.com/.