Style Guides

I had a think the last week, and thought, some places I have worked in have not got a clue when it comes to Style Guides. So I compiled a list of what you may want in one. These are just items that I think you need to consider when putting together a style guide – you may not need them all and in most cases you will need to add some other information more specific to your company.

Obviously, you need Branding. Define and give examples of your logos and color schemes. Show how your logo should be used in full color, decorated, flat, in black and white or on different backgrounds. Provide HEX and RBG color values and Pantone colors for each color and you may also want to provide locations on where you can find the logo files .png .eps .ai and .psd formats.

Goes without saying, Typography. Define what font families and the sizes for each header, paragraph, labels, form elements and any other formatted text that will be used. Also provide examples of what kerning, line height or line spacing should be used as well.

Layouts. This is my addition to the traditional style guide, Define where and how other elements are positioned on the screen and how they relate to each other. You could define margins, padding, gutters or grid patterns of the overall layout as well as any specific elements if different. I would provide examples of the layout to show the differences in screens or layout templates.

Navigation elements. Define the main and sub navigation styles as well as the interactivity of them. Define what happens when nested or parent/child navigation is used and show examples of how the navigation should be used and/or created.

Image use and Icons. Maybe define what sizes, file sizes, dimensions, and styles should be used for images and icons.

Other UI Standards. Define what types of other UI elements should be used for each interaction and how they should look. Where should a check box or radio button be used or should they be used at all?

Most Style Guides I have done also include a Goals/Mission area. You may want to define what your overall goals and mission of the screen/application you are making etc.

I have also added in some guides, coding practices. Here I defined what coding standards and practices should be used when edited and writing any type of code used. For example what HTML, CSS and JavaScript standards are supposed to be used when writing code for the site and show example code to illustrate how code should be written and submitted.

File Naming Conventions. I think this is very important, this will prevent so many problems in the long run.

In conclusion, make it pretty. This may take a lot more work but if you have end users referencing the style guide this may be worth extra time. Honestly, think about it, your style guide is a reflection of your product just like any other publicly facing product you manage. But, if your audience is just your group of developers then it might be fine very loose designed. This is since most of these users already understand your brand very well. But if you are sending off work to third parties, it is worth putting more effort in.

Published by theirishduck

I love the ability where I can plan, prioritise, design, develop and deliver blended learning solutions for a variety of markets. I love to consult and advise about the best use of digital learning and improve design standards in line with evolving ways of working. I also enjoy to keep up to date with, understand and regularly recommend emerging technologies and practice to improve individuals, teams and organisational capabilities. With over 12 years digital learning experience and demonstrated experience in both instructional design and eLearning development, I have also a lot of experience conducting training needs analysis including how to leverage principles such as design thinking and root cause analysis to understand and address performance gaps. I also have led many facilitation workshops and even presented at iDesignX and Game Developers Conferences both here in Australia, Wales and in the United States. I bring loads of coding experience in Java, ASM, C++, HTML, JavaScript, SCORM and xAPI, as well as proven capability using Adobe Captivate, Trivantis Lectora and Articulate Storyline 360 Studio authoring programs. Of course, Adobe Creative Cloud is also part of my toolbox which I also use daily. Being taught traditional and advanced 3D animation techniques, I love hand drawing and polymer clay sculpture, but can also use the Blender, 3D Studio Max, Maya and Softimage applications. With strong multimedia, training and programming backgrounds, I understand modern learner behaviour including micro and social learning, I am very familiar with most LMSes and app-based (XCode and Android Studio), adult learning models and e-solutions. I also possess the ability to manage multiple projects simultaneously, whilst being pro-active in delivering work independently with minimal supervision, but enjoy working in teams. I've been told I am a resilient, relationship focused guy which can manage and navigate conflicting views and stakeholders/subject matter experts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: