Design Principles

The Other Design Principles

Identifying Elements & Principles

Proximity (where objects get close to each other and suggest association)

Balance (where objects "balance each other out", suggesting stability)

Rhythm (also know as repetition)

Flow (see Gutenburg Diagram...it's where the eye carves a path across your layout)

Unity (a layout/design/ publication has a common colour/ typeface/ layout/ alignment)

Movement (where objects in a layout appear to be in motion; falling/ colliding/ pushing)

Contrast (colour, scale, style)

Design Elements: The building blocks

In the context of design, elements provide a common language for designers & artists. They are the smallest/ most fundamental concepts that define what we see in a layout. The following definitions are based on Wucius Wong's book: "Principles of 2-dimensional design".

Conceptual Elements

Point

The point is the simplest element of visual design. It is infinitely small and radiates from the centre just like the sun. It indicates position.

In a typical design the point could be represented by a face that stands-out in a photo or artwork that sits alone surrounded by white space.

Line

Line is defined by 2 or more points. Straight or curved. Infinitely thin. It indicates direction and position. In a typical design, the line could be formed by text columns or by the header or footer. Eye-lines in photos of people are a fairly common representation of "line".

Plane

Plane is a "line in motion". As a line "sweeps" it defines a plane. A plane has length and breadth but no thickness. Picture frames, pull-quotes, columns etc. all are representations of a plane. The blue-panel you're looking at is a plane.

Volume

Volume is the path of a plane in motion. In 2-dimensional design it is an illusion (portrayed by using perspective/vanishing points or in isometric form). Usually found in building illustrations/ 3d maps, artwork with extrusions, anything that explores the illusion of depth on a page or screen.

Visual Elements

When the conceptual elements are portrayed on the page or screen they might be done in pencil, ink, whiteboard marker on a whiteboard, finger in the sand, Tyre marks at the drag strip or pixels on a screen.

When this happens the visual element adopts further properties such as:

Shape

Any conceptual element that is drawn now has a shape.

Size

Similarly any element drawn would have a size which is measurable and can have a scale relative to the elements around it.

Colour

Any element drawn would now have a colour. In this case it's red then green then blue.

Texture

Any element drawn would have a texture derived from the substrate (paper, LCD screen, sand, concrete etc) or the pencil, ink, paint used to draw it.

Relational Elements

These describe the inter-relationships between shapes in a design. Some are suggested, like direction and position and some are felt like gravity and space.

Direction

The direction of an object is determined by its relationship to other objects, how it relates to the viewer and how it interacts with the framal reference (the container, e.g. the page or screen)

Position

An object's position is determined by where it sits in relation to the framal reference.

Space

A shape takes up space. Absence of shape liberates space and can be useful in focusing attention to other parts of the design. White space is a designer's best friend and an editor's enemy.

Gravity

Implied by the relationship between shapes and the relationship to the framal reference.

Tension & Tension Point

When objects get close to each other they create "tension". Generally to be avoided but can be used to good effect to imply chaos or inbalance.

Experienced designers often use tension in this deliberate way. Inexperienced designers arrive at this by accident. Tension points if used poorly create distractions and affect the layout hierarchy.