Tweet
Tweet

Slide 1

Slide 1 text

@cassiemc Soft Brutalism 
 & the Era of Weird & Wonderful Cassie McDaniel

Slide 2

Slide 2 text

Glitch / Mozilla Foundation Adobe / Jane & Jury Healthcare Human Factors Orlando Designers / 
 Paris Lectures / Creative Mornings / Hacking Health
 Women && Tech 15 years of design

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Illustrations: Walter Parenton / Good Boy Graphics

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

What is ‘soft brutalism’?

Slide 15

Slide 15 text

“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 “

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

leong-leong.com

Slide 18

Slide 18 text

https://brutalistwebsites.com/

Slide 19

Slide 19 text

https://brutalistwebsites.com/

Slide 20

Slide 20 text

https://brutalistwebsites.com/

Slide 21

Slide 21 text

https://brutalistwebsites.com/

Slide 22

Slide 22 text

https://brutalistwebsites.com/

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

qz.com/is/net-positive/

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

StephDavidson.com

Slide 27

Slide 27 text

splashwithdolphin.com

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Brutalism Soft brutalism Neumorphism Kawaii Swiss Peak fruit sticker Skeumorphism

Slide 30

Slide 30 text

Eddie Lobanovskiy Skeumorphism

Slide 31

Slide 31 text

Emy Lascan Voicu Apostol Neumorphism

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Kawaii Image source: Tobias Van Schneider

Slide 34

Slide 34 text

Best Served Bold Eva Cremers / evacremers.com Kawaii

Slide 35

Slide 35 text

Peak fruit sticker covidgoodnews.com

Slide 36

Slide 36 text

Best Served Bold Best Served Bold Brutalism

Slide 37

Slide 37 text

Brutalism www.abcdinamo.com

Slide 38

Slide 38 text

Nino Lekveishvili Soft Brutalism

Slide 39

Slide 39 text

Soft Brutalism Ekaterine Rogava

Slide 40

Slide 40 text

The Power of Weird

Slide 41

Slide 41 text

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 “

Slide 42

Slide 42 text

Weird Intriguing Different Cool Simple Clean Usable Smart

Slide 43

Slide 43 text

Don’t get weird with accessibility.

Slide 44

Slide 44 text

Or usability

Slide 45

Slide 45 text

Navigation should always be easy.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

More playful: Social & marketing graphics

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Credit for illustrations to the amazing Aaron Fernandez aarontheillustrator.com

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Confidence

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Thank you! @cassiemc