There are numerous ways to create a web design style guide, but where do you start? Style guides can feel like a whole project in themselves, but sometimes you just need a simple style guide to accompany design layouts for a small to a medium-sized web project, that you can put together fairly quickly.
A style guide is a collection of design elements, patterns, rules, and guidelines that help create a congruous user experience.
Style guides are typically created by a UI or visual designer, who will work with developers to add documentation that will outline how to achieve an established brand language in a digital environment. Depending on your organizational structure and project team, a developer may create a style guide from reoccurring patterns outlined in design layouts.
A good style guide will help to reinforce the communication of content on the website or digital product you’re building. It not only creates a structure to your design but allows developers to easily follow a set of design standards that are extracted from specific pages or layouts.
Style guides will not only help streamline the handoff from design to development but also help you easily extend the design to new pages without the expensive cost of mocking up each individual page. When the digital style guide is created as the first step in a client's brand evolution, it can also be used to extend the design to other branded content outside of the website like banner ads, social media, etc.
Although you can create basic style guides in other graphics programs such as Adobe Illustrator or Photoshop, we prefer and recommend using Sketch to create your style guide. Creating your style guide in Sketch will allow you to use the style guide to create and reference a reusable library when you're designing specific page layouts. You can also convert your colors into symbols so these swatches can be easily used within your client Sketch document. Not to mention, Sketch, an easy-to-use digital design vector-based app from Mac, that is the industry standard software for creating digital designs.
To create a basic style guide, start by creating a new “web design” project in Sketch. This can be found under “File”>”New from template,” “Web Design:"
On your artboard, include a section for colors, typography, blockquote styles, form styles, and other graphic elements such as iconography or illustration styles.
Start with your client’s established brand colors, if they have them, as a baseline. Then, you can extend the palette by eye, or by using one of the many color scheme generators out there to select colors and shades for the web. Though this seems simple, it often takes time, careful selection, and testing colors within design layouts, different instances, and within the browser during QA, to get the “right” palette. We’re trusting that the person responsible for creating the style guide has general design expertise, some basic sense of color theory, color psychology, and knows how to employ color effectively to achieve business and user goals.
Colors and Accessibility
It’s important to note that some brand colors do not translate well via the web or digital environment, so it’s critical to test these in the browser and modify colors as necessary. Ensuring your color palette is accessible by WCAG guidelines is the difference between creating accessible UI/UX design and creating an accessibility nightmare for your users.
Include swatches of each color and denote the RGB and hex code values for each. Define the primary and secondary palettes, as well as shades, as necessary.
Styleguides can be static comps or digital, working documents. Check out this digital styleguide from barricade.oi below:
If your client doesn’t have an existing type system and you’re starting from scratch, build off of keywords the brand should represent. Outline the header styles (h1-h6 is a good start), and size in either pixels or rems. Include specifics around the body copy, ordered and unordered lists, and quote styles (if these are different from the body copy). A good place to start is by looking at other sites and using Chrome extensions such as What Font? to identify typefaces and sizes used on other sites. Depending on the project budget and needs, there are hundreds of professional fonts on sites like MyFonts or alternatively, great free google fonts to use for any web project.
Although form styles may seem fairly basic, you’ll want to ensure the form style is visually compatible with the other design elements in your style guide. Start by working with developers to identify what comes out of the box with the development framework being used, then make any modifications as necessary.
For button and link styles, outline hover, and active states, with hex codes, to denote how calls-to-action should behave in an interactive environment. Do the same for tabs, if these are being used on the site.
You may choose to include illustration styles, iconography, or other design elements in your style guide. Even though these will be included on the site as independent design assets, it helps to see how these assets couple with other design elements in your style guide.
Although some projects will require a more detailed style guide, a simple web design style guide can go a long way in facilitating a great user experience and strong brand language.
Download our free basic web style guide template, which you can customize with Sketch for the purposes of your web design project.
Clients don’t always know to ask the right questions, and they often miss some important details that are hiding in plain sight.