Communication Design 4 : Identity

Page 1

2015

alcatel one touch

Identity standards brand Guideline

1



TABLE OF CONTENTS

INTRODUCTION

HiSTORY CURRENT LOGO

04 05

BACKGROUND

BRAND PROMISE BRAND VALUE

06 07

IDENTITY

LOGO LOCKUP CLEAR ZONE LOGOTYPE COLORS Logo misuse

08 14 16 20 22 26

BRAND ELEMENTS

PRIMARY TYPE SECONDARY TYPE COLOR PALLETT PATTERN PHOTOGRAPHY

30 31 34 38 42

STATIONERY

BUSINESS CARDS letterhead envelope

51 54 56

APPLICATION

WEB LAUNCHER ICON interface PACKAGING ENVIRONMENT Promotion poster

59 64 66 78 80 86

Contact

Contact info

90

3



HiSTOrY

IntroductIon

hIstory

Alcatel One Touch is a brand within TCL Communication, an international multicultural company which designs, develops, and markets globally a growing range of mobile and Internet devices. TCL Communication is a public company listed on the Hong Kong Stock Exchange (2618.HK) and part of TCL Corporation one of the largest consumer electronics companies in the world. The history of Alcatel One Touch first began as a small company in Mulhouse, France, originally known as Alcatel Alsthom. In 1998, Alcatel Alsthom shifted its focus to the telecommunications industry, spinning off its Alsthom activities and changing the company’s name to Alcatel. Then after that, April 2004, TCL Corporation and Alcatel announced the creation of a mobile phone manufacturing joint venture: Alcatel Mobile Phones, which would later become known as Alcatel One Touch. In 2005, the venture dissolved, and TCL Corporation became the sole owner of Alcatel One Touch

5



brand promise

BACKGround

BRAND PROMISE

Alcatel One Touch makes access to mobile technology simple, designing smart mobile devices that are easy-to-use with the technology people need most at smart prices they can afford. Alcatel One Touch is simple, unexpected, down to earth, and colourful. It is a global brand which has redefined the mobile mass market by making the latest mobile technologies accessible to everyone. It is the first to recognize the mass market’s needs and has since brought choice, variety and flexibility to customers – from operators to consumers. By combining its understanding of local insights and control of the end-to-end manufacturing process, Alcatel One Touch delivers the best user experience with innovative, feature-rich and high performance mobile devices designed with simplicity.

We believe that what makes technology smart is what you can do with it rather than what it can do

7


identity

Logo


Logo

Identity

LOGO

THE FINAL LOGO With this new identity, Alcatel One Touch shows the quality of people’s brand, with the intention of understanding the need of consumers and better enhancing the capacity of mobile technologies, all at the same time, making them easy to use. The logo is a symbol of human, technology, and connection. With this, Alcatel One Touch is ready to reach out to the public and speaking in their language.

9


Identity

LOGO

THE MARK

10

Logo


Logo

Identity

LOGO

LOGO TYPE

These are variations of the logo that are appropriate for application. Usage of them varies upon situation

11


IDENTITY

LOGO

W/ TAGLINE

12

LOGO


LOGO

IDENTITY

LOGO

13


Identity

Lockup

Lockup

6X

10X

4X

1X

1.5X 1X 2.5X

2X

1X

PRIMARY LOCK UP

14

1.5X

24X


Identity

Lockup

Lockup

2X 1X

5X

PRIMARY LOCK UP W/ TAGLINE

This is the relationship between the mark and logotype. It cannot be rearranged or altered. To maximize the impact of the logo it is essential to keep the surrounding space clear as indicated

15


Identity

Clear Zone

Clear zone

2X

PRIMARY LOGO CLEAR ZONE

16


Clear Zone

Identity

Clear zone

W/ TAGLINE

The reason for having a clear zone is to maximise the impact of the logo. It is consequently a space into which no other element must be inserted. This minimum clear space should be maintained on all sizes of the mark. Try to increase the clear space whenever possible. Clear zone is a space into which no other element must be inserted.The colored area indicates the clear or negative space to be left without content.

17


IDENTITY

CLEARZONE

Clear zone

2X

2X

MARK CLEAR ZONE

18


CLEARZONE

IDENTITY

Clear zone

2X

2X

LOGOTYPE CLEAR ZONE

19


Identity

LOGOTYPE

20

Logotype


LogoType

Identity

LOGOTYPE

The base font that the logotype is worked from is Gotham, developed by the Hoefler & Jones Co. It is a square like sans serif with distinctive geometric shape. However, when combining with the circular style mark, a less sharp font was needed; therefore, modifications were added to the font to make it proprietary and suitable to the mark.

21


Identity

Color

COLOR VARIATIONS

22


Color

Identity

COLOR VARIATIONS

