Designing Style Guidelines For Brands And Websites

Advertisement

A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide.

Edward Tufte once said: “Great design is not democratic; it comes from great designers. If the standard is lousy, then develop another standard.” Although there’s no stopping some clients from making their website awful, by creating a style guide, you’re effectively establishing rules for those who take over from you.

Why Create A Style Guide?

  • You’ll have an easy guide to refer to when handing over the project.
  • Makes you look professional. They’ll know you did everything for a reason
  • You maintain control of the design. When someone does something awful, you can refer them to the document.
  • You avoid cheapening the design, message and branding.
  • Forces you to define and hone your style, making for a more cohesive design.

Branding Guidelines: What To Include?

Strategic Brand Overview

This should be short and sweet. In as few words as possible, make clear the vision for this design and any keywords people should keep in mind while designing. Most people will probably flip straight to the picture pages, but they may read a few sentences here.

Brand Essence: At the heart of our identity is our essence, encapsulated in the phrase ‘Creating Space to Grow’. This is not only about the Kew organisation, but also about the people who have contact with it and its work. Escape. Enrich. Enlighten. Enjoy. These are at the core of what we’re about. We represent the opportunity to escape from everyday worries, enrich the mind in a beautiful place, become enlightened about the natural world and, not least, enjoy ourselves in a unique environment. These are the benefits that everyone who engages with Kew can hope to experience. The focus of our identity is on science and conservation. To help communicate this we have created a consumer facing strapline – Plants People Possibilities. It defines what the brand stands for, ensuring consistency and credibility for all our key stakeholders and acting as an anchor for all communications and activities around the brand.1
See Kew’s branding guidelines2.

Kew uses strong photography in its “brand essence” message, with a few paragraphs that both inspire and define the brand. Even if you read only the first sentence, you get a sense of what it’s trying to do. While Kew has quite a few of these message pages, they are intertwined with beautiful photography that themselves define the photographic style and primary message.

Logos

For print and Web, most brands revolve around the logo. Make sure you provide logo variations and clarify minimum sizes.

Cunard logo options3
See Cunard’s branding guidelines4.

Cunard provides many variations on its minimum sizes. Because its crest can be displayed either on its own, with the name or with the tagline, specifying minimum sizes is important for legibility (for example, if the logo with the tagline is too small, it will be illegible).

Correct usage of the logo: The Think Brick logo has been specially designed as a unit and must not be recreated. These correct variations of the logos are supplied with the official brand aftwork. Consistent application of the logos will reinforce Think Brick as a brand.5
See Think Brick’s branding guidelines6.

Provide logos with different colors, and specify which colours are allowed. Think Brick gives designers a lot of options with its design. The point is to allow flexibility while maintaining consistency.

Show Examples of What and What Not to Do

You’re a professional, and you know better than to mess around with logos. But many others will try and think they’ve done a good job. They are so wrong. You must make clear what they can and cannot do with a design.

LOGO USAGE DON’TS 1. Don’t change the logo’s orientation. 2. Don’t bevel or emboss the logo. 3. Don’t place the logo on a busy photograph or pattern. 4. Don’t change the logo colors. 5. Don’t crop the logo in any way. 6. Don’t add “glow” effects to the logo. 7. Don’t present the logo on “vibrating” colored backgrounds. 8. Don’t present the logo in “outline only” fashion. 9. Don’t place the logo on similarly-colored backgrounds. 10. Don’t outline the logo in any color. 11. Don’t add “drop shadow” effects to the logo. 12. Don’t put a white box around the logo when placed on a dark or busy background. 13. Don’t reconfigure or change the size or placement of any logo elements. 14. Don’t stretch or squeeze the logo to distort proportions. 15. Don’t recreate elements or replace with something else.7
See I Love New York’s branding guidelines8.

I Love New York has done a great job defining all the things you shouldn’t do with its logo. It has also produced a beautiful (though bit wordy) document.

Spacing

Many non-designers underestimate the need for white space. Include a spacing reference, especially for the logo. Rather than specifying inches or centimeters, use a portion of the logo (a letter or a shape) to set the clearance. This way, whether the logo is big or small, the space around it will be sufficient.

