Creating a Brutalist Portfolio Website: A 5-Step Guide

While some examples can push the definition of brutalism to the very extremes, many more-conservative examples can produce some delightful and satisfying results.

In this article, we are going to explore some examples of well-executed brutalist portfolio websites, and look at how you can implement elements from the trend into your own portfolio design.

The first consideration to make is how extreme of an example you would like to create within the brutalist idea. There are examples ranging from brutalism bordering on minimalism, as below…

…to the more literal and over-exuberant examples such as…

You could consider somewhere in-between to be an a good balance to aim for when designing a functional brutalist portfolio website.

It’s important to consider the platform or medium you wish to use for creating your brutalist portfolio website. It may be that you may have sufficient web development knowledge whereby you want to jump right in and start coding, or to start with one of our free WordPress portfolio themes. 

Designers with less experience developing may like to start with a more basic template, allowing for a more visual approach to building the website.

If you find yourself somewhere in between the two – perhaps you have adequate knowledge of code, or are looking to complete your brutalist portfolio website in a shorter span of time – you may like to use a theme as a starting point. A minimal theme such as Ocularus by CocoBasic would serve as an excellent base to build upon and customize with brutalist design elements.

Study the aspects of the brutalism which form the basis of the web design trend. The unforgiving style within brutalist designs involves emphatic text, sharp lines, oversized elements, and unique layout ideas. It is important to consider each feature of brutalism and how it can be applied to your portfolio website, before then deciding which of these you would like to form as part of your design, and to what extent.

There are a number of typographic elements in brutalism which form the design trend.

These include, but are not limited to, mono typefaces, oversized type, overlapping text, purposely ill-formatted text, and perspective text.

Brutalism is renowned for its bold and obtrusive use of color, often applied irresponsibly at the cost of usability and accessibility. Harsh gradients, bright default colors, and an abundance of royal blue, are often applied.

In an effort to retain usability, it’s important to use these sparingly, and primarily for visual effect as opposed to important written content.

Proportion is a key element of the brutalist design trend. It often involves discarding much of the sense of size consistency, and introducing very large and very small elements in order to create an imposing visual impact. This is often applied through large title typography, imagery, and shapes.

Brutalism is highly visual, and as such, it’s important to ensure it has an impact of the visitor. Along with typography, color, and proportion, numerous styles and directions can be applied which are not always required to be garish or over-the-top.

Toward the more muted end of the spectrum, this simple portfolio is a prime example, implementing more considered aspects of brutalism, while maintaining the visual impact associated with the trend. It uses a clear two-tone color scheme for the intro overlay and background area which is both visually impactful and easily legible.

Drawing inspiration is a key aspect of any web design process. By considering the design decisions made in other brutalist portfolio websites, it can help to work towards planning aspects and elements for use in your own design.

Sites such as Brutalist Websites and One Page Love are great places to look when building a moodboard or collecting inspiration for your website design.

The variety in which brutalism is applied by designers and developers is incredibly diverse – it’s rare to see two examples which look similar. This in itself is a fascinating aspect of the design trend; it truly represents a blank canvas and opens the door for some highly unique and creative results. The reduction, somewhat, of any sort of strict design rules or guidelines is seemingly what has allowed brutalism to develop as a trend in web design, particularly for directing a highly visual website such as a portfolio.

Get building! Enjoy the freedom that brutalism allows, and be creative with the aspects within the design trend. Try new colors, experiment with bold typography and sizing, and play with layout and overlapping elements.

Keep one eye on usability while exploring the design trend to the fullest where applicable. It should serve as a refreshing design exercise and allow you to truly push the envelope in terms of what can be achieved from a visual standpoint with a portfolio website.

Check out Envato’s Mid-Year trend review for 2020 to discover what the experts expected and the ones they didn’t.