Web design styles: 12 visual languages and how to choose
A curated map of web design styles, from Swiss structure and flat interfaces to the vernacular web, glassmorphism and web brutalism.
What qualifies
This guide includes a style only when it produces a recognisable visual grammar on the web, has a traceable source or lineage, and can be distinguished from neighbouring entries. It is a route into the dictionary, not a list of current trends. the five-entry standard
What this guide leaves out
Responsive design and dark mode matter, but they are a method and a colour mode. Because either can carry many different styles, IndexStyle records them as supporting terms rather than independent styles.
Supporting terms: Responsive Web Design / Dark Mode
Structure before surface
Use these when hierarchy, repeatability and scanning are the primary problem. Their differences lie in how openly the grid and interface system should appear.
001
Swiss
スイス・スタイル / 1950s–
Puts order front and center and makes the information itself the protagonist.
Visual cues: Strict grid / Sans-serif type / Asymmetry / Objective photography
042
Bento Grid
ベントーグリッド / 2020s
Divides different kinds of information into independent boxes, giving the whole picture at a glance.
Visual cues: Cards large and small / Aligned gutters / One-screen summary / Modules
032
Flat Design / Vector Minimalism
フラットデザイン / ベクターミニマリズム / 2010s–
Reduces information to plain planes and color, portable across screens and media.
Visual cues: Uniform planes / Simple shapes / Few shadows / Clear color
074
Corporate Memphis
コーポレート・メンフィス / mid-2010s–
Explains digital services as safe and friendly through simplified figures, geometry and soft color.
Visual cues: Exaggerated body ratios / Flat color / Geometric plants / White grounds
Depth, material and interface surface
These styles give controls and panels a material metaphor. Choose by the amount of realism, translucency or softness the product can support without losing clarity.
024
Skeuomorphism
スキューモーフィズム / 2000s–2010s
Borrows cues from real materials and tools to make unknown interactions understandable. It names the principle, so Aqua and Brushed Metal are what the principle looked like when one company shipped it.
Visual cues: Leather, metal, paper / Dimensional shadows / Real-world metaphors / Fine textures
026
Glassmorphism
グラスモーフィズム / 2020s
Shows depth and hierarchy through translucent layers, floating information lightly.
Visual cues: Background blur / Translucency / Thin white borders / Color bleed
025
Neumorphism
ニューモーフィズム / late 2010s–
Makes background and controls one material, showing relief through soft shadow alone.
Visual cues: Same-color surfaces / Two-direction shadows / Rounded parts / Low contrast
073
Frutiger Aero
フルティガー・エアロ / mid-2000s–early 2010s
Shows glossy digital technology as an approachable future by tying it to blue sky, water, grass and bubbles. The gloss is the same as Aqua's, but Aqua is the texture of a control and this is the world of the wallpaper and the advert.
Visual cues: Blue sky and grass / Transparent bubbles / Glossy UI / Humanist type
The web as a culture of its own
These styles come from the web's own technical limits, communities and reactions. They are useful when the medium itself should be visible rather than polished away.
021
Web 1.0
ウェブ1.0 / 1990s
Reuses the naivety of the constrained early web as directness and charm. In the 2020s it came back as a movement to take the personal site back, gathering under names like Neocities and Yesterweb.
Visual cues: Blue links / Low-res GIFs / System fonts / Plain buttons
023
Web 2.0 Gloss
ウェブ2.0グロス / 2000s
Explains digital interaction as something touchable through gloss, roundness and reflection. It names what the web made when it tried to reproduce the texture of Aqua with images and CSS.
Visual cues: Glossy buttons / Strong gradients / Reflections / Rounded corners
008
Web Brutalism
ウェブ・ブルータリズム / 2014–
Puts the browser's default rendering straight on screen and refuses the finished look of templates. The bare structure of the HTML becomes the style itself.
Visual cues: Default headings and links / Blue underlined links / Extreme jumps in size / Rules and white space without ornament
031
Neubrutalism
ニューブルータリズム / 2010s–
Rebels warmly against the over-polished web with thick borders and blunt color.
Visual cues: Thick black borders / Hard shadows / Vivid color / Flat components