style_design_guide_2015_final_digital_001

1

2015 Edition

STYLE +DESIGN

2

x

We lead by design. Everything we do has a purpose. We aim to enhance the entire visual experience at

every touch point across the Brand.

The Standard

3

achievable

human

fun

TRAITSfun human achievable

4STYLE GUIDESTYLE GUIDE

5

Content.

9-13

MarkLogo

14-19

TypographyType

20-24

ColorPrimary and Secondarycolor palette

25-32

ImagesPhotographyImages

33-39

ProductImagesLessons

40-47

MarketingSocial MediaPrintOE.comEmail / AdsBlog

48-49

CTAsButtons

6STORYOUR STORY

7

Open EnglishIn 2006, we launched a groundbreaking product with the goal of giving students the most effective and affordable way to learn English from the comfort of their home or office. We built our model based on native English speaking teachers and multimedia content, eliminating the traditional barriers to learn a language: traffic, non-native teachers, outdated textbooks. We created Open English, a complete online learning solution with 24/7 access that quickly became the best English learning platform in the world. Open English has escalated like no other online language school since its incep-tion, with an unprecedented explosion in the climbing number of enrolled students and the best part is, we’re just getting started.

8

Opportunity AwaitsENGAGE. ENRICH. EDUCATE.

We like simple, clean and smart design. We measure the success of all creative by 3 criteria; does it engage, enrich, or help communicate the right message. Apply these guidelines and tips to build and evolve a cohesive look & feel across all visual channels for the Brand.

9MARKMARK

10

THE MARK | LOGO

Logo History

In the summer of 2012, Open English partnered with Chermayeff & Geismar and Haviv, one of the most recognized identity & brand design firms in the world, to conceive our NEW visual identity.

Chermayeff & Geismar is a pioneering graphic design firm with an innovative portfolio stretching over half a century. They specialize in the development of trademarks, print and motion graphics, exhibitions, and art in architecture. The firm’s global reach in Europe, Asia, Latin America, and the Middle East places Open English

in the world stage with the deployment of LP2.0 and its new visual identity.At first sight, this mark is quite simple. It is also appropriate and, most importantly, memorable. These three features give our Logo the ability to burn into your mind.

The suggestions of the design structure are precise and fitting: is it a window? a door? a computer screen? The Open English logo can be all three; and that’s its beauty.Its success is bringing hope and opportunity to our students.

11

Mark Sizing Details

We all know that behind every well-placed Open English mark lies a well-informed brand ambassador who always makes the right decision. Follow these instructions to make our mark stand out:

x

.25x

.25x

.25x

.25x

x

x - Height of LogotypeKeep the designated area free of any graphical elements

MINIMUM HEIGHT.375in9.525mm

THE MARK | LOGO

12

Do’s and Don’ts

Need to know how to correctly place the Open English mark? Follow thesesimple diagrams below and you will be on your way:

THE MARK | LOGO

01

02

03

04

05

Correct Logo Usage- Do’s:

1. This is the perfect example in which the mark should show in a white background using the respective color guidelines.

2. This is the proper way to have the mark in a black background along with the proper color guidelines.

3. If using a gradient, choose a color that will let the Open English mark stand out.

4-5. When using the mark in black, use a solid white background to represent the mark.

4-5. When using the mark in white, use a solid black background to represent the mark.

13

Incorrect Logo Usage Don’ts :

6. Scale the logo unproportionately.

7. Change the color of the original logo.

8. Add extraneous effects to the logo. This includes, but is not limited to, bevel and emboss, lighting effects, and drop shadows.

9. Place the logo in a busy background. They ususally don’t mix.

10. Use light or busy photography, when using the white background.

THE MARK | LOGO

06

07

08

09

10 THEEVENT

Do’s and Don’ts

Need to know how to correctly place the Open English mark? Follow thesesimple diagrams below and you will be on your way:

14TYPOGRAPHYTYPOGRAPHY

15

OverviewThe consistent use of type gives Open English a unified voice across all mediums. Each type brings a certain tone to each design in order to provide a rich and valuable experience through our brand.

16

THE TEXT | TYPE

Marketing Typeface

This is our main typeface for marketing purposes only.

Brandon Grotesque | 21/36pt | No Tracking

ABCABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Brandon Grotesque Light | 18/36pt | No Tracking


Brandon Grotesque Regular | 11/21pt | No Tracking

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestib-ulum imperdiet turpis semper orci egestas.

17

Proxima Nova Bold for Titles | 21/36pt | No Tracking