To preserve the BlackBerry logo’s integrity, always maintain a minimum clear space around the logo. This clear space isolates the logo from competing graphic elements such as other logos, copy, photography or background patterns that may divert attention. The minimum clear space for the BlackBerry logo and the alternate horizontal logo is defined as the height of the “B” in the wordmark. The minimum clear space for the alternate vertical logo is twice the height of “B.” This minimum space should be maintained as the logo is proportionally enlarged or reduced in size.9
See BlackBerry’s branding guidelines10 (PDF, 2.2 MB).

BlackBerry not only explains its spacing policy, but also uses the capital B in the logo to define the clearance.

Colors

Always include color palettes and what the colors should be used for. And include formats for both print and Web: CMYK, Pantones (if they exist) and RGB (or HEX). Always include a CMYK alternative for Pantones because sometimes matching is hard (especially when Pantone printing is not possible). Specify primary and secondary colours and when and where to use them.

11
See Channel 4′s style guide12.

Channel 4 shows all of its Web and print colors, and it displays the swatches below an image that helps to define its color palette.

13
See the New School’s branding guidelines14.

The New School is clear about its primary colors and defines them for both print (Pantone and CMYK) and Web (RGB). Its brand guideline document is beautiful, too.

Chris Doyle's personal identity colour alternatives.15
See Christopher Doyle’s Personal Identity Guidelines16.

Okay, so this one isn’t a traditional branding guideline, but rather a personal identity guideline. Here Christopher Doyle shows off some alternative color palettes. He does a fantastic job of mocking branding guidelines; well worth a look (and chuckle).

Fonts

You’ll need to define the typefaces to use: sizes, line height, spacing before and after, colors, headline versus body font, etc. Make sure to include Web alternatives for non-Web fonts.

Screenshot17
See Yale’s typeface18.

Yale has its own typeface, which it provides to its designers.

19
See Yale’s Visual Identity20 page.

On the typeface section of its website, Yale also details when fonts should be used. It has a specific Web font section, detailing which fonts to use there.

Layouts and Grids

By setting up templates and guidelines for grids, you encourage best practices and promote consistency. In Web, preparing some generic templates can curb excessive creativity with the layout.

layouts graphic elements These are the two main shapes used for the site. - Square (rounded corners, 20 px radius) - Rectangle (rounded corners, 20 px radius) The width must follow the grid horizontally, but is more flexible vertically. elements > global > graphic_elements.psd21
See the Barbican’s branding, print and Web guidelines22.

For its website, the Barbican has set up building blocks that are both flexible and ordered—meaning they’re likely to remain in a grid.

Tone of Voice

A huge component of a brand’s personality is the copy, and defining the tone is a great way to keep a brand consistent. When multiple people are writing the copy, the brand can start to sound like it has multiple personalities.

lingo tone of voice Don’t over complicate. Tell it like it is. Be direct and get to the point. Always look for the simplest way to say what you want. We believe that a message is better read when it’s simple to understand. Be direct and talk the language of your customer. They will appreciate your honesty and simplicity. Do not be afraid to use colloquialisms – or should we say... Do not be afraid to use plain and simple phrases? We’re never sexist, after all, easyGroup is for the many, not the few but we’re often cheeky and always try to raise a smile. For example, easyJet cabin crew have said, “If you have enjoyed your flight today, thank you for choosing easyJet. If you haven’t thank you for flying Ryanair!” and “It is a routine regulation that we dim the cabin lights for landing, it also enhances the beauty of our senior cabin crew!”23
See easyJet’s branding guidelines24 (PDF, 2 MB).

easyJet has a well-defined personality, both verbal and written, and it gives examples for both.

Copy-Writing Guide

For those who require clients to write their own copy but want to maintain consistency, a copy-writing style guide can be helpful. Copy-writing is one of those things that most people register subconsciously. When reading, your brain automatically looks for consistency and patterns, and poor copy-writing can ruin the reading flow.

Corporate Communications: Dates and times Always write the date in full, without the use of commas: Thursday 25 March 2008 Only shorten the date to numerical form when labelling or naming documents. New chief executive appointed at The Mango Project (25.07.08) Always write out centuries in full: CAN Mezzanine was founded in the twenty-first century. Express the time using either the 12 hour or 24 hour clock: The meeting will run from 10.00am – 1.00 pm. Training begins promptly at 4.00. Do not use a combination of both: The centre opens at 10 o’clock and shuts at 16.00pm.25
See CAN’s branding guidelines26 (PDF, 845 KB).

CAN wants its number formats to look the same. On another page, it defines which spelling variants to use, reminds people of common mistakes and more.

