Design For Performance

With modern apps / websites relying heavily on graphics, it's necessary that the creative brains behind these know how *not to comprise the fluid performance !

This is what this deck is about. It discusses tips and tricks that a UI/UX designer can incorporate in their designs to render high quality graphics in lowest sizes. It's not only about compressing the final artwork.

Transcript

1. Nishant Dubey 9stacks Design For Performance
2. Aesthetic Usability Effect
3. Why is it important ? • Aesthetically pleasing design gives an illusion of something being more usable. • Often this trick masks minor error in UX. • Nothing new, often same as serving visually pleasing food (we eat first with our eyes). That masks bad ingredients and taste.
4. All Hail : the file size monster
5. Why we should never welcome him ? • If we want faster image loads • Overall fast websites/apps • Highest quality in lowest size
6. Hint: Resolution is 939X1080 Can you guess the file size ?
7. .png File size in different formats: This is the ideal illustration for web. Also, svg is the preferred format for such illustrations as they can be resized easily for different screen sizes and densities without pixelation. 939 x 1080 .svg 56.7 KB 29 KB
8. How to fight this monster ?
9. Characteristics of an ideal illustration for the web
10. Monochromatic Scheme Various lighting, depth, and 3D illusions are created using darker or lighter shades of same solid colors. This decreases the intensity of gradients in illustrations. Major ingredient of flat design 1
13. “To think creatively, we must be able to look afresh at what we normally take for granted” - George Keller “Genius is the ability to reduce the complicated to the simple.” - C.W. Ceram
14. Avoid Micro Detailing User only needs a visual cue and not extreme details to understand the story behind the design. It increases path complexity 2
16. • Dividing the illustration in clear background, midground and foreground can help in creating environmental details. • Some amount of detail can be applied through textures. This works well on clothing and building structures.
17. Use more pixel perfect shapes Pixel perfect is not a mere way of expressing amazing design. But a method to avoid compression artefacts and a way to reduce anti-aliasing. Clear pixel snapping edge is the key 3
18. Compress to Less compression can’t be overlooked
19. Must know image formats and when to use which… .svg <50 KB Pure vector format that produces smallest file size .webp <75 KB Best of png and jpg .png <100 KB Widely supported legacy format .jpg <150 KB Widely supported image format
20. The perfect format, doesn’t exist ! .svg .webp .png .jpg When illustration is not complex. Works best with icons. Can’t handle blending modes well use them with caution. Should be used majorly where svg isn’t recommended. Looped animated clip. Fallback format for webp. When colors in color table are less than or equal to 64. Fallback format for webp. When full range of colors is being used. For complex illustrations/images.
21. Nishant Dubey, 9stacks linkedin.com/in/nishant05dubey/ Thank you!
22. Q&A What’s our monster doing now ?