Design Principles

Multimedia Design Principles

1.White space – what it is and how to use it

2.Balance – how this affects the composition

3.Visual weight and perspective – creating balance and illusions of depth

4.Colours – how to best use colours

5.Movement and flow/transition – attracting the user

6.The 2/3:1/3 rule – most important layout rule

7.Simplicity – user friendly designs

8.Consistency

1.. White space – what it is and how to use it

üThe space between the text and other media elements on a screen. Doesn’t have to be in 

“white” in colour.

üAlso known as negative space

Breaks up the screen and provides eye relief

2. Balance

üPeople feel comfortable with a balanced design

Balance gives the screen harmony

3. Visual weight (contrast)

üUse to achieve balance

üThe illusion of physical weight of an object on the screen

Eg. BOLD letters have more visual weight and are looked at first compared to unbolded

letters

4. Colours

Colours can influence our mood and emotions

Bright colours: excitement, liveliness, passion

Cool colours: cool and shade, soothing 

5. Movement and flow

üOur eyes are more attracted to things that move on the screen

üA layout with good flow will visually lead the user from one element to another on the

screen

6. The 2/3:1/3 rule – most important layout rule

üRule designers use to divide the screen

üProvides a primary area of focus and secondary area of focus

üNavigation panels are places in the secondary area of focus

7. Simplicity (clean) – user friendly designs

üAdds functionality to the interface

üNo need to overwhelm the screen

üClean

üKeep it uncluttered.

üToo much information in a space is confusing.

üThe hierarchy should be easily seen.

üMore important material should be at the top

8. Consistency

üKeep controls consistent to clarify navigation scheme

üConsistency in placement, behavior, color and labeling.

üConsistent positioning of navigational elements allow viewers to learn how to navigate the

site more quickly

üE.g. if a horizontal navigation bar is placed at the top of  homepage, it is helpful to viewers

if the same navigation bar also appears at the top of other pages