10 August 2016 Comments Off on Style Guides IXD
Author: Daniel Jewel
Recently, while working with a client on wrapping up the building of their version 2 UI, it became apparent that not everyone was on the same page on how things should look and behave. The initial re-design of the web app failed when it came to being responsive. There was also a lack of unity in design themes in terms of the company’s brand and the product itself. So using my training as a graphic designer and my skill as a developer, I focused on marrying designs and concepts together, trying to match the client’s primarily print oriented style guide. This has proven to be an excellent cornerstone of the project as a whole.
Why you should have one
Designing and building a website or app is rarely a solo experience, and even if it is, remembering all the intricacies would be a stressful challenge. And most cringe at the thought of having to document something or a process, but the reality is, having a style guide will make sure that you and invested parties are all on the same page and have dispelled what an element is supposed to look like and how it is to function.
Another benefit to having a style guide is that it can generate discussion and find solutions to problems. In my experience in working with graphic designers, who wince at the thought of being asked to code, they sometimes overlook how an element will look at mobile size (or vice versa). While it looks great in a raster or vector editor, it may not translate well to an excellent user experience on a web browser. Having a style guide will help drive compartmentalizing a website or app and thus force designers and developers focus on smaller bites and looking at them from all angles.
One example I frequently find is that there is usually a consensus on what color a button should be in its default state and what it should look like on a mouse over, but the active and focus states of that button have been overlooked or ignored. Those things need to have styles, too! A good style guide will have a have a complete section on the shapes, sizes, line widths, states, and other details on a button that could be used throughout a website or app. That way, in the future, should a new page or feature be added, a designer or developer can reference the style guide and have a base to work from, thus keeping the look and feel consistent.
How to make one
Style guides have been around for a long time, and most of them dealt with writing and print materials (the client I was working for gave me one that mostly covered print media and typography). These guide are great, but they don’t help too much when it comes to an interactive experience. And to create one from scratch and make it easily maintainable could seem like an entire project in and of itself. But luckily, the Internet is here to save the day. Enter style guide generators:
During my surfing of the Internet, I’ve come across a few tools that can make creating a style guide a breeze. I’d like two focus on two that I’ve come to love:
Frontify
I’ve been itching to get some of my clients to look into using this tool as it answers a lot of the questions I had about being able to have something create a style guide and provide: code snippets, examples, collaboration, and a WYSIWYG editor. I feel like this can get an entire team involved on how to make and keep their style guide organized and tailored right for them.
Foundation 6
Included with the recently released version of the front-end frame work, Style Sherpa will look and work much the same as most static site generators. This is what I’ve been using in my most recent work as I’m able to type out my Sass code in one place and have both my web app and style guide get updated at the same time. This is great in that it’s doing two things at once—creating a style guide and making the needed style classes at the same time. I like this method as I feel like I can make fine tuned controls and enter in feedback quickly and get it up for viewing. I will say that this is a more advanced way of making a style guide, but it does allow for prototyping quickly.
Further Reading
There is a lot to cover in terms of mastering style guides. And I don’t want to drag things out when I could set you loose with a great resource: http://styleguides.io. This place has everything you could want to know. It’s got articles, books, examples, tools, and even podcasts on the topic. I hope you’ll check it out and learn more about style guides. I also encourage you to put a style guide creation into the work flow of your projects.
Author: Daniel Jewel
Tags:
