Anti-design web design: breaking rules on purpose, not by accident
Anti-design deliberately breaks the conventions of polished web design: clashing type, crowded or collapsing layouts, harsh colour, things that look unfinished. Done with intent it reads as confident and personal. The test that separates it from a broken page is simple: the visitor can still read it, navigate it and do the thing they came for.
Where the anti-design movement comes from
Rule-breaking graphic design is older than the web. Dada posters mixed typefaces and sizes in a single line, punk flyers and zines were photocopied, cut and pasted, and in the 1990s magazines such as Ray Gun, art-directed by David Carson, set text that overlapped, ran off the page or was barely legible. Each was a reaction against a tidy mainstream style.
On the web the same reaction came against templated sites that all share rounded cards, gentle gradients and centred hero sections. Anti-design web design answers that sameness with friction: system fonts set huge, default blue links, overlapping elements, garish colour, cursor tricks. It overlaps with brutalist web design, but brutalism is about exposing structure honestly, while anti-design is about disrupting expectations.
The rules it breaks on purpose
- Harmony of type. Several faces at once, or one face at sizes that clash, stretched, outlined or set vertically.
- The tidy grid. Elements overlap, collide, rotate or sit off the column lines.
- Pleasant colour. Acid greens, pure RGB primaries, colours that vibrate against each other.
- Polish. Visible borders, default form controls, unstyled HTML, low-resolution or scanned images.
- Whitespace. Pages crammed edge to edge, or the opposite: a single word in an empty screen.
The rules it still keeps
This is the part that makes ugly websites on purpose different from careless ones. Anti-design breaks visual conventions; it can't break functional ones without losing the visitor.
| Area | Deliberate | Accidental |
|---|---|---|
| Body text | Plain, readable, 16px or more; the chaos is in headlines and imagery | Body text in the novelty face, overlapping an image |
| Contrast | Clashing colours kept away from text, or text that still reaches 4.5:1 | Pink on orange paragraphs nobody can read |
| Navigation | Strange-looking but where people expect it, with plain labels | Hidden menus, labels as puns, a different position on each page |
| Links and buttons | Obviously clickable, even if ugly | Clickable text that looks the same as everything else |
| Structure | Real headings in a logical order underneath the visual noise | Headings chosen for size, not meaning |
| Motion | Used once for effect, and off for reduced-motion users | Constant jitter, marquees and cursor trails |
| Phones | The disorder is redesigned for a narrow screen | Overlaps that cover content at 375px |
WCAG gives a few hard edges here. Normal-size text needs at least 4.5:1 contrast, large text 3:1. Content shouldn't flash more than three times in any one second, which matters for glitch effects. And the reading and focus order must still make sense when the visual layout scrambles positions, so keep the HTML in a sensible order and let CSS do the disruption.
Rule-breaking web design that works: a method
- Pick one or two rules to break. A page that breaks type harmony and the grid at once can still work; breaking everything reads as no design at all.
- Start from a working page. Write the content, headings and navigation plainly first, then distort the presentation.
- Protect the task zone. Prices, dates, forms and buttons get the calmest treatment on the page.
- Test with a keyboard and a screen reader. If the tab order jumps around the screen, the source order is wrong.
- Check at phone width. Overlaps and rotated text usually need a simpler arrangement below about 600px.
Who it suits
Anti-design suits audiences who read rule-breaking as a signal of taste: record labels, fashion and streetwear, art schools, design studios, festivals, independent magazines and personal sites of artists. It's a poor match for anywhere people arrive anxious or in a hurry, such as clinics, councils, banks or emergency trades. The style also dates quickly, so expect to redesign sooner than with a calmer approach.
Anti-design and Anticode
Anticode has no anti-design system as such. The closest is Brutalist: Archivo in condensed, uppercase headlines at weight 900, 2px black rules, hard offset shadows on cards and buttons, square corners and a concrete-grey ground. It brings the loudness while keeping structure orderly. The Static Bloom Records template, an indie label in a brutalist zine style, shows how far that can be pushed in an app build.
Whatever the style, the design gate still applies before publishing: a page language, a phone viewport, visible keyboard focus, reduced-motion support and alt text, with no placeholder text or empty links (it doesn't test whether outside URLs work). Those are exactly the rules anti-design should keep, so the gate doesn't fight the style; it fights the accidents.
Questions people ask
Is anti-design the same as brutalism?
They overlap. Brutalism exposes structure with raw, plain elements; anti-design sets out to disrupt expectations, often with clashing type and colour.
Can an anti-design website be accessible?
Yes, if the disruption stays visual. Readable body text, sufficient contrast, logical source order, visible focus and no rapid flashing keep it usable.
Why would a brand want an ugly website?
To stand apart from polished, interchangeable sites and to signal independence. It works when the audience shares that taste.