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:

Published April 5th, 2010 by

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

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

17 Responses

Comments are now closed on this post.

  • michael soriano, April 5, 2010

    good post. Beautiful collection

  • svetlana, April 5, 2010

    Thanks. I have just started learning to do web design. This is very useful for me.

  • David, April 5, 2010

    Beautiful collection

  • Makes sense that these types of designs would be catching on more, with the decline in print media…

  • BloggerTemplatePlace, April 6, 2010

    nice design. It is can be my inspirations. Thanks

  • DesignerWall, April 6, 2010

    Wow i love the Artwork in UGS mag. Great post! Thanks for sharing

  • Princo, April 7, 2010

    Beautiful Collection, Thanks.

  • Web Design, April 9, 2010

    Thanks for sharing this collection. Great one.

    PS: I personally do not like guardian.co.uk design, but hey, that’s just me… :D

  • Ayman Aboulnasr, April 10, 2010

    Thanks alot for sharing. Just in the right time for my new project for Cars enthusiasts at the News section!

  • Alec, April 11, 2010

    It takes a lot of work to get a news / magazine site web design right at the outset. The examples posted are a good resource and the majority have had years to refine their sites. Good web design always starts with good research. I prefer the Guardian web site to a lot of the other newspaper sites.

  • ChrisDigital, April 12, 2010

    Nice roundup of editorial design samples, some really great work here. I like that there’s even white space in some of the designs :-) imagine that.

  • Sites N Stores, April 12, 2010

    Nice stuff. those examples are a good resousce with excellent design ideas. have look Sites n Stores portfolio you will get more ideas about desinging.

  • Ash Blue Web Design, April 13, 2010

    Some obvious and expected points, but still a great article! I rather enjoyed the showcase particularly.

  • Alex Aguilar, April 16, 2010

    This days, web designs are getting better and more complex, but I find that the magazin style design is getting simpler, focusing more on user interactivity and friendliness

  • Florida web design, May 4, 2010

    A lot of sites are starting to use one image as the background. You have some nice layouts.

  • essex website designers, September 23, 2010

    It’s kinda ironic how each site is so different yet they are all the same basic fundementals, news sites are just one of those areas that are really hard to get into, competing with the likes of the BBC and MSN.