$30 off During Our Annual Pro Sale. View Details »

Creating Website Style Guides

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.

Mark-Anthony Karam

January 03, 2014
Tweet

More Decks by Mark-Anthony Karam

Other Decks in Design

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