Top Banner
designing DELIGHTFUL experiences, responsively @lukebrooker Friday, 31 August 12
34

Designing Delightful Experiences, Responsively

Nov 07, 2014

Download

Technology

Luke Brooker

Spoken at "What do you know" Brisbane. http://whatdoyouknow.webdirections.org/brisbane
--
After slowly being released of print designs grip on the web, we are finally starting to design in a way more susceptive to the systems we are building. But in designing responsively some have over simplified interfaces to a point that users no longer find them engaging. This will give you a scale to judge where you are at and some tips to get to the next level and designing delightfully.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Designing Delightful Experiences, Responsively

designingDELIGHTFUL

experiences, responsively

@lukebrooker

Friday, 31 August 12

Page 2: Designing Delightful Experiences, Responsively

"Responsive design is boring"

is guy I know.

Friday, 31 August 12

Page 3: Designing Delightful Experiences, Responsively

How can we make our designs not just good,

BUT DELIGHTFUL?

Friday, 31 August 12

Page 4: Designing Delightful Experiences, Responsively

1. NOT CRAP2. 3. 4.

Friday, 31 August 12

Page 5: Designing Delightful Experiences, Responsively

wtfmobileweb.com

Friday, 31 August 12

Page 6: Designing Delightful Experiences, Responsively

wtfmobileweb.com

Friday, 31 August 12

Page 7: Designing Delightful Experiences, Responsively

SWEAT THE DETAILS…not the pixels

Friday, 31 August 12

Page 8: Designing Delightful Experiences, Responsively

test early, often andACROSS MULTIPLE

DEVICES

image via Brad Frost

Friday, 31 August 12

Page 9: Designing Delightful Experiences, Responsively

1. NOT CRAP2. GOOD3. 4.

Friday, 31 August 12

Page 10: Designing Delightful Experiences, Responsively

give usersWHAT THEY WANT

Friday, 31 August 12

Page 11: Designing Delightful Experiences, Responsively

and give it to themQUICKLY

Friday, 31 August 12

Page 12: Designing Delightful Experiences, Responsively

“…the average Web page size is over 1MB

and growing. 86% of responsive web designs

send the same content to mobile devices.”

Brad Frost

Friday, 31 August 12

Page 13: Designing Delightful Experiences, Responsively

SOME ARE MUCH WORSE

grolsch.com

Friday, 31 August 12

Page 14: Designing Delightful Experiences, Responsively

QUICK WINS• Strip out useless content

(on all devices)

• Images are over 60% of the web

• Do you need all that javascript?

• If all else fails, load lazily

Friday, 31 August 12

Page 15: Designing Delightful Experiences, Responsively

1. NOT CRAP2. GOOD3. GREAT 4.

Friday, 31 August 12

Page 16: Designing Delightful Experiences, Responsively

NEW DEVICES= NEW CAPABILITIES

Friday, 31 August 12

Page 17: Designing Delightful Experiences, Responsively

TOUCH

Friday, 31 August 12

Page 18: Designing Delightful Experiences, Responsively

LOCATION

Friday, 31 August 12

Page 19: Designing Delightful Experiences, Responsively

IF IT’S A PHONE,REMEMBER...

Friday, 31 August 12

Page 20: Designing Delightful Experiences, Responsively

IT’S A PHONE!<a href="tel:1234567890">Call Us<a/>

Friday, 31 August 12

Page 21: Designing Delightful Experiences, Responsively

Don’t forgetProgressive enhancement

NEW DEVICES= NEW CAPABILITIES

Friday, 31 August 12

Page 22: Designing Delightful Experiences, Responsively

1. NOT CRAP2. GOOD3. GREAT4. DELIGHTFUL

Friday, 31 August 12

Page 23: Designing Delightful Experiences, Responsively

getmentalnotes.com

Friday, 31 August 12

Page 24: Designing Delightful Experiences, Responsively

EASY FOR DEVELOPERS

css-tricks.com

Friday, 31 August 12

Page 25: Designing Delightful Experiences, Responsively

MAKE BORING TASKS EXCITING

photojojo.com

Friday, 31 August 12

Page 26: Designing Delightful Experiences, Responsively

DELIGHTFUL COPY IS UNIVERSAL

codekit.com

Friday, 31 August 12

Page 27: Designing Delightful Experiences, Responsively

codekit.com

Friday, 31 August 12

Page 28: Designing Delightful Experiences, Responsively

codekit.com

Friday, 31 August 12

Page 29: Designing Delightful Experiences, Responsively

codekit.com

Friday, 31 August 12

Page 30: Designing Delightful Experiences, Responsively

NOT CRAP• People can use your site across devices

Friday, 31 August 12

Page 31: Designing Delightful Experiences, Responsively

NOT CRAP• People can use your site across devices

GOOD• People "nd your site fast & easy to use

Friday, 31 August 12

Page 32: Designing Delightful Experiences, Responsively

NOT CRAP• People can use your site across devices

GOOD• People "nd your site fast & easy to use

GREAT• People like your site and use it often

Friday, 31 August 12

Page 33: Designing Delightful Experiences, Responsively

DELIGHTFUL• ey love your site and tell their friends

Friday, 31 August 12

Page 34: Designing Delightful Experiences, Responsively

BE DELIGHTFULTHANKS

@lukebrooker

Friday, 31 August 12