Primary Resources. Designing Visual Interfaces by Kevin Mullett & Daryl Sano. The Visual Display of Quantitative Information by Edward Tufte

Transcription

1 Primary Resources Designing Visual Interfaces by Kevin Mullett & Daryl Sano The Visual Display of Quantitative Information by Edward Tufte

2 Organization & Visual Structure: Benefits Unity Visual structure ties evenly highly disparate design elements together and allows them to work in concert toward a communication goal. Readability Structure enhances readability by dividing the information content of the entire screen into manageable subsets that can be processsed separately. Control Structure allows users to predict areas of interest and eases their navigation through a composition. Control of structure allows the designer to influence this process of exploration.

3 Organization & Visual Structure: Principles Gestalt Principle of Proximity Gestalt Psychologists, 1920 s

4 Organization & Visual Structure: Principles Gestalt Principle of Similarity Gestalt Psychologists, 1920 s

5 Organization & Visual Structure: Principles Principle of Balance

6 Organization & Visual Structure: Principles Balance: Symmetric and asymmetric balance

7 Organization & Visual Structure: Principles Balance: Symmetric and asymmetric balance

8 Organization & Visual Structure: Principles Alignment: Alignment

9 Modules & Grids: Benefits Clear Structure In most effectively designed grids, the internal structure is drawn directly from demands of the content and the communication problem. Predictability Employing a grid simplifies communication by preparing the user to respond to a small number of familiar patterns in a predictable way. Efficiency Using a grid affords great economies of production once the general scheme has been developed.

10 Modules & Grids Example: Tatami mat

11 Modules & Grids Example: Flexible publication grids

12 Modules & Grids Example: U.S. National Park Service information brochures

13 Modules & Grids Example: Princeton University Art Museum Web site

14 Modules & Grids Example: Princeton University Art Museum Web site

15 Modules & Grids Example: Princeton University Art Museum Web site

16 Early Grids in Graphic Design Lazar El Lissitzky The Isms of Art Russian, 1925 A multilingual catalog for modern art exhibition. The title page establishes a structure that is used throughout the book.

17 Early Grids in Graphic Design Lazar El Lissitzky The Isms of Art Russian, 1923 The grid easily separates test in different languages.

18 Early Grids in Graphic Design Herbert Bayer 1,000,000 mark note Reflects inflation between World wars in Germany. Very modern because no portraits or allegorical imagery. Interesting to compare with other currency during this period.

19 Early Grids in Graphic Design Herbert Bayer Poster German, 1926 Lecture poster for the Bauhaus.

20 Early Grids in Graphic Design Jan Tschichold Printed invitation German, 1927 Original invitation notice for a lantern lecture about new typography.

21 Early Grids in Graphic Design Jan Tschichold Poster German, 1926 Movie poster using grid and then rotating to create a more dynamic composition.

22 Early Grids in Graphic Design Piet Zwart Packaging Dutch, 1923 Margarine wrapper!

23 Grid System Features Math & Proportions There is simple math involved, but do not be afraid! Ratios and equations are everywhere in grid system design. To design a successful grid system you have to become familiar with these ratios and proportions, from rational, whole-number ratios such as 1:2, 2:3, 3:4 These ratios are ubiquitous in our environment, from the buildings around us to patterns in nature. A Balance of Simplicity and Complexity The danger with designing a system to cope with many different variables is complexity. When you add complexity, you decrease usability and there is a danger the grid would become so complex the designer can t use it. Keep your grid simple and flexible.

24 Demo Choosing a Base Unit 10 pixels is ideal because it is easy multiply and divide!