Lecture 4: The Static and Kinetic Screen

Relating principles of static composition and visual hierarchy to contemporary definitions of interactive design.

Static: Is where things in print or on screen don’t move. It might take us time to read or scan an image, but within a reproduction, elements don’t move.

Kinetic: Relating to change over time or motion. When you hear kinetic in a discussion of media or interactive design, elements moving on screen or the change over time of an interactive product is normally the focus.

Andrew Polaine: Who is he?

Polaine describes himself as “an experienced designer focusing on playful interactions and service design research” within this idea or field of interactive concept development.

Interactivity through the concept of ‘play’

Play > Experience > Design

Polaine’s definition of interaction/interactive design:

“It is a combination of how the elements function:

  • What they do (What does your interactive do, the purpose and function of an interactive)
  • What they look like (What does your interactive look like)
  • What they look like they do (What does your interactive look like it should do)
  • The experience of using them (The experience of actually sitting down and using or the there and now of and interactive)

In many cases it’s about making complicated things easier and more pleasurable to use.”

What these considerations suggest is that interactive products or artefacts are complex and demand complexity in the design processes involved in producing them. Demanding that we combine an understanding of many design disciplines into our own personal design capacities.

Polaine, Andrew. “Any Polaine.” Desktop 251 (2009): 30-31

Considering Static Composition

The user’s gaze is still an integral element of usability especially with screen based media.

  • User = All senses and capacities, especially sight.
  • User = View + Use

The composition of graphic form is in fact user interface and interactive that requires consideration to improve usability and the relay of information.

Visual Hierarchy

In a static graphic sense, it’s the consideration and treatment of graphic or visual forms on a page; the screen. It is not only the treatment though, it’s also the relationship and effect these elements or forms have on each other.

Visual Hierarchy should always be considered as it is a vital part of the craft of being a graphic designer.

The principles of relaying information are shared by all fields: Graphic Design > Information Design > Interactive Design.

Considering points of interest and levels of visual information:

Composition is visual ecology:

  • A point of interest should not overtake a whole composition
  • A point of interest should not be too weak and hidden
  • No right or wrong, only appropriateness to purpose or brief.

Methods in dealing with Visual Hierarchy

Point of interest – The focus or draw card of a composition, usually the most important element of a composition. The entry or starting point of reading or digesting the visual information in a layout. Leader of visual hierarchy.

Contrast – Is the difference between visual elements within a work. The relative difference between light and dark areas.

Tone – The relative lightness or darkness of colour. Used whilst considering contrast. It helps establish contrast. Tone or the difference in tone is used to strengthen or weaken a point of interest.

Scale and weight – The relative size of graphic form; where the eye is lead through the composition via the dominants of size possessed by graphic form or graphic forms. Closely related to perspective and depth.

Visual hierarchy can also be established via the use of colour.

Typography or the use of type – There are two main concerns:

  • Legibility – How clear the text is visually
  • Readability – The degree to which meaning of text is understandable, visually and conceptually. Readability is not legibility.