Designing Deliberately

Designers today have to juggle many tasks: making sites that are beautiful, engaging, and delivered quickly across often unreliable networks. It’s not surprising that the current web landscape is full of heavy websites serving dozens of web fonts, images, and complex interactions—or super-minimal sites that lack personality. In this presentation, we’ll find the balance between these extremes. Yesenia will discuss how to make smarter decisions about typography and other UI elements, and how to design deliberately. She’ll also talk about how to sell designs to clients and stakeholders, and to shift from judging design solely on aesthetic merits, and instead focus on creating the best user experience.

Transcript

1. Designing Deliberately An Event Apart Chicago @yeseniaa
2. What do you dislike most when browsing Web on mobile?
3. Waiting for slow pages to load What do you dislike most when browsing Web on mobile? Being shown interstitials Unplayable videos Getting redirected to the homepage Other https:/ /webmasters.googleblog.com/2015/04/mobilemadness-campaign-to-help-you-go.html
4. Your audience wants content fast.
5. Online shoppers expected pages to load 
 in 2 seconds — and at 3 seconds, 
 a large share abandon the site. “For Impatient Web Users, an Eye Blink Is Just Too Long to Wait,” New York Times, February 29, 2012 http:/ /www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
6. People will visit a Web site less often if it is slower than a close competitor by more than 250 milliseconds. “For Impatient Web Users, an Eye Blink Is Just Too Long to Wait,” New York Times, February 29, 2012 http:/ /www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
7. Your audiences want
 Global network speeds vary greatly. http:/ /www.ericsson.com/res/docs/2015/ericsson-mobility-report-june-2015.pdf
8. …but sites keeps getting larger.
9. 2.28 MB Average size of webpages
10. 2011-2016
11. Images Custom web fonts Interactions Stylesheets Third-party scripts
12. Fast Functional Light-weight Beautiful Memorable On-brand vs
13. Beauty Function vs
14. What will be the 
 best user experience 
 overall?
15. Fast sites build trust.
16. Fast sites are memorable.
17. Performance is a design feature. Not just a technical concern.
18. “Fast sites are boring.” Myth #1
19. “Design is decoration.” Myth #2
20. Beauty Function vs
22. “ –Stefan Sagmeister The real fight is not between something simple and something ornamental, the real fight is between design with a lot of love and design without care. https:/ /www.youtube.com/watch? v=fXaF0bIthB0
23. Design with love Design without care vs
24. “ –Don Norman Good design means that beauty & usability are in balance. http://www.jnd.org/dn.mss/emotion_design_at.html
25. Affordable Functional Pleasurable
26. Fast, accessible, affordable Deliver core content quickly
27. Functional Helps users accomplish what they need
28. Pleasurable Communicates brand message, emotion & personality
29. Designing for performance means designing with care.
30. Designing with care means being deliberate with WHAT we load and HOW we load
31. Ads Streaming video Social plug-ins
32. Hand-done Weathered Layered Textures
36. 3 Video feeds 2 Social feeds 3 ads 1 video clip carousel Parallax background Map
37. 3 Video feeds 2 Social feeds 3 ads 1 video clip carousel Parallax background Map 1 mil images Schedule Top fan list User profile info Navigation
38. 1. Video views 2. Social engagement 3. Ad revenue
39. 3 Video feeds 2 Social feeds 3 ads 1 video clip carousel Parallax background Map 1 mil images Schedule Top fan list User profile info Navigation
40. Development Design Research Biz dev Launch
41. Development Design Research Biz dev Launch
42. Development Design Research Biz dev Launch
43. Slow, heavy sites are a result of…
44. Poor 
 planning
45. Poor communication
46. Poor 
 awareness
47. Fast Boring
48. Speed index: 1828 Load time: 2.5s
49. Speed index: 2514 Load time: 3.4s
50. Speed index: 2350 Start render: 1s Fully loaded: 4s
51. Speed index: 2350
52. https:/ /speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-2013
53. Core content Essential HTML and CSS, usable non- JavaScript-enhanced experience Enhancement JavaScript, geolocation, touch support, enhanced CSS, web fonts, images, widgets Leftovers Analytics, advertising, third-party content
55. Prioritize performance from the beginning 1
56. Set a performance budget 2
57. Be deliberate 3
58. Prioritize Performace 1
59. Development Design Research Biz dev Think about performance? Development Design Research Biz dev
60. “ –Tim Kadlec deciding a page can’t exceed 500kB when a mock-up containing three carousels and a full-screen high-resolution background image has already been approved isn’t going to do you much good https:/ /timkadlec.com/2013/01/setting-a- performance-budget/
61. Development Design Research Biz dev Think about performance!
62. Share Case Studies
64. A page load slowdown of just one second could cost it $1.6 billion in sales each year. https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
66. By slowing its search results by just four tenths of a second they could lose 8 million searches per day https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
68. For every 1 second that page load time decreased, Walmart saw up to a 2% increase in conversions. http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
70. Reduced page load time 80%. http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
71. Saw an 80% increase in monthly unique visitors. http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
72. Performance is good for users.
73. Performance is good for business.
75. Customer 
 Experience
