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
100
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
290
Contensis User Group - Spring 2019
rdsaunders
0
160
Rocket Conf 2018 - Contensis update
rdsaunders
0
120
Contensis User Group 2017 - Product update
rdsaunders
0
180
Rocket 2017 - Contensis Product Update
rdsaunders
0
290
Rocket 2017 - Future of Contensis
rdsaunders
0
100
Contensis User Group 2016 - Product Update
rdsaunders
0
200
The Future of Contensis - 2016
rdsaunders
0
150
Contensis Product Update 2016
rdsaunders
0
270
Other Decks in Technology
See All in Technology
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
5
510
PdM業務における使い分け
shinshiro
0
670
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
310
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
3
150
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
590
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
1
590
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
370
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
230
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
800
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
610
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Language of Interfaces
destraynor
158
25k
Building Adaptive Systems
keathley
43
2.7k
KATA
mclloyd
30
14k
We Have a Design System, Now What?
morganepeng
53
7.7k
Embracing the Ebb and Flow
colly
86
4.8k
Done Done
chrislema
184
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Thoughts on Productivity
jonyablonski
69
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
For a Future-Friendly Web
brad_frost
179
9.8k
How to Ace a Technical Interview
jacobian
278
23k
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