Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Harmonising content and code
Search
Richard Saunders
November 09, 2017
Technology
0
81
Harmonising content and code
Richard Saunders
November 09, 2017
Tweet
Share
More Decks by Richard Saunders
See All by Richard Saunders
Content modelling workshop: Brighton University
rdsaunders
0
250
Contensis User Group - Spring 2019
rdsaunders
0
140
Rocket Conf 2018 - Contensis update
rdsaunders
0
110
Contensis User Group 2017 - Product update
rdsaunders
0
160
Rocket 2017 - Contensis Product Update
rdsaunders
0
260
Rocket 2017 - Future of Contensis
rdsaunders
0
90
Contensis User Group 2016 - Product Update
rdsaunders
0
180
The Future of Contensis - 2016
rdsaunders
0
140
Contensis Product Update 2016
rdsaunders
0
240
Other Decks in Technology
See All in Technology
テクスチャ画像付きのメッシュモデルを3次元点群へ変換する
kentaitakura
1
410
AI-Driven-Development-20250310
yuhattor
3
370
AWSサービスアップデート2025年2月分
yuobayashi
2
120
組織に持ち込む脅威モデリング
nikinusu
1
560
Codar: Arte ou Ciência?! A Jornada de um DEV na Creator Economy
vclementino
0
190
Streamlitの細かい話
nishikawadaisuke
9
1.3k
AI_Agent_の作り方_近藤憲児
kenjikondobai
19
5.1k
心に火を灯すヒントは自分の中にある/The clue to lighting a fire in your heart is within you.
bitkey
1
110
セキュリティグループの”タイプ”を改めて考えてみる
masakiokuda
0
140
OPENLOGI Company Profile for engineer
hr01
1
21k
ブレインパッド_20250311_AIxIoTビジネス共創ラボ_第2回勉強会.pdf
iotcomjpadmin
0
220
사이드 프로젝트를 20번 실패한 주니어의 오답노트 훔쳐보기(feat. KMP)
yjyoon
0
520
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
176
52k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
What's in a price? How to price your products and services
michaelherold
244
12k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building an army of robots
kneath
303
45k
Bash Introduction
62gerente
611
210k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Transcript
content & code harmonising
Design systems
A set of connected patterns and shared practices, coherently organised
to serve the purposes of a digital product. – Alla Kholmatova “
– Alla Kholmatova Design Systems A practical guide to creating
design languages for digital products
None
None
None
None
None
– Brad Frost Atomic Design Creating and maintaining robust design
systems http://atomicdesign.bradfrost.com/
– Richard Saunders, Zengenti Design systems in websites and apps
https://www.youtube.com/watch?v=z_ZLkEZtwLk
– Louis Rosenfeld Every large website is a complex adaptive
system “
?
100
100000
1000 - 5000
Static content
Dynamic content
Curated content
Personalised content
French German Multilingual content
None
– Louis Rosenfeld Every large website is a complex adaptive
system “
Modelling Create better content
None
None
None
None
None
None
Components Grouping small pieces of content
Components are groups of fields you can use in your
content types. – Richard Saunders “
Allow you to group unique chunks of content together that
do not make sense on their own. – Richard Saunders “
SEO Address Opening hours Video banner Image carousel Social open
graph Feature areas Small stories Course module Blood results
None
None
None
None
None
None
None
Interface inventory An audit of the elements of your website
None
None
Content + Code = Delivery Component
Video banner
Logo block
Feature block
Hero feature
Summary - centred
DEMO Component builder
Componentise content delivery
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" } }
None
None
None
Brings consistency
None
Simpler testing
Monitor and improve performance
– Airbnb Airbnb Design Painting with code https://airbnb.design/painting-with-code/
None
None
None
None
Summary
Work towards establishing a design system
– Alla Kholmatova Design Systems A practical guide to creating
design languages for digital products
Focus on your content
Content first
Define common reusable components
This process takes time
But establishes a foundation for the future
Thank you