Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Systems

Laura Kalbag
November 19, 2012

Design Systems

From a talk at Handheld conference in November 2012

Laura Kalbag

November 19, 2012
Tweet

More Decks by Laura Kalbag

Other Decks in Design

Transcript

  1. Design Systems
    Laura Kalbag
    @laurakalbag laurakalbag.com

    View full-size slide

  2. Where we’ve been going wrong…

    View full-size slide

  3. devices, not content.
    deliverables, not process.

    View full-size slide

  4. making assumptions about users and devices
    based on nothing but the width of the
    viewport

    View full-size slide

  5. Design Systems :
    The Principles

    View full-size slide

  6. what are design systems?

    View full-size slide

  7. components you might keep the
    same across viewports:
    • typeface
    • base unit
    • colour
    • shape/form

    View full-size slide

  8. components you might differentiate
    across viewports:
    • grids
    • layout
    • font size
    • measure (line-length)
    • leading (line-height)

    View full-size slide

  9. content is always the same

    View full-size slide

  10. “we need to build on what we do
    know: content”
    — Chris Armstrong

    View full-size slide

  11. Design Systems :
    The Practical,
    the core visual components

    View full-size slide

  12. typography first

    View full-size slide

  13. Here is some body text which is probably smaller than the title and
    hidden by the frames of the examples. Here is some body text which
    is probably smaller than the title and hidden by the frames of the
    examples. Here is some body text which is probably smaller than the
    title and hidden by the frames of the examples.
    Here is some body text which is probably smaller than the title and
    hidden by the frames of the examples.
    Here is some body text which is probably smaller than the title and
    hidden by the frames of the examples.
    Here is some body text which is probably
    smaller than the title and hidden by the frames
    of the examples. Here is some body text which
    is probably smaller than the title and hidden by
    the frames of the examples. Here is some body
    text which is probably smaller than the title and
    A lovely example of a title
    A lovely example
    of a title
    A lovely example of a title
    Here is some body text which is
    Typeface: Franklin Gothic

    View full-size slide

  14. Here is some body text which is probably smaller than the title and
    hidden by the frames of the examples. Here is some body text which
    is probably smaller than the title and hidden by the frames of the
    examples. Here is some body text which is probably smaller than the
    title and hidden by the frames of the examples.
    Here is some body text which is probably smaller than the title and
    hidden by the frames of the examples.
    The background grid is
    made of base units
    Here is some body text which is probably
    smaller than the title and hidden by the frames
    of the examples. Here is some body text which
    is probably smaller than the title and hidden by
    the frames of the examples. Here is some body
    text which is probably smaller than the title and
    The background grid is
    made of base units
    The background grid
    is made of base units
    Here is some body text which is

    View full-size slide

  15. grids and layout

    View full-size slide

  16. Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller
    than the title and is sitting here in
    columns. Here is some body text
    which is probably smaller than the
    title and is sitting here in columns.
    My four column layout
    My four
    column layout
    Here
    i s
    s o m
    e
    body
    t e x t
    whic
    h is
    Here
    i s
    s o m
    e
    body
    t e x t
    whic
    h is
    Here
    i s
    s o m
    e
    body
    t e x t
    whic
    h is
    Here
    i s
    s o m
    e
    body
    t e x t
    whic
    h is

    View full-size slide

  17. grid concept

    View full-size slide

  18. Here is some body text which is probably
    smaller than the title and is sitting here
    in columns. Here is some body text which
    is probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller than
    the title and is sitting here in columns.
    My grid based on threes
    My grid based
    on threes
    Here is some body text which is probably
    smaller than the title and is sitting here
    in columns. Here is some body text which
    is probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller than
    the title and is sitting here in columns.
    Here is some body text which is probably
    smaller than the title and is sitting here
    in columns. Here is some body text which
    is probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller than
    the title and is sitting here in columns.
    Here is some body text
    which is probably smaller
    than the title and is sitting
    here in columns. Here is
    some body text which is
    probably smaller than the
    title and is sitting here in

    View full-size slide

  19. Here is some body text which is
    probably smaller than the title
    and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title
    and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title
    and is sitting here in columns.
    Symmetrical grid
    Symmetrical
    grid
    Here is some body
    t e x t w h i c h i s
    probably smaller
    than the title and
    is sitting here in
    columns. Here is
    some body text
    which is probably
    Here is some body text which is
    probably smaller than the title
    and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title
    and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title
    and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title
    and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title

    View full-size slide

  20. Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller than
    the title and is sitting here in columns.
    My circles concept
    My circles
    concept
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller than
    the title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller than
    the title and is sitting here in columns.
    Here is some body text which is
    probably smaller than the title and is
    sitting here in columns. Here is some
    body text which is probably smaller than
    the title and is sitting here in columns.

    View full-size slide

  21. Design Systems :
    The Process

    View full-size slide

  22. detaching design considerations
    from viewport widths

    View full-size slide

  23. designing in the browser

    View full-size slide

  24. mockups and breakpoints

    View full-size slide

  25. nobody is an expert

    View full-size slide

  26. experiment and communicate

    View full-size slide

  27. Laura Kalbag
    @laurakalbag laurakalbag.com

    View full-size slide

  28. If you like icons:
    Glyphicons
    Noun Project
    Picto Foundry
    Pixeds
    Pixicon
    Symbolicons

    View full-size slide