Upload
alan-arguelles
View
290
Download
1
Embed Size (px)
Citation preview
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.
TechRepubl ic design and s ty le guide
Welcome
These guidelines contain the information you need to consider when designing the TechRepublic web pages, and other assets for the brand.
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.
TechRepubl ic design and s ty le guide
Contents
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
TechRepubl ic design and s ty le guide
01 Logo
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
TechRepubl ic design and s ty le guide
Logo
Symbol Logotype
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 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
TechRepubl ic design and s ty le guide
Logo
7pxclearancespace
7px clearance space14px ideal clearance space
safe space
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
TechRepubl ic design and s ty le guide
Logo
On screen: 150 px W
Minimum size
background color: R:017 G:116 B:199(#1174c7)
Logo colorR:255 G:255 B:255(#F5F5F5)
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 e�ects.
Logo Variations
TechRepubl ic design and s ty le guide
Logo
Do Don’t
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
TechRepubl ic design and s ty le guide
06 Typeface
Proxima Nova (Bold)
ABCDEFabcd1234ABCDEFGHIJKLMOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()
On all primary text, headers and secondary buttons
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
TechRepubl ic design and s ty le guide
Typeface
Proxima Nova (Reg)
ABCDEFabcd1234ABCDEFGHIJKLMOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()
On all secondary text, including content labels
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
TechRepubl ic design and s ty le guide
Type Use
TechRepublic homepage sample
Proxima Nova Bold
primary text, headers and secondary buttons
Proxima Nova Regular
secondary text, including content labels
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
TechRepubl ic design and s ty le guide
09 Color Specificat ions
R:106 G:118 B:127HEX #6A767F
R:028 G:104 B:160HEX #1C68A0
R:042 G:133 B:197HEX #2A85C5
R:202 G:214 B:222HEX #C AD6DE
Main Colorscontent and menu bar
Blue Variationsdrop downs and secondary links
R:060 G:138 B:065HEX #3C8A41
R:085 G:175 B:071HEX #55AF47
Other Colorsbuttons
R:034 G:121 B:183HEX #2297B7
From desktop to mobile, the TechRepublic website is designed to be responsive and adaptive to the screen size user views content.
Grids to Guide
TechRepubl ic design and s ty le guide
10 Gr id 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
TechRepubl ic design and s ty le guide
1 1 Genera l Padding Guide
30 px
30 px
30 px
30 px
30 px