MU120 Digital Media Design & Development

Design Principles 2See presentation available from Lectures

page of module websitehttp://mmedia.glos.ac.uk/mu120

Review Assignment

Design principlesReview the Flash presentation from week 2AlignmentProximityContrastRepetitionIf you have trouble remembering these, try

rearranging the initial letters and using the mnemonic!

Critique – Alignment, Conrast

Critique – poster - all 4

But where is the Designer’s grid?

Print design exampleAlignment?Beware of

fillers

Reverse of flyer

Alignment?Notice colour

coding – prepare reader for Repetition?

Contrast??Verdict?

Contents page (pdf)

Tenuous use of colour coding in pdf

Contradiction from flyer

Result - confusion

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)

ReferencesMü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.

Designers should consider proportionDivine proportion

Gives 1:1.61803 or

Approx 5:8

A BCABAC

ACCB

=

1+52

Golden section rectangle 5:8Stonehenge 1900BCAcropolis, Athens & Vitruvius 500BCRediscovered in Renaissance

Leonardo da Vinci c.1485Dürer c.1521 (also facial proportions) http://www.youtube.com/watch?v=GO3o9drC1mQ

Le Corbusier 1931

5

8 4

3800x600 screen

5

8

Support from Psychology

Fechner tested using man made objects

Books, boxes, buildings

Lalo repeated the work more scientifically but found the same

0

5

10

15

20

25

30

35

40

'1:1 '3:4 '5:8 '1:2

Fechner1876Lalo 1908

%

proportion

Some examplesExplanation of Designer’s grid for print

http://www.markboulton.co.uk/journal/comments/

five_simple_steps_to_designing_grid_systems_part_1/

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)

Design for screens As noted, trad grids based on the classic Golden Ratio

do not work for standard 4:3 ratio computer screens800x600; 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 4:3, consider making

the content occupy a golden rectangle

Begin with navigationNavigation for paper is ‘understood’ by

all usersAim for screen navigation to be as

obviousThink ahead for portfolio

Assignment scenarioHere be Dragons map

Assignment 1 Portfolio of 5 tasksDrawing

Version 1 of the mapLayout

V2 of the map to illustrate Design principlesCharacter animation

Vector character who will “live” in your mapSlideshow

Demonstrate the use of scenes so that a user can navigate from the map to a different place

Here be DragonsInteractive multimedia map, structured Flash movie

Begin in Week 3

Navigation needs ‘design’ too!Design navigation in keeping with the theme

It’s 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 schemeSee website Resources link for Adobe’s Kuler siteAllows you to develop a swatch of colours visually

and then note the RGB/Hex valuesStick to your palette as far as possible to achieve

unity

Lab Practical sheet is a STARTQuite a lot of work this week…Check out Safari

http://proquest.safaribooksonline.com/

Remember to use Rulers, Grid and Guideszoom to ensure HIGH QUALITY with vector

graphicsCheck: if you have used Flash before, have

you expanded your knowledge yet? If not, why not?

Any Questions?