Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress Themes

7 Principles of Good Website Design for Newspaper WordPress Themes

by
Length:MediumLanguages:

You know your Newspaper theme design is excellent, but how often does someone else say “Wow! Outstanding!”? Possibly never. Great design is (almost) invisible; a natural experience, so users barely notice that they’re using and enjoying it. 

There are three major components to every Newspaper WordPress Theme that give end users (readers) what they’re looking for: 

  • content design
  • content usability
  • website performance (page loading speed)

Discerning website owners choose newspaper themes that help them solve all these points without hassle.

Newspaper theme design

In this article we’ll dive into seven principles for designing a quality newspaper theme. I’ll use some popular Newspaper WordPress themes on Themeforest as case studies, along with some of the heavy-hitters in the mainstream media.

1. Make it Simple to Create Content

In the news industry, bloggers, vloggers, journalists, and content writers focus their attention on creating content that’s ready to amaze the audience. Very few of them have web design or coding skills, so building their websites with WordPress can be a challenge–they’ll love you if you give them an easy way to create, design, and publish their content.

A good solution for these problems can be found in one of Themeforest’s most popular themes for news. Newspaper WordPress Theme is a best-selling blog, news, and magazine theme. It includes a custom click-and-drag page builder which helps users design their own content.

Newspaper WordPress Theme Drag and Drop Elements with the tagDiv Composer page Builder
Drag and drop page composers offer an easy way to create content

It gives users over 100 distinct elements to mix around and customize posts, pages, headers, and footers, directly on the frontend of the website. Each item has a multitude of presets, so there’s no need to create everything from the ground up. Website owners can use a pre-existing design and start customizing from there on without touching a single line of code. Which brings me to..

2. Don’t Make Me Code!

A blogger or journalist must have the freedom to customize the design and make complex style adjustments, without coding. Here’s where template libraries enter the game. More and more themes on Themeforest come with a collection of layouts ready to use at the click of a button, reducing the development time of the resultant websites. Here are some examples:

The Issue

The author of the Issue Magazine WordPress Theme added a template library of layouts, and pages adapted for the WPBakery page builder. They call it the Fuel Studio Element Gallery:

The Fuel Studio Element Gallery
The Fuel Studio Element Gallery 

MagPlus

Another great example of a library created for the WPBakery plugin can be found on the MagPlus WordPress Theme by Theme Bubble.

The MagPlus Theme Element Library by Theme Bubble
The MagPlus Theme Element Library

Newspaper

Newspaper also gives its customers access to a massive, free to use, pre-built collection of elements. The tagDiv Cloud Library gathers over 620+ designs: single templates, sections, pages, homepages, headers, and footers; all created by experts. Users can also import whatever they need from the author’s servers. 

The tagDiv Cloud Library
The tagDiv Cloud Library

3. Make Content Easily Scannable

Keep in mind that users don’t read content on the internet in the way you might expect. Just like you and me, they’re scanning titles, images, and excerpts, trying to figure out–as fast as possible–where to find the content they are searching for.

Breaking pages up into clearly defined areas to make content scannable is essential for focusing audience attention. So, make sure your content is scannable. Use negative space and visual relationships on pages to let your content breathe. This way you’ll give the audience’s eyes time to process the content.

Making content scannable

Learn more about how these invisible forces of design can aid your newspaper layouts with David Kadavy’s miniseries:

4. Put Conventions to Work

It might sound obvious, but i’s important you make your news website easy to navigate and understand. You don’t have to reinvent the wheel to achieve this; well established web design conventions do the trick.

Over the years, internet users have become subconsciously able to recognize common patterns on websites:

  • The main navigation being at the top or left side of a page
  • The logo being at the top left or center of a page
  • Links changing color or style when you hover over them
  • The cart being at the top right side of the page
  • The sidebar containing additional, useful information, and popular content
  • Each article being shareable with a click (social sharing icons)
  • Content being divided into sections and can be filtered
  • The logo being clickable, and always bringing a visitor to the homepage

