Aesthetics mat-153-web design 1

Using principles of design

use contrast to set interest

  • contrast is the juxtaposition of opposing elements by way of using different colors, tones, directions, lines, shapes, et cetera to show emphasis
    • opposite colors on color wheel
    • black and white, dark and light
    • horizontal, vertical, diagonal lines
    • thick. thin lines
    • hard, soft edges
    • serif, san-serif
    • texture/patterns, smooth surfaces

using font styles for emphasis

  • emphasis occurs when attention is focused on a single area within a design, to assist the viewer in understanding visually that this particular area is more important than other areas
  • use typographical hierarchy

aligning objects to achieve balance

  • balance occurs in a design when the elements as a whole have a feeling of equality of weight, attention or attraction
    • using grid-system can help
    • size of elements
    • number of elements
    • light vs dark elements

Using hyperlink styles to create a sense of unity

  • you can achieve unity through a pleasing balance of the elements of design like color, form, shape, and space
    • information in a logical structure
    • sense of order
  • how will links look and behave different from body text
    • navigation links
    • in-line text links
    • featured item links
    • buttons
    • icons
    • footer links
  • color/style should match layout
    • underline
    • background color
    • borders
    • type

Applying background patterns to create harmony

  • offers you a way to keep your design organized while also providing a really nice sense of harmony through the use of repeating elements
    • background
    • wrapper
    • other elements
  • subtle is better

Adding movement with scrolling and animation

  • the principle of movement refers to the suggestion of action or direction, on the web we can work with both implied and actual movement
  • implied: invisible path out eyes follow around a design
    • horizontal, vertical, curved, or diagonal direction lines
    • angled and curved shapes
    • rotated shapes
    • images
  • actual: scrolling and animation

Using border styles to add rhythm and repetition

  • occurs when one or more elements in a design are repeated often enough to create a visual rhythm
    • regular: with even intervals
    • progressive: elements grow or shrink
  • use variation combined with repetition or will be monotonous (like music, steady beat w/melody)
    • size
    • type
    • shape
    • color
    • border styles
      • create structure
      • define areas

Achieving proportion by scaling objects and text

  • define proportion as the visual relationship between two or more things in terms of their size, number, or degree, tiered dominance
  • scale objects and text
    • use heading tag
    • set increments (%s)
  • large image, small text
  • small text, large whitespace
  • flat design elements, dropshadowed

Simplifying by removing the unnecessary

  • deals with the elimination of any non-essential elements or details to reveal the essence of a form
  • keep only what is essential
  • create structure, order and hierarchy of info
  • lead viewer through layout
  • when finishing a design, ask:
    • did I leave out anything
    • is there anything I can remove

Using gradation to create perspective

  • gradation in design refers to any gradual change that occurs by a series of steps, degrees or stages, where there's an obvious visual shift from one state to another
  • size
  • color - from one hue to another
  • value - from dark to light or light to dark
  • direction - change in linear perspective, vertical to horizontal, horizontal to vertical or horizontal to diagonal, curved or wavy lines, angled perspectives like the side of a building or a path that cuts across
  • line - curve to angled, parallel to perpendicular, vertical to horizontal, a series of diagonals, long to short and thick to thin
  • shape - angular to round, one amorphic shape shift into another amorphic shape
  • texture - fading from opaque to transparant, rough to smooth, fibrous to chalky, prickly to spongy, or granular to liquid