Page 1

2015 Edition

Style +Design 2016

10


The Standard We lead by design. Everything we do has a purpose. We aim to enhance the entire visual experience at every touchpoint across the Brand.


Traits 10


Fun Human Achievable Open We likeEnglish simple,isclean a symbol and of smart hope design. and opportunity. We are measure casual, the cool, success and sophisticated of all creative–byand we’re three criteria: does revolutionizing the way it engage, peopleenrich, learn. 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.


STYLE GUIDE 10


Opportunity Awaits ENGAGE. ENRICH. EDUCATE.

We like simple, clean, clean and and smart smart design. design. We measure the success of all creative by three 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.


Story


Open English ONLINE. LEARNING. SOLUTION.

In 2007, 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 inception, with an unprecedented explosion in the climbing number of enrolled students and the best part is, we’re just getting started.


Content. 10-15

Mark Logo

16-24

Typography

Type Type Hierarchy 25-29

Color

Primary and Secondary Color Palette 30-37

Images

Photography Images 38-44

Product Images Lessons 45-65

Marketing

Social Media Print OE.com Email / Ads Blog 66-69

Web

Font Design Buttons


The Mark 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. 12


THE MARK | LOGO

Mark Sizing Detail 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:

.25x

.25x

x

x

.25x

.25x

x - Height of Logotype Keep the designated area free of any graphical elements

MINIMUM HEIGHT .375in 9.525mm

12


THE MARK | LOGO

Do’s and Don’ts Need to know how to correctly place the Open English mark? Follow these simple diagrams below and you will be on your way:

Correct Logo Usage

Correct Logo Usage

01

1.

This is the perfect example showing the mark in a white background using the respective color guidelines.

02

2.

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

03

3.

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

04

4.

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

05

5.

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

14


THE MARK | LOGO

Do’s and Don’ts Need to know how to avoid misplacing the Open English mark? Follow these simple diagrams below and you will be on your way:

Incorrect Logo Usage

Incorrect Logo Usage

06

6.

Scale the logo unproportionately.

07

7.

Change the color of the original logo.

08

8.

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

09

9.

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

10

THE

10. Add titles/text to the logo. EVENT

15


Content.

TYPOGRAPHY 10


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


THE TEXT | TYPE

Marketing Typeface Brandon Grotesque is our main typeface for marketing purposes only.

Brandon Grotesque | 21/36pt | No Tracking

ABC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dap ibus posuere velit aliquet.

Brandon Grotesque Regular | 11/21pt | No Tracking

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

Brandon Grotesque Light | 18/36pt | No Tracking

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


THE TEXT | TYPE

Marketing Typeface Proxima Nova can be a little sensitive of its height, so keep that in mind and keep all your titles in uppercase and lowercase.

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

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

Proxima Nova Regular | 11/21pt | No Tracking

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

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

ABC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 10 19


THE TEXT | TYPE

Marketing Typeface Proxima Nova is our primary typeface for web purposes.

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

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

Proxima Nova Regular | 11/21pt | No Tracking

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

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

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

20


THE TEXT | TYPE

Marketing Typeface Open Sans is our secondary typeface for web purposes only.

Open Sans Bold for Titles | 21/36pt | No Tracking

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

Open Sans Regular | 11/21pt | No Tracking

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

Open Sans Light for Titles | 18/36pt | No Tracking

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


THE TEXT | TYPE

Marketing Typeface

Roboto Slab is our secondary typeface for web purposes only.

Roboto Slab Bold for Titles | 21/36pt | No Tracking

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

Roboto Slab Regular | 11/21pt | No Tracking

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

Roboto Slab Light for Titles | 18/36pt | No Tracking

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

22 10


THE TEXT | TYPE

Marketing Typeface Arial is our tertiary replacement typeface for web purposes only.

Arial Bold for Titles | 21/36pt | No Tracking

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

Arial Regular | 11/21pt | No Tracking

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

10 23


THE TEXT | TYPE

Typography Numbers Museo Sans 300 is our main typeface for number use purposes only.

