The Smashing Magazine Relaunch Case Study - Vitaly Friedman

You’ve been there: big bang redesigns are usually a very, very bad idea. Redesigning and rebuilding an existing website from scratch is risky and unpredictable, and in many cases the level of complexity is highly underestimated. In mid-2016, Smashing Magazine decided to make a big switch from the existing setup to an entirely new design, focusing on microinteraction and copywriting.

In this talk, Vitaly Friedman, editor-in-chief and co-founder of Smashing Magazine, will share some of the insights into Smashing Magazine’s Relaunch in 2017 — with decisions made, failures, successes, lessons learned and shady’n’dirty techniques used along the way. Among other things, you’ll learn how Smashing Magazine’s new design came about, how we started, and all the stumbling blocks we discovered (and had to solve) along the way. Beware: the session will contain at least 27 illustrations of cats!

Transcript

2. A Little Story
 Of A Big Bang Redesign Vitaly Friedman, Tel-Aviv
 May 5, 2018
3. Vitaly Friedman,
 co-founder of SmashingMag
8. 1 2 3 4 Personality Techniques Summary Case Study
9. 1 Personality
10. Humanity.
11. Humanity.
12. “The design process is weird and complicated because it involves people and systems, which often are weird and complicated. 
 — à la Mark Boulton
13. Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
14. Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
23. Photo credit: Jen Simmons
25. Photo credit: Jen Simmons
26. “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
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. Arthur Rackham, “Goldilocks and the three bears”
32. Arthur Rackham, “Goldilocks and the three bears”
33. Arthur Rackham, “Goldilocks and the three bears”
43. “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
44. “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
45. 1 2 3 4 Personality Summary Case Study Techniques
46. 2 Techniques
47. Friction.
48. Friction.
62. Make Boring Interesting.
63. Make Boring Interesting.
74. Focus.
75. Focus.
85. Signature.
86. Signature.
111. 1 2 3 4 Personality Summary Case Study Techniques
112. 3 Case Study
113. Problem.
114. Ad-blockers.* Please absolutely use one if you can! * Text
115. Advertising. 50% revenue decline yearly. 01 02 66% users blocking ads. Membership.
117. “We needed to create a tool for the magazine, a CMS for 2500 articles, a comments engine for 200,000 comments, an eCommerce platform for purchases, a subscription service, a job board, and a membership auth/login.
118. From scratch.
119. Team. Daniel Mall Design Front-End Sara Soueidan Andrew Clarke Exploration Front-End Ilya Pukhalski IA, UX, Type Marko Dugonjic (Cat) Illustrator Ricardo Gimenes
120. Team. Daniel Mall Design Front-End Sara Soueidan Andrew Clarke Exploration Front-End Ilya Pukhalski IA, UX, Type Marko Dugonjic (Cat) Illustrator Ricardo Gimenes
121. Back-End Mathias Billmann Marketing Joe Leech, Paul Boag Animation Sarah Drasner Accessibility Heydon Pickering Daniel Mall Design Front-End Sara Soueidan Andrew Clarke Exploration Front-End Ilya Pukhalski IA, Usability Marko Dugonjic (Cat) Illustrator Ricardo Gimenes
123. Text First.
133. This typeface. Elena
134. ce. That typefa
135. a Mija
148. Components.
149. Patty Toland, FilamentGroup, “Design Consistency for RWD”, https://t.co/Tb0q1gMwQS
155. System.
190. Connections.
191. Connections.
192. Finding the
 right angle.
193. Finding the
 right angle.* (Literally.) *
224. Storytelling.
240. Offboarding UX.
250. Respect.
253. Respect.
272. 1 2 3 4 Personality Process Summary eCommerce
273. 1 2 3 4 Personality Summary Case Study Techniques
274. 4 Summary
279. Meow!
 @smashingmag