1 / 20

MU120 Digital Media Design & Development

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. Design principles. Review the Flash presentation from week 2 Alignment Proximity Contrast Repetition

chuong
Download Presentation

MU120 Digital Media Design & Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 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. AB AC AC CB = Designers should consider proportion • Divine proportion • Gives 1:1.61803 or • Approx 5:8 A C B 1+5 2

  10. 4 8 800x600 screen 5 3 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 • 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 Designer’s 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 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. Begin in Week 3 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 • 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/ • 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?

More Related