Brand Guidelines v.2.0
1
Myspace Brand Guidelines Version 2.0
Brand Guidelines v.2.0
2
Our Design Principles Good Design Is Innovative The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself. Good Design Makes a Product Useful A product is bought to be used. It has to satisfy certain criteria, not only functional but also psychological and aesthetic. Good design emphasizes the usefulness of a product while disregarding anything that could possibly detract from it. Good Design Is Aesthetic The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful. Good Design Makes A Product Understandable It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory. Good Design Is Unobtrusive Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
Good Design Is Honest It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept. Good Design Is Long-lasting It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society. Good Design Is Thorough Down to the Last Detail Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer. Good Design Is Environmentally Friendly Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product. Good Design Is as Little Design as Possible Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity. —As written by Dieter Rams
Brand Guidelines v.2.0
3
Logo
Logo
4
Primary Mark
Logo
5
Logotype
This mark may only be used with written consent from the Creative Department in the Beverly Hills office.
Logo
6
Logotype Lockup
Logo
7
Icon
This mark may only be used with written consent from the Creative Department in the Beverly Hills office.
Logo
8
Logo Usage
Logo Usage
9
Primary Mark Overview The primary mark is the public facing identity of Myspace. This should always be the featured logo used in any communications produced by or on behalf of Myspace. This mark must be used in conjunction with a typed version of the word “Myspace� in proximity to the mark. Either as header copy, or in a URL format (example: myspace.com). The following pages will outline the rules and guidelines for proper handling of the Myspace primary mark.
Logo Usage
10
Determining Logo Size These guidelines apply only for small logo usage. Using the logo large, over an image needs to be cleared by the Creative Department in the Beverly Hills office. For vertically oriented: The correct width of the logo should be 1/11th the width of the piece’s final size. For example, if you are creating a design for something that is 11 x 17 inches (tabloid) the logo should be 1 inch wide. For horizontally oriented: The correct width of the logo should be 1/15th the height of the piece’s final size. Additional information: If creating a print system and not just a one off, use one consistent size. Any special cases must be sent to the Creative Department in the Beverly Hills office for approval. Scaling: The logo should never be used at a size smaller than 0.2 inches.
Logo Usage
11
Logomark Spacing and Boundaries No content, edges, or boundaries will encroach the logo mark in any direction within half the width of the logo in its usage size. clearance area
1/2 logo width
clearance area
Logo Usage
12
1/2 logo width
Logo Usage
13
Logomark Spacing, Boundaries and Placement Samples
This is Myspace.
This is Myspace.
myspace.com
myspace.com
myspace.com
Centered
Centered lower
Right lower
Logo Usage
14
Logomark Spacing, Boundaries and Placement Samples
Centered
Centered lower
Right lower
Logo Usage
15
Incorrect Logo Usage
Do not distort the logo vertically.
Do not distort the logo horizontally.
Do not use an outline of the logo.
Do not add a stroke to the logo.
Do not add a drop shadow or any kind of shadow to the logo.
Do not embellish the logo.
Do not flip the logo horizontally.
Do not flip the logo vertically.
Do not turn the logo on its side.
Do not turn the logo on its side.
Do not put the logo on an angle.
Do not put the logo on an angle.
Do not use a pattern inside the logo.
Do not use the logo on heavy lines or a heavy pattern.
Do not use the logo in black over an image.
Do not use the logo in color over an image.
Do not use two or more different colors within the logo.
Do not use the black logo on the blue background.
Logo Usage
16
Correct Logo Usage
Do use the logo on solid color backgrounds from the Myspace color palette.
Do use the logo (in white only) centered on top of approved imagery.
Logo Usage
17
Logotype Lockup Overview The logotype lockup is the secondary logo for Myspace. It should never be the feature Myspace logo used for any public-facing communication. There are special circumstances that would dictate the primary usage of the logotype lockup for public-facing and business-tobusiness communication, any such instances must be approved by the Creative Department of the Beverly Hills office. The following pages will outline the rules and guidelines for proper handling of the Myspace logotype lockup.
Logo Usage
18
Determining Logotype Lockup Size For vertically oriented: The correct width of the logo should be 1/6th the width of the piece’s final size. For horizontally oriented: The correct width of the logo should be 1/8th of the height of the piece’s final size. Additional information: If you are creating a print system and not just a one off, please use one consistant size. Any special cases must be sent to the Creative Department in the Beverly Hills office for approval.
Logo Usage
19
Logotype Lockup Spacing and Boundaries No content, edges, or boundaries will encroach the logo mark in any direction within the full width of the logo in its usage size.
clearance area
logo width
clearance area
Logo Usage
20
Full logomark width
Logo Usage
21
Incorrect Logotype Lockup Usage
Do not distort the logo vertically.
Do not distort the logo horizontally.
Do not use an outline of the logo.
Do not add a stroke to the logo.
Do not add a drop shadow or any kind of shadow to the logo.
Do not embellish the logo.
Do not flip the logo horizontally.
Do not flip the logo vertically.
Do not turn the logo on its side.
Do not turn the logo on its side.
Do not put the logo on an angle.
Do not put the logo on an angle.
Do not use a pattern inside the logo.
Do not use the logo on heavy lines vor a heavy pattern.
Do not use the logo in black over an image.
Do not use the logo in color over an image.
Do not use two or more different colors within the logo.
Do not use the black logo on the blue background.
Logo Usage
22
Correct Logotype Lockup Usage
Logotype lockup should only be used over photography when the image has little disruption and allows the type to be easily read.
Do use the logo on solid color backgrounds from the Myspace color palette.
Do use the logo in white in the bottom right hand corner over approved imagery.
Logo Usage
23
Typography
Typography
24
Typography Overview
Community
Typography is at the core of everything we do. From the website and mobile, all the way to our letterheads and envelopes.
This is Myspace.
There are two distinct typographic voices that Myspace uses. The first is a community voice. This voice is bolder with more energy. The second voice is used for product communications. This voice references the site more directly. The following pages outline these two distinct voices.
Product
This is Myspace. Mixes Dolore four loko nostrud assumenda, carles jean shorts mollit banksy polaroid est typewriter whatever before they sold out photo booth trust fund. Odio sapiente dreamcatcher hoodie. Consequat duis kale chips elit. Messenger bag selvage qui, est godard iphone Austin four loko bushwick mustache placeat keffiyeh you probably haven’t heard of them thundercats et. PBR consectetur
Brand Guidelines v.2.0
squid, elit odio cupidatat ennui carles eiusmod street art kogi in voluptate. Ethnic eiusmod polaroid pour-over, pariatur hoodie nesciunt minim gastropub irure bicycle rights pop-up pickled forage vice. Tofu dolore single-origin coffee before they sold out.
25
Typography Samples
This is Myspace.
Horizontal is the new vertical.
This is Myspace. By Eric Taylor Tempor officia delectus wes anderson vinyl assumenda. Cosby sweater art party id fugiat williamsburg high life. Bespoke tempor assumenda, wayfarers cred ex before they sold out 8-bit. Ethical cosby sweater velit est, biodiesel post-ironic gluten-free tattooed Austin keffiyeh aute chambray lomo blog. Pitchfork magna sartorial synth, brooklyn minim aute chambray typewriter gentrify Austin est. Artisan dolore cosby sweater truffaut deserunt. Vinyl retro salvia pickled aesthetic, iphone accusamus umami DIY. Dolore reprehenderit fixie, labore assumenda cray williamsburg yr eiusmod laboris. Assumenda chillwave odio cred twee. Photo booth semiotics squid, cillum commodo mumblecore incididunt PBR carles adipisicing officia gastropub Austin aliqua vero. PBR nihil bushwick, magna post-ironic laboris you probably haven’t heard of them 8-bit nulla placeat. American apparel fixie labore DIY viral. Photo booth gastropub ex chillwave odio. Eiusmod squid craft beer fanny pack, shoreditch
Typography
post-ironic consequat incididunt. Tempor officia delectus wes anderson vinyl assumenda. Cosby sweater art party id fugiat williamsburg high life. Bespoke tempor assumenda, wayfarers cred ex before they sold out 8-bit. Ethical cosby sweater velit est, biodiesel postironic gluten-free tattooed Austin keffiyeh aute chambray lomo blog. Pitchfork magna sartorial synth, brooklyn minim aute chambray typewriter gentrify Austin est. Artisan dolore cosby sweater truffaut deserunt. Vinyl retro salvia pickled aesthetic, iphone accusamus umami DIY.
viral. Photo booth gastropub ex chillwave odio. Eiusmod squid craft beer fanny pack, shoreditch post-ironic consequat incididunt. Gluten-free tattooed Austin keffiyeh aute chambray lomo blog. Pitchfork magna sartorial synth, brooklyn minim aute chambray typewriter gentrify Austin est. Artisan dolore cosby sweater truffaut deserunt. Vinyl retro salvia pickled aesthetic, iphone accusamus umami DIY.
Dolore reprehenderit fixie, labore assumenda cray williamsburg yr eiusmod laboris. Assumenda chillwave odio cred twee. Photo booth semiotics squid, cillum commodo mumblecore incididunt PBR carles adipisicing officia gastropub Austin aliqua vero. PBR nihil bushwick, magna post-ironic laboris you probably haven’t heard of them 8-bit nulla placeat. American apparel fixie labore DIY
26
BentonSans Overview Light
Book
Bold
The quick brown fox jumped over the lazy dog.
The quick brown The quick brown fox jumped over fox jumped over the lazy dog. the lazy dog.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789@#$%&*()-_+=!?,.’”:;
0123456789@#$%&*()-_+=!?,.’”:;
0123456789@#$%&*()-_+=!?,.’”:;
Typography
27
Type Specs Sizes
Leading
Kerning
Please use one of the following sizes when creating designs in standard sizes (for any oversized projects, please discuss with the Creative Team in the Beverly Hills office):
Leading should always be 2 points larger than the type size. If you are typing in 18 pt, the leading should be 20 pt.
When in InDesign, standard kerning should be -10 when using light or regular weights of BentonSans as body copy. Bold may be set tighter (-15 or -20). The type should never feel too tight nor too open.
6 9 10 11 13 15 18 24 38 42 60 73 138
Headline copy should be kerned slightly tighter to account for the larger size.
This is a sample headline kerned correctly in bold. This is a sample headline kerned correctly in light.
Note: Other sizes my be used. However, do not go smaller than 6 point. NEVER USE MORE THAN 3 TYPE SIZES (HEADLINE, BODY, FOOTER) ON ONE PIECE. EVER.
Typography
28
Type Specs Headers
Centered white type can be used on a headline over an image.
Headers are set in sentence case, and can look like this. Headers are always set in either light or bold weights and usually aligned left.
Short headers, centered, in white, over an image.
Typography
29
Type Specs Body Style
One Column
Two Column
Fixie american apparel cred, magna you probably haven’t heard of them carles chillwave seitan ullamco photo booth pariatur PBR semiotics commodo. American apparel ullamco pickled iphone, retro odio leggings aesthetic small batch cardigan. Swag glutenfree squid vegan scenester Austin authentic qui. Brunch cliche irure mlkshk, fugiat tumblr in biodiesel ex. Aute post-ironic direct trade, small batch banh mi four loko anim sed sriracha consectetur biodiesel twee esse master cleanse readymade. Et ethnic officia craft beer. Portland nulla nisi labore consectetur.
Synth trust fund pariatur, typewriter 8-bit wolf pop-up bushwick minim. Dolor squid art party raw denim. Ennui elit aliqua pitchfork leggings, cray magna incididunt banh mi ex helvetica master cleanse. Letterpress gastropub freegan four loko tempor. Hella master cleanse aute, ennui flexitarian irure mcsweeney’s beard freegan officia synth. Proident locavore pickled, organic consectetur mustache biodiesel single-origin coffee photo booth wolf keffiyeh skateboard nulla fixie. Thundercats beard assumenda nesciunt.
Small batch selvage id organic trust fund incididunt mcsweeney’s dreamcatcher, DIY odd future williamsburg gastropub aute do food truck. Ethnic occupy godard, aliqua reprehenderit semiotics fap velit nesciunt. Commodo pariatur cardigan, cliche cupidatat irure forage banksy. Leggings portland cray incididunt cillum, four loko dolor. Id mumblecore fanny pack marfa photo booth stumptown. Stumptown authentic mumblecore brunch scenester. Bicycle rights exercitation lo-fi PBR bespoke id.
Notes: Paragraph changes are marked with line breaks – not indentations – with never more than one consecutive line ending in a hyphenated word. The setting in the above paragraph was 13 point type with 15 point leading.
Nesciunt williamsburg viral, four loko next level sriracha esse wayfarers helvetica consectetur sapiente ad. Skateboard williamsburg adipisicing viral mumblecore. Pitchfork nulla sriracha narwhal pinterest. Quinoa kale chips fingerstache bespoke, viral four loko umami scenester cillum ut. Locavore four loko ex fanny pack.
Velit minim viral, sriracha semiotics pinterest mustache quinoa exercitation fugiat stumptown. Readymade odio portland kale chips mustache, viral VHS. Mustache twee labore williamsburg exercitation, tumblr sartorial 8-bit lo-fi next level butcher polaroid locavore readymade. DIY you probably haven’t heard of them farm-to-table ennui labore, ut pitchfork mcsweeney’s. Nisi seitan ethnic raw denim quis, odd future narwhal DIY. Brunch gluten-free wes anderson occupy portland id mumblecore dreamcatcher, high life carles pop-up single-origin coffee. Cred eiusmod magna, nulla et kale chips consequat id you probably haven’t heard of them voluptate irure lo-fi. Chillwave biodiesel narwhal yr commodo PBR. Vinyl viral est lo-fi farm-to-table vice, chambray locavore ea fap keytar.
Notes: If more copy is required in a small area, use a two column setting. The setting in the above paragraph was 10 point type with 11 point leading.
Typography
30
Type Specs
Always be mindful of your paragraph rags and line lengths.
Color
31
Type Specs Justification
Body copy is always aligned left rag right. Headline copy is normally aligned left rag right, but in some instances it is centered (as stipulated in the above sections).
Typography
32
Stroke/Outline
Do not put a stroke on the type. Ever.
Color
33
Color
Color
34
Color Palette
Alternative Grey 2 RGB: 159/161/164 CMYK: 0/0/0/44 Hex: #9FA1A4 Pantone: Cool Gray 6 C Myspace Blue RGB: 0/141/222 CMYK: 75/35/0/0 Hex: #008DDE Pantone: 2925 C
Black RGB: 0/0/0 CMYK: 75/68/67/90 Hex: #000000 Pantone: Black C
White RGB: 255/255/255 CMYK: 0/0/0/0 Hex: #ffffff
Grey RGB: 230/232/232 CMYK: 9/5/6/0 Hex: #e6e8e8 Pantone: Cool Gray 2 C
Alternative Grey 11 RGB: 113/112/115 CMYK: 0/2/0/68 Hex: #717073 Pantone: Cool Gray 11 C
Color
35
Gradients
Do not use gradients of any kind. Ever.
Color
36
Imagery
Imagery
37
Photography The following pages contain a mood board of photographic imagery encompassing our diverse community and the vast range of situations from which content can come.
Imagery
38
Photography
Imagery
39
Photography
Imagery
40
Photography
Imagery
41
Advertisements
Applications
42
myspace.com
myspace.com
myspace.com
myspace.com
myspace.com
Corporate ID
43
Banners
Corporate ID
44
Corporate ID
Corporate ID
45
Business Stationary
August 1, 2012 Ms. Betty Johnson Accounts Payable The Cooking Store 765 Berliner Plaza Industrial Point, CA 68534 Dear Ms. Johnson,
Roslynn Cobarrubias Senior Director of Marketing roslynn@myspacemusic.com w. 310.969.7400 ext. 7182 m. 310.861.8990 Myspace Inc. 407 North Maple Drive Beverly Hills, CA 90210 Business cards
Et odd future ennui exercitation biodiesel. Austin master cleanse blog, dolor retro wolf est fingerstache nulla. Pinterest non dreamcatcher reprehenderit id, single-origin coffee cillum. Cray farm-totable carles eu etsy magna, officia eiusmod do cliche cred next level DIY beard nihil. Ethnic retro officia echo park, cliche pop-up nulla twee sint cray kogi lo-fi jean shorts. Small batch mixtape 3 wolf moon eu, butcher tofu master cleanse consectetur accusamus VHS selvage eiusmod aute high life velit. Scenester chillwave forage Austin, wes anderson small batch et sustainable fanny pack nesciunt. Mixtape keytar authentic, biodiesel ex wes anderson odio fanny pack veniam. Viral officia dolore, sint quis authentic jean shorts butcher food truck scenester ad. Aliquip beard nisi, officia portland wayfarers semiotics enim viral. Mlkshk sapiente messenger bag street art, eu craft beer viral non iphone fanny pack aute. Duis reprehenderit hella, aliqua cosby sweater labore retro gluten-free occupy incididunt gastropub wayfarers typewriter iphone accusamus. Aesthetic vero laborum PBR stumptown bespoke, leggings keytar cardigan tofu freegan laboris cosby sweater. Brunch vegan velit bicycle rights mumblecore, do odio cardigan pitchfork etsy before they sold out 8-bit fingerstache. Cred farm-to-table vinyl terry richardson. Lo-fi umami aute odio gluten-free ethical. Deserunt biodiesel mollit, sapiente mumblecore quis mixtape jean shorts placeat. Swag stumptown sustainable, hoodie viral ennui cosby sweater squid lo-fi pickled minim mumblecore wayfarers quinoa dolore. Cillum salvia irony gastropub, squid aliqua typewriter. Put a bird on it scenester ennui, ethnic hella lomo narwhal truffaut mixtape. Ullamco fingerstache ethnic, letterpress synth wolf beard sriracha carles gastropub etsy small batch master cleanse dreamcatcher. Best,
Roslynn Cobarrubias Senior Director of Marketing Marketing Department roslynn@myspacemusic.com w. 310.969.7400 ext.7182
Myspace Inc. 407 North Maple Drive Beverly Hills, CA 90210 myspace.com
Letterhead
Corporate ID
46
Business Stationary
Myspace Inc. 407 North Maple Drive Beverly Hills, CA 90210
Envelope
Myspace Inc. 407 North Maple Drive Beverly Hills, CA 90210 myspace.com Buckslip
Myspace Inc. 407 North Maple Drive Beverly Hills, CA 90210 myspace.com Label
Email Signature
Corporate ID
47
Presentation
Corporate ID
48
One-Sheet
Meeting
AUGUST
MYSPACE IS DEAD. LONG LIVE MYSPACE. We’re often quick to declare a social network “dead.” Sure, plenty of them have come and gone in recent years, but few have had such a massive fall from grace as MySpace, which has come to be known as “DeadSpace.” The unpronounceable “My____” logo rebranding did not help. Now it’s rumored to be at the dawn of a complete overhaul, but this article isn’t about that. It’s about the hole that MySpace has left specifically in the music community. MySpace was the first social network that I joined. I snubbed Friendster previously. I would riff about how odd it was to try to make friends online and how checking out your friends’ friends encouraged leeches, moochers and social-climbing. But I caved into MySpace because it had some useful features for musicians. The first one that drew me in was simply the events listing. The year was 2006 and I was about to
Myspace Inc. 407 North Maple Drive Beverly Hills, CA 90210 myspace.com
embark on my first extensive headlining tour. Here was a way for me to not only announce the dates but also post the flyer art and blast out updates if we decided to change venues or add more cities. As I delved into its functionality, I found a complete set of features to serve the DIY artist. One that was surprisingly meaningful was the option of customizing your page’s layout and background. The same way that producers were suddenly able to make their own music at home on affordable software, artists were more than ever in control of their image and branding. Before branding was even a buzzword, we were all recruiting our friends to help us learn basic HTML to design our MySpace pages. Take my friend Kavinsky for example, of Drive soundtrack fame. I can assure you that in 2007 he was already MySpace-famous for having the coolest looking page on there, complete with a tri-dimensional Tron moving floor. Compare that to Facebook where everybody has the same blue-grey theme that looks
SEPTEMBER
OCTOBER
MYSPACE IS DEAD. LONG LIVE MYSPACE. We’re often quick to declare a social network “dead.” Sure, plenty of them have come and gone in recent years, but few have had such a massive fall from grace as MySpace, which has come to be known as “DeadSpace.” The unpronounceable “My____” logo rebranding did not help. Now it’s rumored to be at the dawn of a complete overhaul, but this article isn’t about that. It’s about the hole that MySpace has left specifically in the music community. MySpace was the first social network that I joined. I snubbed Friendster previously. I would riff about how odd it was to try to make friends online and how checking out your friends’ friends encouraged leeches, moochers and social-climbing. But I caved into MySpace because it had some useful features for musicians. The first one that drew me in was simply the events listing. The year was 2006 and I was about to
NOVEMBER
DECEMBER
JANUARY
embark on my first extensive headlining tour. Here was a way for me to not only announce the dates but also post the flyer art and blast out updates if we decided to change venues or add more cities. As I delved into its functionality, I found a complete set of features to serve the DIY artist. One that was surprisingly meaningful was the option of customizing your page’s layout and background. The same way that producers were suddenly able to make their own music at home on affordable software, artists were more than ever in control of their image and branding. Before branding was even a buzzword, we were all recruiting our friends to help us learn basic HTML to design our MySpace pages. Take my friend Kavinsky for example, of Drive soundtrack fame. I can assure you that in 2007 he was already MySpace-famous for having the coolest looking page on there, complete with a tri-dimensional Tron moving floor. Compare that to Facebook where everybody has the same blue-grey theme that looks
Myspace Inc. 407 North Maple Drive Beverly Hills, CA 90210 myspace.com
Corporate ID
49
Brochure
Accordion Fold Brochure
Corporate ID
50
Applications
Applications
51
Applications
52
Thank You
The End
53