Fork me on GitHub

EFDGUD DESIGN

Table of contents

  1. General statement
    1. What is dGUD style guide?
    2. Why do we need a dGUD style guide?
    3. How to use the guide?
  3. Style
    1. Colours
    2. Typography
    3. Imagery
    4. Icons
  6. Layout Structure
    1. Layout Blocks
    2. Micro Layouts
    3. Grid Unit Proportions
    4. Spacing
    5. Shattered Grid Dashboard
  8. Components
    1. Banners
    2. Breadcrumbs
    3. Buttons
    4. Cards of Content
    5. Common UI Controls
    6. Dialogues
    7. Forms
    8. Header Menu/TABS
    9. Headings
    10. Information Bar

General Statement

What is dGUD style guide?

dGUD (digital Grand Unified Design) style guide is a complete design guideline, consisting of a set of design principles and assets that demonstrates the good practice of EF web and mobile app design. dGUD is an extension of the original GUD 3.0 Brand guidelines, available here.

Why do we need a dGUD style guide?

The dGUD style guide provides guidance for the design work inside EF. It will help designers to build web pages and mobile apps with great visual quality, clean graphic style, and more importantly, brand consistency.

How to use the guide?

The dGUD style guide is meant to help designers build great interfaces reducing the time spent on exploration or conceptualization of a visual identity. While we understand certain areas of the school deserve more prominence and visual/functional identity, we believe it's in good effort to offer other designers across the company a set of assets and components that have been carefully crafted, with rigorous emphasis on simplicity, hierarchy, typography, spacing and color. Said principles should help to narrow down the liberate nature of creative work, thus reducing the broad assortment of design styles across BUs.

Please note that the style guide is meant to provide you a graphical guidance. These are rules, or constrains. These are tools for great design.

This documentation is not your answer for underlying UX problems. For those, please refer to your UX lead.

2.1 COLOURS

The primary application colours are neutralised to allow the minimal use of primary blue to draw focus where required.
BLACK
#000000
BLUE /CTA
#0078FF
WARM PAPER
#F1EAE1
WHITE
#FFFFFF
EF PINK
#FF0084
GREEN PEA /SUCCESS
#74D17F
TOMATITO /ERROR
#DE4C4C
MATTE GOLD /REWARD
#C9B188
EGGSHELL /CARDS
#FAF7F2
RAIN /DISABLED
#8B8B8B
DARK GRAY /GNDS
#666666
The following colours have been used and developed for learning materials and classroom materials.
AQUA
#09B79D
TOXIC-MINT
#38DDB9
OLIVE
#98D01F
MANGO
#F9BA2D
TANGERINE
#F79546
SUMRF
#3BA0DC
BARNEY
#8B6DB2
PINK
#F66F9F
BORING-PINK
#F1385A
ORANGINE
#FF6100

2.2 TYPOGRAPHY

Good typography adds personality to an application. It can help to set the tone in the absence of visual elements.

Helvetica is EF flagship font. In mobile apps it is used in a variety of ways, 75 bold capitals for headlines, 35 Thin and 45 Light Title case for a more friendly headline, 45 Light for body copy and 55 Roman wide tracked caps for buttons.

abc
35 thin
abc
45 light
abc
65 medium
abc
75 bold

CHANGE COURSE

h1- 46 px - 75 bold

PRESENTATIONS

h2 - 36 px - 75 bold

William Fergusson

h3 - 30 px - 45 light

Details

h3 - 20 px - 45 thin

It makes me happy when people are kind and accepting toward each other, looking out for each other, living the truth that we are all connected to and responsible for each other. It makes me mad when people suffer.

CONTENT - 14 PX - 45 LIGHT - 20 PX LINE SPACING

Education

Napier University

MSc Hospitality Management. Edinburgh, UK, 2001 - 2004

Oxford Brookes University

Bachelors with Honours: Languages for Business (Spanish and French), 2005 - 2006

Certifications

TEFL/TESOL Certificate

40 hours intensive TEFL qualification, 2015

example h4 and content mix. 45 light - 75 bold

Georgia is a supporting font. It is used to create an academic an more traditional contrast when Helvetica feels too modern or unvaried in designs.

After completing this course you will be able to:
notes - 16 px (variable) - Georgia Italic

Garamond Italic is only used in one place. This is in title lock ups to create a pleasing contrast to Helvetica Bold Caps.

After completing this course you will be able to:

contrast - Garamond Italic

Lock ups
H1 + Icon

change course

Lock ups for Learning materials
H1 + Garamond note + Icon

Browser more modules

levels & topics

2.3 IMAGERY