Imagery

Many designers have established a particular tone in their photographs and images. Show your clients examples, and explain why they are good choices. Show them in the context of your design, and explain why they were chosen for that context.

Key principles of Zopa's illustrative style27
See Zopa’s style sheet28 (PDF, 3.7 MB).

Zopa29 has done a fantastic job of making its illustrated style clear. Its online style guide is very good, and it offers further tips on how to construct pages around its illustrations in the online style sheet.

Bring It All Together

Show a few examples of what the logo, photography and text look like together and the preferred formats.

Skype showing text, illustration, photography together30
See Skype’s branding guidelines31.

Skype has done a fantastic job of showing how it want designers to use its illustrations and photography. It has examples of the subtle differences between good and bad usage. The whole guide is beautiful and well worth a look.

Web Guidelines: What To Include?

Many people create branding guidelines but forget to include important style guides for the Web. Just like branding guidelines, Web guidelines keep everything consistent, from button styles to navigation structure.

Button Hierarchy

You’ve carefully decided what all the buttons are for and meticulously defined their states. Unfortunately, the in-house designer hasn’t applied your hover states or has created their own, and they look terrible.

Create a page that shows what all links do (including the buttons), the appropriate behavior of each and when to use them (with examples of appropriate usage). If one button is dominant, make clear the maximum number of times it should be used per page (usually once at most). Define the hover, disabled and visited states for all buttons.

gumtree button states32
Gumtree33.

Gumtree has worked hard to define all button states, especially custom buttons (for example, Post an Ad has a + sign in front of it). These were defined for the Gumtree redesign, which is now live.

Icons

Defining size and spacing and where to use icons is another great way to promote consistency. If icons should be used only sparingly, make this clear.

34
See ZURB’s icon sizes35.

Here, the ZURB36 agency defines icon sizes and when to use them, and it provides clients with an online source from which to download them. ZURB also defines badges and explains their purpose. It believes that its guidelines are best shared online.

Navigation (Logged In/Out States)

On the Web, good consistent navigation can make or break a website. New pages are often added to a website after the designer is done with it. Have you left some space for this? Doing things like letting people know what to do with new navigation items and showing logged-in states make for a cleaner website.

The global masthead retains the current global navigation links with additional links in an overlay panel. BBC iD and accessibility preferences are positioned to the right of the BBC blocks. The masthead is black but 60% opaque.37
See the BBC’s Global Experience Language38.

This is one of the most beautiful guidelines I’ve seen. BBC shows what to do with long user names, how much space everything should have and more.

Basic Coding Guidelines

There’s no way to make someone else code like you, but you can offer others basic guidelines that will minimize the damage, such as:

  • CSS class naming conventions
    Should they use .camelCase or .words-with-dashes?
  • JavaScript integration
    Are you using jQuery? MooTools? How should new JavaScript be integrated?
  • Form styling
    Include the code, error states and more so that they understand what style conventions you expect.
  • Doc type and validation requirements
    Do you allow certain invalid items? Do you expect the CSS and HTML to validate?
  • Directory structure
    Make clear how you have organized it.
  • Accessibility standards
    Should people include alt tags? Is image replacement used for non-standard fonts?
  • Testing methods
    Which standard should they test with? Do you have staging and production websites?
  • Version control
    What system are you using? How should they check in new code?

How To Format

Some branding guidelines have been turned into beautiful books:

39
See the Truth brand guidelines40.

This beautiful example41, which was designed to go with a brand redesign, shows just how beautiful branding guidelines can be.

But this requires a substantial budget and a reprint every so often. For most companies with tight budgets, this is not practical. On the Web especially, content is constantly being refined and styles for elements are not set in stone.

Here are a few good practices for formatting your guidelines:

  • Include a cover
    This should include an example of best practices for the logo.
  • Make it beautiful
    Even if it won’t be printed as a book, you can still make sure the branding guidelines appeal to the viewer. After all, you’re trying to inspire them to use your designs to the highest standards!
  • Include contact details
    For when they have questions, so that you can prevent bad decisions from being made.
  • Make it easy to access and open
    Usually this means putting it online or in PDF format. Don’t make it too big; use images sparingly.
  • Make it printable
    For international companies especially, keep margins big so that the document can be printed in both A4 and US letter sizes. If it’s online, make sure your print style sheets render the document as expected. Don’t do white text on a black background, either: you don’t want the client to have to buy a new ink cartridge every time they print a copy.
  • Make it easy to change
    Updating, adding new pages and making changes should be easy, because it will happen!
  • Create a mini version
    Make a short handy guide that has just the basics, in addition to the full version. Both will get used in different instances.
  • Provide print templates whenever possible
    Things like letterheads, business cards and envelops should have their own templates. While guidelines will help people put things in the right spot, they usually won’t help them get the right resolution or color format.