COLOR VARIAITION With this new identity, Alcatel One Touch shows the quality of people’s brand, with the intention of understanding the need of consumers and better enhancing the capacity of mobile technologies, all at the same time, making them easy to use. The logo is a symbol of human, technology, and connection. With this, Alcatel One Touch is ready to reach out to the public and speaking in their language.

23


Identity

Color

WHITE ON BLACK

Use a reverse white logo if the background does not provide sufficient contrast with the two other logo.

24


Color

Identity

GREY SCALE

The Black color version should be used in all grayscale printed appli-cations. Please do not convert color to a pure black version.

25


Identity

Logo misuse

LOGO MISUSE

1.

2.

3.

4.

5.

6.

26


Logo Misuse

Identity

LOGO MISUSE

7.

8.

9.

10.

COLOR VARIAITION 1.

Do not use an all black logo on white

2.

Do not rotate logo

3.

Do not use outline

4.

Do not change mark placement

5.

Do not stretch

6.

Do not turn logo upside down

7.

Do not rearrange color

8.

Do not change type position

9.

Do not rotate logo

10.

Do not overlap mark and type

27



Brand elements

The brand elements include primary and secondary typog-raphy, primary and secondary color palettes and pattern development and treatment. This section includes which typefaces are used throughout the branding system and how they were modified for the logotype. The symbol modification is also included to show how the symbol and mark were developed together to become the final mark. The primary and secondary color palettes are shown at full color and also at different percentages (100%, 75%, 50% and 25%). Patterns were throughout the branding and this section shows the six different patterns made, as well as how they are to be applied throughout the system.

29


Brand elements

Typography

PRIMARY TYPOGRAPHY

FRANKLIN GOTHIC Demi/7pt

ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 01234567890

Book Italic/ 7pt

ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 01234567890

Demi/ 88pt + Book/ 26pt

SIM PLE CONNECTION

BOOK EXTRA CONDENSED DEMI EXTRA CONDENED BOOK COMPRESSED BOOK COMPRESSED ITALIC DEMI COMPRESSED DEMI COMPRESSED ITALIC BOOK CONDENSED BOOK CONDENSED ITALIC MEDIUM CONDENSED MEDIUM CONDENSED ITALIC DEMI CONDENSED DEMI CONDENSED ITALIC BOOK BOOK ITALIC DEMI DEMI ITALIC

Demi Italic/ 23pt Demi Italic/ 7pt

ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 01234567890 30

A symbol of human, technology, and connection.


Typogrpaphy

Brand elements

SECONDARY TYPOGRAPHY

GOTHAM ROUNDED Book/ 15pt

Light/7pt

We believe that what makes technology smart is what you can do with it

ABCDEFGHIJKLMN

LIGHT LIGHT ITALIC BOOK

BOOK ITALIC BOLD BOLD ITALIC

OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 01234567890

Book/7pt

Bold Italic/7pt

ABCDEFGHIJKLMN

like a 7AM morning walk

OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 01234567890

Book Italic/7pt Bold/7pt

ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 01234567890 31


BRAND ELEMENTS

TYPOGRAPHY

PRIMARY TYPOGRAPHY FRANKLIN GOTHIC AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789,.?!/() FRANKLIN GOTHIC AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789,.?!/() FRANKLIN GOTHIC AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789,.?!/() FRANKLIN GOTHIC AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789,.?!/()

PRIMARY TYPOGRAPHY

SECONDARY TYPOGRAPHY

Franklin Gothic is the chosen font as the

Gotham rounded is the secondary

primary typography. It should be used as

typography in this brand. It is to be used

display typography like headers, etc. It is

as body copies or small informations, etc.

important to note that, only four out of the

Unlike the primary typography, six type

entire font family may be used. This is to

families listed here are available to use

ensure brand unity. The fonts to be used are

depending on situations.

book, book italic, demi, and demi italic.

32


TYPOGRAPHY

BRAND ELEMENTS

SECONDARY TYPOGRAPHY GOTHAM LIGHT AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt UuVvWwXxYyZz0123456789,.?!/() GOTHAM LIGHT ITALIC AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt UuVvWwXxYyZz0123456789,.?!/() GOTHAM BOOK AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt UuVvWwXxYyZz0123456789,.?!/() GOTHAM BOOK ITALIC AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt UuVvWwXxYyZz0123456789,.?!/() GOTHAM BOLD AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt UuVvWwXxYyZz0123456789,.?!/() GOTHAM BOLD ITALIC AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt UuVvWwXxYyZz0123456789,.?!/()

33


Y

:0

:3

7 :8

K

B

B

C :5 :6 8 5

:

M

G

:1 26 0 4

R

:1

68

:1

G

4

6

9 :8 3 :7

:3

3

:7 45

K

:4

S

C

M

Y

PM