76. “We need to give our customers a quality experience.”
77. “Quality is stability, performance & reliability.”
78. Business 
 Goals
79. Higher Customer Check/order Increased Online Ordering Decreased Call Center Volume Competitive Advantage
80. Performance 
 Mission
81. “The goal of this project is to create a beautiful, flexible, lightning-fast experience…”
82. Performance budget:
 600kb per page
83. Set a Performance Budget 2
84. A tangible way to talk about performance.
85. Our pages should weigh no more than 300KB. Browser-based
86. Our pages should take no more than 6 seconds to load over a sub-3G connection. User experience-based
87. “ –Mark Perkins Suddenly discussions about what could or could not go in the design felt like conversations, rather than just the developer constantly saying “no!” You want a huge header image at the top of the page? Sure. But that’s 100k of your budget used up, so you’ll have to lose a weight or two of web font to bring things back under the limit.... http:/ /clearleft.com/thinks/98
88. “ –Mark Perkins The important point is to look at 
 every decision, right through the design/build process, as something that has consequence… http:/ /clearleft.com/thinks/98
89. Setting Your Budget
90. 1.Look to your pages. 2.Look to your competitors. 3.Set a target goal. (ie: 20% faster than competitor)
91. webpagetest.org
92. webpagetest.org
93. • Page weight • Start Render • Fully Loaded • Speed Index
94. WebPagetest - Visual Comparison
95. “Make the page usable within 10 seconds.” https:/ /speakerdeck.com/tmaslen/moving-swiftly-the-story-of-how-bbc-news-fell-in-love-with-responsive-web-design#63
96. What is a performance budget? Why is it important? What is our performance budget? At Project Start
97. Are we sticking to the budget? Throughout Project
98. Brad Frost: http:/ /bradfrost.com/blog/post/performance-budget-builder/
99. Help us prioritize Performance budgets
100. “ –Tim Kadlec With anything added to a page, you need to be able to answer the question of “What value does this provide?” and in turn be able to determine if the value outweighs the pain. https:/ /timkadlec.com/2014/01/fast- enough/
101. 98% higher conversion rates with images
102. Secondary carousel Static hero image 1 2 Images JS 1 2 600kb Budget Video
103. “We NEED a carousel 
 at the top.”
104. Secondary carousel 1 2 Images JS 1 2 600kb Budget Video Top carousel (4 slides): 700kb
105. 700kb 
 in images and JS This carousel alone will cost…
106. 1.Optimize an existing feature or asset on the page. 2.Remove an existing feature or asset from the page. 3.Don’t add the new feature or asset. https:/ /timkadlec.com/2013/01/setting-a-performance-budget/
107. 1. Don’t add the carousel. 2. Lazy load images that are not in the viewport on page load. 3. Remove the video Some options are
108. Guide design decisions Performance budgets
110. My font budget* 100kb 600kb Fonts *desktop
111. You have 100kb to “spend” on web fonts.
112. + Option A is 3 weights of Whitney 
 for body copy 1 weight of Knockout 
 for headings
113. Option B is 3 weights of Knockout 
 for headings System 
 fonts
 for body copy +
114. Which is a better translation of your brand?
115. Be deliberate 3
116. Arial Arial Italic Arial Bold Arial Bold Italic Arial Black Comic Sans MS Comic Sans MS Bold Georgia Georgia Italic Georgia Bold Times New Roman Times New Roman Italic Times New Bold Times New Bold Italic Trebuchet MS Trebuchet MS Italic Trebuchet MS Bold Verdana Verdana Italic Verdana Bold Verdana Bold Italic
118. Webfonts are amazing, but overused.
119. Font requests have tripled in the 
 last couple years.
120. Use web fonts wisely.
122. “ –Brad Birdsall We believe the UI should come secondary to the stories written on Medium… https:/ /medium.com/designing-medium/project- tnt-4b9b4ea97cda#.z14ubg3ga
123. “ –Brad Birdsall and we are pushing that further 
 by using familiar fonts on each operating system. https:/ /medium.com/designing-medium/project- tnt-4b9b4ea97cda#.z14ubg3ga