42
Here’s a useful template43 for a one-page branding guideline.

Length

Remember, people should be able to follow branding guidelines. A 100-page book will engage none but the most diligent designer. Many believe that a concise three-page overview is best for daily use, with a more in-depth 20-page document for more complex tasks. Less is more, usually!

bbc poster44
See the BBC’s branding guidelines and poster45.

The BBC has created a detailed 38-page guideline. But it has also produced a beautiful poster for quick reference. It’s a brilliant idea, and it keeps the guidelines at the front of mind.

Resources

Related Posts

You may be interested in the following related posts:

(al)

Footnotes

  1. 1 http://www.kew.org/about-kew/policies-information/tenders-proposals/index.htm
  2. 2 http://www.kew.org/about-kew/policies-information/tenders-proposals/index.htm
  3. 3 http://www.cunardguidelines.com
  4. 4 http://www.cunardguidelines.com/
  5. 5 http://www.brick.org.uk/about-us/guidelines.html
  6. 6 http://www.brick.org.uk/about-us/guidelines.html
  7. 7 http://www.scribd.com/doc/8278452/I-Love-New-York-Brand-Guidelines-November-2008
  8. 8 http://www.scribd.com/doc/8278452/I-Love-New-York-Brand-Guidelines-November-2008
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2010/07/blackberry.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2010/07/BlackBerry.pdf
  11. 11 http://www.channel4.com/about_c4/styleguide/
  12. 12 http://www.channel4.com/about_c4/styleguide/
  13. 13 http://www.newschool.edu/pressroom/index.html
  14. 14 http://www.newschool.edu/pressroom/index.html
  15. 15 http://thefactory.moodboard.com/post/Interview-with-Christopher-Doyle.asp
  16. 16 http://thefactory.moodboard.com/post/Interview-with-Christopher-Doyle.aspx
  17. 17 http://www.yale.edu/printer/typeface/
  18. 18 http://www.yale.edu/printer/typeface/
  19. 19 http://www.yale.edu/printer/identity/typeface.html
  20. 20 http://www.yale.edu/printer/identity/typeface.html
  21. 21 http://www.barbican.org.uk/about-barbican/contact-us/barbican-branding
  22. 22 http://www.barbican.org.uk/about-barbican/contact-us/barbican-branding
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2010/07/easyjet.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2010/07/easy_jet.pdf
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2010/07/can.jpg
  26. 26 http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/07/can_branding_guidelines.pdf
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2010/07/zopa.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2010/07/Zopa.pdf
  29. 29 http://uk.zopa.com/ZopaWeb/
  30. 30 http://issuu.com/bondo/docs/skype_brand_book_-_look?mode=embed&documentId=081126144540-63ceb3433ffe4a79aacf4f93d029fcb0&layout=grey
  31. 31 http://issuu.com/bondo/docs/skype_brand_book_-_look?mode=embed&documentId=081126144540-63ceb3433ffe4a79aacf4f93d029fcb0&layout=grey
  32. 32 http://gumtree.com
  33. 33 http://gumtree.com
  34. 34 http://www.flickr.com/photos/zurbinc/4774579941/in/photostream/
  35. 35 http://www.flickr.com/photos/zurbinc/4774579941/in/photostream/
  36. 36 http://www.zurb.com/
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2010/07/bbc.jpg
  38. 38 http://www.bbc.co.uk/guidelines/gel/downloads/gvl3_styleguide_v1.pdf
  39. 39 http://www.creativereview.co.uk/feed/may-2010/05/truth-brand-guidelines
  40. 40 http://www.creativereview.co.uk/feed/may-2010/05/truth-brand-guidelines
  41. 41 http://www.creativereview.co.uk/feed/may-2010/05/truth-brand-guidelines
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2010/07/template.jpg
  43. 43 http://imjustcreative.com/logo-identity-guideline-template-for-download/2010/04/15/
  44. 44 http://www.bbc.co.uk/guidelines/gel/
  45. 45 http://www.bbc.co.uk/guidelines/gel/
  46. 46 http://www.webstyleguide.com/wsg3/index.html
  47. 47 http://www.designerstalk.com/corpid/
  48. 48 http://www.computerarts.co.uk/in_depth/features/brand_identity
  49. 49 http://saatchidesign.wordpress.com/2009/09/25/20-top-tips-for-designing-effective-brand-guidelines/
  50. 50 http://www.logoorange.com/corporate-identity-manual-brand-style-guide.php
  51. 51 http://www.smashingmagazine.com/2010/03/25/what-makes-a-great-cover-letter-according-to-companies/
  52. 52 http://www.smashingmagazine.com/2010/02/04/the-art-and-science-of-the-email-signature/
  53. 53 http://www.smashingmagazine.com/2009/11/05/invoice-like-a-pro/
  54. 54 http://www.smashingmagazine.com/2009/05/20/effective-business-card-design-better-than-a-plain-ol-business-card/
  55. 55 http://www.smashingmagazine.com/2009/04/01/10-handy-tips-for-web-design-cvs-and-resumes/