Museo Sans 100 | 12/18pt | Tracking 15 Teacher 0123456789

0123456789 Museo Sans 300 | 12/18pt | Tracking 15 Teacher 0123456789

0123456789 Typography and Hierarchy Example Museo Sans 300 is our main typeface for number use purposes only.

Opening the Experience The Story Behind the brand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet turpis semper orci egestas id sagittis justo condimentum. Morbi eget risus eget lacus laoreet vulputate. Integer aliquam leo in nisi. Praesent sed nisl laoreet leo sodales vestibulum. sed dapibus sem. 0123456789

Proxima Nova in Upper and Lower case 21/72pt | no Tracking Proxima Nova Light in Upper and Lower case 18/72pt | no Tracking Proxima Nova Regular for text 16/21pt | no Tracking

Museo Sans 300 for numerals 11/18pt | no Tracking

0123456789

10

24


Color

COLOR 10

20


Overview Colors 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.


THE COLOR | COLOR

The Logo Colors Open 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 creative@openenglish.com for access to downloadable files.

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

HEX 0084FF Pantone PROB BLUE C

RGB 0-105-224 HEX 0069DF

01. For use with a White Background

02. For use with a Black Background RGB 0-151-255 CMYK 100-20-0-0

HEX 0097FF Pantone PROB BLUE C

RGB 0-110-208 HEX 006ED0

Mark Color Details

.25x

.25x

x

x

.25x

.25x

x - Height of Logotype Keep the designated area free of any graphical elements

MINIMUM HEIGHT .375in 9.525mm 27


THE COLOR | COLOR

The Primary Color Palette Specs

These colors are used to complement the main Open English blue hues in order to create the visual brand experience. 01. Fun Yellow

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

02. Achievable Green

HEX EFBD08 Pantone 123C

RGB 180-138-0 HEX B48900

03. Human Blue

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

HEX 146CB2 Pantone 307C

RGB 0-75-141 HEX 004B8C

RGB 94-129-0 HEX 5E8100

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

HEX 67B2E7 Pantone 292C

RGB 0-102-150 HEX 006696

HEX 828282 Pantone 877C

RGB 162-160-159 HEX A1A09F

HEX 4D4D4D Pantone 425C

RGB 95-94-93 HEX 5F5D5D

06. Mid Gray

HEX F3F3F3 Pantone 656C

RGB 217-217-217 RGB 130-130-130 HEX D9D9D9 CMYK 51-43-43-7

07. Black

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

HEX A1C23B Pantone 584C

04 Hope Blue

05. Light Gray

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

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

08. Dark Gray

HEX 000000 Pantone 426C

RGB 34-33-33 HEX 222120

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

The Secondary Color Palette Specs

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-193 CMYK 15-85-0-0

HEX F128C1 Pantone 807C

RGB 184-0-143 HEX B8008F

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

HEX FF5F00 Pantone 165C

RGB 204-52-0 HEX CC3400

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

HEX CEDE00 Pantone 389C

RGB 148-167-0 HEX 93A600

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

HEX 25CAD3 Pantone 319C

RGB 0-157-167 HEX 009DA7

28


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 complement all creative simply and effectively with neutral shades, tints, and tones by using Light Grey, Dark Grey, Charcoal, and 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.

OpenEnglish.com, LP2 Platform Social Media, Marketing Purposes

Social Media

10 29


IMAGES 10


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.

10 31


THE IMAGES | PHOTOGRAPHY

IMAGES

On Brand Photography Lighting, Clarity, Depth of field, Vibrant colors, Warmth

Workstation

People

10 32


On Brand Photography Lighting, Clarity, Depth of field, Vibrant colors, Warmth

City / Landmark

Travel

10 33


THE THEIMAGES IMAGES | | PHOTOGRAPHY PHOTOGRAPHY IMAGES IMAGES

Imagery ImageryDo’s Do’s Striking Strikingaapose? pose?Follow Followthese thesesimple simplesteps stepsand andchoose chooseaaphoto photothat thatbegs begsto tobe beseen. seen. 01 01

