10 Brutalist Websites to Inspire Your Next Web Design Project
Table Of Content
Neo-Brutalism is like Brutalism, but with more interesting and unique parts added to it. It still keeps the plain look, but has some extra things going on. Don’t panic, these aren’t actually brutal images, more like images which hark back to an era before Instagram and SnapChat filters. Raw code, like most aspects of brutalism, drags things back to a cruder form. One might argue that these categories are limiting, but in my opinion, they will allow each style to flourish on its own and develop further.
Tour a Tropical Brutalist Waterfront Home in Sydney - Architectural Digest
Tour a Tropical Brutalist Waterfront Home in Sydney.
Posted: Mon, 10 Oct 2022 07:00:00 GMT [source]
All rights to the fonts posted on the site belong to their respective owners. We do not sell fonts and, in most cases…
You’d have to agree that most conventional websites today all look the same. One of the reasons for this is that they are all copying each other and following the same popular trends. There is nothing wrong with that, but this means that it becomes more and more difficult for individual websites to stand out. So this reaction could be fuelled by what I would refer to as a punk attitude of complete disregard to conventional rules to make a statement.
Folder Studio
Why the Brutalist architecture style in the Twin Cities is literally painful - Star Tribune
Why the Brutalist architecture style in the Twin Cities is literally painful.
Posted: Fri, 01 Mar 2019 08:00:00 GMT [source]
Let us know if you're a freelance designer (or not) so we can share the most relevant content for you. However, it’s important to remember that deviating from established design patterns can frustrate user expectations, and drive away business. Brutalist web design often includes repeating shapes or patterns, used in a modular or grid-based way, channeling the characteristic geometry of Brutalist architecture. Brutalism typically uses jarring, clashing color pairings to make a bold, shocking statements. Anything you think you learned about color theory in web design is now thrown out the window. However, some of the key features that it often includes are repetitive, geometrical patterns; honesty about materials; social vision; and integrity of function.
brutalist websites
Another notable quality about this design choice is how individual sections are visually separated from each other—the background color is used as a section divider. By nature of being rough and unrefined, graphics in brutalist web design are often minimalistic. Web designers intentionally use simple graphics (such as objects with elementary shapes like ovals and rectangles) to focus more attention on content. High contrast is used to communicate important information at a glance and convey a sense of raw energy. Interestingly, it's possible to achieve this goal using only one color, which is why many brutalist websites experiment with monochromatic color schemes. Likewise, brutalist websites tend to be more focused on the functionality of what the website offers, rather than “distracting” the user with aesthetics or fancy visual interactions.
The background image is magnified and refracted through each translucent shape. It’s like one of those experimental video games without a point — it’s purely about the experience. Some of the most intriguing visual art leaves us scratching our head. (That’s not just me, right?) Ponto Design Studio’s homepage, for example, has an amorphous background image. You can pan through the image with the geometrically-shaped cursor that can be transformed into a sphere, an X, and a cub, toggled with a single click. Aurora is a unique, modern and professional design kit that can help you create a brilliant brutalism website with ease.
Only hyperlinks and buttons respond to clicks.
After you spend some time playing around the site, you might have trouble finding some basic interface elements, such as the logo and the links. On most sites, they are usually displayed in the header or footer, but here, the more you play, the more messed up their order will be. Inner pages look far tamer in comparison to the homepage, but they’re still unmistakably very brutalist.
Brutal System Fonts
The screen is split into several large, horizontal sections, each containing the names of his projects written in bold, all-caps letters. As you hover over rows, video previews of featured works appear while the letters in rows become outlined. Basic information about Hesse is displayed in the red bar placed at the top of the screen, whereas the links such as “About”, “Work”, “Shop”, etc. can be found in the bottom red bar.
When the content is ready, the triangles spin from the right to the left, with the ones containing menu elements overlapping the empty ones. Upon clicking on menu links, their content will appear on the right-hand side of the page. Again, everything is simple, easy to understand, intuitive, yet interesting to explore. Han Kjøbenhavn’s website is wildly brutalist and it mimics the appearance of a Microsoft Excel sheet.
Immersive Digital Stories Through Technology
This is an excellent idea if you have a lot of design elements going on and don't want to overwhelm your users. Kelly is a Vietnamese graphic designer currently residing in New York City. She believes that a balanced connection between concept and audience is what establishes a strong brand. Her graphic design website communicates the passion she has for her profession. Every element of the website, be it a text or imagery, expresses personality and immerses visitors in a visual raw, yet sophisticated journey.
On some sites, there is no navigation at all, and their layouts often make zero sense. There are no clear rules, which results in the creation of authentic designs. And finally, one of the world’s most popular social platforms, Instagram, is also designed in the style of brutalism. However, that was done so subtly, that most people have probably missed out on its brutalist trait.
Especially because people who champion them are from very different crowds. To illustrate these styles I will provide one example from each and maybe you can make up your own mind about them. This site was created without any assistance from a Generative AI.
And, if you’re a fellow foodie, be sure to follow Sharon’s restaurant posts on Instagram. Beneath speakers broadcasting cicada, chef Megan Moore sent out plates of delicate morrell and white asparagus, or tender artichoke with black garlic nestled in a sleeve of dandelion. Another notable example of Brutalism in California is San Francisco’s, City Hall. The City Hall is an imposing structure that dominates the city’s skyline. With its massive concrete forms, soaring columns, and expansive public spaces, the City Hall is a testament to the power of Brutalism and its ability to create buildings that are both grand and austere. One of the most famous examples of Brutalism in California is the Salk Institute.
For example, on large screens this section has a pull quote with a washed blue background, a different text font, and an emoji! While this design employs decoration, it's not distracting (though the pull quote is distracting on a small screen, which is why it's not shown to those visitors). To break this core and enduring feature of the web requires a confluence of design and programming (such feats would be better applied to smoothing the experience of going back after a form submission). It also requires either ignorance of (or contempt for) the site visitor, as the back button is often their only means of undoing an errant click. Further, clickable areas of a page that are not obviously hyperlinks or buttons can confuse the visitor, causing them to perform unwanted actions or miss links entirely. Most websites exist to deliver content for you to consume, either words (such as on this site), or images, such as on Pinterest.
Comments
Post a Comment