![]() ![]() Kyle Neath's KSS (opens in new tab) is another great option. If you decide to create a pattern library rather than a style guide, there are lots of good tools to help you, such as Jeremy Keith's Pattern Primer (opens in new tab). A style guide can help you out whether you design in Photoshop or not. But you may find, as you create more responsive designs, that you struggle to communicate the 'why', 'how', 'when' and 'where' of your various design choices in a PSD file. Relax: you don't need to give up Photoshop. As designer Andy Clarke says: "We're making websites - not pictures of websites". image editing, asset creation, and for sketching and experimentation. Image editors such as Photoshop can be used for, wait for it. This will enable us to create realistic and responsive designs from the very beginning, removing tedious manual labour from that process. Style guides, combined with web-based design comps, can replace static Photoshop comps as our main design deliverables. Ultimately, the big difference is the documentation part, which is writing about the when, how, where and why - and you may struggle to communicate all those in an Adobe Photoshop PSD file. Readers of Starbucks style guide can toggle baselines and column grids However, 'Which button should I use for my particular situation, and how do I use it properly within a given context?' is usually answered by a style guide. The question 'Which buttons can I choose from?' can be handled by pattern libraries. Pattern libraries serve a different purpose. Using the GEL guide you could, in fact, create a page or component that fits perfectly within the BBC identity in a very short time, even if you are not familiar with the brand. The foundation is documented - without being long-winded - as well as containing patterns and components. It's an expansive system that's based on more than visual style: the choices are guided by its well-explained philosophy and well-considered design principles. (Although, in Bootstrap's defence, it can't provide context for you, since your own project becomes that context.)Īnother good example of a style guide is BBC's Global Experience Language ( GEL (opens in new tab)). Similarly, Twitter Bootstrap is in fact a really comprehensive pattern library rather than a style guide. It contains a gallery of ways for designers to deal with things, and some of the code needed to implement correctly. ![]() However, this is actually a very fine pattern and component library rather than a style guide. Many designers refer to the Starbucks style guide (opens in new tab) as an example of a great style guide. The GEL guide includes information on setting up various types of web pages Examples However, style guides deliver those rules. Pattern libraries offer the game pieces but not the rules to the game. 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. This premise distinguishes style guides from pattern libraries. Provides more explanations and context per element when necessary.Explains when and where it is appropriate to use the elements.Explains how and why these elements should be used, from a design perspective.Provides some general context and explains the purpose of the document.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. There are plenty of tools and frameworks to choose from. (Also check out Debenham's style guide stash (opens in new tab) - a great resource.) Style guides really started attracted interest after Anna Debenham's article in 2011 for 24 Ways (opens in new tab), which is a nice introduction for frontend designers and developers to the topic. Web workers have rediscovered them and what was normal - and sometimes even boring - work for print designers has become the new web hotness. Just like layout grids before them, style guides have been serving print designers tirelessly for years. 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. Websites are also systems, so the old identity guidelines map well to the new style guides. 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. I was in college the first time I saw a set of identity guidelines an entire book of them for Apple Computer. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |