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

From Pages to Patterns

From Pages to Patterns

The process of building a pattern library or any kind of modular design system requires a different approach to building a set of finished pages. Even when the final deliverable is a pattern library, we often still have to design pages for approval.
When everyone is so used to working with pages, it can be difficult to adopt a new way of thinking—particularly for those who are not designers and developers.
This talk looks at how we can help everyone in the team adopt pattern thinking. This includes anyone with a decision to make—not just designers and developers. The whole team can start developing a shared vocabulary and attempt to make the challenge of naming things a little easier.

Charlotte Jackson

October 29, 2016

More Decks by Charlotte Jackson

Other Decks in Design


  1. From Pages to Patterns @lottejackson Beyond Tellerand / 30th September

  2. Hi, I’m Charlotte @lottejackson Charlotte Jackson | Clearleft, Brighton

  3. None
  4. None
  5. Pages

  6. .news-archive .news-item .button-blue submit

  7. Non-reusable classes

  8. .news-archive .news-archive

  9. Bloated CSS

  10. Unreadable code

  11. Inconsistencies

  12. http://bradfrost.com/blog/post/interface-inventory/

  13. Language defines the life of components

  14. .news-archive .news-item .list .card

  15. None
  16. Component libraries Atomic design Front-end styleguides Pattern Portfolios Pattern Libraries

  17. Component libraries

  18. Atomic design

  19. Pattern Portfolios

  20. Front-end styleguides

  21. Pattern Libraries

  22. “…Break down the user interface into its component parts rather

    than than thinking about it as a whole or a series of pages.” —Rizzo https://rizzo.lonelyplanet.com/styleguide/design-elements/colours
  23. http://thechicsite.com/2014/05/16/blackberry-mint-julep/

  24. “…They can be a collaboration tool bridging design and development

    teams.” —Rizzo https://rizzo.lonelyplanet.com/styleguide/design-elements/colours
  25. “A single point of reference for all the patterns we

    use.” —Future Learn https://about.futurelearn.com/blog/pattern-library/
  26. Everything’s cool, right?

  27. “There are only two hard things in Computer Science: cache

    invalidation and naming things.” — Phil Karlton
  28. Pages Pages Pages

  29. None
  30. Waterfall coat £699.99 .product-card

  31. Waterfall coat £699.99 Charlotte Hove office .product-card .product-card .product-card

  32. None
  33. From Pages to Patterns

  34. Required: ̣ Printer ̣ Paper ̣ Scissors ̣ Post-it notes

  35. Part 1

  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. http://bradfrost.com/blog/post/interface-inventory/

  43. None
  44. Part 2

  45. None
  46. None
  47. Naming things isn’t just a developer’s job

  48. Asking a designer why they made something look the way

    it does can help identify its purpose
  49. <div class=“Card”> <a class=“Card__link href=“”> <h3 class=“Card__title”>Hello</h3> <img class=“Card__hero src=“images/image.jpg”

    alt=“”> <p class=“Card__description”>Some text</p> </a> </div> Part 3
  50. <div class=“Card”> <a class=“Card__link href=“”> <h3 class=“Card__title”>Hello</h3> <img class=“Card__hero src=“images/image.jpg”

    alt=“”> <p class=“Card__description”>Some text</p> </a> </div>
  51. None
  52. Delete and repeat

  53. https://www.flickr.com/search/?tags=planningartifact

  54. www.heydonworks.com

  55. What next?

  56. None
  57. styleguides.io/podcast/dan-mall/

  58. https://about.futurelearn.com/blog/modular-design-collaborative-approach-digital-products/

  59. Share it with the team

  60. Develop the language

  61. https://www.viget.com/articles/visual-loudness

  62. When possible adopt a familiar vocabulary, which means something to

    the organisation
  63. Mini Midi Maxi

  64. .Pump .Pump--full .Frame .Frame__tandem .Ride

  65. Use the language

  66. Getting away from the screen

  67. • Encourages a shared language • Creates the same starting

    point for everyone in the team • Encourages a pattern thinking Pages to patterns exercise
  68. None
  69. Thank you @lottejackson Beyond Tellerand / 30th September 2016