04 04

02 02

05 05

03 03

06 06

Correct CorrectPhoto PhotoUsage: Usage: 1.1. This Thisisisphotography photographyatatits itsfinest. finest.Follow Followthis thisstandard standardand andsucceed. succeed. 2.2. Photographs Photographsthat thatsuggest suggesthuman humanemotions emotionsare arealways alwayswelcome. welcome. 3.3. Online Onlineisisthe thebest bestway wayto tolearn learnEnglish. English.Let’s Let’sshow showit.it. 4.4. Choose Chooseimages imagesthat thatshow showpeople peopleininfriendly, friendly,safe safeenvironments. environments. 5.5. Use Useimages imagesof ofstudents studentslearning learningfrom fromhome. home. 6.6. Natural Naturalsettings settingswith withcomputers computersare areaaplus! plus!

10 34


THE IMAGES | PHOTOGRAPHY

IMAGES

Imagery Don’ts These are the images that should be avoided. 01

04

02

05

03

06

Incorrect Photo Usage: 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.

Photography Downloads For access to high-resolution photos, please contact us at creative@openenglish.com. 10 35


THE IMAGES | PHOTOGRAPHY

IMAGES

Students Imagery Examples The students images should portray learning from home, or comfortable environments. For image downloads please contact us at creative@openenglish.com.

36


THE IMAGES | PHOTOGRAPHY

IMAGES

Our Website Characters These are the openenglish.com teachers and students. For image downloads please contact us at creative@openenglish.com.

Teachers Jenny

Sheila

Adam

Advisors Anna

Fiorella

Carlos

Students Juan David

Diana

Andres

37


PRODUCT | IMAGES

LESSONS

CHARACTERS

Product Images

The recently redesigned 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 10 39


PRODUCT | IMAGES

LESSONS

CHARACTERS

PRODUCT | IMAGES

LESSONS

CHARACTERS

Product Images

Open English developed the Weekly Study Plan as a solution to students’ common Product question – “what’s next?” The Weekly Study Plan guides students through an

Images optimal combination of the 3 major activities of our curriculum – live classes, lessons Open Englishexercises. developed thetool Weekly Planstudents as a solution to students’ common and practice This helpsStudy to keep on track so they are able question – “what’s next?” The Weekly Plan students through an to fulfill each learning objective beforeStudy moving onguides to another concept. Completed optimal combination of theis3amajor ourstudents curriculum – liveon classes, lessons activities turn blue, which great activities visual tooloffor to focus the next step. and practice exercises. This tool helps to keep students on track so they are able to fulfill each learning objective before moving on to another concept. Completed activities turn blue, which is a great visual tool for students to focus on the next step.

Study Plan

Practice

Study Plan

Practice

10 40


PRODUCT | IMAGES

LESSONS

CHARACTERS

Product Images

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

10 41


PRODUCT | IMAGES

LESSONS

CHARACTERS

Product Images

Once students complete the Open English Placement Test, they are placed in the appropriate 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

10 42


PRODUCT | IMAGES

LESSONS

CHARACTERS

Product Lessons

Open English has developed eight 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: Common Questions, and My Notes.

43


PRODUCT | IMAGES

LESSONS

CHARACTERS

Product

Characters These are the Open English lessons characters

Amy

THE HOST

Amy the host / on screen personality (Female) • Visits each city to discover 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

James

THE PHOTOGRAPHER

James the photographer / On screen personality (Male): • Writes about photography, and the latest trends in technology • Likes to photograph portraits, and landscapes • Likes visiting different cities • Dresses in hip, business casual • Traits: outgoing, active, passionate about photography

Sara

THE STUDENT

Sara 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

Zack

CHEF AND FOODIE

Zack 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

44


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Marketing

Social Media Social Media efforts at Open English strive 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 stays on-brand.

Design Examples 2016

46


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Social Media Facebook

With 1.44 billion monthly active users, Facebook is the world’s largest social network.