The font can be a little sensitive of its height, so keep that in mind and keep all your titles in uppercase and lowercase.

Proxima Nova Light for Titles | 18/36pt | No Tracking


The font can be a little sensitive of its height, so keep that in mind and keep all your titles in uppercase and lowercase.

THE TEXT | TYPE

18

THE TEXT | TYPE

Proxima Nova regular for text | 16/21pt | Tracking 0


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed soncectetur.

Typography and Hierarchy Example

Opening the Experience The Story Behind the brand

Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Vestibulum im-perdiet turpis semper orci egestas id sagittis justo condimentum. Morbi eget risus eget lacus laoreet vulputate. In-teger aliquam leo in nisi. Praesent sed nisl laoreet leo sodales vestibulum. sed dapibus sem.

Proxima Novain Upper and Lower case21/72pt | no Tracking

Proxima Nova Light in Upper and Lower case18/72pt | no Tracking

Proxima Nova Regular for text 16/21pt | no Tracking

Museo Sans 300 for numerals11/18pt | no Tracking

0123456789

0123456789

19

Extra Typefaces

Here are extra typefaces for marketing purpose only.

Harriet Display Bold | 21/36pt | No Tracking


Harriet Display Light | 18/36pt | No Tracking


Harriet Display Regular | 11/21pt | No Tracking

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestib-ulum imperdiet turpis semper orci egestas.

THE TEXT | TYPE

20COLORCOLOR

21

OverviewColors say a lot; it is important to work with different schemes to create the perfect palette. Through our chosen colors, we clearly communicate who we are: energetic, trustworthy, and inspirational. Together or independently, the Open English colors send the right message.

22

THE COLOR | COLOR

The Logo ColorsOpen English Blue

The Open English logo uses two distinct colors when set on a black or a white background. The mark is available for print and screen use in EPS, PDF, PNG, and JPEG. Contact [email protected] for access to downloadable files.

01. For use with a White Background

02. For use with a Black Background

RGB 0-132-255 CMYK 100-20-0-0

RGB 0-151-255 CMYK 100-20-0-0

HEX 0084FF Pantone PROB BLUE C

RGB 0-105-224 HEX 0069DF

RGB 0-110-208 HEX 006ED0

HEX 0097FF Pantone PROB BLUE C

Mark Color Details

x

.25x

.25x

.25x

.25x

x

x - Height of LogotypeKeep the designated area free of any graphical elements

MINIMUM HEIGHT.375in9.525mm

23

THE COLOR | COLOR

The Secondary Color PaletteSpecs

These colors bring out the best in our bright, fun, and playful color scheme. Use them to enhance the FUN in the Open English experience.

RGB 241-40-193CMYK 15-85-0-0

RGB 255-95-0 CMYK 0-77-100-0

RGB 206-222-0CMYK 24-0-100-0

RGB 37-202-211 CMYK 65-0-21-0

HEX F128C1 Pantone 807C

HEX FF5F00 Pantone 165C

HEX CEDE00 Pantone 389C

HEX 25CAD3 Pantone 319C

The Primary Color PaletteSpecs

These colors are used to compliment the main Open English blue hues in order to create the visual brand experience.

01. Fun Yellow 02. Achivable Green

03. Human Blue

05. Light Gray

07. Black

06. Mid Gray

08. Dark Gray

04 Hope Blue

RGB 239-189-8CMYK 7-25-100-0

RGB 161-194-59 CMYK 42-6-99-0

RGB 20-108-178 CMYK 89-57-2-0

RGB 243-243-243 CMYK 3-2-2-0

RGB 0-0-0 CMYK 100-100-100-100

RGB 130-130-130 CMYK 51-43-43-7

RGB 77-77-77 CMYK 65-58-57-37

RGB 103-178-231 CMYK 55-16-0-0

HEX EFBD08 Pantone 123C

RGB 180-138-0HEX B48900

RGB 94-129-0HEX 5E8100

RGB 0-75-141HEX 004B8C

RGB 0-102-150HEX 006696

RGB 217-217-217HEX D9D9D9

RGB 162-160-159HEX A1A09F

RGB 34-33-33HEX 222120

RGB 95-94-93HEX 5F5D5D

RGB 184-0-143HEX B8008F

RGB 204-52-0HEX CC3400

RGB 148-167-0HEX 93A600

RGB 0-157-167HEX 009DA7

HEX A1C23B Pantone 584C

HEX 146CB2 Pantone 307C

HEX F3F3F3 Pantone 656C

HEX 000000 Pantone 426C

HEX 828282 Pantone 877C

