Issuu on Google+

qwikq

2010 Brandbook


Contents

1. Logo 2. Typeface 3. Colors 4. Tone of voice 5. Images 6. Video 7. The Widget 8. In store experience


Logo

Our logo reflects the qwikq core values: humble, modern, professional, but not typically corporate

4


qwikq

5


How to use the logo. Colors 01 Use the logo on a white background or with a customizable color (see page X) 02 If the backgroundcolor is too dark, it’s appropriate to invert the logo.

6


01

qwikq

qwikq

qwikq

qwikq

02

7


Sizes and variations 01 The minimum size of the logo is 45px high 02 When displayed under 80 px high, use the version with the text to the right

8


01 45px

02 45px

qwikq

02

80px

qwikq

9


How NOT to use the logo. 01 Never use other colors than black or white for the logo 02 Never place the logo on top of a picture or pattern 03 Never tilt the logo 04 Never put effects such as dropshadow, emboss or gradients over the logo

10


01

02

qwikq

03

qwikq

04

qwi

kq

qwikq

11


Typography

Our Font We use Colaborate as our coroporate font. The logo uses ColaborateRegular, while headlines and text use either ColaborateLight or ColaborateThin. It’s simple, relatable and easy to read. 01 Light

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)

12


02 Regular

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)

03 Thin

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)

13


Typography

Web Font For the web we chose two substituting fonts, Arial for Windows and Helvetica for Mac. These provide better readability for screens.

Windows: Arial

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)

14


Aa

Mac: Helvetica

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)

15


Color

Green, black and white These are our main colors. They are simple and reflect trust, openess and humbleness.

RGB 0/0/0 CMYK 0/0/0/100 HEX #000000

RGB 56/181/74 CMYK 75/0/100/0 HEX # 38b54a 50% Opacity

RGB 242/240/240 CMYK 4/3/3/0 HEX #f1f1f1

RGB 255/255/255 CMYK 0/0/0/0 HEX # ffffff

16


17


Tone of Voice The tone of QwikQ will be a vital part in creating a coherent but equally appealing communication for both customers and businesses alike. Here are some keywords to guide this communication.

18


Humble Sincere

Simple Professional

Friendly

Clean 19


Images We like photos. Use photos often in relation to the qwikq brand. Some keywords for pictures are: Bright, calm and warm. Either black/white or color. When using colorphotos, they should lean against earthy tones such as green, brown and yellow. Always have people in the pictures, smiling, doing things they like. Never use pictures of people waiting or standing in line. We don’t want to be associated with waiting and the negative sides of queing. If you don’t want to cover a whole page with a picture, put it in a circular mask.

20


21


32


33


The Widget The qwikwidget is one of our main channels of interaction with the customer. It’s intuitive, natural and customizable depending on what site it’s displayed on. This is the default look of the widget, wich serves as a guideline for customizing it.

Default state 1

34

Default state 2


Default state 3

Default state 4

35


Customization and Examples 295px

Put your company name or logo inside this box

184px

This button can be color-modified to fit your corporate color Always allow for at least 20 px spacing around the widget

36


Example for Swedbank

Example for Systembolaget

37


In-store This is our example of how the in-store experience with qwikq could look and feel like. It’s based on the widget to make the whole experience seemless and coherent. The customization options are the same as for the widget; the company logo, the button and the location.

38


39


40


41


qwikq Brandbook