Tag Archives: Visual Hierarchy

Week Four – Static and Kinetic Screen

This week’s topic: Static and Kinetic Screen Module One and Module Two

Summary: The on-screen designs now-a-days can be both static and kinetic, as it has evolved into an interactive medium through new developed and improved softwares and technologies. However, when designing interactive mediums, the considerations of static and print-based design still plays a significant role. With the composition of *visual elements creating visual hierarchy, information can be grouped and function collectively as a whole.

*Visual Elements:
a) Points of Interest
The focus point (yellow flower) within the picture draws audience attention the most due to its bright colour within the dull picture and also the shape of the flower is distinctive within the picture when compared with the lines above it.

Image Source:

b) Contrast
the contrast colour between black and white to define different area and space

c) Tone –

the tone of a colour: the lightness and darkness of a single colour

Image Source:


d) Scale and Weight –

the size of the graphic form to create illusion of foreground and background

e) Colour –
effective use of colour can help eye-tracking, which draws attention to different areas as well as distinctively separating different areas of information.
f) Typography

Example 1 : can be used to provide information in a readable and legible manner.

Image Source:


Example 2 : can also be used to aid visual graphics to express and provide information of the actual graphic.

Image Source:

Reflection: In this week’s lecture, Greg has continuously repeated the purpose and aim of interactive/interaction design and it is “to make complicated things easier and more pleasurable to use”. From Andy Polaine’s quote, it also states what interactive designers must do to make effective interactive products and that is, designers need to: firstly, understand the purpose of the actual complicated matter/thing and find assisting ways such as visuals and designs to express these matter/thing in order to help audience to more easily understand the complication through interactive products. In other words, designers need to keep up with changes in technologies and mediums, as well as incorporating experiences and inspirations into their designs in order to produce adequate ways for audiences in the functioning of interactive products.

Information Reference:

1. Hughes, Greg. “Module 1: Play, Experience Design.” Lecture. The Static and Kinetic Screen. 16 Mar. 2012. Web. 23 Mar. 2012.

2. Hughes, Greg. “Module 2: Using What You Know” Lecture. The Static and Kinetic Screen. 16 Mar. 2012. Web. 23 Mar. 2012.

Leave a comment

Posted by on 23/03/2012 in Reflections


Tags: , , , ,

Static and Kinetic Screen – Module Two

✄ – – – – Using What You Know!! – – – – 

The composition of visual elements : Visual Hierarchy.

1. Info-graphics (Guiding users through the use of information and content within visuals) –

  • Navigation
  • Mapping
  • Information Architecture
★ Graphic Design  ➔  Information Design  ➔  Interactive Design ★
a. Signage


b. Interactive Structures (Electronic Directories)












Image Source: 

2. Visual – Spatial Design (Gestalt Principles)

  • How information are grouped on the page
  • How visual elements on the page are interrelated
*so the information functions collectively as a whole, instead of being in bits and pieces.
a. Points of Interest
  • the focus point within the composition
  • works as the leader of the visual hierarchy
  • should not overtake the whole composition
  • should not be too weak or hidden
b. Contrast

  • the light and dark areas within the visual
  • the difference between visual elements within a work (i.e: the opposing nature)

c. Tone

  • The relative lightness and darkness of a colour
  • most often used to weaken or strengthen the point of interest
d. Scale and Weight
  • the relative size of the graphic form
  • it is closely related to the perspective and depth of the graphics
  • the dominance of size of graphic forms, which causes eye- tracking
  • An illusion of foreground and background of the graphics
e. Colour
  • effective use of colour can define areas and topics, as well as creating space between different informations.

f. Typography 

  • Legibility: How clear is the text visually? (the size of the text)
  • Readablilty:  The degree of the meaning of text is understandable, visually and conceptually. (user’s interpretation of the information)

Information Reference: Hughes, Greg. “Module 2: Using What You Know” Lecture. The Static and Kinetic Screen. 16 Mar. 2012. Web. 23 Mar. 2012.


Tags: , , , , ,