In order to produce a good design team output and for ensuring a consistent brand identity, a web designer should create smart design guides. This is because a good design guide is such a work of art that has practical application in everyday design work. With design guide, you can showcase what your project is and aspire to be. It should include elements of design, voice and even code in a way that’s manageable, usable and easy to understand.
Above all, you need to know the six design guide elements that should be included in your documentation. Here they are.
- Brand Identity Examples
A good design guide should emphasize your brand identity in a visual format that represents your design material look. In other words, it should show than tell. However, the best example should display real-case uses that look exactly the same as the design standard and what you want to portray. Furthermore, discover when the design is at its best, whether it is on your website homepage, mobile homepage, app or any other place, then screen shoot to capture the image.
By using real images, you don’t need to create extra work to showcase visual elements, since you already have them in hand. Then, with visual proof, the team members can easily understand the actual practice of the written guideline work.
- Design Guidelines
Don’t forget to outline the use of design elements clearly; everything from color swatches to typography palettes and shapes, since explaining these things can help users apply the design style more accurately and consistently across medium. Furthermore, it is a good idea to include elements that might be different from print branding counterparts and how they relate when it comes to website design. So, if this is a part of your design strategy, you need to know which typefaces is substitution.
Remember to be specific when outlining design guidelines, for example H1 tags are always 88 points or thumbnail images are always 200 by 200 pixels, but be careful with too over-communicating unnecessary details, since it may make your team members get confused to find something in a sea of specifications.
- Voice and Personality
Believe it or not, but a descriptive writing style for copy can also impact the visuals type of imagery you choose, for example, the type of imagery you choose to use and even elements such as colour and type. All of these elements will produce an overall personality for your brand. Other factor, such as a strong voice and personality can also become a part of the visual identity.
- SEO Keywords
In search engine optimization, you will need to use keywords in your content, in fact, you need to involve keywords in the way you speak about the brand, in descriptive language about the design and put a list of the top keywords in the design guide itself.
With a keyword list, you can bring the words you want to say to top of mind, every time you see them. In other words, SEO keyword list attempt to make the words get stuck in reader’s head. Therefore, a good website design should be able to correlate to these keywords at all time to the content.
- Pattern and Element Styles
Make sure to have guides for all possible uses, such as on your still and animated versions of logos, colour palettes, patterns and even design elements such as form fields and navigation. If you want to give extra convenient to your team, you can create a pattern and element style guide in an online location so that users can just copy and paste elements for quick usage.
- Code Snippets
Web design and code are two things that you need to know in every website design guide since you will find codes from buttons to small animations to slider effects. Of course, these codes might consume your hours to your daily workflow as it eliminates the need to manually enter specs with every new element.
With Firefox, you can include design component information in its design guide for the recently revised branding and logo usage. All you need is to remember to include some base information such as where to use H1 through H4 on pages within the website design and how to style buttons and images, even if you don’t provide a full library of code snippets.
All the points above show that a design guide doesn’t always have to be a static document. In fact, you can present it in a way that can leverage your brand and visual identity. You can also use online versions of a design guide so that you can quickly and easily make changes, such as grabbing code and colour snippets.