Soft Brutalism & the Era of Weird & Wonderful

There’s no denying that interactive design is tracking toward weird. Is just everything weird now? Glitch was weird from the beginning; lovingly dubbed “the two fish coding side”, technology writer Ada Powers once called the Glitch aesthetic a harbinger of “soft brutalism”. What does that even mean? Faced with balancing the deeply embedded, off kilter soul of our brand with building a more powerful and usable product, the Glitch design team is holding onto our weird roots. Here’s how we are looking at the trend and responsibly building weird into our interfaces and user experiences.

Transcript

1. @cassiemc Soft Brutalism 
 & the Era of Weird & Wonderful Cassie McDaniel
2. Glitch / Mozilla Foundation Adobe / Jane & Jury Healthcare Human Factors Orlando Designers / 
 Paris Lectures / Creative Mornings / Hacking Health
 Women && Tech 15 years of design
8. UNTITLED-GOOSE-MEME.GLITCH.ME/ “If you can’t read this your posture sucks” September 11, 2019 FIX-POSTURE.GLITCH.ME/ “Now you can create your own Untitled Goose Game to-do list” October 7, 2019 LIKELIKE.GLITCH.ME/ “This Pittsburgh arcade is now a tiny virtual world” April 6, 2020 GENERATIVE-PLACEHOLDERS.GLITCH.ME/ “Now, you can use generative placeholder images for your web project” January 24, 2020 Luke Patton / Canvas Cards Olesya Chernyavskaya / Fix Posture LikeLike Arcade
11. Illustrations: Walter Parenton / Good Boy Graphics
12. Friendly Not intimidating Insinuates tech culture A little bit weird Consistent line weights Does well Not finely balanced No interesting, deliberate tension Surface meaning Disorganized color palette Too cutesy/childlike Does not do well
13. It needed to mature. It needed to be easier to understand. And it needed to be easier to use.
14. What is ‘soft brutalism’?
15. “What is one era's style is the next era's eyesore” it was a term of abuse for the work of architects whose buildings confronted their users — brutalized them — with hulking, piled-up slabs of raw, unfinished concrete. Soft brutalism using curves instead of harsh corners Brutalism, also known as Brutalist architecture, is a style that emerged in the 1950s and grew out of the early-20th century modernist movement. Brutalist buildings are characterised by their massive, monolithic and 'blocky' appearance with a rigid geometric style and large-scale use of poured concrete. Glitch is bringing remix culture back to the web “
17. leong-leong.com
18. https://brutalistwebsites.com/
19. https://brutalistwebsites.com/
20. https://brutalistwebsites.com/
21. https://brutalistwebsites.com/
22. https://brutalistwebsites.com/
23. Black or white backgrounds No gradients or shadows Overlapping elements Lack of symmetry Crowded design No distinct hierarchy Monospaced typography One font used throughout Contrasting color palette Lack of animation Sparse imagery Simple or non-existent navigation Single-page website design Brutalist UI Simple lines Stark / empty Bit harsh Bold outlines White space Cacophonous colors & type https://www.thecreativemomentum.com/blog/what-is-brutalism-in-web-design
24. qz.com/is/net-positive/
25. theverge.com/2020/3/2/21144680/verge-tech-survey-2020-trust-privacy-security-facebook-amazon-google-apple
26. StephDavidson.com
27. splashwithdolphin.com
28. Design Singularity Jen Simmons / Modern Layouts: Getting Out of Our Ruts An Avent Apart, Austin 2015 We are stuck in a rut. It’s a rut that’s shaped like this. “ 2015
29. Brutalism Soft brutalism Neumorphism Kawaii Swiss Peak fruit sticker Skeumorphism
30. Eddie Lobanovskiy Skeumorphism
31. Emy Lascan Voicu Apostol Neumorphism
32. Tobias Van Schneider / vanschneider.com/the-kawaiization-of-product-design Kawaii Udhaya Chandran
33. Kawaii Image source: Tobias Van Schneider
34. Best Served Bold Eva Cremers / evacremers.com Kawaii
35. Peak fruit sticker covidgoodnews.com
36. Best Served Bold Best Served Bold Brutalism
37. Brutalism www.abcdinamo.com
38. Nino Lekveishvili Soft Brutalism
39. Soft Brutalism Ekaterine Rogava
40. The Power of Weird
41. nngroup.com/articles/brutalism-antidesign/ To leverage the brutalist style, keep it limited to visual design. Don’t break your visual hierarchy, navigation, or interaction design just for the sake of novelty. And stick to pure brutalism, while avoiding antidesign like the plague it’ll be for your business metrics. Freshness Humour To be intentionally challenging Use for “
42. Weird Intriguing Different Cool Simple Clean Usable Smart
43. Don’t get weird with accessibility.
44. Or usability
45. Navigation should always be easy.
47. Building a tighter brand system into specific parts of the product, such as the paid experience Identify the states of mind where weird is okay and where it isn’t.
48. Reinforcing that tighter brand through playful marketing elements More playful: Success email Less playful: Receipt
49. More playful: Social & marketing graphics
50. Lots of early iterations toward a more usable layout for an important part of the user journey (Pricing page)
51. Credit for illustrations to the amazing Aaron Fernandez aarontheillustrator.com
57. Salvadore Dali Rene Magritte Magritte Marcel Duchamp Andy Warhol Stefan Sagmeister ART!
58. Confidence
59. “Weird” means you can make mistakes “Weird” means you don’t have to be like anyone else “Weird” means different
60. Thank you! @cassiemc