Harmonising content and code

Transcript

1. content & code harmonising
2. Design systems
3. A set of connected patterns and shared practices, coherently organised to serve the purposes of a digital product. – Alla Kholmatova “
4. – Alla Kholmatova Design Systems
 A practical guide to creating 
 design languages for digital products
10. – Brad Frost Atomic Design
 Creating and maintaining robust design systems http://atomicdesign.bradfrost.com/
11. – Richard Saunders, Zengenti Design systems in websites and apps https://www.youtube.com/watch?v=z_ZLkEZtwLk
12. – Louis Rosenfeld Every large website is a complex adaptive system “
13. ?
16. 1000 - 5000
17. Static content
18. Dynamic content
19. Curated content
20. Personalised content
21. French German Multilingual content
23. – Louis Rosenfeld Every large website is a complex adaptive system “
24. Modelling Create better content
31. Components Grouping small pieces of content
32. Components are groups of fields you can use in your content types. – Richard Saunders “
33. Allow you to group unique chunks of content together that do not make sense on their own. – Richard Saunders “
34. SEO Address Opening hours Video banner Image carousel Social open graph Feature areas Small stories Course module Blood results
42. Interface inventory An audit of the elements of your website
45. Content + Code = 
 Delivery Component
46. Video banner
47. Logo block
48. Feature block
49. Hero feature
50. Summary - centred
51. DEMO Component builder
52. Componentise
 content delivery
53. Video banner { "type": "videoHeroBlock", "value": { "title": "Work for us", "subtitle": null, "callToAction": "https://www.zengenti.com/jobs”, "videoURL": "https://www.youtube.com/watch? v=04cANjthus0" } }
57. Brings consistency
59. Simpler testing
60. Monitor and improve performance
61. – Airbnb Airbnb Design
 Painting with code https://airbnb.design/painting-with-code/
66. Summary
67. Work towards establishing
 a design system
68. – Alla Kholmatova Design Systems
 A practical guide to creating 
 design languages for digital products
69. Focus on your content
70. Content first
71. Define common 
 reusable components
72. This process takes time
73. But establishes a foundation for the future
74. Thank you