This helps to set the tone of an application. Different apps will employ different types of imagery including photography and illustration. The underlying EF principles of giving our students ‘confidence’ and ‘freedom’ through our product use should be the starting point to making image choices.
Consider the story the image is trying to tell. Model actions should feel believable and styling should be authentic to our audience. Lightning should set an inspiring mood. Pretentious smiles and actions should be avoided.

Neue Light. Short.

Att plugga engelska i Boston med EF lockar språkintresserade från hela världen som vill uppleva USAs universitetsstad på nära håll som student.

Plugga engelska i Boston och utveckla språket i hjärtat av den amerikanska universitetsvärlden. Utöver traditionella språkkurser, kan du förbereda dig för en framtid inom näringslivet eller den akademiska världen genom EFs examensförberedande språkkurser samt våra språkkurser som integreras med ekonomi eller andra ämnen.

CITY NAME 36PX

USA

CAPE TOWN

South Africa

ST JULIAN'S

Malta

SYDNEY

Australia

ROME

Italy

BEIJING

China

PARIS

France

CITY NAME 36PX

USA

CAPE TOWN

South Africa

ST JULIAN'S

Malta

SYDNEY

Australia

ROME

Italy

PARIS

France

BEIJING

China

2.2 ICONS

Icons represents entities, objects and illustrate specific user actions. Any future icon designs should be created as part of this set and follow the stylistic feature.

shareshareshare

deletedeletedelete

helphelphelp

editeditedit

locklocklock

unlockunlockunlock

locationlocationlocation

emailemailemail

speechspeechspeech

dialoguedialoguedialogue

commentcommentcomment

refreshrefreshrefresh

settingssettingssettings

calendarcalendarcalendar

clockclockclock

tickticktick

soundsoundsound

loginloginlogin

logoutlogoutlogout

savesavesave

bookmarkbookmarkbookmark

likelikelike

dislikedislikedislike

magnifymagnifymagnify

mapmapmap

notification-oknotification-oknotification-ok

notificationnotificationnotification

exclamationexclamationexclamation

rewardrewardreward

folderfolderfolder

documentdocumentdocument

shopping-cartshopping-cartshopping-cart

imageimageimage

desktopdesktopdesktop

laptoplaptoplaptop

tablettablettablet

mobilemobilemobile

cameracameracamera

headphonesheadphonesheadphones

headsetheadsetheadset

phonephonephone

websitewebsitewebsite

bedbedbed

hotelhotelhotel

mealmealmeal

citycitycity

ticketticketticket

airplaneairplaneairplane

boatboatboat

carcarcar

busbusbus

traintraintrain

bicyclebicyclebicycle

walkingwalkingwalking

bookbookbook

binocularsbinocularsbinoculars

wine-glasswine-glasswine-glass

cocktail-glasscocktail-glasscocktail-glass

anchoranchoranchor

tennistennistennis

subwaysubwaysubway

gymgymgym

librarylibrarylibrary

aquariumaquariumaquarium

wrenchwrenchwrench

parkparkpark

footballfootballfootball

agile-indicatoragile-indicatoragile-indicator

handhandhand

examexamexam

golfgolfgolf

skiingskiingskiing

worldworldworld

historyhistoryhistory

sciencesciencescience

naturenaturenature

teacherteacherteacher

globeglobeglobe

moneymoneymoney

businessbusinessbusiness

surfingsurfingsurfing

starstarstar

paperpaperpaper

newnewnew

piggy-bankpiggy-bankpiggy-bank

shovelshovelshovel

beachbeachbeach

hourglasshourglasshourglass

certificatecertificatecertificate

luggageluggageluggage

crescent-mooncrescent-mooncrescent-moon

hrs24hrs24hrs24

alertalertalert

plusplusplus

amusementamusementamusement

sunsunsun

brochurebrochurebrochure

zoozoozoo

snowsnowsnow

soccersoccersoccer

museummuseummuseum

theatretheatretheatre

swimmingswimmingswimming

divingdivingdiving

videovideovideo

studentstudentstudent

personpersonperson

speakingspeakingspeaking

childchildchild

lessonlessonlesson

artartart

lifebuoylifebuoylifebuoy

compasscompasscompass

baseballbaseballbaseball

horse-ridinghorse-ridinghorse-riding

cinemacinemacinema

firefirefire

umbrellaumbrellaumbrella

shoppingshoppingshopping

sunnysunnysunny

rainyrainyrainy

backpackbackpackbackpack

lightbulblightbulblightbulb

homehomehome

3.1 layout blocks
Conversation Class

Today's conversational class

Asking for directions

Classes start every hour, 24/7 and give you the confidence to interact with English speakers. No preparation needed.

Next class starts in 12 minutes | 42 minutes

