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

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

    Simon C Page, Nelson Cash) March 1st, 2017 @ ImageCon, San Francisco, USA
  2. 3.
  3. 4.
  4. 5.
  5. 8.
  6. 9.
  7. 10.
  8. 11.
  9. 12.
  10. 13.
  11. 14.
  12. 15.
  13. 16.
  14. 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
  15. 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
  16. 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
  17. 22.
  18. 23.
  19. 24.
  20. 25.
  21. 26.
  22. 27.
  23. 28.
  24. 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
  25. 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
  26. 31.
  27. 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)
  28. 33.
  29. 34.
  30. 35.
  31. 36.
  32. 37.
  33. 38.
  34. 39.
  35. 40.
  36. 41.
  37. 42.
  38. 43.
  39. 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.
  40. 45.
  41. 47.
  42. 49.
  43. 50.
  44. 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
  45. 58.
  46. 59.
  47. 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)
  48. 61.
  49. 62.
  50. 63.
  51. 64.
  52. 65.
  53. 66.
  54. 67.
  55. 68.
  56. 69.
  57. 71.
  58. 72.
  59. 73.
  60. 74.
  61. 75.
  62. 76.
  63. 77.
  64. 78.
  65. 79.
  66. 80.
  67. 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?
  68. 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,
  69. 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.
  70. 84.
  71. 85.
  72. 86.
  73. 87.
  74. 88.
  75. 89.
  76. 90.
  77. 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
  78. 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
  79. 95.
  80. 96.
  81. 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.
  82. 98.

    • Editors can select compression rates, but aggressive compression is

    a default. • 30% JPEG quality: bright-red areas don’t compress well.
  83. 99.

    • On average, the “large” screen has 650 Kb,
 “medium”

    — 570 Kb, “small” — 450 Kb. • The homepage on a mobile device has 40 images.
  84. 100.
  85. 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
  86. 105.
  87. 106.
  88. 107.
  89. 109.
  90. 110.
  91. 111.
  92. 112.
  93. 113.
  94. 114.
  95. 115.
  96. 116.
  97. 117.
  98. 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.
  99. 119.
  100. 120.
  101. 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>
  102. 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>
  103. 123.
  104. 124.
  105. 125.

    • CSS:
 body { 
 font-family: 'Elena Regular',
 AvenirNext, Avenir,

    /* iOS */
 'Roboto Slab', 'Droid Serif', /* Android */
 'Segoe UI', /* Microsoft */ 
 Georgia, 'Times New Roman', serif; /* Fallback */
 }
  106. 126.
  107. 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 */
 }
  108. 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 */
 }
  109. 129.
  110. 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)
  111. 132.

    “The design process is weird and complicated because it involves

    people and systems, which often are weird and complicated. 
 — à la Mark Boulton
  112. 136.
  113. 137.
  114. 138.
  115. 139.
  116. 140.
  117. 141.
  118. 142.
  119. 143.
  120. 144.
  121. 145.

    Clockwise Rightwards and Leftwards Open Circle Arrows With Circled One

    Overlay
 (also known as U+1F502, &#x1f502; or \u1f502).
  122. 146.

    Person Raising Both Hands in Celebration (also known as Festivus

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

    %

  124. 148.
  125. 149.
  126. 150.
  127. 151.
  128. 152.
  129. 153.
  130. 154.
  131. 155.
  132. 156.
  133. 157.
  134. 158.
  135. 159.
  136. 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.
  137. 161.
  138. 162.
  139. 163.
  140. 164.
  141. 165.
  142. 166.
  143. 167.
  144. 168.
  145. 169.
  146. 170.
  147. 171.
  148. 172.
  149. 173.
  150. 174.
  151. 175.
  152. 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
  153. 177.
  154. 178.
  155. 179.
  156. 180.
  157. 181.
  158. 182.
  159. 183.
  160. 184.
  161. 185.
  162. 186.
  163. 187.
  164. 188.
  165. 189.

    Responsive Tables
 
 
 — prioritize important columns
 — use

    steppers for navigation
 — visualize content 
 — reposition headings
 — adjust the level of fidelity
 — extract content and “redesign” it.
  166. 190.
  167. 191.
  168. 192.
  169. 193.
  170. 194.
  171. 195.
  172. 196.
  173. 197.
  174. 198.
  175. 199.
  176. 200.
  177. 201.
  178. 202.
  179. 203.
  180. 204.
  181. 205.
  182. 206.
  183. 207.
  184. 208.
  185. 209.
  186. 210.
  187. 211.
  188. 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.
  189. 213.
  190. 214.
  191. 215.
  192. 216.
  193. 217.
  194. 218.
  195. 219.
  196. 220.
  197. 221.
  198. 222.
  199. 223.
  200. 224.
  201. 225.
  202. 226.
  203. 227.
  204. 228.
  205. 229.
  206. 230.
  207. 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.
  208. 232.
  209. 233.
  210. 234.
  211. 235.
  212. 236.
  213. 237.
  214. 238.
  215. 239.
  216. 240.
  217. 241.
  218. 242.
  219. 243.
  220. 244.
  221. 245.
  222. 246.
  223. 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
  224. 248.
  225. 249.
  226. 250.
  227. 252.
  228. 253.
  229. 254.
  230. 255.
  231. 256.
  232. 257.
  233. 258.
  234. 259.
  235. 260.
  236. 261.
  237. 262.
  238. 263.
  239. 264.
  240. 265.
  241. 266.
  242. 267.
  243. 268.
  244. 269.
  245. 270.
  246. 271.
  247. 272.
  248. 273.
  249. 274.
  250. 275.
  251. 276.
  252. 277.
  253. 278.
  254. 279.
  255. 280.
  256. 281.
  257. 282.
  258. 283.
  259. 284.
  260. 285.
  261. 286.
  262. 287.
  263. 288.
  264. 289.
  265. 290.
  266. 291.
  267. 292.
  268. 293.
  269. 294.
  270. 295.

    • Allow Users To Select Country Early On
 The earlier

    you know the shipping country, the earlier you can display the final price.
  271. 296.

    • Reassure Users About Delivery Times
 Also, emphasize that checking

    out is a little investment, and when the item will be delivered.
  272. 297.
  273. 298.
  274. 299.
  275. 300.
  276. 301.

    • Eliminate All Concerns At Once
 Communicate subtotal, taxes, shipping

    costs, delivery time, fees, charger and total price early.
  277. 302.
  278. 303.
  279. 304.
  280. 305.
  281. 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.
  282. 307.
  283. 308.
  284. 309.
  285. 310.
  286. 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/
  287. 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/
  288. 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/