126. https:/ /playbook.cio.gov/designstandards/
127. legible, communicates trust, open source
132. Emotion Content File Size
133. Bold Modern Authoritative Slightly edgy Emotion
135. Strong headlines Clear numbers at various sizes Legible body copy Content
138. 100-200kb File Size
139. Type A Type B
140. 155 MM MONTHLY UNIQUE VIEWS 155 MM MONTHLY UNIQUE VIEWS 155 MM MONTHLY UNIQUE VIEWS 155 MM MONTHLY UNIQUE VIEWS Type A Type B
142. Alright Sans Ultra — 14K Alright Sans Ultra Italic — 14K Tablet Gothic Condensed Regular — 24K Tablet Gothic Condensed Bold — 24K Tablet Gothic Condensed Oblique — 29K Total — 105KB
143. Good Headline Pro Condensed Black — 27K PT Serif Normal 400—57KB PT Serif Italic—58KB PT Serif Bold 700—51KB Source Sans Pro—56KB Total — 249KB
144. Type A Type B •Better match for content & mood •Stays within budget •Heavier by 150kb ✓
145. Type A Type B •Better match for content & mood •Over budget by 150kb •Lighter by 150kb
146. Can you simplify your type system?
147. Squiggle Theory: The ‘80s Design Movement Squiggle Theory: The ‘80s Design Movement Husband and wife team Mette Aamodt and Andrew Plumb, who met while students at the Harvard Graduate School of Design, got their first break in 2007, when a potential client asked them to create an ambitious beach house in East Quogue, in the Hamptons. They worried that they had "bit off much more than [they] could chew," as Plumb puts it. Very few people understand what we do and what value it has. —Mette Aamodt
148. Squiggle Theory: The ‘80s Design Movement Squiggle Theory: The ‘80s Design Movement Husband and wife team Mette Aamodt and Andrew Plumb, who met while students at the Harvard Graduate School of Design, got their first break in 2007, when a potential client asked them to create an ambitious beach house in East Quogue, in the Hamptons. They worried that they had "bit off much more than [they] could chew," as Plumb puts it. Very few people understand what we do and what value it has. —Mette Aamodt
149. Can you use a lighter font that looks similar ?
151. Athelas 212k Freight Text Pro 111k
152. Futura 268k Brandon Grotesque 133k
153. Do you need 
 web fonts on small screens?
154. https:/ /speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-2013
155. Consistent Identical
158. “ The goal was much more than consistency of look and feel. http:/ /www-03.ibm.com/ibm/history/ ibm100/us/en/icons/gooddesign/
159. “ This would not just be any kind of painting, but something specific and immediately recognizable, yet never uniform or static. http:/ /www-03.ibm.com/ibm/history/ ibm100/us/en/icons/gooddesign/
160. Noyes’ Steps to Good Design ✦ Fulfills its Function ✦ Respects its Materials ✦ Is Suited to Method of Production ✦ Combines these in Imaginative Expression
161. “ –Eliot Noyes It does seem to be a part of the role of the designer to help identify this character, and then express it in terms of the most meaningful goals and the highest ideas of the company and in the broadest context of our society and economy. http:/ /www-03.ibm.com/ibm/history/ ibm100/us/en/icons/gooddesign/
162. • Screen sizes & form factors • Interactions, inputs • Bandwidth & network speeds Broadest Context
163. Brand guidelines can be too rigid
164. “That looks off-brand.”
165. Design consistency isn’t pixels. –PATTY TOLAND “
166. Design consistency 
 is purpose. –PATTY TOLAND “
168. v slate #465451 persimmon #FF9856 red #FF604A Rude Slab Acto
169. v
174. 1. Clear, fast, mobile-first experience 2. Add brand details Website Strategy
175. Just enough design.
178. Safari Firefox
180. Design Modularly 4
182. Designing Modularly 1. Helps us be deliberate with our designs 2. Helps us move into code sooner 3. Precursor to a style guide
183. Full Page Comps vs Modules
185. Identify 
 re-usable patterns
187. Use only what you need.
188. Alpha Alpha with ‘live’ flag Alpha sponsored
189. Get designs into 
 code earlier
190. Filament Group
191. “ –Scott Jehl We can often deliver a usable representation of a web page’s content very quickly, even if that page is quite large and asset-heavy as a whole. https:/ /www.filamentgroup.com/lab/ weight-wait.html
194. Adaptive Responsive
195. Edit constantly
197. cssstats.com
198. cssstats.com
199. dark-gray medium-gray light-gray
200. Text Color Fill Color Others Highlight Your Highlight Active Highlight
201. Document Your Decisions in a Style Guide
202. Create a 
 Style Guide Yelp Style Guide
203. Create a 
 Style Guide Trulia Style Guide
204. • Their HTML is 48% smaller • 21% faster load time • 60% faster time to first byte • Reduced unused CSS by 135kb http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/
205. Be deliberate. 1
206. Ensure access to core content, quickly. 2
207. Test on real devices. 3
208. Beauty Function vs
209. Beautiful user experiences
210. Thank you! @yeseniaa