What is Brutalism in Website Design in 60 seconds

Brutalism in web design lacks any concern for comfort or convention. It takes a metaphorical punch at traditional containers by completely ignoring them.

Brutalism, therefore, is a way to design user interfaces with a strong impression of pure functionality and strong behavior over regular form.

Features of it include fonts that are oversized to the point of only one word being able to fit on a screen. The fonts might not even be safe for the web, but work only due to their sizing and brutal use.

Framing might also avoid containers or grids, instead of having text overflow onto other containers, or even from parts of its own sentences or words. This sort of visual anarchy causes attention or even distress for those who like things simple and ordered like me.

Even colors are not safe when they are brutally used to showcase how overused web-safe colors have become. Overloaded and saturated colors are eye-catching, and can both work well to stand out and make my eyes bleed at the same time.

Brutalism is therefore quite effective at drawing engagement as it is unique, impactful, and attention-grabbing, so it’s no wonder that large design websites such as even Figma themselves are using it to full effect.

#brutalism #ui #design

Enhance AI tools
A series of tools to help solve coding problems, write content and more
πŸ‘¨β€πŸ’» Enhance AI: https://app.enhanceai.ai/

Learn Design for Developers!
A book I’ve created to help you improve the look of your apps and websites.
πŸ“˜ Enhance UI: https://www.enhanceui.com/

Feel free to follow me on:
🐦 Twitter: https://twitter.com/intent/follow?screen_name=adrian_twarog
πŸ’¬ Discord: https://discord.gg/6gmmFvxkD7
πŸ’Έ Patreon: https://www.patreon.com/adriantwarog

Software & Discounts:
🚾 Webflow: https://webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
πŸ”΄ Elementor: https://elementor.com/adrian/?ref=23140
βœ– Editor X: https://www.editorx.com/adrian-twarog

Computer Gear:
⬛ Monitor: https://amzn.to/3f9DOQI
⌨ Keyboard: https://amzn.to/3eA5UFD
🐁 Mouse: https://amzn.to/3xVJO8l
🎀 Mic: https://amzn.to/3hgCfms
πŸ“± Tablet: https://amzn.to/3ewt7sa
πŸ’‘ Lighting: https://amzn.to/3vOZeZY
πŸ’‘ Key Lighting: https://amzn.to/3f6qP2f

Camera Equipment:
πŸ“· Camera: https://amzn.to/3uCv4J9
πŸ“Έ Primary Lens: https://amzn.to/3vT6wMm
πŸ“Έ Secondary Lens: https://amzn.to/3tyqWIX
πŸŽ₯ Secondary Camera: https://amzn.to/3o2zCGi
πŸŽ™ Camera Mic: https://amzn.to/33tCz9l
🎞 USB to HDMI: https://amzn.to/33yW9RE

You May Also Like