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.