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
How modern web design works
Search
Derek Johnson
August 07, 2014
Design
0
420
How modern web design works
Slides from a talk I gave to business owners and representatives in Belfast.
Derek Johnson
August 07, 2014
Tweet
Share
More Decks by Derek Johnson
See All by Derek Johnson
Responsive Web Design
derekjohnson
0
41
Git branching strategy
derekjohnson
0
91
Git basics
derekjohnson
1
58
Responsive images have landed
derekjohnson
2
160
Other Decks in Design
See All in Design
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
240
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.2k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
4.1k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
490
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.5k
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.4k
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
110
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
130
CursorでAI活用のナレッジベースを構築する
kanzaki
0
730
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
minpaku-community-scrum-patterns
norinity1103
1
430
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
32
1.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Building Applications with DynamoDB
mza
96
6.6k
Code Reviewing Like a Champion
maltzj
525
40k
KATA
mclloyd
32
14k
Transcript
Derek Johnson Senior Web Developer ! @derekjohnson Modern Web Design
None
None
Symptoms of bad design • Poor testing • Lack of
usability • Annoying user experience • Visual appearance != design
None
• user-centric design • usability • user testing • user
experience • user journeys
Use
3 prerequisites 1. Clear goals 2. An understanding of the
nature of the web 3. Content
Goals • Selling • B2B lead generation • Recruitment •
Repository of expertise • Reputation management • Public education • Information dissemination
The nature of the web
None
None
None
None
None
None
None
None
None
None
None
Content
• Text • Images • Product prices • People profiles
• Job advertisements • Statistics and data • Press releases • Blog categories • Contact methods • Promotional material • Long scientific words/terminology • Forms • Form acknowledgement messages
eCommerce • Colours • Sizes • Customer groups • Prices
• Discounts • Voucher system • Categories • Admin requirements • ISBN/GTIN/MPN • Photos • Reviews • SKUs
Ingredients • Typography • Usability & interaction design • User
experience design • Accessibility • Visual design • Performance
Typography
None
None
Tone of voice • friendly but not sycophantic • modern
but not futuristic • futuristic but not dystopian • classy but not staid • confident but not arrogant
Technical considerations • Difference between Windows and Mac • How
a font pairs with another font • Readability • Legibility • How much extra weight is added to a page
Usability & Interaction Design
None
User Experience Design
• How people feel about your brand • How people
feel while using your website • How people feel before they use your website
Accessibility (it’s for everybody)
None
None
None
Visual Design
None
Performance
• Google - 500 millisecond delay = 20% drop in
traffic • Amazon - 100 millisecond delay = 1% drop in revenue • eCommerce - 1 second = 6.8% revenue
None
None