HEX 4D4D4D Pantone 425C

HEX 67B2E7 Pantone 292C

24

THE COLOR | COLOR

Color Scheme Hierarchy

The Open English Colors can be applied to all creative. Our Primary Colors are - Open English Blue used in our logo; Fun - Yellow, Human - Blue, Achievable - Green and Hope - Blue.

Our Secondary Colors are Fuchsia - Pink, Cerulean - Blue, Tangerine - Orange, and Chartreuse - Yellow. Lastly, our Supporting Colors help compliment all creative simply and effectively with neutral shades, tints, and tones by using Light Grey, Dark Grey, Charcoal, & Black.

We use our Primary Color Palette most frequently in all visual components; these are our anchor colors and compliment the Open English Logo & Branded Imagery. The use of our Secondary Color Palette is reserved for special projects, social media, and ‘hello.’ the Open English blog. These colors can be used alone or can be combined with our anchor colors to add more variety to a complex project or campaign.

The Open English primary and secondary color palettes with the hierarchy scheme.

Social MediaOpenEnglish.com, LP2 PlatformSocial Media, Marketing Purposes

25IMAGESIMAGES

26

THE IMAGES | PHOTOGRAPHY IMAGES

Choosing Photography Fun. Human. Achievable

It’s really simple. We want to convey a sense of inspiration with every photograph that is used in materials. They should also depict a fun, natural atmosphere with people in it.

27


On Brand Photography

Lighting, Clarity, Depth of field, Vibrant colors, Warmth

Workstation

City / Landmark

28


On Brand Photography

Lighting, Clarity, Depth of field, Vibrant colors, Warmth

People

Food / Travel

29


Imagery DO’sStriking a pose? Follow these simple steps and choose a photo that begs to be seen.

01

02

03

05

06

Correct Photo Usage- Do’s:

1. This is photography at its finest. Follow this standard and succeed.

2. Natural settings with computers are a plus!

3. Photographs that suggest human emotions are always welcome.

4. Choose images that show people in friendly, safe environments.

5. Use images of students learning from home.

6. Online is the best way to learn English. Let’s show it.

04

30


Imagery Don’tsThese are the images that you should stay away from.

01

02

0603

04

Incorrect Photo Usage- Don’ts:

1. If you are resizing the photo, make sure to use correct proportions.

2. Avoid black and white photographs. We want to let the colors shine.

3. While background settings look great, we need the human touch.

4. Choose images that show people in friendly, safe environments.

5. Use images of students learning from home.

6. Online is the best way to learn English. Let’s show it.

05

Photography Downloads For access to high-resolution photos, please contact us at [email protected].

31


Students Imagery SamplesThe students images should portray learning from home, or comfort environments. For image downloads please contact us at [email protected].

32


Our Website CharactersThese are the openenglish.com teachers and students. For image downloads please contact us at [email protected].

Teachers

Advisors

Students

Jenny

Anna

Jose

Sheila

Fiorella Carlos

MariaPablo

Adam

33PRODUCTPRODUCT

34

PRODUCT | IMAGES LESSONS CHARACTERS

ProductImages

The recently re-designed learning platform boasts an all-new curriculum, mobile access, optimized study paths and more teacher interaction than ever before. We are ready to service hundreds of thousands of students with our new and improved learning platform.

Study Plan

Live Classes

Practice

35


ProductImages

Open English developed the Weekly Study Plan as a solution to students’ common question – “what’s next?” The Weekly Study Plan guides students through an optimal combination of the 3 major activities of our curriculum – live classes, lessons and practice exercises. This tool helps to keep students on track so they are able to focus on and complete each learning objective before moving on to another concept. Completed activities turn blue, which is a great visual tool for helping students to keep track of their progress within each study plan.

Study Plan Practice

36


ProductImages

Simply put, Open English’s goal is to help students succeed. With this goal in mind, Open English is on a quest to deliver the best service through continuously improving its learning platform. After observing over 100,000 students learn with our initial learning platform, we have developed and refined an innovative system to make human interaction more efficient and effective.

Live Classes News Reader

37


ProductImages

Once students complete the Open English Placement Test, they are placed in the appropri-ate level to begin taking lessons. Each level is a combination of unlimited live classes, 60 lessons and hundreds of practice exercises. These learning activities are organized within weekly study plans and provide the appropriate mix of learning content. The Weekly Study Plan is estimated to be 3 – 3 ½ hours of work and is located directly on the Home page.

Lessons

38


ProductLessons

