MU120 Digital Media Design & Development
description
Transcript of MU120 Digital Media Design & Development
![Page 1: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/1.jpg)
MU120 Digital Media Design & Development
Design Principles 2See presentation available from Lectures
page of module websitehttp://mmedia.glos.ac.uk/mu120
Review Assignment
![Page 2: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/2.jpg)
Design principlesReview the Flash presentation from week 2AlignmentProximityContrastRepetitionIf you have trouble remembering these, try
rearranging the initial letters and using the mnemonic!
![Page 3: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/3.jpg)
Critique – Alignment, Conrast
![Page 4: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/4.jpg)
Critique – poster - all 4
But where is the Designer’s grid?
![Page 5: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/5.jpg)
Print design exampleAlignment?Beware of
fillers
![Page 6: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/6.jpg)
Reverse of flyer
Alignment?Notice colour
coding – prepare reader for Repetition?
Contrast??Verdict?
![Page 7: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/7.jpg)
Contents page (pdf)
Tenuous use of colour coding in pdf
Contradiction from flyer
Result - confusion
![Page 8: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/8.jpg)
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.
![Page 9: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/9.jpg)
Designers should consider proportionDivine proportion
Gives 1:1.61803 or
Approx 5:8
A BCABAC
ACCB
=
1+52
![Page 10: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/10.jpg)
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
![Page 11: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/11.jpg)
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
![Page 12: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/12.jpg)
Some examplesExplanation of Designer’s grid for print
http://www.markboulton.co.uk/journal/comments/
five_simple_steps_to_designing_grid_systems_part_1/
![Page 13: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/13.jpg)
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)
![Page 14: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/14.jpg)
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
![Page 15: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/15.jpg)
Begin with navigationNavigation for paper is ‘understood’ by
all usersAim for screen navigation to be as
obviousThink ahead for portfolio
![Page 16: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/16.jpg)
Assignment scenarioHere be Dragons map
![Page 17: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/17.jpg)
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
![Page 18: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/18.jpg)
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
![Page 19: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/19.jpg)
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?
![Page 20: MU120 Digital Media Design & Development](https://reader035.fdocuments.us/reader035/viewer/2022070413/56814cb4550346895db9bd36/html5/thumbnails/20.jpg)
Any Questions?