Gestalt Principles of Design

1. Gestalt Principles of Design ENGL 3190—Document Design

2. Overview • Perception • Visual Fields • Gestalt Theory • Figure-ground contrast • Grouping

3. Perception • Perception requires thinking • Readers search for focal points • Readers draw on past experience • Readers vision the task at hand, and then some • Perception is goal directed

4. What do you see? 20 9 32 12

5. Visual Fields • A range of vision that in any perceptual moment will likely include an array of shapes, lines, patterns, and textures

6. Gestalt http://graphics.lcs.mit.edu/classes/6.893/F03/lectures/L7.pdf

7. Gestalt Principles of Design • Gestalt means “whole” or “form” • Two of the most important principles: • Figure-ground • Grouping

8. Figure-ground • When an object is surrounded by white space, keep a sense of proportion between the object (the figure) and its surroundings (ground). • The “figure” is the focal image • The “ground” is the background image

9. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page.

10. Is This Any Better? This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page.

11. How about This? • This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. • This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. • As a result, readers won’t be drawn to any particular place on the page. This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page. • This page has lots of text and not much visual variation. As a result, readers won’t be drawn to any particular place on the page.

12. Figure-ground Contrast • Figure-ground contrast gives you a powerful tool to respond to any given rhetorical situation. • Be careful of “visual noise” • Noise is anything that interferes with the writer’s message • Static on a phone line • Busy backgrounds • “Loopy” fonts

13. Figure-ground Contrast • Figure-ground contrast gives you a powerful tool to respond to any given rhetorical situation. • Be careful of “visual noise” • Noise is anything that interferes with the writers message • Static on a phone line • Busy backgrounds • “Loopy” fonts

14. Noise • This is a noisy typeface. • Another noisy typeface • Still another. Can you IMAGINE this in ALL CAPS? • Pen Island • Who Represents • The Experts Exchange

15. Grouping (aka Proximity) • Shows structure and organization • Threads parts into manageable units • Grouping creates “visual cohesion” that holds the parts together

16. Gestalt Principles • For a refresher (or more information) • Gestalt Theory