Earlier this year, we announced the release of two new and free themes to the Metro Publisher Community. Each theme is different in its design to give our publishers the benefit of choosing a theme that best relates to their content and likeness. Here, we divulge on the motivation and design elements of the Newsy theme, and give helpful advice on how to best use them.
Newsy Theme Example
What Inspired the Newsy Theme
At first glance, Newsy resembles the look of a classic newspaper with its centered logo and navigation, strong typography and minimal graphics and colors. Newsy’s theme designer, Diana, wanted to provide a modern and clean theme that featured the content well and didn’t require lots of imagery to look good. The goal being very few design elements with highlight on content and brand.
Diana explains, “It’s well suited for publishers that are more text oriented, and may have limited access to photography for every piece of content. The name ‘Newsy’ itself hints at this, in that most newspapers are text heavy and use images sparingly and strategically.”
From the Top
To keep the Newsy design from losing its traditional look and feel, there are a couple design elements that will remain unchangeable. In this case, the background will always be white, and the body text black.
The top area of the theme expands out to the edge of the browser giving a less contained look, and features a drop down navigation that caters to sites with a lot of sections and subsections.
To keep content organized and easy to read, the maximum width for the content area is 960 pixels when using a base font size of 16 pixels.
The logo is centered, so to make good use of this design feature, your logo should be in the range of 500 pixels wide, around 50 to 75 percent of 960 pixels. Height always needs to be considered, and we recommend to limit it to 150 pixels. If the logo is very tall, it will take up too much of valuable screen space at the top of the page.
Be sure that your logo is sharp and clear. Any format will work, but keep in mind that the background is white, so the optimal image logo would be on a white or transparent background.
Color and Typeface
The two most prominent design elements that can be used to differentiate two sites using the Newsy theme are color and typeface.
There are three default color palettes provided to get started, but we recommend to make one to match your brand as best as possible. This way, your web presence will be individualized for added brand value.
The most dramatic being the brand color, it would be best to reinforce “your” color here, and use your secondary brand color as the action color for the links. Newsy works well with dark, soft and calm colors.
Typeface and font size can be changed for the navigation, headlines and body copy. Diana recommends using a mix of serif, for example, Georgia and Palatino, and bold san-serif such as Trade Gothic in all-caps.
Custom fonts can also be used for Metro Publisher sites with Adobe’s Typekit service integrated in our platform. An active Typekit account is required to use this feature.
Color and typeface selections cascade through the rest of the design - labels are treated in a similar fashion to navigation, and smaller headlines similar to main ones.
We are confident that using these tips and guideline will help kick off and align your ideas while building your site with the Newsy theme.