2

:1 G

R :8 6 : 63 B :1 15

7

:7

:2 5 7

34 :5

K

S

PM

Y

C

:8

42 :2 4 10 8 R : 0 :1 B

G

M

:0

4 :7 9 :4 :0 K Y

68

C

M

:6

84 :1

S

S

PM

PM

34


PM

S

:2

97

C

7 :4 :0 M

Y

G

:0

1 46 :7

27 8 :1 20 3 R : 2 :2 B

K

2 :1

S

PM

C

R

K

:1

5 :7 0 :2 M

Y

B

0 : 1 61 : 1 18 :2 G

:0

S PM

:6

53

C

R

2 K

:1

7 :8 8 :5 M

Y

6

5 40 :7

63 :1

0 B

:1

4 :4

G

:1

S PM

C

:7 M

R

G

B

:1

:2

38 : 2 89

0 :0

0 K

:1

5 :2 Y

8

R

1 :4 1 6

35


Brand elements

Color pallette

COLOR PALLETtE

PRIMARY COLORS

The Standard version of Alcatel One Touch logo is made up of two colors shown above. When using the Standard version of the logo, always adhere to the color specifications given in this manual to maintain visual continuity.

SECONDARY COLORS The secondary colors are based upon the main color scheme but are different tones and shades for design purposes. Different tones are allowed to be use, but only at 25%, 50%, 75%.

PMS :

C : 89

R : 41

534

M : 73

G : 61

Y : 43

B : 87

K : 34 PMS :

C : 58

R : 126

7456

M : 65

G : 104

Y:3

B : 168

K:0 PMS :

C:0

R : 242

184

M : 74

G : 104

Y : 49

B : 108

K:0 PMS :

C:7

R : 238

7405

M : 25

G : 189

Y : 100

B : 28

K:0 PMS :

C : 47

R : 127

297

M:0

G : 208

Y : 12

B : 223

K:0

36


brand elements

Color pallette

COLOR PALLETtE

PRIMARY COLORS

PMS :

C : 75

R : 10

7461

M : 20

G : 161

Y:1

B : 218

K:0

PMS :

C : 87

R : 44

653

M : 58

G : 106

Y : 12

B : 163

K:1

PMS :

C : 77

R : 86

668

M : 85

G : 63

Y : 27

B : 115

K : 12

37


BRAND ELEMENTS

PATTERN

38

PATTERN


PATTERN

BRAND ELEMENTS

PATTERN

LINE ART The pattern of this identity is an array of different line art. Organic in nature, these patterns offer a variety of movement, dynamic, and energy. Patterns can range from a few simple line to a tsunami of colorful lines.

39


BRAND ELEMENTS

PATTERN

40

PATTERN


pattern

brand elements

PATTERN

COLOR LIMITS The pattern may have a variety of colors from the brand color pallette, but avoid using too many different color temperature at once unless under special circumstances.

41


Brand elements

photography

PHOTOGRAPHY

SUBJECT The subject of photography should always reflect the brand direction. The photo must appear friendly, approachable, and realistic. In many ways, the photography should reflect the culture of the users.

42


Photography

Brand elements

Image treatment

COLOR OVERLAY To establish a sense of brand identity, a gradient color overlay is applied to the image. This layer of overlay must not overtake the image and render the photography illegible. It should serve as a subtle and supporting role.

43


brand elements

photography

PEOPLE PHOTOGRAPHY

44


PHOTOGRAPHY

Brand elements

PEOPLE PHOTOGRAPHY

SLICE OF LIFE The tonality of the photography should speak reality. It is something that feels unstaged, and realm. As if it can happen to the viewer anytime and invite them in the situation.

45


BRAND ELEMENTS

PHOTOGRAPHY

PRODUCT PHOTOGRAPHY

46


PHOTOGRAPHY

BRAND ELEMENTS

PRODUCT PHOTOGRAPHY

PLAY ON PATTERN A simple version of the pattern can be apply to product renderings and photography to add motion and dynamic to the picture. The thickness of the lines can change but they should never steal from the product’s spotlight. Although situation may varies, but this will be the preferred mothod of showcasing product including in motion format as well. Colored background may be used as well.

47


Brand eleMents

PHOTOGraPHY

Product PhotoGraPhy

48


PHOTOGRAPHY

BRAND ELEMENTS

PRODUCT IN CONTEXT

49



buSineSS Card

statIonery

BusIness card

0.25”

1.25”

0.25”

0.75”

0.5”

BusIness card Size : 3.5” x 2” The back of the business card uses the company pattern. There is a total of 4 different version abailable for usage.

51


statIonery

varIatIons

52

buSineSS Card


buSineSS Card

statIonery

varIatIons

53


statIonery

leTTerHead

letterhead

0.5”

2”

4.25”

