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.

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