MU120 Digital Media Design

1
MU120 Digital Media Design Development

• Design Principles 2
• See presentation available from Lectures page of
  module website
• http//mmedia.glos.ac.uk/mu120
• Review Assignment

2
Design principles

• Review the Flash presentation from week 2
• Alignment
• Proximity
• Contrast
• Repetition
• If you have trouble remembering these, try
  rearranging the initial letters and using the
  mnemonic!

3
Critique Alignment, Conrast
4
Critique poster - all 4
But where is the Designers grid?
5
Print design example

• Alignment?
• Beware of fillers

6
Reverse of flyer

• Alignment?
• Notice colour coding prepare reader for
  Repetition?
• Contrast??
• Verdict?

7
Contents page (pdf)

• Tenuous use of colour coding in pdf
• Contradiction from flyer
• Result - confusion

8
Classical design ratio proportion

• The proportions of the formal elements and their
  intermediate spaces are almost always related to
  certain numerical progressions logically followed
  out.
• Josef (Müller-Brockmann, 1968)

References Müller-Brockmann, Josef (1968) The
Graphic artist and his (sic) design problems. New
York Niggli Ltd. Müller-Brockmann, Josef (1981)
Grid systems in graphic design. New York Niggli
Ltd.
9
Designers should consider proportion

• Divine proportion
• Gives 11.61803 or
• Approx 58

A
B
C
1?5 2
10
Golden section rectangle 58

• Stonehenge 1900BC
• Acropolis, Athens Vitruvius 500BC
• Rediscovered in Renaissance
• Leonardo da Vinci c.1485
• Dürer c.1521 (also facial proportions)
• http//www.youtube.com/watch?vGO3o9drC1mQ
• Le Corbusier 1931

8
5
11
Support from Psychology

• Fechner tested using man made objects
• Books, boxes, buildings
• Lalo repeated the work more scientifically but
  found the same

proportion
12
Some examples

• Explanation of Designers grid for print
• http//www.markboulton.co.uk/journal/comments/five
  _simple_steps_to_designing_grid_systems_part_1/

13
Designers and the grid

• Attributed to the Swiss or International style
  developed after WWII
• Built on De Stijl, Bauhaus and new typography of
  the 1930s
• Seeks to present complex info in a structured and
  unified manner
• Characterised by reliance on typographic grid
• Investigate Max Huber, Ernst Keller,
  Müller-Brockmann
• Criticised by New Wave designers in 1980s
• Investigate April Greiman (US)

14
Design for screens

• As noted, trad grids based on the classic Golden
  Ratio do not work for standard 43 ratio computer
  screens
• 800x600 1024x768 etc
• New standards emerge
• Being close is not good enough if the items on
  a (web)page ar not lined up perfectly, the design
  will look messy (Vest et al, 2005 p.44)
• Vest J, Crowson W. Pochran S. (2005) Exploring
  Web Design an in-depth guide to the art and
  techniques of web design. Clifton Park, NY
  Thomson Delmar Learning
• Where to start?
• Given that you need to fill the screen at 43,
  consider making the content occupy a golden
  rectangle

15
Begin with navigation

• Navigation for paper is understood by all users
• Aim for screen navigation to be as obvious
• Think ahead for portfolio ?

16
Assignment scenario

• Here be Dragons map

17
Assignment 1 Portfolio of 5 tasks

• Drawing
• Version 1 of the map
• Layout
• V2 of the map to illustrate Design principles
• Character animation
• Vector character who will live in your map
• Slideshow
• Demonstrate the use of scenes so that a user can
  navigate from the map to a different place
• Here be Dragons
• Interactive multimedia map, structured Flash movie

18
Navigation needs design too!

• Design navigation in keeping with the theme
• Its ok to practise in Flash with standard
  buttons but you will lose marks if they are still
  in the final submission
• Begin to consider your colour scheme
• See website Resources link for Adobes Kuler site
• Allows you to develop a swatch of colours
  visually and then note the RGB/Hex values
• Stick to your palette as far as possible to
  achieve unity

19
Lab Practical sheet is a START

• Quite a lot of work this week
• Check out Safari
• http//proquest.safaribooksonline.com/
• Remember
• to use Rulers, Grid and Guides
• zoom to ensure HIGH QUALITY with vector graphics
• Check if you have used Flash before, have you
  expanded your knowledge yet? If not, why not?

20
Any Questions?