While striving for uniqueness, you might be tempted to ignore conventions like these, and that’s your prerogative. However, a well-established pattern can make using a website more intuitive. For example: would you look for the latest news at the bottom of a page? I’m guessing not; latest news being anywhere other than the top of an archive would create confusion and frustration, hardly helpful when pushing for quality user experience.

Independant
Independent WordPress theme: conventions for site identity, main headline, supporting content, and more

5. Typography is the New Calligraphy

Typography is the art of arranging type to make written language readable and appealing. For visitors, it can be the difference between leaving a website and the motivation to continue reading.

A few definitions to guide you through the art of fonts:

  • A serif is a small decorative line used where letterforms terminate.
  • Sans serif describes typefaces which don’t have that feature. The name comes from French, where “sans” means “without.”
  • A Typeface (or font family) is a set of fonts that share design features while having a specific weight, style, condensation, width, ornamentation, slant, italicization. For example, Open Sans is a typeface, with Open Sans Light, Open Sans Bold, and others being font families within it.
  • Tracking (letter-spacing) refers to the space between letters that visually affects a block of text.
  • X-height refers to the distance between the baseline and the mean line of lowercase letters. It’s essentially the size of the character “x” in that font.
  • The Baseline is a line upon which chracters sit. Descenders extend below it (the letter “y” has a descender line).
Typography basics

If you take a look at the biggest newspaper and magazine websites around, most of them use sans serif typefaces, while others skilfully combine serif and sans serif. There’s an old debate between web designers about which is better for readability.

Let’s take a look at some of the most popular news websites. I’ve chosen four examples to show you how they use typography.

BBC News and Wired both use sans serif type, giving them a clinical and modern feel. Wired actually uses a confident array of fonts, to add a healthy dose of personality too.

BBC news and Wired

In contrast to these we have The New York Times and the Washington Post; both rely heavily on serif type, with display calligraphy adding further to the traditional feel:

the washington post and the new york times

Whatever the personality you’re going for, make sure the website owner can stay true to their website and choose the typography that best conveys their message and style. Premium themes often help owners make precise adjustments to their typography.

Newspaper WordPress Theme Typography Settings on block

6. Provide a Responsive Reading Experience

A bit of ancient history: there was once a time when people navigated the internet entirely from desktops. In 2001, some smart Germans created the first responsive website (though arguably the very first website ever was responsive too), a design that adapted itself to the screen size. A couple of decades later, responsive and mobile web design is mandatory as the majority of web traffic now comes from small screen devices.

JNews does responsive typography well
A great reading experience on mobile, demonstrated by JNews

For newspapers, because you’re expecting visitors to read and engage with your content, creating an enjoyable experience is even more important than ever. The bottom line is: If your website or news theme does not account for mobile or retina screens, you should have fixed it yesterday!

7. Dark Mode for Reading Time

For years, we’ve become used to reading everything online in light, metallic shades of grey. This is one convention you might want to rethink. For many people, a dark mode is necessary and can offer rest for the eyes. Enhancing your theme with the option to display content according to the visitors’ preferences feels more like a courtesy between friends, but it can be essential for a good reading experience.

One theme which does this right is Bimber Magazine WordPress Theme. Implementing dark mode is easy; with one click visitors can switch to the dark mode.

Bimber Magazine WordPress Theme
Bimber Magazine WordPress Theme’s light and dark modes

Here you can see a small example on how to set up an option to switch to dark mode reading:

This can be taken a step further by using the user’s system settings to determine whether they want to use dark or light mode. Browser support is still sketchy, but take a look at how CSS will soon be able to handle dark mode for you:

Good Design for Newspaper WordPress Themes

Newspaper themes usually focus on a few key concepts:

  • Creating effective visual hierarchies
  • Formatting content to support scanning
  • Focusing the audience’s attention
  • Displaying large amounts of content effectively
  • Supporting monetization
  • Loading content quickly

The list can easily become longer as the dynamic of the publishing news industry is continuously changing. Designing a newspaper theme, just like creating a news related website, must be user-centric. Finding out what your customers are expecting from you is the first step in creating an excellent experience for them and a successful product for you. The ultimate judge for your newspaper theme is the audience of your clients’ websites.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.