Big Sonos Brand Manual

Page 1

Sonos Studio 2018

corporate design manual.

Contact Us — info@sonos.com www.sonos.com New York City 647 / New York United States

Follow Us — www.facebook.com/sonos www.twitter.com/sonos Portfolio www.behance.net/sonos


Hi. Design Manual of Sonos Studio.


Content 01. About the Manual 02. Brand Identity 03. Logo and Signet 04. Brand Colors 05. Typography 06. Stationery 07. Merchandising 06. Corporate Images

3


01. Think outside the box. 4


01.

About the Manual Minimalism can be described as the stripping away of all unnecessary elements and focusing on what needs to be there. In this sense, minimalism encourages purpose. While minimalism often appears simple on the outside, a lot of thought, practice and time goes into the production and development of a minimalistic piece. So, here are some ways you can get the most out of minimalism.

5


— Modern — Enthusiastic — Minimalistic

02. Brand and Corporate Identity. 6


02.a — Minimalism Design & Culture Minimalism can be described as the stripping away of all unnecessary elements and focusing on what needs to be there. In this sense, minimalism encourages purpose. While minimalism often appears simple on the outside, a lot of thought, practice and time goes into the production and development of a minimalistic piece. So, here are some ways you can get the most out of minimalism.

7


02.b Core Values.

8


02.b – Core Values. Every successful company has a set of company values. Values are the essence of the company’s identity and summarises and reflect the purpose of their existence.

Company values are a guide on how the company should run and they are normally integrated in the company’s mission statement. Companies should try to establish their company values as a team instead of just the leader or management. By doing so, everyone in the company would feel belong and they would feel needed and not neglected.

9


Core Values.

— Performance

Design is the foundation for all we do and executional excellence is a core value of our Group.

— Focus

Focus on the user and all else will follow. It’s best to do one thing really, really well.

— Passion

Passion is at the heart of our company. We are continuously moving forward, innovating, and improving.

— Active

Acting with courage, challenging the status quo and finding new ways to grow our company and each other.

— Sustainable

We support sustainable and safe methods of production that reduce environmental degradation.

10


Why Values? The principles that guide the organization‘s day-to-day decisions; a defining component of your culture.

Core values can best be described as operating philosophies or principles that guide an organisation’s internal conduct as well as its relationship with the external world.


03. Logotype & Signet

12


Sense of a Logo.

In the simplest of terms, a logo is a design, icon, or mark that identifies your company. It’s the visual cornerstone of your brand.

The most important job of a logo is to help customers and customer prospects identify your company. That’s why the best logos are simple and memorable. Logos connect what you do and who you are with how people can best remember you.

13


03.a The Logo.

The Full Logotype The Sonos Masterbrand or Corporate Logo comprises two elements, the logo symbol and logo type. The Logo Symbol is a powerful illustration evoking the culture of design services - the connection between the strength of communication and the different points that influence.

14


Logo Symbol Consists of a powerful element evoking the culture of design services and a black square backround.

Brand Signet Carefully designed script logo , which has been further enhanced by the use of upper case letters

15


03.a Logo Application. Sizing and placement suggestions for the logo provide guidance on how to use the logo once you’ve added it to your communications. Many variables will determine how one uses the logo. In most instances the logo should appear as a “badge of authenticity” or an “approved signature.” It should also be seen clearly but does not need to be the focal point. Headlines, text, photography, and media platform all play a factor in how and where the logo will appear.

16


17


04.

Brand Colors. Corporate colors are a color scheme that your brand adopts as a key visual element of your corporate identity.

Color plays an important role in the Corporate Identity program. The colors are recommendations for various media. A palette of primary colors has been developed, which comprise the “One Voice� color scheme. Consistent use of these colors will contribute to the cohesive and harmonious look of the Brand Identity across all relevant media. Check with your designer or printer when using the corporate colors that they will be always be consistent.

18


Color Codes

