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.

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. Pages
   

   View Slide

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

   View Slide

7. Non-reusable classes
   

   View Slide

8. .news-archive
   .news-archive
   

   View Slide

9. Bloated CSS
   

   View Slide

10. Unreadable code
    

    View Slide

11. Inconsistencies
    

    View Slide

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

    View Slide

13. Language defines
    the life of components
    

    View Slide

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

    View Slide

15. View Slide

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

    View Slide

17. Component libraries
    

    View Slide

18. Atomic design
    

    View Slide

19. Pattern Portfolios
    

    View Slide

20. Front-end styleguides
    

    View Slide

21. Pattern Libraries
    

    View Slide

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
    

    View Slide

23. http://thechicsite.com/2014/05/16/blackberry-mint-julep/
    

    View Slide

24. “…They can be a collaboration
    tool bridging design and
    development teams.”
    —Rizzo
    https://rizzo.lonelyplanet.com/styleguide/design-elements/colours
    

    View Slide

25. “A single point of reference
    for all the patterns we use.”
    —Future Learn
    https://about.futurelearn.com/blog/pattern-library/
    

    View Slide

26. Everything’s
    cool, right?
    

    View Slide

27. “There are only two hard things
    in Computer Science: cache
    invalidation and naming things.”
    — Phil Karlton
    

    View Slide

28. Pages
    Pages
    Pages
    

    View Slide

29. View Slide

30. Waterfall coat
    £699.99
    .product-card
    

    View Slide

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

    View Slide

32. View Slide

33. From Pages to Patterns
    

    View Slide

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

    View Slide

35. Part 1
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

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

    View Slide

43. View Slide

44. Part 2
    

    View Slide

45. View Slide

46. View Slide

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

    View Slide

48. Asking a designer why
    they made something look
    the way it does can help
    identify its purpose
    

    View Slide

49. 
    
    Hello
    
    Some text
    
    
    Part 3
    

    View Slide

50. 
    
    Hello
    
    Some text
    
    
    

    View Slide

51. View Slide

52. Delete and repeat
    

    View Slide

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

    View Slide

54. www.heydonworks.com
    

    View Slide

55. What next?
    

    View Slide

56. View Slide

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

    View Slide

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

    View Slide

59. Share it with the team
    

    View Slide

60. Develop the language
    

    View Slide

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

    View Slide

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

    View Slide

63. Mini Midi Maxi
    

    View Slide

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

    View Slide

65. Use the language
    

    View Slide

66. Getting away from
    the screen
    

    View Slide

67. • Encourages a shared language
    • Creates the same starting point for
    everyone in the team
    • Encourages a pattern thinking
    Pages to patterns exercise
    

    View Slide

68. View Slide

69. Thank you
    @lottejackson
    Beyond Tellerand / 30th September 2016
    

    View Slide