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
63
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
210
Contensis User Group - Spring 2019
rdsaunders
0
99
Rocket Conf 2018 - Contensis update
rdsaunders
0
80
Contensis User Group 2017 - Product update
rdsaunders
0
120
Rocket 2017 - Contensis Product Update
rdsaunders
0
210
Rocket 2017 - Future of Contensis
rdsaunders
0
66
Contensis User Group 2016 - Product Update
rdsaunders
0
120
The Future of Contensis - 2016
rdsaunders
0
93
Contensis Product Update 2016
rdsaunders
0
190
Other Decks in Technology
See All in Technology
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
580
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
630
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
360
アプリがつくるNOT A HOTELブランド
hokuts
0
450
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.8k
Four keys改善の取り組み事例紹介
sansantech
PRO
2
230
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
110
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
320
20240416_devopsdaystokyo
kzkmaeda
1
180
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Documentation Writing (for coders)
carmenintech
59
3.9k
How to Ace a Technical Interview
jacobian
272
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Writing Fast Ruby
sferik
619
60k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.6k
Design by the Numbers
sachag
274
18k
Code Review Best Practice
trishagee
54
15k
Gamification - CAS2011
davidbonilla
76
4.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
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