BRAND GUIDELINES 2013
WHO ARE WE?
BRAND GUIDELINES
2
WWW.ZALORA.COM
content
This is a guide to the basic elements that make up ZALORA. All of these put together, make us who we are.
01. Brand Identity 02. Logo Design - Usage 03. Other Icons 04. Call To Action 05. Typography 06. Colour Scheme 07. Copy & Tone
BRAND GUIDELINES
3
WWW.ZALORA.COM
01. BRAND IDENTITY
BRAND GUIDELINES
4
WWW.ZALORA.COM
01 OUR IDENTITY
brand stor y AFFORDABLE,
We love fashion and we’re secretly tech geeks (shh..). And that basically sums up what we stand for and believe in sharing with our customers. Our love for fashion and technology, coupled with our dedication to our customers, defines everything that we do. We strive to communicate internally and with our customers in one cohesive and consistent voice, from the products we source, online experience we provide, to every touch point of customer interaction.
FAST-FASHION FOR THE YOUNG.
BRAND GUIDELINES
5
WWW.ZALORA.COM
OUR IDENTITY
brand vision
BRAND GUIDELINES
To be the #1 in affordable fast-fashion, and transcend even the online space by converting traditional offline shoppers, through good product offering, easy shopping experience, and pleasant customer interaction.
6
WWW.ZALORA.COM
OUR IDENTITY
brand persona YOUNG FUN & APPROACHABLE
BRAND GUIDELINES
ZALORA is a woman who’s either in her twenties or mid-thirties. She’s confident, trendy and enjoys fashion. She’s always on-the-go, and thus embraces the accessibility that technology has to offer. She isn’t afraid of wearing make-up and knows how to accessorize to get that perfect head-to-toe look. Usually busy, she knows how to dress smart in pieces that take her from day to night, without breaking the bank. ZALORA is a man who’s in his twenties or thirties. He appreciates quality and style. He’s a smart shopper and is always looking out for basic essentials that complement his wardrobe. He’s confident and adventurous and enjoys to experiment with the latest runway styles. He’s a bit of a gadget-lover and relishes the convenience that technology brings to his daily life.
7
WWW.ZALORA.COM
OUR IDENTITY
slogan
BRAND GUIDELINES
FASHION. LIFESTYLE. CONVENIENCE. Asia’s leading online fashion destination
8
WWW.ZALORA.COM
02. LOGO DESIGN - USAGE
BRAND GUIDELINES
9
WWW.ZALORA.COM
02 BRANDS LOGOS
primar y logo The useage of logo elements, is only with original high resolution or vector graphic files shall be used.
BRAND GUIDELINES
10
WWW.ZALORA.COM
BRANDS LOGOS
specifications
Spacing between letters and around will be equal and remain clear. When using minimum size: X = 7mm (18px) length of logo 75mm
75mm
10mm
BRAND GUIDELINES
11
WWW.ZALORA.COM
Incorrect spacing
BRANDS LOGOS
inappropriate logo usage
Incorrect scale of width / height
Incorrect typeface thickness
Incorrect use with stroke
Wrong contrast between logo and background
BRAND GUIDELINES
12
WWW.ZALORA.COM
Mobile app logo
BRANDS LOGOS
other logos
FAV logo
Style Section Tab
Style
Style
Z-EXPRESS Inhouse shipping company
BRAND GUIDELINES
13
WWW.ZALORA.COM
03. OTHER ICONS
BRAND GUIDELINES
14
WWW.ZALORA.COM
03 OTHER ICONS
social footers
Facebook Twitter Instagram Pinterest Mobile App Google +
Social media icon will be used in vertical order as displayed, inside a circle. 1 solid color for logo: #414141 BRAND GUIDELINES
15
WWW.ZALORA.COM
OTHER ICONS
crm initiatives
BRAND GUIDELINES
16
WWW.ZALORA.COM
04. CALL-TO-ACTION
BRAND GUIDELINES
17
WWW.ZALORA.COM
04 C A L L - T O - A C T I O N ( C TA )
buttons
1. Centered text with frame 2. Side spacing at 12px from edge of character 2. Button height, always at 25px 3. Font : Trade Gothic LT Std BOLD, 13Pt 4. Charactar tracking : +50 5. “ > ” : 1 space before type, Baseline shift +1
100 px
25 px
12 px
Button styles:
BRAND GUIDELINES
18
12 px
WWW.ZALORA.COM
C A L L - T O - A C T I O N ( C TA )
other text variations
BRAND GUIDELINES
Other text variations can also be used for CTAs, which can come in different forms: • • • • • •
Segments (e.g. women, men) Categories (e.g. shoes, clothing) Sub-Categories (e.g. heels, sandals) Occasion (e.g. summer) Trend (e.g. peplum, metallics) General directive (e.g. read more, find out now)
19
WWW.ZALORA.COM
C A L L - T O - A C T I O N ( C TA )
BRAND GUIDELINES
> SHOP WOMEN
50 px
revised homepage banner
290 px
> SHOP WOMEN
1. Centered text 2. 3px border (Inverted option, no border) 3. Font : Trade Gothic LT Std BOLD, 25Pt 4. “ > ” : 1 space before type, Baseline shift +2.5
20
WWW.ZALORA.COM
05. TYPOGRAPHY
BRAND GUIDELINES
21
WWW.ZALORA.COM
05 T Y P E FA C E
font type & weight
BRAND GUIDELINES
We typically use sans-serif typefaces across most of our visuals, as it’s modern, clean and legible on-screen. Serif typefaces are only used on certain offline collaterals and magazine.
22
WWW.ZALORA.COM
T Y P E FA C E
font weight variations
BRAND GUIDELINES
23
WWW.ZALORA.COM
T Y P E FA C E
primar y typeface
The primary ZALORA typeface is Futura. It is quintessential to our identity and visual branding. Modern, clean and easily legible, it is available in a variety of weights for full creative expression.
Some history: In typography, Futura is a geometric sans-serif typeface designed in 1927[1] by Paul Renner. It was designed as a contribution on the New Frankfurt-project. It is based on geometric shapes that became representative of visual elements of the Bauhaus design style of 1919–1933. [2] Commissioned by the Bauer Type Foundry, in reaction to Ludwig & Mayer’s seminal Erbar of 1922, Futura was commercially released in 1936.
BRAND GUIDELINES
24
WWW.ZALORA.COM
T Y P E FA C E
primar y typeface family
BRAND GUIDELINES
There are multiple Futura weights available so combinations of them can be used together on the same visuals. Futura Bold and Futura Regular are most commonly used for our headers.
25
WWW.ZALORA.COM
T Y P E FA C E
primar y typeface
FUTURA LT LIGHT ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
26
WWW.ZALORA.COM
T Y P E FA C E
primar y typeface
FUTURA LT REGULAR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
27
WWW.ZALORA.COM
T Y P E FA C E
primar y typeface
FUTURA LT CONDENSED ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
28
WWW.ZALORA.COM
T Y P E FA C E
primar y typeface
FUTURA LT BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
29
WWW.ZALORA.COM
T Y P E FA C E
secondar y typeface
TRADE GOTHIC LT STD BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
30
WWW.ZALORA.COM
T Y P E FA C E
secondar y typeface
TRADE GOTHIC LT STD REGULAR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
31
WWW.ZALORA.COM
T Y P E FA C E
secondar y typeface
PROXIMA NOVA LIGHT ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
32
WWW.ZALORA.COM
T Y P E FA C E
secondar y typeface
PROXIMA NOVA REGULAR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
33
WWW.ZALORA.COM
T Y P E FA C E
secondar y typeface
PROXIMA NOVA SEMIBOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 In today’s digital interface adaptive world, a logo will be formatted and re-formatted from large monitors to small handheld devices. With the constant size change and re-formatting, logo designers are shifting to a more bold and simple approach, with heavy lines and shapes, and solid colors.
BRAND GUIDELINES
34
WWW.ZALORA.COM
T Y P E FA C E
webfriendly typeface
Helvetica Neue LT Pro ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ITC Avant Garde Gothic Pro ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Arial Black ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
BRAND GUIDELINES
35
WWW.ZALORA.COM
T Y P E FA C E
line spacing
Line spacing has a major effect on legibility and influences the look of the final piece. It should be carefully considered and well executed to achieve a clean result.
Leading refers to the distance between the baselines of succesive lines of type
BRAND GUIDELINES
36
WWW.ZALORA.COM
T Y P E FA C E
letter spacing
BRAND GUIDELINES
Spaces between letters control the number of characters on a line. They contribute to the visual appeal and legibility of text. Adjusting the letter spacing may apply to pairs of letters or entire blocks of text.
Apparel Apparel Apparel Apparel 37
WWW.ZALORA.COM
06. COLOUR SCHEME
BRAND GUIDELINES
38
WWW.ZALORA.COM
06 OUR COLORS
primar y colours
BRAND GUIDELINES
# 000000
# FFFFFF
39
40%
60%
80%
WWW.ZALORA.COM
OUR COLORS
secondar y colours
Feminine # 825C9C
40%
60%
# EA0658
80%
Masculine # 1C427F
40%
60%
BRAND GUIDELINES
60%
60%
80%
# 825C9C
80%
Unisex # 1C427F
40%
40%
# FF6C6C
40%
60%
40%
60%
# 72D9A4
80%
# AF1710
80%
40%
60%
40%
60%
80%
# 1F6B5F
80%
40%
60%
80%
# 825C9C
80%
40
40%
60%
80%
WWW.ZALORA.COM
07. COPY & TONE
BRAND GUIDELINES
41
WWW.ZALORA.COM
07 COPY & TONE
our voice
BRAND GUIDELINES
The ZALORA voice is a reflection of who we are and what we stand for. We should always have a consistent voice, regardless of the channels that we are communicating through. These include onsite banners, newsletters, transactional emails, customer service communications, social media and so on. • Always sound friendly and approachable • When in prose, use the first-person, “us”, “we”.
42
WWW.ZALORA.COM
1. Short Be concise. Write as little as possible. Most customers don’t have all the patience and concentration for long copy. COPY & TONE
the 4 Ses Keep in mind “The 4Ses” in your communication, which should serve as a helpful guide.
2. Scannable Customers don’t always read everything as a whole. Use design, headers, sub-heading, bullets etc., to flush out key points. 3. Simple Always go simple in your choice of words. Avoid jargon and exaggerrated language. 4. Seductive Remember that we’re meant to persuade our customers into a course of action, e.g., click onto banner, read more. Examples: • • • • • •
BRAND GUIDELINES
Sense of urgency - limited time only, while stocks last Exclusivity - a ZALORA exclusive, exclusive to ZALORA Attractive price points - sale, up to, hot deals Newness - Just in, new Curated and customized - editor’s picks, curated collection Fashionable - use of popular fashion terms 43
WWW.ZALORA.COM
COPY & TONE
copy
ZALORA Always write our name in upper case - We are known as ZALORA, not Zalora. Sentence Structure Emphasize your key message either at the beginning or end of the sentence. Exclamation Marks “!� can be used to create excitement or a sense of urgency or importance. However, usage should be limited to once per banner. Repetition Avoid repetition on banners and in paragraphs. The same key words should never appear more than once. Emoticons Avoid using them ever. They can appear tacky and cheap and are more suitable for chatroom interaction.
BRAND GUIDELINES
44
WWW.ZALORA.COM
COPY & TONE
tone
ONSITE This is the largest platform, where new and existing customers are reached. Onsite time spent is limited, banners on carousels constantly rotate, hence communication has to be very crisp, clear and succinct. As banners are meant to convert, tone has to be persuasive and actionoriented. NEWSLETTERS
We should generally come across as light-hearted, friendly, approachable and fun. However, tones may differ slightly across different channels.
BRAND GUIDELINES
Newsletters have a variety of function and will differ slightly according to purpose. However, similar to Onsite, they should be short, persuasive, catchy and action-oriented. SOCIAL MEDIA Social Media channels serve slightly different purposes from Onsite and Newsletters. While sales and promotional banners should be very direct and action-oriented, lifestyle-related banners that are meant to promote virality and engagement can be more fun, casual and conversational.
45
WWW.ZALORA.COM
COPY & TONE
tone
MAGAZINE & BLOG Our magazine and blog represent our fashion, editorial and lifestyle authority. It’s a place where customers want to be engaged and educated. More fashion terms should be used, while a smart, savvy, instructional and pproachable tone should be used. CUSTOMER SERVICE
We should generally come across as light-hearted, friendly, approachable and fun. However, tones may differ slightly across different channels.
BRAND GUIDELINES
Customer service is one channel in which customer interaction typically occurs on a 1:1 level. As communication usually occurs because customers are unhappy or have enquiries, our tone has to always be warm, approachable, friendly, caring, considerate and helpful.
46
WWW.ZALORA.COM
BRAND GUIDELINES
47
WWW.ZALORA.COM