Today we are going to talk about styles in website design, and the accent we make is on the newspaper style. In this post, you will find out the most distinctive features of this design and get some useful tips to follow to gain better outcome with your project.

Style is a total combination of how you design your website. Style is also a way of communication between you and your audience. Each web design style has its specific set of components.

The main styles in web design are:

• clean;
• grunge;
• vintage/retro;
• illustration;
• newspaper/magazine.

Newspaper style was primarily used for online newspapers and magazines, as their printed versions have this structure. Today this design is appropriate for any website, especially if it must be content-heavy. Website done in a newspaper style is easy to recognize among many others by a content-rich layout, multi-column structure, simple and contrasting colors.

Newspaper Website Layout: Characteristics

1. Black on White

Traditional printed newspaper is white or gray and the text is black. This color combo is perfect for our eyes. The contrast of colors facilitates the readability and that is why this color scheme is the most suitable for newspaper style websites, which are usually stuffed with much content. You can step aside from this classic color mix, but you should always keep in mind that contrast is a must. You can turn over the regular color choice making the background black and the typography white. But never use yellow on black, green on blue, pink on blue, etc. Try to read the website yourself, if your eyes feel well after, you can adopt the picked colors on your web project.

Neutral light and dark are basic colors, yet there can be more accent colors used. For example, blue is good to use for headlines, red would be perfect for buttons. The navigation menu tabs can be decorated with a lighter or darker shade of the primary color, or colored the same as accent details. So, the menu will stand out on the canvas and bring a perfect visual experience to users.

2. Minimal Graphics

The website with newspaper layout is clean, informative, structural and has graphic elements designed accurately and in the minimalist way. Graphic elements are:

• lines
• shapes
• colors
• typography
• textures.

As we already mentioned, the color palette is always simple on such websites. The textures are rarely used on newspaper web designs, because a wall of text with images on a wood or grunge texture will distract your visitors and aggravate the readability of the content. Nevertheless, paper texture is right to the point here. It can be a background texture, buttons texture or used for just Header or Footer areas.

The regular grid-based design or multi-column layout cut down the use of shapes and lines, because there are enough of them anyway. There would be too much geometry if you design your right form website with an extra set of figures.

3. Grid-based Design or Multi-column Layout

Newspaper website layout is the one with perfectly organized structure. These are content-rich websites that usually have this kind of design, and so structure comes to be the first. Grid or columns are the most useful types of content arrangement. It is true that “well designed grid systems can make your designs not only more beautiful and legible, but more usable” (Mark Boulton). The grid-based layout allows you to break the content into comprehensive blocks; thereby engage users to read your website not skim.

Similar but not the same is multi-column layout. These should be a few columns of a right height, but not necessarily the same width. The wider the columns are, the more readable the text is. Two columns can make great look, though three and more are definitely better. The columns, as grid, help to differentiate the content, make it easier for users to find an interested section. While, going for this style of layout you shouldn’t forget about the column gap. The website will be extremely hard to read, if the columns are too tight to each other.

4. Headlines and Excerpts

Do you want to open each post and read it when you enter a website or blog with many texts? Headlines help us to differentiate interesting article from the secondary one. So, each content block needs to be entitled. Whether it is a small section on a grid or a full-height column, it should have a headline. The headline is to be of a bigger font, typed in bold or highlighted with a different color. This point is clear, I suggest.

Excerpts are short descriptions of the text articles. These are always done to raise readers’ interest and give them an understanding of a long text in a few sentences. This element is useful, if you run a blog, online periodical, news website, etc.

5. Primary and Secondary Content

Draw a borderline between the parts of your content. Define what is the most important and which texts can wait to be read. For example, you can design your front page with a large header section for new posts (one or a couple). This is a featured area with large images and graphics. The other content will be smaller and based on grid fractions. This makes a strong focus on the latest arrival and help to gain more social shares.

6. Intuitive and Consistent Navigation

Newspaper website layout is designed for content and this content must be easy-to-navigate. Consequently, the navigation menu is characterized by its simplicity, and right position.

