Pro Yearly is on sale from $80 to $50! »

Reaching for the Stars: Why Images Matter

Reaching for the Stars: Why Images Matter

Technology is there, but getting things done is often more difficult than it should be. Especially when it comes to art direction and data visualization, designers often struggle with crafting a consistently delightful experience across screens and platforms.

In this talk, Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine for designers and developers, will look into the struggles, challenges and solutions designers come up with when dealing with images on the web. We’ll look into the state of art, design pattern on dealing with images — from maps to responsive iconography to data visualization — as well as recent innovations and how it all ties together in the complex responsive environment that we have to design for.

B3d6434763caa0ef5dc4b792662c49f7?s=128

Vitaly Friedman

March 08, 2017
Tweet

Transcript

  1. Reaching For Stars:
 Why Images Matter Vitaly Friedman (illustrations by

    Simon C Page, Nelson Cash) March 1st, 2017 @ ImageCon, San Francisco, USA
  2. Vitaly Friedman, editor-in-chief
 and co-founder of SmashingMag

  3. None
  4. None
  5. None
  6. 4K | Hubble The Final Frontier - Official Final Film,

    https://youtu.be/R5bkXdiVDg4
  7. 4K | Hubble The Final Frontier - Official Final Film,

    https://youtu.be/R5bkXdiVDg4
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. “Designing for the Web today is like visualizing a tesseract.

    We craft user- centeric, responsive experiences by manipulating the shadows of a tesseract. 
 — Tim Brown, Typekit
  18. State of Images

  19. “If we want to stand out — to outperform our

    competitors — we need to delight customers with a remarkable design and a unique, charming personality. Be slow and mindful. With an unprecedented attention to detail. 
 — à la Mogens Møller
  20. “We should underpromise, overdeliver. Capture attention and guide it skillfully.

    On the web today, it all boils down to one single thing: outstanding storytelling through great art direction. 
 — à la Mogens Møller
  21. Arthur Rackham, “Goldilocks and the three bears”

  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. “We should underpromise, overdeliver. Capture attention and guide it skillfully.

    On the web today, it all boils down to one single thing: outstanding storytelling through great art direction. 
 — à la Mogens Møller
  30. “We should underpromise, overdeliver. Capture attention and guide it skillfully.

    On the web today, it all boils down to one single thing: outstanding storytelling through great art direction. 
 — à la Mogens Møller
  31. None
  32. — photos get bigger, screens larger (4K/5K),
 — high-res images

    have a high payload (65.7%),
 — responsive images up and running,
 — wide support, inconsistent behavior,
 — not all images are created equal,
 — image bloat costs performance (Parallax),
 — start render time difficult to measure,
 — user context often impossible to predict. State Of Images (2017)
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. 3840×2160 Native resolution of Ultra HDTV, or 4K (2160p).
 4K

    screens can serve 8-megapixel images.
  43. None
  44. 5120×2880 Native resolution of Retina 5K iMac (2880p).
 Apple’s default

    resolution setting is 2560×1440.
 5K screens can serve 14.7-megapixel images.
  45. None
  46. 7680×4320 8K screens can serve 33-megapixel images (4320p).
 A heavily

    compressed desktop wallpaper is 11.7 MB.
  47. @mrjoe

  48. @mrjoe Title Text

  49. @mrjoe

  50. @mrjoe

  51. @mrjoe Title Text

  52. @mrjoe Considered purchase

  53. @mrjoe Considered purchase

  54. Shades of Images
 
 
 — logos, branding, advertising
 —

    icons, emoji and illustrations
 — vector and photography
 — charts and graphs
 — maps and interactive 3D views
 — animation, interaction, states
 — formats, compression, algorithms
 — accessible fallback
  55. “Responsive Images in Practice”, Eric Portis, http://alistapart.com/article/responsive-images-in-practice

  56. “Responsive Images in Practice”, Eric Portis, http://alistapart.com/article/responsive-images-in-practice

  57. “Responsive Images in Practice”, Eric Portis, http://alistapart.com/article/responsive-images-in-practice

  58. None
  59. None
  60. — photos get bigger, screens larger (4K/5K),
 — high-res images

    have a high payload (65.7%),
 — responsive images up and running,
 — wide support, inconsistent behavior,
 — not all images are created equal,
 — image bloat costs performance (Parallax),
 — start render time difficult to measure,
 — user context often impossible to predict. State Of Images (2017)
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. • JavaScript var size = window.getCo PropertyValu 
 if (size

    == // Load so }
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. An image isn’t an image. Today, it’s a family of

    image variants. We talk about creating design systems for front-end. Should we start thinking of behavior and appearance of images the same way?
  82. The Perfect Workflow • To deal with the overhead of

    responsive images, companies have to automate their image workflows. — Create a project for a website or page,
 — Upload all images in a high resolution,
 — Define settings, aspect ratios, DPR, compression, formats,
 — Set a focal point on images with a visual editor,
 — Define accessible labels and alternate text,
 — Automatically crop/reisze/optimize/generate all images,
 — Markup / CSS are automatically generated,
 — Download all images and markup in a .zip, — Download all images and markup in a .zip,
  83. — Download all images and markup in a .zip, —

    Live preview displays the behavior in-browser,
 — Integration in CMS: automatic updates of markup/CSS,
 — Integration in Dropbox: automatic sharing/syncing,
 — Maintenance easy through managing a project,
 — Enable context-aware resizing for finer adjustments,
 — Supporting <picture>, srcset, sizes, image-set, formats. The Perfect Workflow • To deal with the overhead of responsive images, companies have to automate their image workflows.
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. “...Given two identical images that are displayed at the same

    size on a website, one can be much smaller than the other in file size if it’s heavily compressed and its dimensions are much larger than the original. 
 — Daan Jobsis
  92. 600×400px file, 0% JPEG quality, displayed in 600×400 (file size

    7 Kb)
  93. 600×400px file, 0% JPEG quality, displayed in 300×200 (file size

    7 Kb)
  94. 600×400px file (7 Kb)
 ________________________________0 0% JPEG quality
 displayed in

    300×200 300×200px file (21 Kb)
 _________________________________
 80% JPEG quality
 displayed in 300×200
  95. None
  96. None
  97. Aftonbladet’s Images Strategy • Design specification defined main requirements: •

    Optimization of the mobile version, 
 • The pages should be easy to cache,
 • Solution: Loading images with JavaScript after HTML and CSS have fully loaded. • A single HTML file to be served to all users, • All images on a content delivery network (CDN), • No complexity in the image-serving logic, • Serving different image versions to different devices.
  98. • Editors can select compression rates, but aggressive compression is

    a default. • 30% JPEG quality: bright-red areas don’t compress well.
  99. • On average, the “large” screen has 650 Kb,
 “medium”

    — 570 Kb, “small” — 450 Kb. • The homepage on a mobile device has 40 images.
  100. • The original photo has 1600px width, 971 Kb. Quality

    60 brings the size down to 213 Kb.
  101. • Blurring unimportant parts of the photo brings the size

    down to 147 Kb.
  102. Sequential JPEG Progressive JPEG Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 13 /

    44
  103. Scans 14 / 44

  104. Default Scan Levels Thanks to Frédéric Kayser for creating 'jsk':

    http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 15 / 44
  105. 16 / 44

  106. 17 / 44

  107. 18 / 44

  108. 1st Scan Layer Has Small Byte Size Ships Fast &

    Shows Soon 19 / 44
  109. 31 / 44

  110. 1 32 / 44

  111. 2 33 / 44

  112. 3 34 / 44

  113. 4 35 / 44

  114. 5 36 / 44

  115. 37 / 44

  116. None
  117. None
  118. “What if you have a large photo that requires a

    transparent shadow? PNG is too large in file size, and JPEG isn’t good enough in quality. Trick: create a regular non- transparent JPG and an 8-bit PNG (alpha mask) and load both images inside an SVG container.
  119. None
  120. None
  121. 
 <image width="560" height="1388" xlink:href="can-top-alpha.png">
 </image> </mask> <mask id="canTopMask"> <image

    mask="url(#canTopMask)" id="canTop" width="560" height="1388"
 xlink:href="can-top.jpg"></image> • hero-image.svg:
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 560 1388"> <defs> </svg> </defs>
  122. • HTML/CSS:
 <img src="hero-image.svg" />, background: url("hero-image.svg") 
 <image width="560"

    height="1388" xlink:href="can-top-alpha.png">
 </image> </mask> <mask id="canTopMask"> <image mask="url(#canTopMask)" id="canTop" width="560" height="1388"
 xlink:href="can-top.jpg"></image> • hero-image.svg:
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 560 1388"> <defs> </svg> </defs>
  123. None
  124. None
  125. • CSS:
 body { 
 font-family: 'Elena Regular',
 AvenirNext, Avenir,

    /* iOS */
 'Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
  126. None
  127. • CSS:
 body { 
 font-family: 'Elena Regular', /* Web

    font */
 AvenirNext, Avenir, /* iOS */
 -apple-system, BlinkMacSystemFont, /* macOS San Francisco */
 Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Oxygen-Sans, /* KDE */
 Ubuntu, /* Ubuntu */
 Cantarell, /* GNOME */
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
  128. • CSS:
 .lowBattery { 
 font-family: /* 'Elena Regular' */

    /* Web font */
 AvenirNext, Avenir, /* iOS */
 -apple-system, BlinkMacSystemFont, /* macOS San Francisco */
 Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Oxygen-Sans, /* KDE */
 Ubuntu, /* Ubuntu */
 Cantarell, /* GNOME */
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
  129. None
  130. — photos get bigger, screens larger (4K/5K),
 — high-res images

    have a high payload (65.7%),
 — responsive images up and running,
 — wide support, inconsistent behavior,
 — not all images are created equal,
 — image bloat costs performance (Parallax),
 — start render time difficult to measure,
 — user context often impossible to predict. State Of Images (2017)
  131. Design Patterns

  132. “The design process is weird and complicated because it involves

    people and systems, which often are weird and complicated. 
 — à la Mark Boulton
  133. Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

  134. Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

  135. Patty Toland, FilamentGroup, “Design Consistency for RWD”, https://t.co/Tb0q1gMwQS

  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. None
  144. None
  145. Clockwise Rightwards and Leftwards Open Circle Arrows With Circled One

    Overlay
 (also known as U+1F502, &#x1f502; or \u1f502).
  146. Person Raising Both Hands in Celebration (also known as Festivus

    Miracle Emoji,
 U+1F64C, &#1f64c; or \u1f64c).
  147. %

  148. None
  149. None
  150. None
  151. None
  152. None
  153. None
  154. None
  155. None
  156. None
  157. None
  158. None
  159. None
  160. Responsive Iconography
 
 
 — simplify icons for smaller screens


    — save vertical space by inlining navigation
 — choose larger icons for critical actions
 — accordion icons should be large
 — emoji can seece up an interface.
  161. None
  162. None
  163. None
  164. None
  165. None
  166. None
  167. None
  168. None
  169. None
  170. None
  171. None
  172. None
  173. None
  174. None
  175. None
  176. Summary
 
 
 — never hide important actions 
 —

    define priorities for navigation items 
 — thumbs drive interactions
 — consider curtain navigation for complex UIs
 — use tabs at the bottom as filters
 — combine filters and navigation in one
 — adjust the view and fidelity if necessary
 — consider tagging/filters instead of sections
 — accordions always work well
  177. None
  178. None
  179. None
  180. None
  181. None
  182. None
  183. None
  184. None
  185. None
  186. None
  187. None
  188. None
  189. Responsive Tables
 
 
 — prioritize important columns
 — use

    steppers for navigation
 — visualize content 
 — reposition headings
 — adjust the level of fidelity
 — extract content and “redesign” it.
  190. None
  191. None
  192. None
  193. None
  194. None
  195. None
  196. None
  197. None
  198. None
  199. None
  200. None
  201. None
  202. None
  203. None
  204. None
  205. None
  206. None
  207. None
  208. None
  209. None
  210. None
  211. None
  212. Responsive Maps and Charts
 
 
 — divide content into

    visual/textual views
 — turn a <select> drop-down into a map
 — prompt a list view for small tap areas
 — integrate autosuggest with the map
 — make maps tap-friendly despite geography
 — load maps/lightboxes conditionally
 — reposition labels and exploration points.
  213. None
  214. None
  215. None
  216. None
  217. None
  218. None
  219. None
  220. None
  221. None
  222. None
  223. None
  224. None
  225. None
  226. None
  227. None
  228. None
  229. None
  230. None
  231. Builders and Steppers
 
 
 — break down the task

    in small steps
 — each step is a full-screen experience
 — each step is an accordion (open/collapsed)
 — let users define settings to filter ouptput
 — optimize for quick input (autocomplete)
 — steppers are often better than input 
 — accordions always work well.
  232. None
  233. None
  234. Summary


  235. None
  236. None
  237. None
  238. None
  239. None
  240. None
  241. None
  242. None
  243. None
  244. None
  245. None
  246. None
  247. Summary
 
 
 — expand the design to fill the

    screen
 — footnotes and sidenotes on the side
 — consider multi-column/panel layout
 — extend product grids and features
 — bring important actions into the focus
  248. None
  249. None
  250. None
  251. Art Direction

  252. None
  253. None
  254. None
  255. None
  256. None
  257. None
  258. None
  259. None
  260. None
  261. None
  262. None
  263. None
  264. None
  265. None
  266. None
  267. None
  268. None
  269. None
  270. None
  271. None
  272. None
  273. None
  274. None
  275. None
  276. None
  277. None
  278. None
  279. None
  280. None
  281. None
  282. None
  283. None
  284. None
  285. None
  286. None
  287. None
  288. None
  289. None
  290. None
  291. None
  292. None
  293. None
  294. None
  295. • Allow Users To Select Country Early On
 The earlier

    you know the shipping country, the earlier you can display the final price.
  296. • Reassure Users About Delivery Times
 Also, emphasize that checking

    out is a little investment, and when the item will be delivered.
  297. None
  298. None
  299. None
  300. None
  301. • Eliminate All Concerns At Once
 Communicate subtotal, taxes, shipping

    costs, delivery time, fees, charger and total price early.
  302. None
  303. None
  304. None
  305. None
  306. Summary
 
 
 — re-adjust shapes for smaller screens
 —

    define and boost up your signature
 — adjust animation to make more sense
 — find a signature and tune it up
 — integrate audio and video meaningfully
 — break, repair and break things again.
  307. Conclusion

  308. None
  309. None
  310. Thank you.

  311. Image credits
 
 4K | Hubble The Final Frontier -

    Official Final Film
 https://youtu.be/R5bkXdiVDg4 
 Horsehead Nebula, Paper4PC
 http://paper4pc.com/outer-space-stars-nebulae-horsehead-nebula.html 
 Big Dipper Constellation, One Minute Astronomer
 http://oneminuteastronomer.com/4002/big-dipper-constellation/ 
 Official California State Flag
 https://in.pinterest.com/pin/526921225132469196/ 
 Ursa Major, Name a Star Alive
 http://blog.nameastarlive.com/author/rbraastad/page/3/
 
 Data kindly collected by httparchive
 http://httparchive.org/
  312. Image credits
 
 Arthur Rackham, Goldilocks and the Three Bears


    https://en.wikipedia.org/wiki/Goldilocks_and_the_Three_Bears
 Uber Pricing Surge, The Logical Indian, https://thelogicalindian.com/story-feed/awareness/voice-of- customer-dear-government-we-need-regulations-against-the-surge-pricing-of-olauber/
 Mailchimp, Love What You Do
 http://static.mailchimp.com/web/guides/love-what-you-do/package/love-what-you-do.pdf
 iMac 5K Retina Display, ExtremeTech, https://www.extremetech.com/gaming/192305-analyzing-the- imac-5k-retina-display-how-do-you-squeeze-5k-out-of-a-last-gen-gpu
 LG’s 98-inch 8K TV, Technobuffalo, https://www.technobuffalo.com/2016/01/07/lgs-98-inch-8k-tv- makes-my-tv-look-like-a-stupid-toy-and-now-im-sad/
  313. Image credits
 
 Lenovo Thinkvision 28”
 http://psref.lenovo.com/Product/ThinkVision_28
 
 Responsive Images

    Use Cases (Dog, Art Direction),
 https://responsiveimages.org/ 
 Tobias Baldauf, Your Hero Images Need You! Save the Day with HTTP2 Image Loading,
 https://vimeo.com/166145048 
 The New System Font Stack, Ire Aderinokun,
 https://bitsofco.de/the-new-system-font-stack/
 
 Considered and Non-considered Purchases, Joe Leech, https://www.shopify.com/partners/blog/3-high- impact-tips-for-designing-an-ecommerce-site-that-converts 
 Voyage Golden Record, Charlotte Symphony
 http://www.charlottesymphony.org/educationguide/voyager-golden-record/