ZDNet Style Guide

Design and Style GuideJune 2016

The purpose of this guideline document is to provide guidelines and usage speci�cations for using the ZDNet logo and branding guidelines for the ZDNet website.

This document provides visual guidelines and recommendations to implement the branding for ZDNet. These guidelines can help echo the product and brand experience into your environment.

ZDNet design and sty le guide

Welcome

These guidelines contain the information you need to consider when designing the ZDNet web pages, and other assets for the brand.

Name & Logo

Typeface & Use

Color Speci�cations

Grid and Space

General Padding Guide

Branding is achieved through a combination of several factors. This includes the name and logo, use of color, text, graphics, style, and other design elements.


Contents

Originally found by publisher Zi� Davis as a general interest technology portal, the company has evolved into an enterprise IT-focused online publication owned by CNET Networks.

Behind the Name


01 Name and Logo

It is good to have at least 7px border space from the corners of the logo to anywhere the logo is placed. Ideal to have 14px clearance space. This lets the logo breathe and �ow naturally in the environment it is in. Safe space means other elements beyond the 14px clearance space is good to place other elements with the logo.

Let the logo breathe and �ow


Logo

safe space 7px clearance space

14px ideal clearance space

Main colors of red and white. White signi�es clarity and transparency, and red signi�es energy, strength and power. Together the logo signi�es dominance towards the IT news �eld with absolute clarity and transparency.

Logo colors


Logo

Minimum size

On screen: 50 px W

background color: R:213 G:222 B:227(#D5DEE3)

Logo colorR:225 G:031 B:023(#E11F17)

To ensure brand consistency, ZDNet color variations should only come in its original colors, with only 2 dark colors as its background. This ensures that the logo stands out, but unobstrusive, while keeping the brand essence.

Logo should always be clear, legible, and with no obstructions and/or complex e�ects.

Logo Variations


Logo

Do Don’t

Raleway is an elegant sans-serif typeface, designed in a single thin weight. It is a display face that features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than it's neo-grotesque inspired default character set.

Raleway Family

Use


06 Typeface

Raleway (Bold)

ABCDEFabcd1234ABCDEFGHIJKLMOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()

On all primary text, headers and secondary buttons

Use

The huge variety of font weights and widths will ensure immenense �exibility, and consistency for the future growth of the brand identity.

Raleway Family


Typeface

Raleway (Reg)ABCDEFabcd1234ABCDEFGHIJKLMOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()

On all secondary text, including content labels

ZDNet is an online trade publication and social community for IT professionals. Mainly used in its online publication, Raleway is an elegant sans-serif typeface family intended for headings and other large size usage. Initially designed by Matt McInerney as a single thin weight, it was expanded into a 9 weight family by Pablo Impallari and Rodrigo Fuenzalida in 2012 and iKerned by Igino Marini.

Where Type Thrives


Type Use

ZDNet homepage sample

Raleway Bold

primary text, headers and secondary buttons

Raleway Regular

secondary text, including content labels

Colors create the overall look and feel of the ZDNet brand. Blue stands for stability and depth, loyalty and trust. Combining it with gray which is a neutral color, it signi�es formal, conservative, and reliable news. Independent from bias therefore, more credible.

Colors


09 Color Speci�cations

HEX #DE1400all red icons, buttons, editor ratings, and text

HEX #080E14all primary text, headers, secondary buttons

HEX #6a767fall secondary text, including content labels

HEX #CAD6DEall dividers, secondary icons, and secondary header text

Main Colors

HEX #1174c7all secondary links

HEX #56AAF6all sponsored labels

HEX #162736all dropdowns

HEX #4190C7user ratings

Other Colors

From desktop to mobile, the ZDNet website is designed to be responsive and adaptive to the screen size user views content.

Grids to Guide


10 Grid and Space

1230 px, 12 column grid (desktop)

70 px 30 px

980 px, 12 column grid (tablet)60 px 20 px

140 px 140 px

320 px, 2 column grid (phone)

10 px border20 px gutter

10 px border

30 px of vertical padding in-between all groupings of content is necessary to maintain a balance of space, as well maintain a uniform separation in keeping with the 30px margin widths.

Vertical Padding Guide


11 General Padding Guide

30 px

30 px

30 px

30 px

30 px