The thirteen visual design spectrums

Any given visual design sits on each of these spectrums. For every spectrum, either end is valid. There aren’t any “bad to good” spectrums like “unreadable to readable”.

Textual to graphical

An interface can be all text, all graphics, or somewhere in between. Graphics includes illustrations, icons, photos, etc.

Example: If you add icons to your button labels, the interface is more graphical.

Spacious to dense

You can add more or less space between elements. You might often hear an interface described as “information dense”, but this applies to all elements in an interface.

Example: If you separate sections with dividers as well as whitespace, the interface is more dense.

Constrained to varied

An interface can have a little variety, or a lot. This is a broad spectrum that affects all sorts of properties: e.g. colour, typeface, size, and shape.

Example: If you only use one text size the interface is constrained. If you use a large title size compared to the body text, it is more varied.

Flat to deep

An interface can have more or less apparent depth. This is often achieved with visual effects like drop-shadows. But it’s also related to how many layers your interface has, even if it’s visually flat.

Example: An interface with containers behind its content is deeper than one where the content sits directly on the background layer.

Less to more brightness contrast

The colours in an interface can vary from each other in terms of brightness by a little or by a lot.

Example: A pure black and white colour scheme has much more brightness contrast than an interface with shades of grey.

Sharp to rounded

Interfaces can appear sharp or rounded. This is related to, for example, rounded corners, shapes chosen, and typefaces.

Example: At interface with rounded corners and Comic Sans is more rounded than one with square corners and Helvetica.

Light to dark

Light and dark mode interfaces are common, but there are options between the two.

Example: A middle grey background colour is closer to dark than light.

Greyscale to coloured

It’s normal to design with only black and white, but colour is more common. The more colour you add to an interface, whether it’s varied colour or not, the more coloured the interface is.

Example: A monochrome interface that only uses shades of orange is coloured.

Muted to vibrant

The colours in a design can have different amounts of saturation. Generally the more saturation in the colour palette, the more energetic the design appears.

Example: A design that uses primary colours is more vibrant than one which uses dark, professional colours.

Abstract to realistic

The elements of an interface can appear to be realistic, or they can be abstract. Realistic elements might imitate physical materials, but this spectrum also covers elements like cartoon illustrations and photographs.

Example: Buttons with natural drop-shadows are usually more realistic than buttons without.

Plain to decorated

Decoration or ornament includes visually interesting flourishes that are not usually necessary to make the design work. You can have more of these decorations, or keep the design as a whole plain. Note that this also applies to elements like typography. A traditional serif typeface is more decorated than a modern sans-serif typeface.

Example: A website with abstract shapes dotted around the background is decorated.

Orderly to lively

The elements in your design can all align and be ordered very neatly, which suggests the structure of the page more. Or they can dance around the page and suggest that there is no structure, although usually there is.

Example: A page where elements alternate between the left and right of the page is more lively than one where they are all left-aligned.

Invisibly structured to visibly structured

Most designs have a structure that elements sit within. Like a grid. The design can show this structure more, or it can hide it more.

Example: A design where each container has a visible background box around its content is more visibly structured.