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
83
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
260
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
92
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
テキスト解析で見る PyCon APAC 2025 セッション&スピーカートレンド分析
negi111111
0
130
caching_sha2_passwordのはなし
boro1234
0
220
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.3k
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
170
Enterprise AI in 2025?
pamelafox
0
110
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
180
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
370
Explainable Software Engineering in the Public Sector
avandeursen
0
370
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
7
740
Medmain FACTBOOK
akinaootani
0
120
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
250
お問い合わせ対応の改善取り組みとその進め方
masartz
1
430
Featured
See All Featured
KATA
mclloyd
29
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Designing Experiences People Love
moore
141
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How GitHub (no longer) Works
holman
314
140k
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