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

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.

Vitaly Friedman

March 08, 2017
Tweet

More Decks by Vitaly Friedman

Other Decks in Design

Transcript

  1. Reaching For Stars:

    Why Images Matter
    Vitaly Friedman (illustrations by Simon C Page, Nelson Cash)
    March 1st, 2017 @ ImageCon, San Francisco, USA

    View Slide

  2. Vitaly Friedman, editor-in-chief

    and co-founder of SmashingMag

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

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

    View Slide

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

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  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

    View Slide

  18. State of Images

    View Slide

  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

    View Slide

  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

    View Slide

  21. Arthur Rackham, “Goldilocks and the three bears”

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  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

    View Slide

  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

    View Slide

  31. View Slide

  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)

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. 3840×2160
    Native resolution of Ultra HDTV, or 4K (2160p).

    4K screens can serve 8-megapixel images.

    View Slide

  43. View Slide

  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.

    View Slide

  45. View Slide

  46. 7680×4320
    8K screens can serve 33-megapixel images (4320p).

    A heavily compressed desktop wallpaper is 11.7 MB.

    View Slide

  47. @mrjoe

    View Slide

  48. @mrjoe
    Title Text

    View Slide

  49. @mrjoe

    View Slide

  50. @mrjoe

    View Slide

  51. @mrjoe
    Title Text

    View Slide

  52. @mrjoe
    Considered purchase

    View Slide

  53. @mrjoe
    Considered purchase

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. View Slide

  59. View Slide

  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)

    View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. • JavaScript
    var size =
    window.getCo
    PropertyValu

    if (size ==
    // Load so
    }

    View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  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?

    View Slide

  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,

    View Slide

  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 , srcset, sizes, image-set, formats.
    The Perfect Workflow
    • To deal with the overhead of responsive images,
    companies have to automate their image workflows.

    View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  95. View Slide

  96. View Slide

  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.

    View Slide

  98. • Editors can select compression rates, but aggressive
    compression is a default.
    • 30% JPEG quality: bright-red areas don’t compress well.

    View Slide

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

    “medium” — 570 Kb, “small” — 450 Kb.
    • The homepage on a mobile device has 40 images.

    View Slide

  100. • The original photo has 1600px width, 971 Kb.
    Quality 60 brings the size down to 213 Kb.

    View Slide

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

    View Slide

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

    View Slide

  103. Scans
    14 / 44

    View Slide

  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

    View Slide

  105. 16 / 44

    View Slide

  106. 17 / 44

    View Slide

  107. 18 / 44

    View Slide

  108. 1st Scan Layer Has Small Byte Size
    Ships Fast
    &
    Shows Soon
    19 / 44

    View Slide

  109. 31 / 44

    View Slide

  110. 1
    32 / 44

    View Slide

  111. 2
    33 / 44

    View Slide

  112. 3
    34 / 44

    View Slide

  113. 4
    35 / 44

    View Slide

  114. 5
    36 / 44

    View Slide

  115. 37 / 44

    View Slide

  116. View Slide

  117. View Slide

  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.

    View Slide

  119. View Slide

  120. View Slide






  121. xlink:href="can-top.jpg">
    • hero-image.svg:

    xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 560 1388">



    View Slide

  122. • HTML/CSS:

    , background: url("hero-image.svg")





    xlink:href="can-top.jpg">
    • hero-image.svg:

    xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 560 1388">



    View Slide

  123. View Slide

  124. View Slide

  125. • CSS:

    body { 

    font-family: 'Elena Regular',

    AvenirNext, Avenir, /* iOS */

    'Roboto Slab', 'Droid Serif', /* Android */

    'Segoe UI', /* Microsoft */ 

    Georgia, 'Times New Roman', serif; /* Fallback */

    }

    View Slide

  126. View Slide

  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 */

    }

    View Slide

  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 */

    }

    View Slide

  129. View Slide

  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)

    View Slide

  131. Design Patterns

    View Slide

  132. “The design process is weird and
    complicated because it involves
    people and systems, which often
    are weird and complicated.

    — à la Mark Boulton

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. View Slide

  141. View Slide

  142. View Slide

  143. View Slide

  144. View Slide


  145. Clockwise Rightwards and
    Leftwards Open Circle Arrows
    With Circled One Overlay

    (also known as U+1F502,
    🔂 or \u1f502).

    View Slide


  146. Person Raising Both Hands in
    Celebration (also known as
    Festivus Miracle Emoji,

    U+1F64C, f64c; or \u1f64c).

    View Slide

  147. %

    View Slide

  148. View Slide

  149. View Slide

  150. View Slide

  151. View Slide

  152. View Slide

  153. View Slide

  154. View Slide

  155. View Slide

  156. View Slide

  157. View Slide

  158. View Slide

  159. View Slide

  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.

    View Slide

  161. View Slide

  162. View Slide

  163. View Slide

  164. View Slide

  165. View Slide

  166. View Slide

  167. View Slide

  168. View Slide

  169. View Slide

  170. View Slide

  171. View Slide

  172. View Slide

  173. View Slide

  174. View Slide

  175. View Slide

  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

    View Slide

  177. View Slide

  178. View Slide

  179. View Slide

  180. View Slide

  181. View Slide

  182. View Slide

  183. View Slide

  184. View Slide

  185. View Slide

  186. View Slide

  187. View Slide

  188. View Slide

  189. Responsive Tables



    — prioritize important columns

    — use steppers for navigation

    — visualize content 

    — reposition headings

    — adjust the level of fidelity

    — extract content and “redesign” it.

    View Slide

  190. View Slide

  191. View Slide

  192. View Slide

  193. View Slide

  194. View Slide

  195. View Slide

  196. View Slide

  197. View Slide

  198. View Slide

  199. View Slide

  200. View Slide

  201. View Slide

  202. View Slide

  203. View Slide

  204. View Slide

  205. View Slide

  206. View Slide

  207. View Slide

  208. View Slide

  209. View Slide

  210. View Slide

  211. View Slide

  212. Responsive Maps and Charts



    — divide content into visual/textual views

    — turn a 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.

    View Slide

  213. View Slide

  214. View Slide

  215. View Slide

  216. View Slide

  217. View Slide

  218. View Slide

  219. View Slide

  220. View Slide

  221. View Slide

  222. View Slide

  223. View Slide

  224. View Slide

  225. View Slide

  226. View Slide

  227. View Slide

  228. View Slide

  229. View Slide

  230. View Slide

  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.

    View Slide

  232. View Slide

  233. View Slide

  234. Summary


    View Slide

  235. View Slide

  236. View Slide

  237. View Slide

  238. View Slide

  239. View Slide

  240. View Slide

  241. View Slide

  242. View Slide

  243. View Slide

  244. View Slide

  245. View Slide

  246. View Slide

  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

    View Slide

  248. View Slide

  249. View Slide

  250. View Slide

  251. Art Direction

    View Slide

  252. View Slide

  253. View Slide

  254. View Slide

  255. View Slide

  256. View Slide

  257. View Slide

  258. View Slide

  259. View Slide

  260. View Slide

  261. View Slide

  262. View Slide

  263. View Slide

  264. View Slide

  265. View Slide

  266. View Slide

  267. View Slide

  268. View Slide

  269. View Slide

  270. View Slide

  271. View Slide

  272. View Slide

  273. View Slide

  274. View Slide

  275. View Slide

  276. View Slide

  277. View Slide

  278. View Slide

  279. View Slide

  280. View Slide

  281. View Slide

  282. View Slide

  283. View Slide

  284. View Slide

  285. View Slide

  286. View Slide

  287. View Slide

  288. View Slide

  289. View Slide

  290. View Slide

  291. View Slide

  292. View Slide

  293. View Slide

  294. View Slide

  295. • Allow Users To Select Country Early On

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

    View Slide

  296. • Reassure Users About Delivery Times

    Also, emphasize that checking out is a little
    investment, and when the item will be delivered.

    View Slide

  297. View Slide

  298. View Slide

  299. View Slide

  300. View Slide

  301. • Eliminate All Concerns At Once

    Communicate subtotal, taxes, shipping costs,
    delivery time, fees, charger and total price early.

    View Slide

  302. View Slide

  303. View Slide

  304. View Slide

  305. View Slide

  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.

    View Slide

  307. Conclusion

    View Slide

  308. View Slide

  309. View Slide

  310. Thank you.

    View Slide

  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/

    View Slide

  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/

    View Slide

  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/


    View Slide