Soft Brutalism & the Era of Weird & Wonderful

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.

5d4b61f9005f31e563a59bd0a0797f85?s=128

cassiemc

May 01, 2020
Tweet

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
  3. None
  4. None
  5. None
  6. None
  7. None
  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
  9. None
  10. None
  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 “
  16. None
  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.

  46. None
  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

  52. None
  53. None
  54. None
  55. None
  56. None
  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