1.25”

0.5”

3”

1.25”

54

1.25”


leTTerHead

statIonery

letterhead

letterhead Size : 8.5� x 11� Tha back of the letter head uses of the logo to promote the essence of the company.

55


statIonery

enVelOPe

enveloPe

1”

3”

1” 1”

TCL Tower Gaoxin Nanyi Road Shenzhen, Guandong 518057 China

color varIaItIon Size : 8.75” x 3.75 Like the rest of the stationeries, the envelope also uses the company patter. It is applied to the inside of the envelope, while the out side is simply One Touch logo and mailing address.

56


enVelOPe

statIonery

enveloPe

57



Web

aPPlIcatIons

WeB

WeB desIGn This is the home page of the website. Here the most recent news, events, new products will be displayed on this page. Viewer can continue to scroll down for even more information.

59


aPPlIcatIons

WeB

60

Web


Web

aPPlIcatIons

WeB

61


aPPlIcatIons

WeB

62

Web


Web

aPPlIcatIons

WeB

Product ProMotIon As the viewer navigate through the specific detail pages for each product, moving line way pass through the background in a calm wave like motion, emitting the brand energy. Until finally arriving at the product detail section.

63


applications

launcher icon

LAUNCHER ICON

FR

64


Launcher icon

applications

MONOCHROME

MONOCHROME A monochrome version of the launcher icons can be used as an alternative choice. This launcher icon is used in the interface for the smart watch devices

65


aPPlIcatIons

inTerfaCe

Phone InterFace

66


inTerfaCe

aPPlIcatIons

Phone InterFace

user InterFace This is the interface design for Alcatel’s mobile phone. All functions and features can be easily accessed through simple finger gesture in the lockscreen. Further on, user can customize the interface to suit their personal taste.

67


aPPlIcatIons

inTerfaCe

Phone InterFace

68


inTerfaCe

aPPlIcatIons

Phone InterFace

69


aPPlIcatIons

inTerfaCe

user center aPP

70


inTerfaCe

aPPlIcatIons

user center aPP

user center OneTouch Care aims to be a portable guide for people who is new to our devices and to provide better customer service for our customers. here are several helpful modules for users to like our devices more such as Hot FAQ, Tutorials, Troubleshooting, Feedback, Repair Center Locator and Hotlines. 71


Applications

WATCH UI

72

interface


interface

applications

WATCH UI

23

FRI

23

FRI

06:30 January

23

FRI

ONE TOUCH CONTROL Enjoy the freedom of getting all of your important updates right on your wrist. With this new interface, user can access all functions with one touch of simple gesture.

73


aPPlIcatIons

Watch uI

74

inTerfaCe


interface

applications

WATCH UI

Inspirations Piano

Inspirations Piano

Inspirations Piano

75


aPPlIcatIons

inTerfaCe

Watch uI

Oct 23

Normal

5.00 KM

SY

KC

AG

SS

AC

JL

AY

BS

FunctIons This watch allow user to access their phone camera, play music, monitor their health condition, organize their day, receive messages, all through the convenience of blue tooth

76


inTerfaCe

aPPlIcatIons

Watch uI

KC

Hey you coming?

Yeah, in five minutes.

SY

SY KC AG AC JL

AY

sPontaneous uPdate This interface design allows user to be able to switch between different functions with ease with a simple gesture

77


aPPlIcatIons

PacKaGInG

78

PaCKaGinG


PaCKaGinG

aPPlIcatIons

PacKaGInG

PacKaGInG This is the packaging for the new identity. The front surface shocases the product with the pattern in the background. The back of the packaging is the detail specific of the functionality of the packaging.

79


APPLICATIONS

POP UP SHOP

80

Environment


ENVIRONMENT

APPLICATIONS

POP UP SHOP

81


APPLICATIONS

STORE FRONT

82

ENVIRONMENT


ENVIRONMENT

APPLICATIONS

INTERIOR

HEADQUR This is the mockup for the headquarter of the company. The line from the outside extends from the outside to the interior, inviting passing pedestrians to take a look inside. Once the line reaches the interior, it becomes more complicated reaching other parts of the store.

83


APPLICATIONS

environment

THE COLOR RUN

84


environment

Applications

THE COLOR RUN

EVENT PROMOTION On January 3, 2015, Alcatel announced partnership with The Color RunAs part of this exclusive partnership, Alcatel One Touch is powering a new layer of experience during The Color Run 2015 Shine Tour™ including the integration of One Touch technology.

85


Applications

promotion poster

Promotion poster


promotion poster

promotion poster

Applications


Applications

Promotion poster

promotion poster

88


Promotion poster

apllications

promotion poster

89



CONTACT Sam Yen Graphic Designer cyen3@inside.artcenter.edu (636) 319-4339



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.