Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Design and Style Guide
June 2016
The purpose of this guideline
document is to provide
guidelines and usage
specifications for using the
ZDNet logo and bran...
Name & Logo
Typeface & Use
Color Specifications
Grid and Space
General Padding Guide
Branding is achieved through a
combin...
Originally found by publisher
Ziff Davis as a general interest
technology portal, the company
has evolved into an enterpri...
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 14...
Main colors of red and white.
White signifies clarity and
transparency, and red signifies
energy, strength and power.
Toge...
To ensure brand consistency,
ZDNet color variations should
only come in its original colors,
with only 2 dark colors as it...
Raleway is an elegant sans-serif
typeface, designed in a single
thin weight. It is a display face
that features both old s...
Use
The huge variety of font weights
and widths will ensure
immenense flexibility, and
consistency for the future
growth o...
ZDNet is an online trade
publication and social
community for IT professionals.
Mainly used in its online
publication, Ral...
Colors create the overall look
and feel of the ZDNet brand.
Blue stands for stability and
depth, loyalty and trust.
Combin...
From desktop to mobile, the
ZDNet website is designed to be
responsive and adaptive to the
screen size user views content....
30 px of vertical padding
in-between all groupings of content
is necessary to maintain a balance
of space, as well maintai...
Upcoming SlideShare
Loading in …5
×

ZDNet Style Guide

410 views

Published on

When I worked for CBS Interactive, I created some simple style guides for ZDNet to help me and future designers create the same branding for the company.

Published in: Design
  • Be the first to comment

  • Be the first to like this

ZDNet Style Guide

  1. 1. Design and Style Guide June 2016
  2. 2. The purpose of this guideline document is to provide guidelines and usage specifications 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 style guide Welcome These guidelines contain the information you need to consider when designing the ZDNet web pages, and other assets for the brand.
  3. 3. Name & Logo Typeface & Use Color Specifications 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. ZDNet design and style guide Contents
  4. 4. Originally found by publisher Ziff 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 ZDNet design and style guide 01 Name and Logo
  5. 5. 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 flow 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 flow ZDNet design and style guide Logo safe space 7px clearance space 14px ideal clearance space
  6. 6. Main colors of red and white. White signifies clarity and transparency, and red signifies energy, strength and power. Together the logo signifies dominance towards the IT news field with absolute clarity and transparency. Logo colors ZDNet design and style guide Logo Minimum size On screen: 50 px W background color: R:213 G:222 B:227 (#D5DEE3) Logo color R:225 G:031 B:023 (#E11F17)
  7. 7. 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 effects. Logo Variations ZDNet design and style guide Logo Do Don’t
  8. 8. 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 ZDNet design and style guide 06 Typeface Raleway(Bold) ABCDEF abcd1234ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() On all primary text, headers and secondary buttons
  9. 9. Use The huge variety of font weights and widths will ensure immenense flexibility, and consistency for the future growth of the brand identity. Raleway Family ZDNet design and style guide Typeface Raleway (Reg) ABCDEF abcd1234ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() On all secondary text, including content labels
  10. 10. 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 ZDNet design and style guide Type Use ZDNet homepage sample Raleway Bold primary text, headers and secondary buttons Raleway Regular secondary text, including content labels
  11. 11. 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 signifies formal, conservative, and reliable news. Independent from bias therefore, more credible. Colors ZDNet design and style guide 09 Color Specifications HEX #DE1400 all red icons, buttons, editor ratings, and text HEX #080E14 all primary text, headers, secondary buttons HEX #6a767f all secondary text, including content labels HEX #CAD6DE all dividers, secondary icons, and secondary header text Main Colors HEX #1174c7 all secondary links HEX #56AAF6 all sponsored labels HEX #162736 all dropdowns HEX #4190C7 user ratings Other Colors
  12. 12. From desktop to mobile, the ZDNet website is designed to be responsive and adaptive to the screen size user views content. Grids to Guide ZDNet design and style 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 border 20 px gutter 10 px border
  13. 13. 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 ZDNet design and style guide 11 General Padding Guide 30 px 30 px 30 px 30 px 30 px

×