Designing for Performance

There is no doubt that performance is a really hot topic in the industry today. At the same time it feels that it only touches people who take care of the technical part of the project. We will try to look at it from the Design perspective this time. During this talk we’ll find out how Designers can have an influence on website’s performance too. We will take a look at some of the UI patterns that are bound to cause sluggish experience on the web and what to avoid. To paint a full picture, we will explore implementation ideas and fixes for some of the obvious performance bottlenecks when it comes to popular solutions.

Transcript

1. Software Developer at Castle Anna Migas Google Developer Expert
2. Anna Migas @szynszyliszys Designing for performance
3. “Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser“ wikipedia.org/wiki/Web_performance
5. Design Development Performance + =
6. alfredsung.com/watches
7. dribbble.com/shots/7035168-Coffee-Landing-Page-Interaction-Exploration
8. dribbble.com
9. tympanus.net/Tutorials/InteractiveParticles/
10. tympanus.net/Development/AnimatedSVGIcons
12. wpostats.com/2016/05/04/trainline-spending.html
13. cable.co.uk/broadband/speed/worldwide-speed-league
14. cable.co.uk/broadband/speed/worldwide-speed-league
15. a4ai.org/mobile-broadband-pricing-data
17. Pretty & slow > Ugly & usable
18. blog.chriszacharias.com/page-weight-matters Pic: https://www.cnet.com/how-to/use-youtube-feather-beta-for-low-bandwidth-connections/
19. To make your users happy, allow them to use your product whenever and however they want.
20. = Happy users
21. wpostats.com/2016/12/27/aliexpress-load-time.html
22. So as a designer, how can I improve?
23. 1. Communication
24. " (design)
25. " & '
26. & ' ?
27. & " ?
28. Communication between designers and developers can help to avoid performance bottlenecks
29. 2. Make all team excited about performance
30. " & '
31. The whole team should be aware of the performance goals and measure the progress along the way.
32. 3. Educate yourself
33. ⚙ " ?
34. “Sometimes you’ll make choices that favor performance; other times, you’ll make choices that favor aesthetics. The key is using all the information available to you to make the right decision for you and your site. “ “Designing for Performance” by Lara Callender Hogan
35. designingforperformance.com/weighing-aesthetics-and-performance/#finding-the-balance
36. So, what are things that could impact performance?
37. Too many things at once 1
39. Assets in the wild 2
40. Do we need a hi-res image in each section?
41. Who will be optimising images for the blogposts? Will it be automated?
42. How many sizes of each image do we need? Do we need them on mobile?
43. Do we really need two fonts, three weights each?
44. Are we in need of full icon set?
45. What else can we save on?
46. Redesigning native web capabilities 3
47. dribbble.com/shots/6973894-Menu-Interaction-Exploration
48. Animations 4
49. dribbble.com/shots/6506092-MISSGUIDED-Interaction-Vol-3
50. Third party elements 5
51. cnet.com/how-to/use-youtube-feather-beta-for-low-bandwidth-connections/
52. wpostats.com/2018/05/11/missguided-revenue.html
53. No style guide in big projects 6
54. white-rabbit-japan.github.io/Semantic-UI-React-Storybook/ Storybook
55. Takeaways 1. Foster simplicity 2. Make sure to communicate well 3. Get the team excited about performance 4. Know your trade-offs for performance and aesthetics 5. Settle goals for performance for the project
56. Resources 1. http://designingforperformance.com/ by Lara Callender Hogan 2. http://bradfrost.com/blog/post/performance-as-design/ 3. https://uxplanet.org/good-performance-is-good-design-the-5- principles-of-performant-design-54ca44c7c4e0 4. https://blog.marvelapp.com/a-designers-guide-to-perceived- performance/ 5. https://blog.prototypr.io/designing-for-performance-90ce5378c2fb 6. https://calendar.perfplanet.com/2018/how-we-perceive-perceived- performance/
57. Thanks! Anna Migas @szynszyliszys