Liberty Enlightening the World

Liberty Enlightening the World
La Liberté éclairant le monde

Tuesday 10 May 2011

Design Principles

PLAYSTATION OFFICIAL MAGAZINE - AUSTRALIAThe 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.

No comments:

Post a Comment

Design and

Design and
Interactive Digital Media

Popular Posts