12 Distinctive Features Of Online Newspaper Design
Online newspaper design can be fascinating to analyse. It doesn’t matter what type of news they cover, they all face the challenge of employing content-rich layout on the home page. This is especially true for mobile newspapers, the medium brings about usability and navigational issues for the designer as well as monetization challenges for the publisher.
It’s interesting to see how several mobile newspapers integrate advertisements in their design. In some cases, the ads are somewhat intrusive or excessive, but most digital newspapers are able to use ads without turning readers away, in part because of the quality of content that’s available.
If you’ve reached the same point in your online newspaper project figuring out how to strike a balance among elements such as ads, medium, and UX, below is Julia Blake‘s list of distinctive features of newspaper website design. We find that she doesn’t only nail the fundamental design principles primarily used in news sites, but also digital newspapers, in general.
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.
Read full article on Instant Shift.
