compass communications visual design guide€¦ · typography #165c7d #006cfb #fc4c02 #6f5091...

8
VISUAL DESIGN GUIDE Compass Communications

Upload: others

Post on 17-Aug-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

VISUAL DESIGNGUIDE

Compass Communications

Page 2: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

OVERVIEW

WE ARE NOW LIVING IN A DIGITAL REVOLUTION. AS A PART OF

THIS REVOLUTION, VISUALS AND DIGITAL CONTENT ARE

PARAMOUNT TO NAVIGATING THIS SPACE. THIS GUIDE PROMOTES

VISUAL CONSISTENCY THROUGHOUT COMPASS GROUP USA’S

COMMUNICATIONS IN ORDER TO GROW OUR DIGITAL PRESENCE.

Page 3: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

FONTS & COLORS

COMPASS GROUP USA

TYPOGRAPHY

WEBSITE COLORS

#9b9b9b

#24292d #f05025 #ffffff #cfdb71 #326e67 #ebe5d7

#d8d8d8 #000000 #aa9259 #ddddd

MeliorLTStd Avenir Next

abcdefghijklmnopqrstuvwxyz

123456789

The sky was cloudless and

of a deep dark blue.

abcdefghijklmnopqrstuvwxyz123456789The sky was cloudless and of a deep dark blue.

Page 4: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

FONTS & COLORS

ALTOGETHERGREAT.COM

TYPOGRAPHY

#165c7d #006cfb #fc4c02 #6f5091 #cb2c30

Montserrat Pontano Sansabcdefghijklmnopqrstuvwxyz

123456789

The sky was cloudless and

of a deep dark blue.

abcdefghijklmnopqrstuvwxyz123456789The sky was cloudless and of a deep dark blue.

Page 5: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

PHOTOGRAPHY

PHOTOGRAPHY IS AN INTEGRAL PART OF DIGITAL DESIGN. PICTURES SHOULD BE WELL COMPOSED AND IN HIGH RESOLUTION. WHILE PHOTOS FROM DSLR CAMERAS ARE PREFERABLE, SMARTPHONES FROM 2014 FORWARD ARE ALSO CAPABLE OF CAPTURING HIGH QUALITY IMAGES.

Page 6: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

VIDEOGRAPHY

WITH THE PROLIFERATION OF VIDEO SITES SUCH AS YOUTUBE AND VIMEO, ENGAGING VIDEOS HAVE BECOME MORE IMPORTANT THAN EVER. VIDEOS SHOULD BE HIGH DEFINITION QUALITY, WELL COMPOSED, AND TIGHTLY EDITED. ALSO WHEN POSTING ON SOCIAL MEDIA, VIDEOS SHOULD BE NO LONGER THAN 5 MINUTES.

ON YOUTUBE, INCLUDE BRANDING ON YOUR VIDEO AND SET UP YOUR SECTOR’S CHANNEL. SETTING UP A YOUTUBE CHANNEL INCLUDES MAKING A TRAILER VIDEO, A BANNER IMAGE, AND FINALLY, CREATING DIFFERENT PLAYLISTS FOR YOUR CONTENT.

Page 7: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

WEB DESIGN

DESKTOP

YOUR WEBSITE HAS A LOT TO DO WITH HOW OUTSIDERS WILL VIEW YOUR COMPANY. MODERN WEBSITE DESIGN USES RECTANGLES AND OTHER GEOMETRIC SHAPES TO OPTIMIZE BOTH

VISUALS AND COPY. MODERN WEB DESIGN ALSO FEATURE HIGH RESOLUTION “HERO IMAGES”, WHICH ARE GIANT PICTURES THAT STRETCH THE WIDTH OF THE PAGE. BRANDING IS INCLUDED

AT THE TOP OF THE PAGE (USUALLY IN THE LEFT CORNER). SOCIAL MEDIA ICONS SHOULD EITHER BE DISPLAYED IN THE HEADER OR IN THE FOOTER OF THE WEB PAGE.

Page 8: Compass Communications VISUAL DESIGN GUIDE€¦ · TYPOGRAPHY #165c7d #006cfb #fc4c02 #6f5091 #cb2c30 Montserrat Pontano Sans abcdefghijklmnopqrstuvwxyz 123456789 The sky was cloudless

WEB DESIGN

MOBILE-FRIENDLY (RESPONSIVENESS)

MORE THAN 50% OF ALL INTERNET BROWSING WAS DONE FROM A MOBILE DEVICE. WITH THIS BEING SAID, IT IS IMPERATIVE FOR WEBSITES TO WORK ON BOTH PHONES AND TABLETS.