Tuesday, January 20, 2009

Olivia, Claudia, Annika, Margarita, Rebeca

Alignment is used to connect elements together. Alignment also creates a sense of unity and cohesion, which helps with the overall aesthetics of the design. Alignment can also help to dictate where the eye should be led, leading a person through the design. Alignment generally describes column or row however there are more complex ways to align elements, such as alignment paths that are on angles.


Highlighting is meant to make elements in your design stand out. No more than 10% of a design should be highlighted, it can be distracting. The highlighting techniques should be used sparingly throughout.
  • Bold- good to use, it does not add noise to design
  • Italics- does not add noise but less detectable and legible
  • Underlining- adds noise, use minimally
  • Typeface- use uppercase for short word sequences (different fonts are hard to pull of aesthetically)
  • Colour- use with other techniques, make sure to use desaturated colours that are very distinct
  • Inversing- works with text, adds noise
  • Blinking- use for critical information that requires immediate response, turn off blinking shortly after because it is not very legible

Signal-to-noise ratio is the balance of necessary and unnecessary information in a display. The highest possible signal-to-noise ratio (more signal and less noise) is preferred in design. Signal is valuable information and noise is unrelated or irrelevant information. High signal-to-noise ratio will communicate information clearly. To minimize noise one should keep things simple and removing all unnessesary elements (ex. Thick lines, patterns, unnessesary picture)
ABOVE is the example of lower signal-to-noise ratio (noise/pictures are not necessary).


ABOVE is a higher signal-to-noise ratio (very simple and to the point).


Layering is the process of organizing information into related groupings in order to manage complexity and reinforce relationships in the information. There are two basic types of layering: two-dimensional and three-dimensional.
ABOVE: Two-Dimensional Layering - Linear
ABOVE: Two-Dimensional Layering - Non Linear - Hierarchical

ABOVE: Two-Dimensional Layering - Non Linear - Parallel

ABOVE: Two-Dimensional Layering - Non Linear - Web

ABOVE: Three-Dimensional Layering - Opaque

ABOVE: Three-Dimensional Layering - Transparent

1 comment: