Trends in News and Magazine-Style Web Design
Published April 5th, 2010 in DesignNews 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Singapore International Foundation
For more design inspiration please see:
17 Responses
good post. Beautiful collection
Thanks. I have just started learning to do web design. This is very useful for me.
Beautiful collection
Makes sense that these types of designs would be catching on more, with the decline in print media…
nice design. It is can be my inspirations. Thanks
Wow i love the Artwork in UGS mag. Great post! Thanks for sharing
Beautiful Collection, Thanks.
Thanks for sharing this collection. Great one.
PS: I personally do not like guardian.co.uk design, but hey, that’s just me…
Thanks alot for sharing. Just in the right time for my new project for Cars enthusiasts at the News section!
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.
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.
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.
Some obvious and expected points, but still a great article! I rather enjoyed the showcase particularly.
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
A lot of sites are starting to use one image as the background. You have some nice layouts.
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.