Design Examples 2016

47


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Facebook

Platform Specs Facebook Image Guidelines • Use PS Save for Web Feature • Images with a logo or text may be best as a PNG file

Facebook Image Dimensions • • • •

Cover Photo – 851 x 315 pixels Mobile Save Area Cover Photo – 563 x 315 pixels Profile Picture – 180 x 180 pixels. (Displays 160 x 160 on Desktop) Post Images – 600 x 600 pixels. (Click to Web: Multiple Product)

10 48


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Social Media Twitter

Twitter is one of the social media networks that our customers will most often use to discuss the Open English brand.

Design Examples 2016

10 49


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Twitter

Platform Specs In order to make sure that Twitter is displaying the portion of the photo you want followers to see, make sure the width of your image fits the minimum requirements and that your content is horizontally centered.

Twitter Image Guidelines • Profile Photo – 400 x 400 pixels. (Displays 200 x 200 pixels) • Header Photo – 1,500 x 500 pixels • Post Image Maximum to appear expanded 1024 x 512 pixels

Twitter Image Guidelines • Square Image – recommended 400 x 400 pixels • Maximum file size 2 MB • JPG, GIF, or PNG

10 50


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Social Media LinkedIn

With 364 million users, LinkedIn is the world’s largest professional network. Where other social networks may be good drivers of traffic and customers, LinkedIn is a great place for Open English to source great employees and to connect with other industry leaders.

Design Examples 2016

10 51


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

LinkedIn

Platform Specs LinkedIn Image Guidelines • Use PS Save for Web Feature • Images with a logo or text may be best as a PNG file

LinkedIn Image Dimensions • • • •

Cover Photo – 851 x 315 pixels Mobile Save Area Cover Photo – 563 x 315 pixels Profile Picture – 180 x 180 pixels (Displays 160 x 160 on Desktop) Post Images – 600 x 600 pixels (Click to Web: Multiple Product)

10 52


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Social Media Instagram

Instagram is one of the most popular photo-sharing social networks with a user base of over 100 million.

Design Examples 2016

10 53


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Instagram

Platform Specs Instagram is a great platform to share fun or creative photos that show what Open English is all about.

Instagram Image Guidelines • Use Photoshop’s Save for Web feature • Images with a logo or text may be best save as a PNG file

Image Dimensions • • • •

Cover Photo – 851 x 315 pixels Mobile Save Area Cover Photo – 563 x 315 pixels Profile Picture – 180 x 180 pixels (Displays 160 x 160 on Desktop) Post Images – 600 x 600 pixels (Click to Web: Multiple Product)

10 54


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Social Media Google+

Google+ is an important site for Open English not just because of the social aspect, but also due to the fact that Open English’s Google+ account is also tied to the search engine itself.

Design Examples 2016

55


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Google+

Platform Specs Google+ images are the main attraction on our page, so choose your photo wisely! It’s a great opportunity to showcase the product and services that Open English has to offer.

Google+ Image Guidelines • Appears in home stream and on page at a width of 426 pixels (height is scaled) • Minimum width of 497 pixels (will scale the height for you) • Maximum upload 2,048 x 2,048 pixels • Shared Link – 150 x 150 (thumbnail)

Google+ Image Dimensions • • • •

Profile Picture – 250 x 250 pixels Cover Image – 1,080 x 608 pixels Shared Image – 497 x 373 pixels Shared Link – 150 x 150 pixels

10 56


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Social Media YouTube

YouTube has more than 1 billion unique users every month and is available on hundreds of millions of devices.

Design Examples 2016

10 57


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

YouTube

Platform Specs More than 1 million brands have already realized that YouTube is a great opportunity to reach their fan-base.

Video Requirements • Videos must maintain a 16:9 aspect ratio • In order to qualify as full HD, your dimensions must be at least 1,280 x 720 pixels

