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
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
890
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
250
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
320
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
930
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
710
7 Core Values of Round-L
wired888
0
2.3k
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
100
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
450
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
630
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Bash Introduction
62gerente
615
210k
Visualization
eitanlees
149
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Being A Developer After 40
akosma
91
590k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Music & Morning Musume
bryan
46
6.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
A better future with KSS
kneath
239
18k
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