Creating Website Style Guides

A style guide is a great tool that can be used by developers, designers, project managers, advertisers and marketing departments to understand your intended design system. The style guide establishes brand consistency and harmony rules by outlining your website's typographical treatments, visual elements, positioning, interactions, and grids.

Transcript

1. Creating a Website Style Guide The What, How & Why of creating website style guides.
2. The What. Style guides: 1. Ensure brand identity. (Tone & Voice) 2. Ensure consistency. (Format) 3. Establish design rules for your website. 4. Establish a single tone and harmony. *A style guide is used for others to understand your design system by outlining typographical treatments, visual elements, interactions, and grids. BBC Gel Guidelines http://bbc.co.uk/guidelines/gel
3. The What… cont’d Style guides: 5. Tell a story about a design system. 6. Speaks visually to others. 7. Outlines global and granular details. *Each design decision affects the user’s experience. That 1px bottom-border indicates a sectional division. The in-line background-color on a h1 tag indicates a title etc… Style Tile Includes: Header styles, links, color palettes etc…
4. The How: Formating a Style Guide 01-Overview: -Explain the project: (Purpose.) -Explain your design approach: (Your User.) -Explain your strategy: (Goal.) *Research your intended user and make design decisions that will develop the user’s experience.
5. The How: Formating a Style Guide… cont’d 02-Layout: -Determine a column structure: Three (blog style) Two or One. -Choose a grid: Fixed 960px or fluid layout using %. -Determine HTML structure and element positioning: Header, Nav, Content, Sidebar, Footer etc… (Wireframe)
6. The How: Formating a Style Guide… cont’d 03-Branding: -Establish a colour palette and visual design cues (Call-to-actions) -Determine brand elements. (ie: which elements will enforce brand identity?) -Establish brand restrictions. (ie: what NOT to implement.)
7. The How: Formating a Style Guide… cont’d 04-Typography: -Font choices. (Web fonts: Google Fonts, Font Squirrel, Adobe Type Kit…) -Include examples of: font-weight, font-size, line-height, <p>, <h1-h6> *Style these globally and then make granular modifications depending on alternate situations. ie: error message font, color and weight.
8. The How: Formating a Style Guide… cont’d 05-Navigation: How will your user find their way around your site? (Horizontal, Vertical, Fixed, Side-panel drawer…) -Style link colours, text-decoration, :hover, search boxes, dropdowns, forms, tables, sub navs and event interactions, ie: link:current.
9. The How: Formating a Style Guide… cont’d 06-HTML Elements: -Style your h1-h6 tags. -Style li, buttons and button text, form elements, tables etc… *Organize styles as classes to group similar styles where necessary.
10. The How: Formating a Style Guide… cont’d 07-Media: -Image and Video ratios. (Fixed width or scaled by %) -Establish the proportions of your images and videos. ie: width and height. -Style image and video frames, if needed.
11. The How: Formating a Style Guide… cont’d 08-Assets: -Advertisment sizes. ie: Google Ads. *Standard Ad sizes can be found on IAB Website. http://www.iab.net/ -Design search result pages. (How will results be displayed?) -404 Pages. -Form submission pages including error messages and form validation. -Comments and comment threads. -Photo gallery and interactive elements. ie: view, next, previous and close buttons.
12. The How: Formating a Style Guide… cont’d 09-Interfaces: -Interactive states for all elements. (Animations, swipe gestures, scroll events…) Develop a set of elements and their interactive states along with code snippets for you and your developer to refer to as your site is being developed. This is a good addition to a style guide for devs and designers to quickly collect needed elements. *You can also create a shared document within your design files.
13. The How: Formating a Style Guide… cont’d 10-UX Docs: Your final style guide should also include: -A site map -Wireframes -Snapshots of page prototypes and interactive states
14. Take it further with an Interface canvas. Interface canvas: An interface canvas enables people to see all the visual elements of your site. You can take your style guide to the next level by including each interactive state, such as, hover states, current states, swipe gestures, animations etc… As you develop your site, you can refer to this document while keeping consistency.
15. The Who. Who uses the style guide? Your style guide is not only intended for you (The designer). Many contributors to your website’s development and design will need access to this document. Project managers, web developers, programmers, designers, advertisers and marketing departments will all need to be aware of the design system so that your website remains consistent. *Provide your style guide as a PSD, Ai or PDF file.
16. Resources. Pixels to Ems http://pxtoem.com/ Chicago Manual of Style http://www.chicagomanualofstyle.org/home.html Creating a Website Style Guide: http://webdesign.tutsplus.com/tutorials/visuals/maintain-consistency-with-a-website-style-guide/ Don’t Make Me Think: Steve Krug http://bit.ly/1ev5wAf BBC Gel Guidelines http://bbc.co.uk/guidelines/gel Palantir http://palantir.net/experience/drupalcon-chicago
17. Let’s Create a Style Guide!