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.
   

   View Slide

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
   

   View Slide

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…
   

   View Slide

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.
   

   View Slide

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)
   

   View Slide

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.)
   

   View Slide

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, ,
   *Style these globally and then make granular modifications depending on
   alternate situations. ie: error message font, color and weight.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

17. Let’s Create a Style Guide!
    

    View Slide