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?