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 Slide

  2. #1

    View Slide

  3. View Slide

  4. Where we’ve been going wrong…

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. devices, not content.
    deliverables, not process.

    View Slide

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

    View Slide

  14. View Slide

  15. View Slide

  16. Design Systems :
    The Principles

    View Slide

  17. what are design systems?

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

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

    View Slide

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

    View Slide

  26. content is always the same

    View Slide

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

    View Slide

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

    View Slide

  29. typography first

    View Slide

  30. 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 Slide

  31. base unit

    View Slide

  32. 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 Slide

  33. grids and layout

    View Slide

  34. 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 Slide

  35. grid concept

    View Slide

  36. 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 Slide

  37. 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 Slide

  38. shape/form

    View Slide

  39. 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 Slide

  40. colour

    View Slide

  41. View Slide

  42. Design Systems :
    The Process

    View Slide

  43. detaching design considerations
    from viewport widths

    View Slide

  44. designing in the browser

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. mockups and breakpoints

    View Slide

  49. View Slide

  50. View Slide

  51. the future

    View Slide

  52. nobody is an expert

    View Slide

  53. View Slide

  54. experiment and communicate

    View Slide

  55. Laura Kalbag
    @laurakalbag laurakalbag.com

    View Slide

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

    View Slide