Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designers Guide to Web Perfornance Optimization

Jon Yablonski
September 14, 2016

Designers Guide to Web Perfornance Optimization

Performance is one of the biggest issues we face on The Web today. As the weight of the average page continues to rise, discussion around performance on most web teams quickly descends into the realm of development optimization. The reality is that performant web experiences begin with treating performance as an essential design feature.

Jon Yablonski

September 14, 2016
Tweet

More Decks by Jon Yablonski

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 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

    View full-size slide

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

    View full-size slide

  5. 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

    View full-size slide

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

    View full-size slide

  7. 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

    View full-size slide

  8. FONTS
    DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    07/16

    View full-size slide

  9. 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

    View full-size slide

  10. IMAGES
    DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    09/16

    View full-size slide

  11. SVG
    DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    11/16

    View full-size slide

  12. 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

    View full-size slide

  13. PERCEIVED PERFORMANCE
    DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    13/16

    View full-size slide

  14. 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

    View full-size slide

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

    View full-size slide

  16. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    THANK YOU
    16/16

    View full-size slide