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.

TechRepublic Style Guides

574 views

Published on

When I worked for CBS Interactive, I created some simple style guides for TechRepublic 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

TechRepublic Style Guides

  1. 1. Design and Style Guide June 2016 7px 7px Logo color R:255 G:255 B:255 (#F5F5F5) 7px 7px 7px
  2. 2. The purpose of this guideline document is to provide guidelines and usage specifications for using the TechRepublic logo and branding guidelines for the TechRepublic website. This document provides visual guidelines and recommendations to implement the branding for TechRepublic. These guidelines can help echo the product and brand experience across the web and other mediums. TechRepublic design and style guide Welcome These guidelines contain the information you need to consider when designing the TechRepublic web pages, and other assets for the brand.
  3. 3. 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. TechRepublic design and style guide Contents
  4. 4. A republic is a group where certain equality is given between its members. The word “tech” is an informal word for “technology. When people think of tech, people think of computers and innovation. In the city sprawling with big tech names and startups, putting the two words together mean that everyone is held with an equal opportunity to rise above the technology space. It’s only fitting to have such a name where the best minds clash, compete, and collaborate for progress and innovation, and the brand is there to watch it all unfold and tell the story. The TechRepublic Logo TechRepublic design and style guide 01 Logo
  5. 5. The TechRepublic logo is composed of two main parts: the symbol and the logotype. Together, this makes the TechRepublic logo. It is simple but not dull, straight-forward but not bash, clear, reliable and credible. The logo = symbol + logotype TechRepublic design and style guide Logo Symbol Logotype Logo
  6. 6. 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 th e logo breathe and flow TechRepublic design and style guide Logo 7px clearance space 7px clearance space 14px ideal clearance space safe space
  7. 7. Main colors of blue and white. White signifies clarity and transparency, and blue the signifies integrity and friendliness. Attractive qualities that the brand wants to emulate especially when dealing with news in the tech space. Logo colors TechRepublic design and style guide Logo On screen: 150 px W Minimum size background color: R:017 G:116 B:199 (#1174c7) Logo color R:255 G:255 B:255 (#F5F5F5)
  8. 8. To ensure brand consistency, TechRepublic color variations should only come in two shades of blue. Logo should be straight forward, clear and legible all the time. This symbolizes clarity, friendliness, and credibility, which is also present in the content TechRepublic publishes on a regular basis. Logo is always clear, solid colored, and with no obstructions and/or complex effects. Logo Variations TechRepublic design and style guide Logo Do Don’t
  9. 9. Proxima Nova (2005) bridges the gap between typefaces like Futura and Akzidenz Grotesk. The result is a hybrid that combines modern proportions with a geometric appearance. Through its versatility, Proxima Nova has become one of the most popular web fonts, in use on thousands of websites around the world. Proxima Nova Family Use TechRepublic design and style guide 06 Typeface Proxima Nova (Bold) ABCDEF abcd1234ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() On all primary text, headers and secondary buttons
  10. 10. Use The huge variety of font weights and widths will ensure immenense flexibility, and consistency for the future growth of the brand identity. Proxima Nova Family TechRepublic design and style guide Typeface Proxima Nova (Reg) ABCDEF abcd1234ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() On all secondary text, including content labels
  11. 11. TechRepublic is an online trade publication and social community for IT professionals. Mainly used in the website, wide array of the Proxima Nova font family makes it ideal to make the website consistent, while not making it dull. Headers and main texts use Proxima Nova Bold, while Proxima Nova Regular is used on secondary text including content labels. Where Type Thrives TechRepublic design and style guide Type Use TechRepublic homepage sample Proxima Nova Bold primary text, headers and secondary buttons Proxima Nova Regular secondary text, including content labels
  12. 12. Colors create the overall look and feel of the TechRepublic brand. Blue stands for stability and depth, loyalty and trust. Combining it with gray which is a neutral color, gray signifies conservative, reliable, formal and independent. The TechRepublic brand embodies these in the posts it daily publishes in the tech space. Unbiased, neutral, reliable and credible. Green is a positive and optimistic color. It is perfect for the TechRepublic brand as it observes and relays credible information. Green is used for the TechRepublic button to promote growth and optimism in the actions user make. Colors TechRepublic design and style guide 09 Color Specifications R:106 G:118 B:127 HEX #6A767F R:028 G:104 B:160 HEX #1C68A0 R:042 G:133 B:197 HEX #2A85C5 R:202 G:214 B:222 HEX #C AD6DE Main Colors content and menu bar Blue Variations drop downs and secondary links R:060 G:138 B:065 HEX #3C8A41 R:085 G:175 B:071 HEX #55AF47 Other Colors buttons R:034 G:121 B:183 HEX #2297B7
  13. 13. From desktop to mobile, the TechRepublic website is designed to be responsive and adaptive to the screen size user views content. Grids to Guide TechRepublic 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
  14. 14. 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 TechRepublic design and style guide 11 General Padding Guide 30 px 30 px 30 px 30 px 30 px

×