YouTube Dimensions • Channel Cover Photo – 2,560 x 1,440 • Tablet display: 1,855 x 423 • Mobile display: 1,546 x 423 • TV display: 2,560 x 1,440 • Video Uploads • Videos must maintain a 16:9 aspect ratio • In order to qualify as full HD, your dimensions must be at least 1,280 x 720 pixels

10 58


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

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

Marketing Print Marketing Marketing Print Print

Print PrintAds Adsrequest requestare aresummited summitedtotothe theCreative CreativeDepartment Departmentwith withall allthe theproper proper requirements requirements(brief, (brief,specs, specs,etc.). etc.).Here Hereare aresamples samplesofofprint printads. ads.

Innovation starts here.

Design Examples 2015 Design DesignExamples Examples 10 59


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

Marketing

www.openenglish.com Graphics

60


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

Marketing Marketing Marketing Email Blast Email Blast Blast Email

Open English Email Blast Open English English Email Email Blast Open

Ad Campaigns

!

SUSCRÍBASE HOY!

10 61


Marketing GDN

Open English Social Media Ads

10 62


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

hello. hello. hello.

The Open English Blog The Open Open English English Blog Blog The

Welcome to hello. by Open English. Welcome to hello. by Open English. We will inspire you, challenge you, and always make you think. 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 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, a passion to share the English language with the world. Visit our hello. blog weekly to learn, practice, and grow with Open English. practice, and grow with Open English.

Blog Posts

Here are 3 examples of blog images for hello.

Blog Posts Blog Posts

Here are 2 examples of blog images for hello. Here are 2 examples of blog images for hello.

Healthy Habits

Taking A Trip Travel Travel

Award Season Work Work 10 63


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

hello.

The Open English Blog Imagery The imagery for 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

10 64


MARKETING | SOCIAL MEDIA

PRINT

OE.COM

EMAILS / ADS

BLOG

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

Do’s

Don’ts

10 65


CTAs Web


CTAS | WEB FONT BUTTONS

Product

Web Font - Use Specification @font-face font-family: @typekit font-family: Base Body Font: Fallback Fonts:

'ProximaNova', sans-serif; proxima-nova, sans-serif; 16px / 1em / 1rem "Open Sans", Arial, sans-serif;

Title Subtitles Navigation Body 1 Body 2 / Misc. Button / CTA Caption

Regular 46px - 52px Light 26px - 30px Bold 12px - 14px Regular 16px Bold 16px Bold 14px - 16px Regular 12px

Product

Web Font - Style Strikethrough, Regular Font Weight 400 Semibold, Font Weight 600 Italic, Font Weight 400 Bold, Font Weight 700

Header 1

Font: Proxima Nova Regular 46px - 52px / Color: #0084FF

Header 2

Font: Proxima Nova Light 26px to 30px / Color: #4D4D4D

Header 3

Font: Proxima Nova Regular 24px / Color: #828282 Header 4 Regular Font: Proxima Nova Regular 18px / Color: #828282 Header 5 Regular

Font: Proxima Nova Regular 16px / Color: #828282 Header 6 Regular

Font: Proxima Nova Regular 14px / Color: #828282

10 67


CTAS | BUTTONS

Buttons

Your 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

Lorem Ipsum

Height - 80px Color - Fill Human Blue Achievable Green Fun Yellow

Lorem Ipsum

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

Alternate Button - Height: 80px | Typeface: Proxima Nova Bold (Tracking 120 / 30pt) Width - Varies by length of copy

Lorem Ipsum

Height - 80px Color - Stroke 2px / No Fill Human Blue Achievable Green Fun Yellow

Copyright Š 2015 Open English LLC. All rights reserved. The Open English name and the Open English logo are registered trademarks.

10 68


CTAS | WEB FONT BUTTONS

Product

Web Font - Use Specification EMPIEZA A APRENDER INGLÉS Font: Proxima Nova Bold 16px TEXT FIELDS

10


Thank You


10


10

Profile for Seth Travis

Style & Design Guide 2016  

Style & Design Guide 2016 for a client, Open English

Style & Design Guide 2016  

Style & Design Guide 2016 for a client, Open English

Advertisement