Indigo Blue CMYK : C020 M000 Y000 K080 Pantone : 442C HKS : 98K RGB : R000 G000 B000 Web : #000000

Charming Grey CMYK : C020 M000 Y000 K080 Pantone : 442C HKS : 98K RGB : R000 G000 B000 Web : #000000

19


Source Sans Pro Source® Sans Pro, Adobe‘s first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces. Source® Sans Pro draws inspiration from the clarity and legibility of 20th-century American gothic typeface designs.

05.a Corporate Typo & Hierarchy 20


The spectacle before us was indeed sublime. Source Sans Pro – Bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Source Sans Pro – Light

a n

b c o p

d e f g h i j k l m q r s t u v w x y z

Source Sans Pro – Figures

1

2

3

4

5

6

7

8

9

0

Source Sans Pro – Special Characters

? ! & ​‌ % @ - + ÷ / © ® $ € £ ¥

21


Text & Typographic Hierarchy Typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content.

05.b Hierarchy.


Headlines

H1

H2

H3

H4

Copy Text

Copy

Head.h1 Head.h2 Head.h3 Head.h4

Copy Text Small Text

Caption

Caption Text

23


06.a

Corporate Design. Print.

Stationery : Letterhead

A letterhead is the heading at the top of a sheet of letter paper. That heading usually consists of a name and an address, and a logo or corporate design. Letterheads are generally printed by either the offset or letterpress methods. In most countries outside North America, company letterheads are printed DIN A4 in size. In North America, the letter size is typically in US Letter.

A key visual element of your corporate identity.

24


Parameter

Dimensions 297 x 210mm DIN A4

Weight 120g/m coated white

Print CMYK Euroscale

25


Stationery.

Stationery : Business Cards

The business cards will be used for all official contact and communication of our company. Fill in your data and send your message throughout the world. Letterheads are generally printed by offset methods. In most countries are printed 85 x 55 mm in size (international size). In North America, the business card size is typically in 3.5 x 2 inch.

A key visual element of your corporate identity.

26


Backside

Frontside

Parameter

Dimensions 85 x 55mm International Size

Weight 350g/m coated white

Print CMYK Euroscale

27


Stationery.

Stationery : Envelopes

This shows the approved layout with the primary elements of the stationery system for envelopes. Envelopes are generally printed by offset methods. For company commuication please use alwasy the approved envelope which size is typically 220 x 110 mm.

Treat your audience with a custom printed envelope that matches your message 28


Frontside

Backside

Parameter

Dimensions 220 x 110 mm DIN Long Size

Weight 400g/m coated white

Print CMYK Euroscale

29


Grid System.

Print : Grid System

In graphic design, a grid is a structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements (images, glyphs, paragraphs) in a rational, easy to absorb manner. A grid can be used to organize graphic elements in relation to a page, to other graphic elements on the page, or relation to other parts of the same graphic element or shape.

The grid system is an aid, not a guarantee. 30


Parameter

Is sa estis estibus ius net quos ipit lantiis maio il maiorrori que quia seressum id molut ab ipid es volupta que volendit utent, vent, ute eate velestrum ium autem que cuptatur sum commolor mincid enes il ipidendis idion re eum, omnimil et, quia dem rerio occullecti bla porro cum ant.

Is sa estis estibus ius net quos ipit lantiis maio il maiorrori que quia seressum id molut ab ipid es volupta que volendit utent, vent, ute eate velestrum ium autem que cuptatur sum commolor mincid enes il ipidendis idion re eum, omnimil et, quia dem rerio occullecti bla porro cum ant.

El ma simus aut lacerfero omnimet veritiur, imet auta velibus renit quaecatem verum vent officidis alit, odiciuntia nusam exerunt explatur? Quiae dellit am, sitati conseque vollest minto quod ut hitae ditaquia quod quis enis aceperrum que vent,Nequi que nostrum harErum sam remperiaest lab idelique porem quibus.

