How modern web design works

Slides from a talk I gave to business owners and representatives in Belfast.

Transcript

1. Derek Johnson Senior Web Developer ! @derekjohnson Modern Web Design
4. Symptoms of bad design • Poor testing • Lack of usability • Annoying user experience • Visual appearance != design
6. • user-centric design • usability • user testing • user experience • user journeys
7. Use
8. 3 prerequisites 1. Clear goals 2. An understanding of the nature of the web 3. Content
9. Goals • Selling • B2B lead generation • Recruitment • Repository of expertise • Reputation management • Public education • Information dissemination
10. The nature of the web
22. Content
23. • 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
24. eCommerce • Colours • Sizes • Customer groups • Prices • Discounts • Voucher system • Categories • Admin requirements • ISBN/GTIN/MPN • Photos • Reviews • SKUs
25. Ingredients • Typography • Usability & interaction design • User experience design • Accessibility • Visual design • Performance
26. Typography
29. Tone of voice • friendly but not sycophantic • modern but not futuristic • futuristic but not dystopian • classy but not staid • confident but not arrogant
30. 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
31. Usability & Interaction Design
33. User Experience Design
34. • How people feel about your brand • How people feel while using your website • How people feel before they use your website
35. Accessibility (it’s for everybody)
39. Visual Design
41. Performance
42. • Google - 500 millisecond delay = 20% drop in traffic • Amazon - 100 millisecond delay = 1% drop in revenue • eCommerce - 1 second = 6.8% revenue