Trends in News and Magazine-Style Web Design

News and magazine-style sites tend to follow some specific trends. In this post we’ll take a detailed look at the design trends of news sites with plenty of examples, and the end of the post includes a showcase of sites.

If you’re working on designing a magazine-style site or blog theme, taking these trends into consideration may help.

White (or Light) Backgrounds

Like most content-heavy sites, news and magazine-style sites tend to have white or light-colored backgrounds, which is generally better for readability. Of course, there are exceptions to this, but especially among the major news sites, white backgrounds rule.

News Websites

Grid-Based

Layouts of news sites are often grid-based. Grids are especially effective for these types of sites because there are generally several columns and lots of articles excerpts and sub-sections throughout the front page. The grid helps to keep the content well-spaced and scannable.

News Websites

Typography as a Design Element

News sites have to fit a lot of content onto the page. There is of course text and headlines, images, navigation, advertisements, and it all results in pages that frequently don’t have a lot of excess design elements. the grid layout and typography wind up being a significant design element on many news and magazine sites.

News Websites

Image Thumbnails

Most news or magazine-style sites include links to a lot of articles or posts from the front page. It’s very common for these articles to have a thumbnail image associated with them, especially for lead stories.

News Websites

Prominent Site Search

With so much content on the site, a site-wide search is critical to helping visitors find what they are looking for. Most news or magazine sites will include a site search in a prominent location that can be found quickly and easily. In many cases it is at the top of the page. Having a site search that is easy to find and effective at providing accurate results will help to keep visitors on the site and to improve usability.

News Websites

Category-Based Navigation

With lots of content on a site it becomes necessary to have navigation that is logical and simple. Most news sites categorize the articles and allow visitors to find what they are looking for by providing category-based navigation.

News Websites

Horizontal Navigation Menus

Although horizontal navigation menus are rather common on almost any type of site, they are especially common on news sites. Vertical menus are sometimes used for sub-navigation, but very few news sites use them for the primary navigation.

News Websites

Drop Down Menus

Many of these horizontal menus are drop down or mega menus that expand to provide visitors with more options. With lots of content in various categories and su-categories, these types of menus can make it easier for visitors if they know where they want to go.

News Websites

Sections for Video Content

In recent years as video has become more common online more news sites have established specific sections for video content. Often times the front page or the sidebar will include a section that showcases recent videos added to the site.

News Websites

Popular Content Sections

With content that is added very quickly and frequently, helping visitors to find something is an important part of usability. Many news sites choose to show links to articles that are currently popular, this is frequently in the sidebar.

News Websites

Social Media Integration

Like many blogs, most news sites are now including social media and social networking integration. In some cases it may be voting buttons, or it could be links to Twitter and Facebook profiles.

News Websites

Righthand Sidebars

Although some news sites use a sidebar at the left side, the typical layout is to have a right sidebar. In most cases this applies to the front page and to content pages.

Omid for Iran

Showcase of Magazine-Style Websites:

Here is a look at 25 well-designed sites with a magazine-style. For more see our previous posts 25 Outstanding Magazine Style Website Designs and 25 Magazine-Style Layouts for Your Design Inspiration.

Kineda

Kineda

Visual Recipes

Visual Recipes

Clutch Magazine

Clutch Magazine

Guardian

Guardian

Canal+

Canal+

Broadway

Broadway

Silicon Prairie News

Silicon Prairie News

Omid for Iran

Omid for Iran

Mix Online

Mix Online

West Coast Poppin’

West Coast Poppin'

Causecast

Causecast

Livestream Guide

Livestream Guide

Run Addicts

Run Addicts

CNN iReport

CNN iReport

Sparksheet

Sparksheet

Design Shack

Design Shack

Save the Songs

Save the Songs

Serious Eats

Serious Eats

Fashionista

Fashionista

Relevant Magazine

Relevant Magazine

UX Booth

UX Booth

The Swish Life Magazine

The Swish Life Magazine

Singapore International Foundation

Singapore International Foundation

Caja Navarra

Caja Navarra

MSN

MSN

For more design inspiration please see:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Join the Newsletter

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies.

Popular WordPress Themes

More Design Inspiration

BlueHost