qwikq brandbook
DESCRIPTION
The qwikq BrandbookTRANSCRIPT
qwikq
2010 Brandbook
Contents
1. Logo 2. Typeface3. Colors4. Tone of voice5. Images6. Video7. The Widget8. In store experience
Our logo reflects the qwikq core values: humble, modern, professional, but not typically corporate
Logo
4
qwikq
5
How to use the logo.
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.
Colors
6
01
02
qwikqqwikq
qwikq qwikq
7
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
Sizes and variations
8
01
02
02
45px
qwikq
qwikq
45px
80px
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
03 04
02
qwikq
qwikqqwikq
qwikq
11
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.
Our Font
01 Light
Typography
AaABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)
12
02 Regular
03 Thin
Aa
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)
13
Web Font
Windows: Arial
Typography
AaABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)
14
For the web we chose two substituting fonts, Arial for Windows and Helvetica for Mac. These provide better readability for screens.
Mac: Helvetica
AaABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)
15
These are our main colors. They are simple and reflect trust, openess and humbleness.
Green, black and white
Color
RGB 0/0/0CMYK 0/0/0/100HEX #000000
RGB 56/181/74CMYK 75/0/100/0HEX # 38b54a
50% Opacity
RGB 242/240/240CMYK 4/3/3/0HEX #f1f1f1
RGB 255/255/255CMYK 0/0/0/0HEX # ffffff
16
17
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.
Tone of Voice
18
Sincere
Humble
Simple
CleanFriendly
Professional
19
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.
Images
20
21
32
33
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.
The Widget
Default state 1 Default state 2
34
Default state 3
Default state 4
35
295px
184px This button can be color-modified to fit your corporate color
Always allow for at least 20 px spacing around the widget
Put your company name or logo inside this box
Customization and Examples
36
Example for Swedbank
Example for Systembolaget
37
38
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.
In-store
39
40
41