The best position is a top page area, because this zone is the first to be mentioned and it always on the same place – just scroll up if you are at the bottom. In case, you love vertical navigation and can’t stop loving it – make your menu oriented vertically but do it on the left. We read from left to right and not vice versa, so the elements on the left fall into eye earlier than on the right.

Newspaper style websites share tons of texts, and they need to be reachable for users.

7. Categorization

Better use of categories is available within newspaper website layout the most. It refers to blogs particularly, and any other websites too. Most sites fail, because they have content purely organized. Categories are necessary if you post frequently and on diverse topics (e.g. news websites).

Divide your content into categories and display them either on a sidebar or on the navigation menu bar.

8. Space for Advertisement

How are you going to make money before your website become popular? Advertisement is how many website owners make rather big profits. Ad banners have to be placed not just somewhere but this position has to be defined exactly. The right places are sidebar, both left and right, Header or Footer. Promotion banners are often seen right in the middle of the text articles, but this point is controversial: it is good for you as a person who takes money for this, but these elements can also irritate your readership.

9. Functional Sidebar

Sidebar can feature not advertisements only, but content categories, recent content, search box, email newsletter bar, navigation, social sharing buttons, discounts/special offers, etc. Newspaper website layout is great to implement sidebar on, because it would be just another column in the row.

There are a couple of ingredients of a successful sidebar design:

• size (height and weight);
• colors;
• fonts;
• placement.

A sidebar should be smaller or equal to the regular column on your layout, no way bigger. It should be kept in neutral colors, but with visible typography. The placement can be both left and right but as we already said everything on the left is seen immediately.

10. White Space Maximization

So far as we are creating a multi-functional website with impressive layout, we can’t but remember about white space. This is an essential component even for a newspaper style design. Let it be space between columns, empty sections from the sides or at the bottom. Users should have a chance to avert their eyes from the text wall and think over.

Generally, white space is considered to be a section where nothing is typed. There is a more narrow meaning: white space is between text lines and letters, around content elements. It is everything that makes your website more readable and simple, even though it is filled with an excessive number of content items.

11. Frequent Content Updates

Newspaper website layout obliges you to work on your project constantly. The website with many columns and grid sections being empty will look awkwardly. You need to fill the website thoroughly, and keep with the tendency to upgrade the content regularly, make your publications frequent and change the featured content in the Header (or wherever you do it).

Content and frequency is a couple, like king and queen. Besides the website look itself, frequent content affects on your results in search engines. People visit your website rarely, if it is outdated, and Google sees it. So, your content gains worse scores in search results.

12. Social Sharing Encouraged

Blogs and news sites are the most common to use newspaper style, and these websites can’t exist without social media integration. It’s the epoch of mass sharing, and social networks are where people spend much of their time. You should use cool follow and share buttons for each network: Twitter, Facebook, Google+, Pinterest, LinkedIn, etc. The only caution: don’t use the accounts you abandoned, use just those you post on oftentimes. Create these buttons the most visible on the website to ensure yourself a better visual exposure on the media platforms.

One more thing we would like to mention about the peculiarities of newspaper website layout is the responsiveness. This layout will never remain the same on mobile devices, and there is no way to make a mobile version keeping it in a newspaper style. Mobile website should not have a multi-column content arrangement, and this is a must for newspaper web design. A mobile website can’t have sidebars. And it is better to reconsider the navigation, because it is more useful to make your mobile site scrollable instead of clickable.

Examples of the Newspaper Website Layout Design

Mijlo Blog

International Civil Defence Organization

Advertising Health

Fashionising

Mano Teises

Blackbox

Proven Quality

The Boston Globe

Motonews

The Brief

New York Magazine

Deadspin

The Wall Street Journal

MindBodyGreen

TED Blog

I am a Food Blog

Long Island Business News

Express

Tribune

What do you think about newspaper web design style? Have you experienced it with your project? It would be great if you could share more examples of newspaper website layout designs here in the comments section.