Brutalism Style ⚡️

Ikhwata Andy
Dipa Inhouse
Published in
3 min readAug 8, 2022

I will share tips for making designs with the style of brutalism.

What is Brutalism Style?

Brutalism in website design is a rough and plain style that prioritizes functionality over form and effectiveness over aesthetics. It is characterized by a minimalist style and has a shape with strokes in several design components.

This brutalism style also uses large and bold dominant text sizes. Creating designs with this style will give an attractive and stand out looks.

Examples of Brutalism Style

Before using the brutalism style in website design, I started looking at dribbble and websites to understand the style that fits and can be applied later. Here is a list of references that I use.

1. Burb

Burb is a platform that Empowers Creators to Build Flourishing,
Community-First Businesses. This website uses typography and components with large sizes that makes this website stand out and have the right color combination. Overall the design looks suitable and minimalist.

2. E - Commerce Website

Dribbble post from Halal Lab

The picture above shows a colour combination that matches a little touch of paper texture in the image and uses a large text size.

3. Joboard

Dribbble post from Odama

The design used in the brutalism style has a minimalist concept with a combination of bright dominant colours. With the addition of a reasonably thick outline on both sides of the design components.

Define Style (Colours and Typography)

Before starting to design, I try to find the right typography and colours to produce a design that meets expectations. In this design, I use two types of typography: primary green and a mix of secondary colours such as yellow, purple, etc.

Mini Brand Guideline

Make a Section List

After creating a mini brand guideline, I started researching what lists were related to my design theme, namely crypto wallets. I am looking for some website resources that are relevant to crypto wallets by taking the appropriate section.

Here are the website reference about the crypto wallet that I use:

  1. https://www.bitstamp.net/
  2. https://www.blockchain.com/
  3. https://crypto.com/
  4. https://bitso.com/
  5. https://robinhood.com/us/en/about/crypto/

A list of sections I decided to use after exploring are the hero, crypto list, market list, feature 1, feature 2, testimonial, CTA and footer

Let’s Design 🤩

After going through the research process, I started the design using Figma. I immediately tried high-fidelity design by looking for some free assets in the Figma Community. Here’s the design

To see it in its entirety, please visit Dribbble Dipa Inhouse. You can also provide feedback regarding the designs that have been made.

I made this exploration design for approximately one week with the research, design, and stakeholder feedback phases.

Let’s see my favorite part! 🚀

I made a brutalism style with a mix of 3D components for each coin from the crypto wallet. Looks unique and suitable when this style is combined with 3D.

Thanks for reading this article — hopefully, it can help and keep learning!👋

Let’s Connect :
Dribbble | Website | Medium | Instagram

--

--

Ikhwata Andy
Dipa Inhouse

Hello, You can call me Andy. Currently working on Dipa Inhouse as UI/UX Designer👋