Digital native · 2015–present · Global / networked
Isometric Tech Illustration
Also known as Isometric illustration, Isometric web illustration, SaaS isometric
Small diorama worlds of devices, servers, desks, factories and city blocks drawn on one isometric grid (about 30 degrees; pixel work uses a 2:1 step, about 26.6 degrees) with no vanishing point. Each volume has one flat tone for its top and two for its sides, on a white or pale ground, so it reads as three-dimensional without lighting or rendering. Used for hero images, onboarding, icons and explainers, it gave flat design back its depth while keeping its clean vector surfaces and its technological optimism.
Make something in this style Get advice in this style Mix it with another style
01
How it works
- Draw every object on one isometric grid: verticals stay vertical, the other two axes run at the same angle, and there is no vanishing point.
- Give each volume three flat tones, lightest on top and two darker sides, instead of shading or lighting.
- Build a self-contained diorama on a tile, platform or floating island and leave the ground around it empty.
- Explain a system by connecting its parts with pipes, cables, arrows or lines of data across the grid.
- Keep human figures small and generic so the devices, screens and buildings carry the story.
- Set the type flat and frontal beside the drawing, in a clean sans-serif, so the picture alone holds the depth.
Product, agency and startup web design of the later 2010s, which took the parallel projection of engineering drawing and of isometric video games (Zaxxon and Knight Lore in the early 1980s, eBoy's pixel Pixoramas from 1998) into flat vector illustration. The start date is approximate.
02
Its design choices
From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.
- Layout & composition
- Space & hierarchy
- Typography
- Colour
- Form & shape
- Surface & texture
- Ornament
- Imagery
- Medium & production
- Tone & intent
- Avoids
- Naturalistic depiction, Whiplash line, Paper & letterpress bite, Painterly brushwork, Straight photography, Script, Abundant decoration, Collage & layering
Palette
-
#f4f6fb -
#5b6cff -
#3a44b8 -
#2bc4b4 -
#ffb648 -
#1f2440
Typefaces
-
Geometric and neo-grotesque web sans-serifs set flat beside the drawing, such as those of the SaaS interfaces the illustrations sit in
a working recommendation: the style has no settled typographic canon
-
Isometric lettering
letters drawn as blocks and sheared onto the same 30-degree planes as the objects, used for signs, logos and labels inside the scene
Known for
-
eBoy (founded 1997 by Kai Vermehr, Steffen Sauerteig and Svend Smital; based in Berlin and Los Angeles)
isometric pixel Pixoramas of cities such as Berlin, London, Tokyo and San Francisco, from 1998 (precedent)
-
Zaxxon (Sega, 1981 in Japan, 1982 internationally) and Knight Lore (Ultimate Play the Game, ZX Spectrum, 1984)
early isometric video games (precedent)
-
Monument Valley (ustwo games; lead designer and artist Ken Wong, 2014)
isometric puzzle game of impossible architecture (precedent and parallel)
-
Psych X86 agency website
hero section with isometric device illustrations at 30 degrees, cited in Nataly Birch's undated Speckyboy roundup of isometric illustration in web design
-
Optima Ninja (human characters mixed into isometric scenes spread down the landing page) and Laszczuk (an isometric background with focal points that lead the eye down the page, roughened by grunge textures and gradients), both cited in the same Speckyboy roundup
-
Imarc (web agency, Amesbury, Massachusetts)
isometric "behind the scenes" illustrations of its own offices, in a 2020 trend post where Lead Designer Kelly Freitas says such illustrations let users picture an environment without photography (Imarc blog, 7 April 2020)
03
Make something in this style
Say what you need, and Stylogeny’s image studio draws it from Isometric Tech Illustration’s design choices and checks it against them. It takes about a minute, and you get a link to share.
04
Where it comes from, and what it’s close to
Before it
The style it grew out of, and the styles it borrowed from.
After it
The styles that grew out of it.
No later style in the atlas grew out of it yet.
Alike in its design choices
Styles that make many of the same choices, related or not, besides those above.
05
Often taken for
Isometric Tech Illustration has no real works recorded yet, so these are its nearest styles by its choices alone, with the choices that tell them apart.
-
Low Poly Illustration
Low Poly Illustration is one of Isometric Tech Illustration’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Isometric Tech Illustration and Low Poly Illustration apart Choice Isometric Tech Illustration Low Poly Illustration Rectilinear defining — Naturalistic depiction avoids occasional Diagram & data characteristic — Angular & zigzag occasional defining Icons & pictograms characteristic — Both descend from Russian Constructivism in the family tree.
-
Material Design
Material Design is one of Isometric Tech Illustration’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Isometric Tech Illustration and Material Design apart Choice Isometric Tech Illustration Material Design Isolated object defining — Straight photography avoids characteristic Rectilinear defining occasional Modular grid occasional defining Flat vector illustration defining occasional Both descend from Flat Design in the family tree.
-
Schematic Transit Diagram (Beck Tube Map Idiom)
Schematic Transit Diagram is one of Isometric Tech Illustration’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Isometric Tech Illustration and Schematic Transit Diagram apart Choice Isometric Tech Illustration Schematic Transit Diagram Geometric primitives defining — Measured density — defining Isolated object defining — Humanist sans — defining Illusion of depth defining — No shared descent in the atlas: they reached these choices separately.
-
Flat Design
Flat Design is one of Isometric Tech Illustration’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Isometric Tech Illustration and Flat Design apart Choice Isometric Tech Illustration Flat Design Illusion of depth defining avoids Straight photography avoids occasional Analogous harmony characteristic — Pictogram occasional defining Diagram & data characteristic — Isometric Tech Illustration descends from Flat Design: a shared line, so the likeness is inherited.
— means the choice isn’t among the style’s recorded choices. Critics recorded each work’s choices with the styles’ descriptions in view, so this shows whether the descriptions hold together, not proof that they are right.
06
Combine it with
Styles Isometric Tech Illustration pairs well with or plays against, from the research. Each is worked out as a combination: which style gives the type, the colours and the forms.
- Bitmap & Pixel Graphics Pairs well · Draw the same isometric world in visible pixels for an eBoy-like, game-flavoured version.
- Claymorphism & Soft 3D Contrasts · Soft, inflated 3D forms against crisp axonometric blocks: the same toy worlds, rendered rather than projected.
- Isotype Pictorial Statistics Pairs well · Borrow Isotype's counted pictograms to turn a diorama into an honest explainer of quantities.
- Low Poly Illustration Contrasts · Faceted meshes with perspective against parallel-projected boxes in three flat tones.
- Corporate Memphis Pairs well · Its rubbery flat figures often stand inside isometric scenes on the same landing page; keep them small so the grid still rules.
- Indie Pixel Art Revival Contrasts · Clean, front-lit, rational SaaS geometry against moody, side-on, nostalgic landscapes built from visible pixels.
- Isometric Pixel Art Contrasts · Same tilted projection, opposite temper: sparse vector SaaS diagrams on white against a crammed, ironic pixel city.
07
Sources
- https://en.wikipedia.org/wiki/Isometric_projection
- https://en.wikipedia.org/wiki/Isometric_video_game_graphics
- https://en.wikipedia.org/wiki/EBoy
- https://en.wikipedia.org/wiki/Monument_Valley_(video_game)
- https://speckyboy.com/isometric-illustrations-web-design/
- https://www.imarc.com/blog/designs-you-should-know-about
How Stylogeny researches and checks a style: where the facts come from.