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

Design Systems In Websites & Apps

Design Systems In Websites & Apps

A talk that looks at responsive web design, front-end style guides and building and refining your own design systems.

Presented at the Zengenti Rocket Conference 2014, in Aston Court Birmingham.

A video that accompanies these slide can be watched here: https://www.youtube.com/watch?v=z_ZLkEZtwLk

Richard Saunders

May 22, 2014

More Decks by Richard Saunders

Other Decks in Design


  1. - making changes to multiple layouts 
 is time-consuming -

    fonts render differently between Photoshop and a web browser - difficult to visualise animation and behaviour - usual comes before any content has been produced, and we rely on good old Lorem Ipsum, which make sense to no one.
  2. Why not start the process with something we know? 

    Content is one variable we can be sure of.
  3. Rather than trying to figure out what a site should

    look like as the major output of a design phase, focus instead on what a site should feel like. Dan Mall
  4. Content precedes design. Design in the absence of content is

    not design, it’s decoration. Jeffery Zeldman
  5. RWD Recap - there are many variables to consider. We

    need to start with content; the variable that we know - using style prototypes early on in the process will save headaches down the line - we need to experience design on real devices and not printed on paper or in PDF format
  6. Design is not just what it looks like and feels

    like, but also
 how it works. Steve Jobs
  7. A front-end style guide - it gives an overview of

    what the product is made up of - establishes a common language between designers and developers - helps create a centralised location for all design, prototyping and documentation
  8. T table tbody thead tfoot tr td th track time

    title textarea I i ins input img iframe M meta menu map mark meter ! ! ! A a abbr article aside address audio area N noscript nav B b br body bdi bdo base blockquote button O output ol optgroup option object C caption colgroup col canvas command code cite S span summary select source style script samp s small strong section sub sup H hr h1 h2 h3 h4 h5 h6 hgroup header html head P p pre progress param D dl dt dd div dfn details datalist del V video var L legend label li link R ruby rt F footer figure figcaption form fieldset ! ! Q q E embed em ! ! ! U u ul K kbd keygen HTML ELEMENTS
  9. Filter Bar Component Select Drop Down Filter Label Filter Actions

    (Standard Icon Button) Date Picker Component
  10. The benefits of a front-end style guide - overview of

    everything that makes up your product - establishes a common design language - central location for design, prototyping and documentation
  11. Responsive Web Design is hard, with a range of variables.

    Our tools and processes need to adapt with the changing landscape