Maximalist Web Design Examples

What are these maximalist web design examples?

They are 10 ready-made, animated web elements built around maximalist web design: loud, layered, pattern-heavy web elements: collage, clashing prints, giant type, op art and chrome, all moving and all customizable. Each one is a small ExodeUI file with its own motion, a hover response, a tap action and editable keyframes. Every colour, label, number and motion setting is a runtime input, so you can restyle it or feed it live data without editing the file.

All 10 maximalism elements

How to add a maximalism element to your site

1. Open an element above and set its text, colours and motion, or keep the defaults.
2. Download the .bexode file (or the customized .exode) and put it in your public folder.
3. Install the runtime with npm i exodeui.
4. Render it with ExodeUICanvas and pass your text, numbers and colours as inputs.

import { ExodeUICanvas } from 'exodeui';

export function CollageHeroSection({ data }) {
  return (
    <ExodeUICanvas
      src="/ui-trends/files/maximalism/01-collage-hero.bexode"
      autoPlay
      style={{ width: 600, height: 400 }}
      inputs={{
        headline: data.headline,
        kicker: data.kicker,
        // every colour is an input too, for example a brand accent
        ...data.theme
      }}
    />
  );
}

Frequently asked questions

What is maximalist web design?

Maximalism piles on colour, pattern, texture and type instead of stripping them back. It works for fashion, music, events and brands that want to feel loud and human, as long as the main message and the call to action stay easy to find.

How do I keep a maximalist page usable?

Keep one clear headline and one main action per section, keep text contrast high, and respect reduced-motion settings. Every element here has its speed as an input, so you can calm it down or stop it.

Can I swap the colours to my brand palette?

Yes. Every colour is a runtime input, and colour changes cross-fade, so you can even switch palettes live.

How do I customize these elements at runtime?

Every colour, label, number and motion setting is a state machine input. Pass values through the inputs prop in React (or the matching prop in Vue and React Native) and the element updates while it runs.

What is the difference between .exode and .bexode?

.exode is the editable JSON file you open in ExodeUI. .bexode is the compiled file you ship with a runtime; it is much smaller and keeps the same inputs and motion.

More from ExodeUI