El ma simus aut lacerfero omnimet veritiur, imet auta velibus renit quaecatem verum vent officidis alit, odiciuntia nusam exerunt explatur? Quiae dellit am, sitati conseque vollest minto quod ut hitae ditaquia quod quis enis aceperrum que vent,Nequi que nostrum harErum sam remperiaest lab idelique porem quibus.

The grid system is an aid, not a guarantee. Use it always or never.

Is sa estis estibus ius net quos ipit lantiis maio il maiorrori que quia seressum id molut ab ipid es volupta que volendit utent, vent, ute eate velestrum ium.

Is sa estis estibus ius net quos ipit lantiis maio il maiorrori que quia seressum id molut ab ipid es volupta que volendit utent, vent, ute eate velestrum ium.

The grid

Is sa estis estibus ius net quos ipit lantiis maio il maiorrori que quia seressum id molut ab ipid es volupta que volendit utent, vent, ute eate velestrum ium autem que cuptatur sum commolor mincid enes il ipidendis idion re eum, omnimil et, quia dem rerio occullecti bla porro cum ant.

Oremolum quiatas voluptas esto consed ernateturi blabo. Nem reperrovid utempost premolo reictusa dunt pere, cum

Is sa estis estibus ius net quos ipit lantiis maio il maiorrori que quia seressum id molut ab ipid es volupta que volendit utent, vent, ute eate velestrum ium autem que cuptatur sum commolor mincid enes il ipidendis idion re eum, omnimil et, quia dem rerio occullecti bla porro cum ant. El ma simus aut lacerfero omnimet veritiur, imet auta velibus renit quaecatem verum vent offici.

31


06.b

Corporate Design. Digital.

Digital : Screen Design

Screen Horzontal Grid System Examples This shows approved layouts with a responsive grid for a 16:9 Screen of our website. This will be used for websites, landing pages and company presentations.

www.sonos-studios.com

Newsletter

Enter your mail address here

Shop

About us

About us

www.sonos-studios.com

Newsletter

Enter your mail address here

Shop

Shop

32

About us


www.sonos-studios.com

Newsletter

Enter your mail address here

Shop

About us

33


06.b

Corporate Design. Digital.

Digital : Mobile Design

Responsive Design on mobile devices This shows approved layouts for responsive layout grids on mobile devices. This will be used for our iOS and Android Apps.

Our brand needs to visible everywhere.

34


About us App Icon

Shop

Contact

35


Branding.

Branding : Business wear

Business wear should always be weared when you represent our company or you are in contact with (prospect) customers or our suppliers. Wear always a long-sleeved shirt and the blue or white tie with our brand logo. You will receive this from Human Resources department when starting at our company.

Stay original and make your brand a unique one.

36


Shirt

Pants

White Tie

Blue Tie

37


Branding.

Branding : Vehicles

For the background use always the approved corporate color or white. Place the logo always on both sides of the car doors and the script logo on the bottom.

Carry your brand around the world in a smart way.

38


White

Dark Blue

39


Merchandising. Promotional merchandise, sometimes nicknamed swag, are products, branded with a logo or slogan, used in marketing and communication programs. They are given away to promote a company, corporate image, brand, or event at trade shows, conferences, and as part of guerrilla marketing campaigns.

Branding : Apparel

When used on merchandising materials like t-shirts, mugs etc. any of the approved logos can be used. The symbol may also be used separately from the lettering. For the background use always the approved corporate color, white or dark gray. If you are unsure, please contact the marketing or design department to approve your design application.

Stay original and make your brand a unique one.

40


Frontside

Parameter

Dimensions XS / S / M / L / XL / XXL International Size

Material 100 % Cotton white

Print Special Color Silkscreen

41



Merchandising.

Branding : Caps

Caps are give aways to all new staff when they start at our company. Caps will also be send to all customers and prospect customers as a present. Use always white colored caps with the company logo in the corporate color.

Create nice stuff. People should always love to wear it.

43


Merchandising.

Branding : Brand Bag