Open English has developed 8 English competency levels, where level 1 represents “brand new” English students and level 8 represents those who may be considered “bilingual”. Each Open English level is aligned with the equivalent levels on the Common European Framework of Reference for Languages (CEFR). There is additional functionality within the lesson page to enhance the students’ learning experience: Chat, Common Questions, and My Notes.

Each lesson presents the student with 1 or 2 learning objectives and six vocabulary words. These level appropriate objectives and words were modeled after the equivalent CEFR level. To reinforce the concept of sentence structure and parts of speech within the lessons we employ a color code system where nouns, verbs, adjectives and adverbs are each assigned a particular color. This is a powerful teaching technique in which the student will associate the parts of speech without explicitly being told what they are. Through association with the same concepts in their own language, students begin to develop their own knowledge rather than just rote memorization.

39


ProductCharacters

These are the Open English lessons characters

THE HOSTKatie the host/ on screen personality (Female)• Visits each city to all the popular attractions, shops and hot spots • On free time she plans parties for friends and clients in the city • Always has her smartphone with her • Knows lots of people in many cities • Dresses very hip, casual Sleek • Traits: Adventurous, creative, thoughtful, charming

THE PHOTOGRAPHERJoe the Food Critic / On screen personality (Male):• Eats and writes about food the classy, hip, new restaurants in the featured cities • Likes trying new foods • Likes to ride his bike to work • Dresses in hip, business casual • Traits: outgoing, active, passionate about food

THE STUDENTKatie the college student (Female) • Aspires to be in the entertainment industry. • Likes to study online • Stays current with pop culture trends • Always has her laptop • Dresses in jeans and nice blouses • Traits: warm, energetic, curious

CHEF AND FOODIEJoe the chef/foodie/on-screen personality (Male): • Eats and writes about food the classy, hip, new restaurants in the featured cities • Likes trying new foods • Likes to ride his bike to work • Dresses in hip, business casual • Traits: outgoing, active, passionate about food

Amy

James

Sara

Zack

40MARKETINGMARKETING

41

MARKETING | SOCIAL MEDIA PRINT OE.COM EMAILS / ADS BLOG

MarketingSocial Media

Social Media at Open English efforts to create content that attracts attention and encourages its readers to share it with their social networks. Therefore, it constantly changes its graphics and style but always staying on brand.

Design Examples 2015

42


MarketingPrint

Prind Ads request are summited to the Creative Department with all the proper requirements (brief,specs, etc). Here are samples of print ads.

Design Examples 2015

Innovation starts here.

43


Marketingwww.openenglish.com

Graphics

44


MarketingEmail Blast

Open English Email Blast

Ad Campaigns

45


hello.The Open English Blog

Blog PostsHere are 3 examples of blog images for hello.

Welcome to hello. by Open English. We will inspire you, challenge you, and always make you think. We are not just a blog, we are a community of learners, dreamers, and innovators united by a passion to share the English language with the world. Visit our ‘hello. blog weekly to learn, practice, and grow with Open English.

Healthy Habits Taking A Trip Award Season

46


hello.The Open English Blog Imagery

The imagery for hello, the Open English blog should be vibrant and current. The people should look friendly, the places should come alive, and the subjects should be clear and interesting. The design + style of our imagery should be global because English is a global language. We place emphasis on Latin America, Brazil, and the US Hispanic market, but it’s ok to represent the world as we share English with everyone.

Blog Image Size - 850x350px

Facebook Image Size - 484x252px

*Not to scale

47


hello.The Open English Blog Do’s & Don’ts

Please refer to the Facebook Ads Policy and Guidelines below for more information.https://www.facebook.com/help/468870969814641

Image Research Team Contact: [email protected]

Do’s

Don’ts

https://www.facebook.com/help/468870969814641

mailto:[email protected]

48CTAsCTAs

49

CTAS | BUTTONS

ButtonsYour call-to-action (CTA) is one of the most important elements on your design. It’s the final point of interaction and the last opportunity to convert your viewers.

Primary Button - Height: 80px | Typeface: Proxima Nova Bold (Tracking 120 / 30pt)

Width - Varies by length of copy

Width - Varies by length of copy

White Space - 40px

This is the space that the CTA should have between it and other objects within the design. Applies to all CTAs.

Height - 80px

Color - Fill

Human Blue

Achievable Green

Fun Yellow

Height - 80px

Alternate Button - Height: 80px | Typeface: Proxima Nova Bold (Tracking 120 / 30pt)

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Color - Stroke 2px / No Fill

Human Blue

Achievable Green

Fun Yellow

50fun

Documents

style_design_guide_2015_final_digital_001