Designers Guide to Web Perfornance Optimization

Slide 1

Slide 1 text

WEB PERFORMANCE OPTIMIZATION SEPT. 2016 / JON YABLONSKI D E S I G N E R S G U I D E T O

Slide 2

Slide 2 text

Performant web experiences begin with treating performance as an essential design feature. 01/16 DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION

Slide 3

Slide 3 text

BRAD FROST The road towards better performance doesn’t start with developers or technology stacks (though I’m certainly not suggesting those things are unimportant). It begins with a shared interest on everyone’s part in making a product that’s lightning fast. “ 02/16 DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION

Slide 4

Slide 4 text

PROCESS & WORKFLOW 03/16 DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION

Slide 5

Slide 5 text

MORE INFO Consider all viewport sizes, not just “mobile, tablet, desktop” (aka iPhone, iPad, iMac) Begin designs by thinking about users on smaller screen first Involve the development team in the design process Create and follow a performance budget Avoid one-off design solutions 01 02 03 04 05 04/16 DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION

Slide 6

Slide 6 text

ANIMATIONS & EFFECTS DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 05/16

Slide 7

Slide 7 text

DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION MORE INFO Ensure that animations improve the user experience by providing meaning to the user Effects that are triggered during the scroll event consider the needs of the user first and foremost 01 02 06/16

Slide 8

Slide 8 text

FONTS DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 07/16

Slide 9

Slide 9 text

DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION MORE INFO Don’t exceed a total of three custom web fonts Ensure custom web fonts have been optimized for web use Ensure the proper font formats have been created for development, including WOFF 2.0 format Have web safe fallback fonts for each custom web font in use 01 02 03 04 08/16

Slide 10

Slide 10 text

IMAGES DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 09/16

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

SVG DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 11/16

Slide 13

Slide 13 text

DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION MORE INFO Use SVGs in place of images whenever appropriate Ensure SVGs don’t contain extraneous layers Simplify SVG paths during creation process Optimize SVGs Consider browser support 01 02 03 04 05 12/16

Slide 14

Slide 14 text

PERCEIVED PERFORMANCE DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 13/16

Slide 15

Slide 15 text

DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION MORE INFO Provide instant feedback to the user where appropriate Use placeholder content to populate the page when no content is available 01 02 14/16

Slide 16

Slide 16 text

DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION DESIGNERS WPO CHECKLIST VIEW CHECKLIST 15/16

Slide 17

Slide 17 text

DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION THANK YOU 16/16