↑ Back to topShare on Twitter

Kat Neville is a freelance Canadian web designer (living in the UK) who is constantly coming up with too many ideas for new websites. She also loves arts and crafts, gardening and going on adventures. You can find her design work at safetygoat.co.uk.

Advertising
  1. 1

    Seems what use to be industry protected knowledge back in the day is now available for everyone these days! So much for having one up on someone without a degree and experience. Watch out senior designers, the competition just increased ten fold!!!

    -1
  2. 2

    Good article, thank you!

    3
  3. 5

    Great article! Very thorough and to the point.

    0
  4. 6

    Really interesting article, it’s cool to see “how they do it” in big companies, thanks for the read and the ressources.

    0
  5. 7

    Compelling article to go through. Without proper branding company fails. Cost for proper branding is too high for start-up company. Self branding by reading series of article like this minimizes the capital investment to some extent.
    Thanks for good article..

    -2
  6. 8

    Awesome article and great guide, will use this as guidelines and reminder for my own work from now on!

    0
  7. 9

    Super awesome gathering of resources. Cheers.

    0
  8. 10
  9. 11

    Absolutely amazing! One of the very best compilations that I have come across. Just wish more of us followed these steps along the way. Nice insight Kate… Cheers.

    0
  10. 12

    Great article, I just posted an article on the same topic – and included our company guidelines as well.
    http://projekt19.com/the-importance-of-a-company-styleguide/

    0
  11. 13

    wow! Nice overview. I will definitely use these guidelines. Thank you kindly.

    0
  12. 14

    This came at the perfect time! I was looking over the brand guidelines posted at Identityworks.com and was trying to piece together elements from successful brands. Great and helpful article.

    0
  13. 15

    It’s such an comprehensive article! The tips for web copy is especially helpful. Have to take some time to digest them all…

    0
  14. 16

    Andrei Gonzales

    July 21, 2010 6:17 am

    Great post. This is exactly what all the other johnny-come-lately “designers” don’t see, know, or understand.

    Real design is serious business. It’s why it costs real money.

    0
  15. 17

    Ah this is wonderful and very timely.

    0
  16. 18

    Great read! Thanks a lot

    0
  17. 19

    Really great article and perfect timing thank you :)

    0
  18. 20

    CAN’s branding guidelines (PDF, 845 KB) isn’t missing, replace spaces with “_” :

    Thanks a lot SM. :)

    0
  19. 22

    Fantastic! Don’t find articles on Style Guide in this kind of voice and tone.

    In-House designers: This is a pretty good resource!

    0
  20. 23

    i don’t think anyone read guidelines like this … never!

    -6
    • 24

      Just read one about a week ago. Brand guidelines are actually really helpful when designing for high-profile companies. You know exactly what you’re aiming for.

      Awesome article Kat!

      0
    • 25

      Corporate Designer

      July 21, 2010 2:25 pm

      Definitely agree with Coffee Fan. All the companies we represent use style guides, which come in very helpful and handy when designing for them.

      0
  21. 26

    Kat thanks for sharing it.

    its very nice article with screenshot……..keep research like this and share…..thanks once again :)

    0
  22. 27

    thedevelopertuts

    July 21, 2010 7:55 am

    Wow, this tutorial is really interesting. I would love to have such guidelines when working with a client, especially when you work in a team of developers and designers.

    I am thinking of creating an opensource app that creates style guidelines automatically, and with this info, if would be really engaging!

    0
  23. 28

    Matt Orley of Akron, OH

    July 21, 2010 9:00 am

    Incredible Resource, you guys are awesome!

    0
  24. 29

    excellent article! thanks for sharing kat. i couldn’t find the bbc guidelines in the poster format you mentioned. has it been removed or perhaps i’m just looking in the wrong place?

    0
  25. 30

    I’ve worked with many style guides for licensed character products but hadn’t though about presenting it for web development/design. Naturally, it makes perfect sense.

    My fear is the “change-people” who must have their say, sometimes over and over and each time in a different direction. They inhabit corporations and sole proprietorships. As for leaving a style guide for “handing over,” I don’t want to make it easier for someone to replace me. Of course, if the creation of the style guide was built into the project with the client understanding it’s part of the process, then I would have it leather bound.

    Great article, Kat!

    0
    • 31

      Ha ha! You should have more confidence in yourself! I personally take the, “I’m incredibly helpful, and that makes me irreplaceable” approach.

      1
  26. 32

    Jessica Thompson

    July 21, 2010 10:54 am

    This is great! Thanks for the work!

    0
  27. 33

    Wonderful job. Clean and comprehensive. I’m bookmarking.

    0
  28. 34

    Thank you :))

    0
  29. 35

    Insanely amazing!

    0
  30. 36

    Nice article for non-designers. Otherwise, first semester of university you should have seen that.

    0
  31. 37

    Excelent article, I loved it!

    0
  32. 38

    Awesome article… helps heaps

    0
  33. 39

    Instant favorite, bookmarked.

    0
  34. 40

    Great article, very important for both print/web designers to have a good understanding of these elements.

    0
  35. 41

    Style guides are invaluable when done well. Style guides that are 2 page word docs (with 1 of those pages made up of incomplete CSS code snippets) are horrible. Horrible style guides that are followed to the letter, only to have the client turn around and ask for the headers on pages X, Y and Z to be smaller (without changing the CSS!) are a developers worse nightmare. Thank you for making this article and setting the bar!

    0
  36. 42

    Followers of these Guidelines call Great Designer.

    0
  37. 43

    Nice article Kat. But, to all people who make style guides: please start including the hexadecimal values of your colours! It’s a pain in the a** to receive your guidelines and have to find the hexadecimal equivalent of your CMYK or RGB. We’re not living in the 80s any more – the internet is here! Thank you.

    0
  38. 44

    Very good article! Thanks a lot!

    0
  39. 45

    This is very valuable, useful and applicable. Thanks for sharing! :)

    0
  40. 46

    excellent stuff, lots of things I hadn’t though of, like the whole web design guidelines. Nice one

    0
  41. 47

    Excellent and inspirational article! Congratulations!

    0
  42. 48

    Very good info and Excellent read.

    0
  43. 49

    One of the best article in recent time

    0
  44. 50

    Very good info.

    0
  45. 51

    good info and Excellent read

    0
  46. 52

    Yessss, But….
    If you go to http://www.iloveny.com you’ll see that their home page is made fully of examples of what NOT to do with logo:
    - drop shadow
    - reflection
    - green heart
    - inserted a blinking cursor between heart and NY, that on mouseover creates a searchbox
    - clearspace? what clearspace?

    0
  47. 53

    A+ article, must read.

    Great job.

    0
  48. 54

    I have recently quit a 20-hour art direction course because the teacher knew nothing about art and direction. Thanks for this post, it’s really inspiring and helpful.

    But, I am afraid this guide is too perfect for the everyday job. Some clients just don’t care and are not willing to pay more for a complete brand design. But still, it is inspiring and I really appreciate your effort and time to write this down.

    0
  49. 55

    Rajesh Talageri (RT)

    July 22, 2010 8:05 am

    Really good read. Precise and to-the-point.

    -RT

    0
  50. 56

    I ejoyed your article!

    Thank youi!
    MarVeena

    0
  51. 57

    Skype’s guidelines are definitely the best I’ve worked with.

    0
  52. 58

    It’s like SmashingMagazine has been writing specifically for our team over the last few days. Have you guys been reading our inter-office mail? :)

    0
  53. 59

    Excellent article and very well organized!!! Designers should try their very best to keep up with a systematic way of presenting their branding philosophy to ensure consistency.

    0
  54. 60

    Really good stuff…

    0
  55. 61

    good article…

    -1
  56. 62

    Great article. Very helpful and informative!

    0
  57. 63

    Great article! But where is the BBC GEL Poster? You can download the whole styleguide on their site but I can’t find the poster you refer to anywhere.

    0
  58. 64

    really good article ! Of course it’s written by a Canadian ;)

    0
  59. 65
  60. 66

    Very good article, congrats.

    0
  61. 67

    Simply superb. Thank you very much :)

    0
  62. 68

    Great reading here. Thank you.

    0
  63. 69

    Awesome article!

    0
  64. 70

    Really! Good! Article.

    0
  65. 71

    Awesome article :)

    0
  66. 72

    A new world to me. Thank you for the links and the knowledge shared.

    0
  67. 73

    great great great article…i was looking for.

    0
  68. 74

    Interesting article. One of the questions I got from this article is that before a website is made, usually the branding of a company is already established. So, often a web designer applies the brand guideline set out by a design agency rather than creating it from scratch. I think very rarely does a website act as the starting point for establishing the visual identity of a brand. So, does it mean that a style guide for a website is not really about defining the visual branding of a company, but rather, defining the visual elements of a website so that it represents its branding?

    Anyhow, I really like the bottom half of your articles, because it’s very specific to web designers. But another question sets in – specific details such as leading, font-size, column width, are very much implementation details. Therefore, besides designers, these pieces of information are also very useful for front-end developers, because they can highlight visual details, which could be easily overlooked. So, should a style guide be written and designed in such a way that it contains more implementation details rather than defining the general tone of a brand, acting as a documentation rather than a guide?

    These questions got me thinking, thanks for the article.

    0
  69. 75

    Absolutely brilliant excellent reference to draw on

    0
  70. 76

    This is a great post and very timely as we update our brand direction. Thank you Smashing Magazine!

    0
  71. 77

    Very useful… Thanks a bunch!

    0
  72. 78

    Just what I needed!

    0
  73. 79

    What a lot of credits for this article! So here is mine ;-) Thank you very much! I like the way you people discuss. Just one big happy designers family huh!

    yourwaytomagic.com

    0
  74. 80

    I created brand guidelines for a property site I worked on last year and despite being clear, concise and sensible they were completely ignored. The site now looks bland and directionless

    0
  75. 81

    In over a year of reading Smashing, this may be the best article so far. Fantastic job! Extremely useful.

    0
  76. 82

    Very good article !
    where do you find all this style guide ?

    0
  77. 83

    A very interesting article! Another great read from SM. Thanks!

    0
  78. 84

    Very helpful and useful! thanks for posting these resources and guidelines!

    0
  79. 85

    Thanks for sharing these great resources, I think we should all create a style guide for the companies we work for. These guide could be essential for vendors and even new staff to get up to speed and moving in the right direction immediately.

    0
  80. 86

    Bryant Littrean

    August 3, 2010 8:57 am

    This was great, thanks for putting all of this together. It could have been broken up into a “part 1″, “part 2″ post because it was so massive and filled with information. After clicking through to each of the brand guides and reading a few of the pages by each brand offered, about 75% through this article I felt like I needed a rest. I intend to print out the the BlackBerry guideline and possibly the Cunard guideline to explore further because those were so well put together.

    The current guideline I offer to my clients is in no way as elaborate as these examples but I plan on offering an option for an additional cost if someone wishes to have a branding guideline like these designed.

    I really enjoyed this article, thanks again.

    0
  81. 87

    Nice article. It’s Very useful for designers. I had implemented something like this in my company but later realized that only designers are able to follow it. Non designers find it difficult and time consuming job. But anyways it’s always good to have something like this rather than nothing.

    0
  82. 88

    Hi Kate, You are really great writer. This is a best article I ever seen. I have learned something on this. waiting for more.

    0
  83. 89

    This is the best guide I’ve read. Thank you Kat. I’m just setting up my own company and I’m going to try and follow all your guidelines. Don’t look at my website! I’m not there yet! Thanks again. Excellent.

    0
  84. 90

    this is really great post

    0
  85. 91

    A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide.

    0
  86. 92

    I was just going to design a logo and found these guidelines, thank you so much!

    0
  87. 93

    Does anyone have any examples of executing your style guide online? Using HTML/CSS instead of a PDF? Thanks!

    0
    • 94

      I would imagine it’s the same except you separate it by page tabbed navigation rather than physical pages. That way a user can click through it and see what you are trying to convey.

      0
  88. 95

    Wow!! this is what i’ve been looking for!!
    Thank you! :D

    0
  89. 96

    Kat this article indeed has great points and very few designers or even client understands the need for brand guideline. At times I feel this should be a mandatory part of our design deliverable’ and project estimates should be planned accordingly :-)
    I usually tell everyone around that brand document is not just for keepsake but should work as a “BIBLE” for whoever is associated with that brand – designers, developers and even client.

    0
  90. 97

    This is the best part of my day..! Great discovery!

    0
  91. 98

    Great article, great resource.

    Thank you!

    0
  92. 99

    I have a question along the same lines as Bryant Littrean’s comment.

    Obviously these brand guidelines are beautiful and incredibly instructive… They also look like hours upon hours of additional work.

    I currently offer a rudimentary “don’t stretch the logo” set of guidelines, and I provide the logo in several layouts… However, if I were to want to create something more thorough, does anyone have suggestions as to how to charge for that additional time and how to sell it?

    0
    • 100

      I think the way to do is it up front, and break your work out in phases. Set up a template (in InDesign or something of your choice) that you can use for people who don’t want to pay for it or have smaller businesses and don’t necessarily need a 60 page guide, and when you also don’t want them messing up your work by stretching your logo, etc…. That way it doesn’t take you much work (it’s a drag and drop), and for those that have a larger company or business in which you know that it’s needed, spend the extra hours of work, and include those hours in the ‘Branding’ (or whatever you want to call it) phase estimate of your project.

      0
    • 101

      I think charging for guidelines is a big topic. Some clients see the positives and they are prepared to pay. Others are not. I personally like to charge about 1-2 hours for each page in the manual. I use brandingmanual.com for online guidelines. I generally start with about 10 pages but most of the clients expand on their manual eventually.

      0
  93. 102

    This is PERFECT! Such an in depth article, and helpful with resources. Thanks so much for this, I am in the process of doing my own style guidelines for my company, and I always get intimidated, but this made it something I look forward to doing.

    0
  94. 103

    thanks a billion times over smashing magazine.

    0
  95. 104

    hi !
    Its such a great to have a great inspirations on brand guidelines .
    thanx smashing magazine.

    0
  96. 105

    Jessica Clements

    April 12, 2012 7:27 pm

    I love the slam on in-house designers, as though they were somehow less skilled??? Really???

    A tad thoughtless.

    1
  97. 106

    Hi! I found this very useful.

    I was wondering if others here have a more detailed example of Basic Coding Guidelines for a specific company.

    I’ve been tasked with one but I am unsure how to go about it.

    Thanks in advance!

    0
  98. 107

    Fantastic! One of the best written style guides. Cheers! M.

    0
  99. 108

    I’m currently creating a brand guide book for a uni project and this came in very handy, thanks

    0
  100. 109

    Really helpful article!

    0
  101. 110

    Thanks so much, really helpful

    0
  102. 111

    Really help and informative, thanks a lot

    0
  103. 112

    this website is the best one ive been on, it really helped me thank you :)

    0
  104. 113

    thanks so much for the article, really useful and informative.

    0
  105. 114

    Amazing article and well articulated. Kudos, and many thanks.

    0
  106. 115

    I’ve got a free brand guidelines template available for download if anyone needs – http://inkbotdesign.com/2012/02/brand-identity-guidelines-free-template/

    0
  107. 116

    This was so incredibly helpful! Thank you for taking the time to write this and include all the examples you do. I have just been commissioned at work to create the brand guidelines and I wasn’t sure what all to include or how to set up the book. You’ve basically written a “how-to” manual and for that I am eternally grateful! Thank you!!

    0
  108. 117

    Great article but I’m afraid most of the links are empty and/ or simply not showing the content. Many 404 and irrelevant pages here. I appreciate the effort tough.

    0
  109. 118

    Wanna ask when to start the style guide? Let’s say doing a website project, is it can have style guide first before designing those pages?

    If do style guide first before designing the website, is it we must have a style guide framework up front first?

    0

↑ Back to top