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
97
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
270
Contensis User Group - Spring 2019
rdsaunders
0
150
Rocket Conf 2018 - Contensis update
rdsaunders
0
120
Contensis User Group 2017 - Product update
rdsaunders
0
170
Rocket 2017 - Contensis Product Update
rdsaunders
0
280
Rocket 2017 - Future of Contensis
rdsaunders
0
100
Contensis User Group 2016 - Product Update
rdsaunders
0
190
The Future of Contensis - 2016
rdsaunders
0
150
Contensis Product Update 2016
rdsaunders
0
260
Other Decks in Technology
See All in Technology
Flutterアプリを⾃然⾔語で操作する
yukisakai1225
0
210
Drawing with LLMs
rist
0
230
20250612_GitHubを使いこなすためにソニーの開発現場が取り組んでいるプラクティス.pdf
osakiy8
1
330
dbt Cloudの新機能を紹介!データエンジニアリングの民主化:GUIで操作、SQLで管理する新時代のdbt Cloud
sagara
0
130
AWS Lambdaでサーバレス設計を学ぼう_ベンダーロックインの懸念を超えて-サーバレスの真価を探る
fukuchiiinu
4
940
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
510
AIエージェント実践集中コース LT
okaru
1
190
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #開発生産性_findy
takabow
1
270
Vibe Codingの裏で、 考える力をどう取り戻すか
csekine
2
510
データベースの引越しを Ora2Pg でスマートにやろう
jri_narita
0
180
これならできる!Kotlin・Spring・DDDを活用したAll in oneのマイクロサービス開発術
demaecan
0
130
やさしい認証認可
minorun365
PRO
27
11k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Scaling GitHub
holman
459
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Bash Introduction
62gerente
614
210k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
7
640
Building Adaptive Systems
keathley
42
2.6k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Speed Design
sergeychernyshev
30
980
Rebuilding a faster, lazier Slack
samanthasiow
81
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