Preface
Neubrutalism is making waves in the web design world, offering a raw, unapologetic aesthetic that stands in stark contrast to the sleek, minimalist trends we’ve seen dominating the internet. If you’re looking to create a website that’s bold, memorable, and distinctly modern, Neubrutalism might be the perfect style for you. And with the flexibility of WordPress and the powerful customization options of WP Astra, achieving this look is more accessible than you might think. Let’s dive into how you can harness the power of Neubrutalism using WP Astra. You will learn how to make your website stand out from the crowd.
What is Neubrutalism?
Neubrutalism is a design trend characterized by its rejection of conventional aesthetics, embracing a raw, almost unfinished look. Think stark contrasts, default fonts ([/how-to-choose-the-right-fonts-for-your-website/]), visible grids, and a general sense of functionality over pure aesthetics. It’s a digital adaptation of Brutalist architecture, known for its use of raw concrete and imposing structures.
Info: Neubrutalism is an updated version of Brutalism. The updated version is characterized by a combination of Brutalism and modern web design principles.
Key characteristics of Neubrutalism include:
- Bold Typography: Often using default or system fonts, large and unapologetic.
- High Contrast: Strong color combinations, often black and white or other contrasting hues.
- Basic Shapes: Geometric shapes and patterns used in a straightforward manner.
- Visible Grids: Exposing the underlying structure of the design.
- Lack of Ornamentation: Minimal use of embellishments or decorative elements.
- Deliberate Imperfections: Embracing a raw, unfinished aesthetic with visible flaws.
Why Choose Neubrutalism?
While it might not be for everyone, Neubrutalism offers several compelling advantages:
- Uniqueness: In a sea of similar-looking websites, Neubrutalism makes yours stand out.
- Memorable: Its distinctive style is more likely to leave a lasting impression on visitors.
- Functionality: Prioritizes usability and clear communication.
- Authenticity: Conveys a sense of honesty and transparency.
Getting Started with WP Astra
WP Astra (/go/astra-pro) is a popular WordPress theme known for its speed, flexibility, and extensive customization options. It’s an excellent choice for implementing Neubrutalism because it allows you to control every aspect of your site’s design without being locked into pre-designed templates.
Installing and Setting Up Astra
- Install Astra: From your WordPress dashboard, go to Appearance > Themes > Add New and search for ‘Astra’. Install and activate the theme.
- Astra Options: Navigate to Appearance > Astra Options to explore the theme’s customization settings.
Hint: If you do not know how to install a theme you can look it up here: How to Install Astra Theme
Implementing Neubrutalism with Astra
Here’s how to achieve the Neubrutalist look using WP Astra:
1. Typography
- Choose System Fonts: Go to Appearance > Customize > Global > Typography. Opt for system fonts like Arial, Helvetica, or Times New Roman for a classic Neubrutalist feel.
body {
font-family: Arial, sans-serif; /* Example system font */
font-size: 16px;
font-weight: normal;
line-height: 1.5;
}
- Bold Text: Use bold text liberally to emphasize key information. You can do this directly within your content or by using CSS to style specific elements:
h1, h2, h3 {
font-weight: bold;
}
- Large Font Sizes: Don’t be afraid to use larger font sizes for headings and important text elements. This adds to the in-your-face aesthetic of Neubrutalism.
2. Color Palette
- High Contrast: Select a high-contrast color palette. Black and white is a classic choice, but you can also experiment with other bold combinations like blue and yellow or green and red. Use the WordPress customizer under Appearance > Customize > Global > Colors to set your base colors.
body {
background-color: #FFFFFF; /* White */
color: #000000; /* Black */
}
a {
color: #0000FF; /* Blue for links */
}
- Limited Colors: Stick to a limited color palette to maintain a sense of visual consistency. Avoid using too many different colors, which can detract from the overall impact.
3. Layout and Structure
- Visible Grids: While Astra doesn’t explicitly offer visible gridlines, you can achieve a similar effect by using borders and spacing to create a sense of structure.
Employ Elementor and its grid system: Elementor (/go/elementor-pro), which is compatible with Astra, offers a powerful grid system. Enable developer settings within Elementor, then set custom paddings that reflect how you desire your grid to behave.
- Simple Layouts: Keep your layouts simple and straightforward. Avoid complex designs with too many elements. Focus on clear hierarchy and easy navigation.
4. Elements and Styling
- Basic Shapes: Incorporate basic geometric shapes like rectangles, circles, and triangles into your design. Use these shapes to create buttons, dividers, and other visual elements.
You achieve basic forms best with HTML and CSS: For example, you can make a button with solely HTML and CSS. To get going, add the following HTML code to your existing Astra page, that you have installed via Elementor (/go/elementor-pro).
Click me
After this, you can add some style to the button via CSS:
.neubrutalist-button {
background-color: #fff; /* White background */
color: #000; /* Black text */
padding: 10px 20px; /* Padding around the text */
border: 2px solid #000; /* Black border */
text-decoration: none; /* Remove underline from the link */
font-weight: bold; /* Bold text */
display: inline-block; /* Make it behave like a block element */
}
.neubrutalist-button:hover {
background-color: #000; /* Black background on hover */
color: #fff; /* White text on hover */
}
- Minimal Ornamentation: Resist the urge to add unnecessary embellishments or decorative elements. Let the raw functionality of your design speak for itself.
- Borders and Outlines: Use borders and outlines to define elements and create a sense of separation. This is especially effective for buttons, forms, and image containers.
5. Content Presentation
- Clear Hierarchy: Use clear headings and subheadings to structure your content and make it easy to scan. Employ proper HTML heading tags (H1, H2, H3, etc.) to establish a clear hierarchy.
- Whitespace: Utilize whitespace effectively to create visual breathing room and prevent your design from feeling cluttered. Whitespace helps to improve readability and focus attention on key elements.
6. Images and Media
- Raw and Unfiltered: If you choose to use images, opt for raw, unfiltered photos that convey a sense of authenticity. Avoid overly polished or staged images.
- Limited Use: Neubrutalism often favors minimal use of images. Consider using text and basic shapes as the primary visual elements.
Examples and Inspiration
To get a better sense of Neubrutalism in action, here are some websites that showcase the style effectively:
- brutalism.directory: A comprehensive directory of Brutalist websites (https://brutalism.directory/).
- Are.na: A visual platform with a strong Neubrutalist aesthetic (https://www.are.na/).
- Miro: A collaborative whiteboard platform with a clean and functional design (https://miro.com/).
Tools and Resources
- WordPress: The foundation for your Neubrutalist website (https://wordpress.org/).
- WP Astra: The theme that provides the flexibility and customization you need (/go/astra-pro).
- Elementor: A page builder for advanced customization scenarios (/go/elementor-pro).
Tips and Best Practices
- Prioritize Usability: While Neubrutalism embraces a raw aesthetic, it’s important to ensure that your website remains user-friendly. Don’t sacrifice usability for the sake of style.
- Test on Different Devices: Make sure your Neubrutalist website looks good and functions properly on different devices and screen sizes. Responsiveness is crucial for a positive user experience.
- Get Feedback: Ask for feedback from other designers and users to identify areas for improvement. Fresh perspectives can help you refine your design and make it more effective.
Potential Challenges
- User Experience: Can be difficult to implement; a poor implementation can lead to confusing navigation and poor usability.
- Accessibility: High contrast can cause accessibility issues if implemented the wrong way.
- Aesthetic Appeal: Limited Aesthetic appeal can deter some users, if your website is to appeal to the masses.
Conclusion
Neubrutalism offers a refreshing alternative to mainstream web design trends. With its emphasis on functionality, authenticity, and bold aesthetics, it’s a style that can help your website stand out from the crowd. By using WordPress and WP Astra, you can easily implement Neubrutalism and create a website that’s both visually striking and highly effective. So, embrace the raw, the unfinished, and the unapologetic – and start making websites that make a statement!