Our company tote bag is an inexpensive and very useful article with a high media penetration. You should give this away as a present as often you can. Fill the bag with company presentation and other merchandising material like caps, pens etc. Do not forget to insert your business card and your contact information to give the user the possibility to reach you.

Stay original and make your brand a unique one.

44


Frontside

Parameter

Dimensions 85 x 55mm International Size

Weight 350g/m coated white

Print CMYK Euroscale

45



Merchandising.

Branding : Coffee Cup

This ist the approved design of the disposal coffee cups of our company. Coffee cups can be used on tradeshows, business meetings or company events. Use always white colored cups with the company logo in the corporate color.

Create nice stuff. People should always love to wear it.

47


08. Corporate Images

48


Impressive Images.

Corporate Images are responsible to transfer values of our Brand to our Customers or our potential customers.

It is a composite psychological impression that continually changes with the firm’s circumstances, media coverage, performance, pronouncements, etc. Our company use various corporate advertising techniques to enhance their public image in order to improve their desirability as a supplier, employer, customer, borrower, partner, etc.

49


— Simplistic — Silent — Minimalistic


Images : Look & Feel

The corporate image system -

Requirements: - desaturate colours - low contrast - sharp images - minimalistic look - modern

51


Images : Moodboard

52


A mood board is extremely useful for establishing the aesthetic feel of a design structure. Things that can be explored in the mood board include photography, color palettes, typography, patterns, and the overall look and feel of the design.

— Images — Colors — Patterns

A rough collage of colors, textures and pictures is all it takes to evoke a specific style or feeling.

Color Combination 01

Color Combination 02

Color Combination 03

Pattern 01

Pattern 02

Pattern 03

53


Images : Blending Modes

Effects for brand images -

Requirements: Image effects and blending modes raise the concision and the recognizability of a brand. Also they are able to divide content and other graphical elements that are used in layouts. In the same way the support statement of the used images and raise application possibilities.

54


— Simplistic — Silent — Minimalistic

— Simplistic — Silent — Minimalistic

55


08. Pictogram Design

56


Icons.

Creating a unified look and feel throughout the corporate design adds value to your brand.

An icon is a pictogram displayed on a screen or print layout in order to help the user navigate through the content in a easier way. The icon itself is a small picture or symbol serving as a quick, “intuitive� representation of a software tool, function or a data file.

57


— Bold — Simplistic — Edgy


Icon : Look & Feel

The corporate iconography system How to apply: - no backround - minimum height: 10 mm - upscale proportional

59


Checklist.

— The Logo

Only use approved versions of the logo. Please check that you have respected the minimum size and exclusion zone requirements.

— Brand Colors

Please make sure that only your approved primary and secondary colors are used.

— Typography

Use the font Source Sans Pro for all top headings, body text and smaller headings. The corporate font is also available for web.

— Marketing Materials

Please use the provided grids and approved layouts for all printed products and the stationery.

— Imagery and Iconography

Only use photos with minimal design, strong color, grayscale photos or photos with color overlay. Please follow the rules.


Validation. Check your result and improve that everything is based on the rules of our brand identity.

The easiest way to make sure that your work will match the brand manual guidelines is to have a small check list. Before publishing please go through the following check list, check bullet point and compare this with your publication. If something is incosistent please rework until everything is correct.


09. Summary & Contact

62


Thank you.

Write a short summary about your work and the idea behind this Corporate Design.

Solent in plictur aut ommos conest, consequundis aruntis estrum et hit ipidis iliam in provide lliberis que pratias ma nost, si unt velianiam destrum et quam volupti des nobis sapienis et et omnia quibuscipic tem ex Ximetur at plab ipsaperum idero optata as sed quaturi asperehent omnis nis iuntintus, officid iamente moleseq uistia nis mi, aborit verum iur solo que sit omnihit.

63


Sonos Studio 2018

Contact Us — info@sonos.com www.sonos.com New York City 647 / New York United States

Thank you for audience.


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.