Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Soft Brutalism & the Era of Weird & Wonderful

cassiemc
May 01, 2020

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.

cassiemc

May 01, 2020
Tweet

More Decks by cassiemc

Other Decks in Design

Transcript

  1. @cassiemc
    Soft Brutalism 

    & the Era of Weird
    & Wonderful
    Cassie McDaniel

    View full-size 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 full-size slide

  3. 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 full-size slide

  4. Illustrations: Walter Parenton / Good Boy Graphics

    View full-size slide

  5. 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 full-size slide

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

    View full-size slide

  7. What is
    ‘soft brutalism’?

    View full-size slide

  8. “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 full-size slide

  9. leong-leong.com

    View full-size slide

  10. https://brutalistwebsites.com/

    View full-size slide

  11. https://brutalistwebsites.com/

    View full-size slide

  12. https://brutalistwebsites.com/

    View full-size slide

  13. https://brutalistwebsites.com/

    View full-size slide

  14. https://brutalistwebsites.com/

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  18. StephDavidson.com

    View full-size slide

  19. splashwithdolphin.com

    View full-size slide

  20. 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 full-size slide

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

    View full-size slide

  22. Eddie Lobanovskiy
    Skeumorphism

    View full-size slide

  23. Emy Lascan Voicu Apostol
    Neumorphism

    View full-size slide

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

    View full-size slide

  25. Kawaii
    Image source: Tobias Van Schneider

    View full-size slide

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

    View full-size slide

  27. Peak fruit sticker
    covidgoodnews.com

    View full-size slide

  28. Best Served Bold Best Served Bold
    Brutalism

    View full-size slide

  29. Brutalism
    www.abcdinamo.com

    View full-size slide

  30. Nino Lekveishvili
    Soft Brutalism

    View full-size slide

  31. Soft Brutalism
    Ekaterine Rogava

    View full-size slide

  32. The Power of Weird

    View full-size slide

  33. 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 full-size slide

  34. Weird
    Intriguing
    Different
    Cool
    Simple
    Clean
    Usable
    Smart

    View full-size slide

  35. Don’t get weird with accessibility.

    View full-size slide

  36. Or usability

    View full-size slide

  37. Navigation should always be easy.

    View full-size slide

  38. 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 full-size slide

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

    View full-size slide

  40. More playful: Social & marketing graphics

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Thank you!
    @cassiemc

    View full-size slide