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
   

   View Slide

2. Glitch / Mozilla Foundation
   Adobe / Jane & Jury
   Healthcare Human Factors
   Orlando Designers / 

   Paris Lectures / Creative
   Mornings / Hacking Health

   Women && Tech
   15 years of design
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

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
   

   View Slide

9. View Slide

10. View Slide

11. Illustrations: Walter Parenton / Good Boy Graphics
    

    View Slide

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
    

    View Slide

13. It needed to mature.
    It needed to be easier to understand.
    And it needed to be easier to use.
    

    View Slide

14. What is
    ‘soft brutalism’?
    

    View Slide

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
    “
    

    View Slide

16. View Slide

17. leong-leong.com
    

    View Slide

18. https://brutalistwebsites.com/
    

    View Slide

19. https://brutalistwebsites.com/
    

    View Slide

20. https://brutalistwebsites.com/
    

    View Slide

21. https://brutalistwebsites.com/
    

    View Slide

22. https://brutalistwebsites.com/
    

    View Slide

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
    

    View Slide

24. qz.com/is/net-positive/
    

    View Slide

25. theverge.com/2020/3/2/21144680/verge-tech-survey-2020-trust-privacy-security-facebook-amazon-google-apple
    

    View Slide

26. StephDavidson.com
    

    View Slide

27. splashwithdolphin.com
    

    View Slide

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
    

    View Slide

29. Brutalism
    Soft brutalism
    Neumorphism
    Kawaii
    Swiss
    Peak fruit sticker
    Skeumorphism
    

    View Slide

30. Eddie Lobanovskiy
    Skeumorphism
    

    View Slide

31. Emy Lascan Voicu Apostol
    Neumorphism
    

    View Slide

32. Tobias Van Schneider / vanschneider.com/the-kawaiization-of-product-design
    Kawaii
    Udhaya Chandran
    

    View Slide

33. Kawaii
    Image source: Tobias Van Schneider
    

    View Slide

34. Best Served Bold
    Eva Cremers / evacremers.com
    Kawaii
    

    View Slide

35. Peak fruit sticker
    covidgoodnews.com
    

    View Slide

36. Best Served Bold Best Served Bold
    Brutalism
    

    View Slide

37. Brutalism
    www.abcdinamo.com
    

    View Slide

38. Nino Lekveishvili
    Soft Brutalism
    

    View Slide

39. Soft Brutalism
    Ekaterine Rogava
    

    View Slide

40. The Power of Weird
    

    View Slide

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
    “
    

    View Slide

42. Weird
    Intriguing
    Different
    Cool
    Simple
    Clean
    Usable
    Smart
    

    View Slide

43. Don’t get weird with accessibility.
    

    View Slide

44. Or usability
    

    View Slide

45. Navigation should always be easy.
    

    View Slide

46. View Slide

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.
    

    View Slide

48. Reinforcing that tighter
    brand through playful
    marketing elements
    More playful: Success email Less playful: Receipt
    

    View Slide

49. More playful: Social & marketing graphics
    

    View Slide

50. Lots of early iterations
    toward a more usable layout
    for an important part of the
    user journey (Pricing page)
    

    View Slide

51. Credit for illustrations to the amazing Aaron Fernandez
    aarontheillustrator.com
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. Salvadore Dali Rene Magritte Magritte
    Marcel Duchamp Andy Warhol Stefan Sagmeister
    ART!
    

    View Slide

58. Confidence
    

    View Slide

59. “Weird” means you can make mistakes
    “Weird” means you don’t have to be like anyone else
    “Weird” means different
    

    View Slide

60. Thank you!
    @cassiemc
    

    View Slide