Andi has been doing digital creative work since 1995 and is prepared to back up the date with links. Between 1995 and 2001, Andi provided technology based design services to top tier clients ranging from Fox Television, to Xbox to The Smithsonian, Mandalay Bay and many others in between. In 2001 he decided to turn his passion into a technology startup focused on hospitality services and a digital design agency in 2004.
In 2014 Andi joined Deloitte Digital and was part of the Seattle office creative leadership team. Andi lives in Seattle, commutes to Redmond, where he is busy defining the next generation of Windows Experiences for the Maps and Communications & People Teams at Microsoft as Director of Design.
The other side of webdesign. The styleguide.
We can all agree, web work is getting evermore complex - the ins and outs of design for massive systems, taking in consideration brand standards and frameworks, can really impact the consistency of any communication. Add the challenge of communicating these needs to designers, writers, developers, content strategists, producers, marketers. the need to get everyone on the same page, and you have the making of a major, king size extended-headache.
Let's start with a bit of roleplaying. You are the site manager of a large corporation and you just launched your website redesign. The effort was monumental, the nights were long, the meetings were many and coffee was consumed by the gallon - and that was just you. Your team’s consumption of coffee break ought it to transatlantic oil tanker levels. You are now experiencing the briefest of periods - between the site launch and the 1st change. You're savoring this magical moment. Where time stands still and you can enjoy a 20 minute nap if you are lucky. Because you know, once the first change hits, it's all over.
When that moment comes though, you stay cool. Why? Because you had the tremendous foresight to plan for a style-guide right along with your design and development. So now, even with your team dispersed and with minimal to no developer support - you have the answers and, best of all, you can communicate next steps to anyone effectively.
About that style-guide.
Style-guides vary in flavor, complexity, use - and usefulness. It's a challenge in it's own right to determine the audience, purpose, and extent of this side-engagement. Which, surprise, everyone (almost) forgets or ignores to budget time and resources for. Ideally, the style-guide meets a couple of criteria and can be seen as a valuable resource as well as inspiration to designers and developers alike.
For a style-guide to be truly useful, it has to provide inherent value to the people that use it most. Take a busy front-end developer: a useful style-guide for this person constitutes not only documents standards like buttons, tables, colors, etc, but offers the code css/html code snippets to be able to generate the content quickly and accurately. There is a lot of work to get through on any given day and the ultimate value you can provide is saving them some time. A style-guide that offers the ready-to-use code snippets along with the direction on how to use it, becomes useful and has the added benefit of training the users to come to it looking for ways to speed their daily work cycle.
The exact opposite of this is the style-guide that merely informs the viewer (not user) of the correct way to do something. An even worse extension (worst case scenario) is a style-guide that is not live, but in a PDF form that you need to go download from somewhere on the marketing portal external vendor section. All this, about as useful to you as the iTunes EULA agreement. Bad news, your PDF style-guide user stats just hit 0. Throw in there the level of disinterest because it offers no value, merely dictated direction - and it was provided in the worst possible format for direct use. An added drawback of a canned style-guide is that it actively discourages repeat visits - so when you are busily rolling out an update to the standards and site, it will ensure the users using it… not at all. And ultimately, promptly publishing content that is completely out of alignment with the rest of the site.
Modern frameworks like Bootstrap allow for development of systematic site style components, that with minimum investments can be documented in the same codebase, bringing the .js functional elements (slideshows, accordions, etc) together with the style components. This, once in place, will make the process of updating your website a better, faster, and dare i say it... a more fun one. This shifts the very thinking on the subject from a “guide” approach to more of a dynamic “kit-of-parts” approach that documents, informs, and contains ready-built front-end HTML, CSS, JS, etc. components for quick assembly.
We all want to do the right thing. An active, living style-guide, that grows and reflects the company's business, priorities, and principles and is a central repository of best practices, always up-to-date with minimum effort investment lets us all do the right thing faster and more efficiently. Letting us focus our energy where it will really make a difference. Like, say, meetings…