![]() What are style guides? The name gives us a pretty good idea of what they're all about: guides to style. But web can be so much more than that. At the least, they are simply documentation for frontend designers and developers. At best, style guides can help clients and other designers and developers understand how a site (or app) is visually put together. Style guides can increase understanding, encourage co-operation and boost maintainability. Strangely enough, style guides are anything but new, and we're certainly not the first to use them. However, the creation of style guides in our industry is only starting to gain popularity. Begin with identity guidelines The web's current style guides are the result of a natural evolution of identity guidelines, which graphic designers frequently develop for their clients. Also called 'style manuals', 'house style guidelines', 'design standards' and other similar names, they have been used by designers, writers and technical people in various industries to help describe design (or writing, or technical) systems in an attempt to promote consistency. The BBC's Global Experience Language (GEL) uses a brilliantly concise style Visual consistency is critically important to a brand. Could you imagine Apple stores designed like Ikea stores? Or McDonald's arches in a warm magenta? The BBC site set in the Baskerville typeface? In a world where brand perception rules, guidelines provide consistency, and consistency can either save or earn money - or a combination of the two. I was in college the first time I saw a set of identity guidelines; an entire book of them for Apple Computer. My jaw dropped. From how colours are built up on a four-colour printing press to how much space should surround the logo and the layout grid for printed materials, those guidelines got me wondering about creativity in design - and I understood for the first time that an identity is a system. ![]() ![]() Websites are also systems, so the old identity guidelines map well to the new style guides. Although, web style guides may contain more technical content and we can simply publish them on the web as opposed to printing them in book form. What's old is new Just like layout grids before them, style guides have been serving print designers tirelessly for years. Web workers have rediscovered them and what was normal - and sometimes even boring - work for print designers has become the new web hotness. This version of my logo & brand identity guidelines template for download is a little heftier than previous. Logo Design Template for Download. A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries. Style guides really started attracted interest after, which is a nice introduction for frontend designers and developers to the topic. (Also check out Debenham's - a great resource.) There are plenty of tools and frameworks to choose from. But before you go and grab the hottest new style guide framework, it's useful to nail down what a style guide really is - in order that you can choose the approach that works best for your situation. A style guide (or style manual): • Provides some general context and explains the purpose of the document • Shows the various design elements • Explains how and why these elements should be used, from a design perspective • Explains when and where it is appropriate to use the elements • Provides more explanations and context per element when necessary. This premise distinguishes style guides from pattern libraries. Pattern libraries showcase a bunch of design elements or patterns, and sometimes they explain how elements can be implemented - but often not under what circumstances they should or should not be used. Pattern libraries offer the game pieces but not the rules to the game.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2018
Categories |