Creating a visual style guide is fast becoming a common practice for UI designers, especially when dealing with content for heavy sites or applications. With the help of style guide, designers are able to maintain a particular look and feel, by creating a set of design components that keeps visual hierarchy throughout application.
By creating style guides, the process becomes flexible, can be easily updated and is consistent. Style guides preciously saves your time and money when starting out new design projects and thus, makes iterating easier while maintaining a smooth consistency across design projects.
Why your brand needs a style guide
- To maintain control over the design. If your co-designer also happens to work on the same project, you can refer them to the document.
- To have an easy guide to refer when handling over the project, as every component of the site must be consistently built, no matter which member of the team has created it. Even if the member of the team is a newcomer.
- When the website has heavy content and it needs to be displayed in different ways.
- It enables non-designers including marketers and managers to understand how best to use your brand assets on any platform.
- Down the road, a style guide makes it easy for you to return to work you’ve done months or years before, without having to comb through your old files.
- Makes you look professional.
Let’s discuss UI Components.
We recently revamped the website for ATG, one of India’s largest tyre manufacturer. We designed a style guide for their website; something they could use as a reference for future projects. Let’s take that as an example to walk through the components of a style guide.
1. Logo usage
Once you have perfected the logo, it is important to maintain the integrity of it across platforms. Show how your logo should be used in various formats including full color, black and white, transparent, or on different backgrounds. You should also provide logo files for users in .png, .jpg and vector-based formats. If you have a tagline, make sure there are rules around placement, font, color and size in relationship to the logo.
Style guides establish color palettes to determine which are primary and secondary colors. Your brand should utilize these colors to create meaningful, emotional impressions and perceptions about the character and attitude of the brand. An approved corporate color palette should be a selection of colors that combine and complement each other to form a visual identity. It can represented including below few points:
- Primary/secondary/tertiary colors
- Background colors
- Font colors
The use of a specific set of compatible families for font, that reflect the individuality of a brand, is essential in a style guide. A style manual will define the font families, sizes, line spacing, colors for various content types; header, sub-head, paragraph, cite, block-quote, labels, form headers or any other formatted text that will be used.
Furthermore, a style guide manages the visual hierarchy of headlines, subheads, body copy and other style preferences. Typefaces come in multiple weights and styles and can be manipulated in different ways (e.g. uppercase/lowercase, bold, italics), which can affect the feel of your marketing materials.
Wire-framing is an important step in any platform of design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout accordingly and visualize on how you want your user to process the information. It represents workflow or process, showing the steps as boxes of various kinds, and their order by connecting them with arrows. It helps to study and rapidly refine the user interface design of web forms and interactive elements and evaluate overall effectiveness of the page layout against usability of best practices.
5. Web styles.
Web Application & websites often have lots of pages. It may be worthwhile to define how certain elements on the web should be styled so that developers can keep these elements the same across all pages. The following items are just a few examples of the various formats and information you can choose to include in your style guide.
A layout is a structural template that supports consistency across applications by defining visual grids, spacing, and sections. Define where and how HTML and other elements are positioned on the page and how they relate to each other. Define margins, padding, gutters or grid patterns of the overall layout as well as any specific elements if different. If necessary, provide examples of the layout to show the differences in pages or layouts, such as list view layout, graphs & metrics, landing pages, product pages and email communications.
7. Links and buttons
Define the colors and styles for all links and buttons that will be used. Show examples and hex values for content links, sidebar link styles, submit buttons, form buttons, info buttons or any other link or button.
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.
9. Graphics and icons
Define what type, sizes, file sizes, dimensions, and styles i.e. filled or stroke should be used for graphics and icons on your site. Do you have specific icon sets that need to be used? Show examples or have a library of graphics and icons prepared for usage. Your graphic designer can customize or design icons for you.
Image guidelines should also define when and how certain types of images are used. Define the style for use of imagery. Would you want them to be all soft focus? Is it okay to show people’s faces? Real people or stock images? Black and white or color? What kinds of people represent your target demographic? What should these people be doing? Some companies even define the type of dogs to be used based on their market research. Build a photo library and make sure to have the usage rights to all the images you use.
Footers are a great way to organize a lot of site navigation and information on the bottom of the page. This is where the user will look once they have finished scrolling through the current page or are looking for additional information about your website. It can be creatively crafted to display very important links, sitemap, social media icons, newsletter subscription, contact information and so on.
Footer links also gives an impetus to your search engine rankings. While users click more on the links that are on the body’s copy count rather than links such as the navigation bar, sidebar, or footer, they are still pretty valuable as there links direct the search engines to the most important pages.
There are so many types of media that a company may be involved with online and offline in today’s world. A brand style guide is important for any company in helping keep their visuals and messaging consistent across all platforms of communication with their audience. This explains the high value placed upon investing the time and effort into having a document that makes it easy for everyone to work with your brand and its assets.