1. MU120 Digital Media Design & Development  Design Principles 2  See presentation available from Lectures page of module website  http://mmedia.glos.ac.uk/mu120 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 Designer’s 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 1:1.61803 or  Approx 5:8 ABC AB AC CB = 1+5 2

10. Golden section rectangle 5:8  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?v=GO3o9drC1mQ http://www.youtube.com/watch?v=GO3o9drC1mQ  Le Corbusier 1931 5 8 4 3 800x600 screen 5 8

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 Designer’s grid for print  http://www.markboulton.co.uk/journal/comments/five_simple_steps_to _designing_grid_systems_part_1/ 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 4:3 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 4:3, 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 Begin in Week 3

18. 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 scheme  See website Resources link for Adobe’s 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/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?