GO TO CLASS
Conversation Class

Tomorrow's Class

You're still lost. Asking again.

First class starts at 7:00 A.M.

SHOW WEEK SCHEDULEl

3.2 micro layouts

Unit 1  

Holidays

Passed on 13th July 2014

total time total score
Talking about flight arrangements 05 mins 29 %
Checking in for a flight 24 mins 15 %
Helping someone get to a hotel 66 mins 99 %
Writting about past travels 101 mins 100 %

Main title here

Subtitle or brief message goes here. Maximum in two lines and with attention to brevity and precision.

Describing your experience
Disagreements and compilations
Recommending a hotel
Describing experiences

Group Lesson: Asking for directions

It's very common to get lost in a place we are not familiar with. Learn how to ask strangers for directions

00 20 45
hour min sec

Be ready when the classroom opens by completing a compatibility check.

4.1 BANNERS

4.3 buttons

4.4 CONTENT CARDS VARIATIONS & teacher cards

GE REGULAR

06

Elementary

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.

BUSINESS & STT

Negotiations

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.

INDUSTRY

Mitarbeiterführung Und Managment asdasdasdasdasda

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.
learn more

GE REGULAR

16

Upper Advanced

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.

BUSINESS & STT

TOEIC

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.

NORMAL STATE

unCompleted course

01

Beginner

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.
learn more

Completed course

01

Beginner

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.
learn more

CURRENT course

Your currrent course

01

Beginner

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.
learn more

SELECTED STATE

unCompleted course

01

Beginner

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.
close

Completed course

01

Beginner

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.
close

CURRENT course

Your currrent course

01

Beginner

This course will teach you the basics of effective military communication, including how to give briefings and to write orders, radio messages and reports.
close

4.4.1 TEACHER CARDS CONTENT & MICRO CARDS

  Teacher

William Fergusson

I love teaching English more than I love my own mother. I have so much fun teaching with EF here in London!
  • speaks
    british
    english
  • student rating
  • bilingual in
    spanish 
  • availability
    good
BOOK A PRIVATE CLASS
Details
Lives in: London, UK
Gender: Male
Birthday: 1st Februrary
Speaks: English (Native) Spanish (Advanced) French (Beginner)
Industry experience: Insurance Finance
Teaching specialisms: Business English Insurance English

About

It makes me happy when people are kind and accepting toward each other, looking out for each other, living the truth that we are all connected to and responsible for each other. It makes me mad when people suffer. I am good at painting, writing, sewing, singing, dancing, running, cooking, researching, performing, planning, teaching, learning, and lots of other things. I have never knowingly eaten a dog, though there is always the chance that once just slipped in, perhaps when I was asleep.


Interests

What makes me happy: Cooking, learning languages, nature, friends and family, my dog, improving & challenging myself My favorite foods: Italian & Mexican... and noodles! If I could be doing anything right now, I would: travel to some spanish speaking country to make my spanish better!

  Teacher

William Fergusson

  • british
    english
  • bilingual
    danish
  Teacher

Johan Sanders

  • british
    english
  • bilingual
    russian
  Teacher

Claire Johnson

  • british
    english

4.5 common UI controls

Progress Bars
1%
60%

Sliders


Switches Outline

Switches Disabled

Switches Small

Tool Tips

Pagination & Navigation

Combo boxes

Travel English

TRAVEL ENGLISHBUSINESS WRITINGNEGOTIATIONSMEETINGS

Business English

APPOINTMENTSPRESENTATIONSNEGOTIATIONSMEETINGS

Travel English

TRAVEL ENGLISHBUSINESS WRITINGNEGOTIATIONSMEETINGS

Business English

APPOINTMENTSPRESENTATIONSNEGOTIATIONSMEETINGS

Travel English

TRAVEL ENGLISHBUSINESS WRITINGNEGOTIATIONSMEETINGS

Business English

APPOINTMENTSPRESENTATIONSNEGOTIATIONSMEETINGS

Travel English

TRAVEL ENGLISHBUSINESS WRITINGNEGOTIATIONSMEETINGS

Business English

APPOINTMENTSPRESENTATIONSNEGOTIATIONSMEETINGS

Dropdown

18192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899

4.6 dialogues

Week Schedule
Monday Expanding your vocabulary
Tuesday Solving a puzzle
Wednesday Making big decisions
Thursday Taking part in a trial
Friday Understanding computers
Sunday Keeping fit
 All times follow Eastern Standard Time
Title of the dialog here

This I have produced as a scantling of Jack's great eloquence and force of his reasoning upon such abstruse matters

4.10 INFORMATION BARS & MESSAGES (EXPLORATION)