I’ve never really enjoyed writing brand guidelines, I always felt it got in the way of the “real” design work i wanted to be doing. But I also really don’t enjoy designing a carefully thought out, beautifully executed logo only to see it used and abused by a poorly informed client. To work on creating a visual identity and then to send it out into the world with the equivalent of a hastily scrawled map on the back of a cigarette packet is woefully inadequate.
Through research and conversations with some world class identity designers I’ve found a solution to helping clients use their new visual identity to their absolute – a pattern library. We’ve all seen the beautiful digital UI kits, pattern libraries and style guides created by the likes of Mailchimp for their digital products, well its time to start creating similar for identity guidelines.
I’ve found the easiest solution is to establish and understand all the ways the identity is going to be used during the discovery stage. A real deep dive into what the client has in mind for the logo and second guessing uses they might not have thought of means there are no surprises and it can also really help inform the final design.
Here are some guidelines I’ve been using recently – these will all be included in the final identity pattern library.
For Use on Digital
A logo has to be responsive these days, it needs to work on all screen sizes so undoubtedly there will be several different versions of the logo — a desktop version, a different more simplified version for small screen sizes, possibly one for tablets. You may need an even more simplified version for use on the favicon in different sizes and and in different colors for various browsers.
For Use on Social Media
When using the identity in social media remember one size does not fit all on the various platforms — find out which platforms your client uses or may use. have test accounts set up on all the major platforms so you can test the usage as you are designing it. Some platforms use square images some use round. Nobody wants those black edges when the wrong shaped jpg has been used in a profile pic. Mock up each social media platform page to demonstrate how to use the logo and on twitter include a suggested theme color. Also suggest image styles to use in the profile header.
For Use in Emails
What about emails, do they need a file specific for an email signature or a few different versions for Mailchimp. Consider using thumbnail mockups of a couple of different mail chimp layout scenarios so the client can see which logo to use where.
For Use on Imagery
Does the logotype need to overlay imagery, at what screen size? Again maybe different versions for different size imagery, what about dark imagery and light imagery — show which version to use on which. Demonstrate the type of photography that would be a good fit for them and that would work well with their logo.
For Use on Videos
Which logo needs to be used on videos if the logo is overlaying a video what size and opacity should they use?
For Use in Print
Demonstrate how the variations of the logo can be used on different documents from business cards to brochures, what backgrounds should the white logo version be used on and what background should the colored version be used on. Whether there are any elements of the document that can be used alone for example shapes or an ampersand used in the logo. These don’t have to be long drawn out full blown documents but thumbnails and mock ups. Things that will enable the client as much as possible. Explain why a certain layout will work best.
Usage Variations
Is there a logotype version or just a logomark, is there a stacked version or a version with a strapline. When should these be used? Will the strapline be used on its own. How will this work? What will it look like? Again show real life scenarios.
Clear Labeling on Files
Label the files clearly and demonstrate their use in real life scenarios through mock ups and detail which file name should be used for which scenario.
Colors
Demonstrate the colors, contrast and variations and show how they can be used and explain why certain scenarios won’t work and demonstrate why. Explain when transparency is appropriate and when it isn’t. Think about what the client truly needs as opposed to what you’ve always sent out. Will they really need a black version of their logo? Might they use it incorrectly if you supply them with one? Explain when PNGs should be used and when Jpegs should be. Explain the color variations that will be experienced from print and digital. Include Hex, CMYK, RGB and Pantone where possible. explain why colors look different in print than digitally
Type
If type is used in the logo explain whether it’s appropriate to use it on other things such as websites, often it isn’t but I’ve seen clients use it because that is what there logo is in. So suggest typefaces that would work really well even if there is not a typeface used in the logo make suggestions for their other collateral.
Conclusion
More than anything I’ve found that mocking up in situ scenarios has been the most effective way of enabling the client. Together with the use of clear and concise language — communication is key. Label files clearly and in a way that will make sense to a client and then reference these in your guidelines so they are not left guessing which one to use. As well as supplying the appropriate files its important to demonstrate each of these versions in the identity guidelines don’t leave them guessing.
I know this seems like a huge amount of work but it is beneficial for everybody involved. The client will feel truly empowered and to go out and use the brand correctly, you will have provided a top notch service to your client, their beautiful new brand will be out in the world showcasing your stunning work and you will have helped them create a sense of cohesion through everything which will not only reflect well on them but on you too.
Featured image via DepositPhotos.
| Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5! |  |
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
from Webdesigner Depot http://bit.ly/2HIjCWq
from WordPress http://bit.ly/2JKNrYN
No comments:
Post a Comment