Colorado
Menu
Visual Rhetoric: Gestalt Principles
Written by
Randy Fox
Published
February 11, 2013
Categories

In the last arti­cle, we exam­ined the ana­lyt­i­cal Moore and Fitz (1993), who are tech­ni­cal com­mu­ni­ca­tor schol­ars spe­cial­iz­ing in visual design, and explained the impor­tance of Gestalt in Using Gestalt Theory to Teach Document Design and Graphics. Moore and Fitz (1993) quote Max Werheimer, a psy­chol­o­gist and one of the devel­op­ers of the Gestalt the­ory: “they believe peo­ple per­ceive a struc­ture of com­po­nents that they treat as a whole (p.392).” Have you ever won­dered why a doc­u­ment per­ceives to be orga­nized and invit­ing to read while oth­ers appear chaotic or messy and dif­fi­cult to fol­low? According to Moore and Fitz (1993), “Gestalt the­ory tries to under­stand how view­ers per­ceive wholes in groups of indi­vid­ual ele­ments (p. 392).” Gestalt was not intended as a tool of per­sua­sion, but rather descrip­tive; a means to per­ceive “struc­tures and pat­terns (p. 392).” However, the prin­ci­ples of Gestalt may also be used as rhetor­i­cal tools to influ­ence the way a viewer reads a doc­u­ment. The key prin­ci­ples are: figure-ground, sym­me­try, clo­sure, prox­im­ity, good con­tin­u­a­tion and similarity.

Figure-Ground Segregation is the visual sep­a­ra­tion of fore­ground and back­ground. This prin­ci­ple can be applied to form clar­ity and empha­sis in a doc­u­ment as well as to instill hier­ar­chy by direct­ing a viewer where to begin. Design ele­ments such as typog­ra­phy, color, images, or shapes that stand out from the back­ground are more notice­able and can help lead the viewer through the document.

Similarity occurs when ele­ments on a page have a sim­i­lar appear­ance such as size, shape, color or value. They are there­fore per­ceived as groups, or ref­er­enced with sim­i­lar ideas and sub­ject mat­ter. One exam­ple is the use of text; head­lines that are treated the same by using type size, font, and style can cre­ate con­sis­tency and give clues as to how infor­ma­tion is laid out in a doc­u­ment. Similarity can estab­lish clar­ity and con­cise­ness, there­fore mak­ing the doc­u­ment a pleas­ant read­ing expe­ri­ence for the viewer.

Proximity refers to the arrange­ment of ele­ments on a page. The per­cep­tion of the doc­u­ment, whether orga­nized or chaotic, can be con­trolled by the prox­im­ity of text and graph­ics. When sev­eral items are on a page, it is impor­tant for the reader to under­stand which text belongs to what image, or which head­line belongs to what body copy. Captions refer­ring to spe­cific images, for exam­ple, should be viewed as one unit so as not to con­fuse the reader. If the doc­u­ment presents an unpleas­ant read­ing expe­ri­ence the mes­sage will be lost, mak­ing the doc­u­ment ineffective.

Good Continuation can be a path or con­tin­u­ous line direct­ing the eye beyond a visual area, allow­ing the viewer to fill in the gaps in their own minds. In terms of doc­u­ment design, good con­tin­u­a­tion may be demon­strated with the use of grids, typog­ra­phy, color or graph­ics. For exam­ple, a web­site designed with the same menu bar at the top of every page (the “Home” but­ton, for instance) located in the same place from page to page cre­ates good con­tin­u­a­tion, there­fore inspir­ing con­fi­dence for the viewer to know where to look.

Closure is about “draw­ing con­clu­sions,” accord­ing to Andy Rutledge, author of Design + View web­site. He explains, “When pre­sented with less than the full pic­ture, we attempt to employ the prin­ci­ple of clo­sure to fill in miss­ing infor­ma­tion and form a com­plete image or idea based on com­mon or eas­ily rec­og­niz­able pat­terns from our past expe­ri­ence and under­stand­ing.” He con­tin­ues to explain that intu­ition and past expe­ri­ence allow us to rec­og­nize incom­plete shapes. For exam­ple, a rec­tan­gle miss­ing a cor­ner will still be per­ceived as a rec­tan­gle. In doc­u­ment design, clo­sure can be implied with neg­a­tive space to com­plete or seg­re­gate an idea or topic. Columns of text, for instance, formed by the sur­round­ing white space allow the reader to view the text ver­ti­cally opposed to hor­i­zon­tally, thereby rein­forc­ing the direc­tion or hier­ar­chy of information.

Symmetry is often referred to as bal­ance, mean­ing the equal dis­tri­b­u­tion of objects divided by a cen­tral point of axis. In regards to doc­u­ment design, sym­me­try cre­ates the per­cep­tion of sta­bil­ity, struc­ture and con­sis­tency, which adds to the tone and ethos of a doc­u­ment. Moore and Fritz (1993), among oth­ers, believe that an asym­met­ri­cal design of a doc­u­ment will con­fuse read­ers and make them feel uneasy and lost (p.391). Gary Bastoky (2010), a user expe­ri­ence designer, argues that sym­me­try and bal­ance are not the same and that bal­ance can be achieved sym­met­ri­cally or asym­met­ri­cally. He believes that sym­me­try can some­times make a doc­u­ment look stale or bor­ing, where asym­me­try adds a more dynamic view­ing expe­ri­ence. According to Bastoky, “Asymmetrical lay­outs can achieve equi­lib­rium as well, but their tenser, more dra­matic form of bal­ance depends on care­ful manip­u­la­tion to com­pen­sate visu­ally for dif­fer­ences in the size, posi­tion, and value of major ele­ments (2010).” Creating an effec­tive asym­met­ri­cal doc­u­ment is a more dif­fi­cult approach, but it may add to the aes­thetic value. Either way, the rhetor­i­cal sit­u­a­tion should direct the design decision.

Consider a few of gestalt prin­ci­ples demon­strated in the Yahoo! Travel web­site (pic­tured above):

Figure-ground seg­re­ga­tion is demon­strated by the large photo of Jerusalem set against the cloud photo in the back­ground. Good con­tin­u­a­tion is estab­lished with the yel­low box con­tain­ing “Find your price.” The box is designed with rounded cor­ners at the top and not on the bot­tom lead­ing you to believe there is more infor­ma­tion to be accessed within this space. Similarity is demon­strated by the design of the items in the top menu bar, as well as the tabs in the yel­low box. A con­sis­tent design of these ele­ments adds to the clar­ity and orga­ni­za­tion to the doc­u­ment. The prox­im­ity of the text “Jerusalem, Israel” cre­ates a rela­tion­ship to the small map in the lower right cor­ner of the page.

 

Conclusion

Being sur­rounded by mass media on a daily basis, visual com­mu­ni­ca­tors are respon­si­ble for obtain­ing the nec­es­sary resources and skills to com­pose and ana­lyze effec­tive visual mes­sages. This series of arti­cles intro­duced an under­stand­ing of visual rhetoric by explor­ing the rhetor­i­cal use of visu­als and visual argu­ments, as well as design tools for visual analy­sis. As we learned, visual rhetoric refers to per­sua­sive mes­sages using visual lan­guage. It is crit­i­cal for visual com­mu­ni­ca­tors to obtain the nec­es­sary skills and design tools to com­pose and ana­lyze visual mes­sages effec­tively. This can be accom­plished by the use of text, images, and lay­out while con­sid­er­ing the six visual cog­nates and gestalt principles.

The six visual cog­nates are: arrange­ment, empha­sis, clar­ity, con­cise­ness, tone and ethos. They are a means to con­sider the rhetor­i­cal sit­u­a­tion of a doc­u­ment, ensur­ing that the mes­sage is com­mu­ni­cated cor­rectly and directly to the tar­get audience.

The Gestalt prin­ci­ples are: figure-ground, sym­me­try, clo­sure, prox­im­ity, good con­tin­u­a­tion and sim­i­lar­ity. They offer a vocab­u­lary for effec­tive dis­course in visual analy­sis as well as pro­vide a set of design tools to com­pose visual messages.

 

We are inun­dated with visual mes­sages every­day via tele­vi­sion com­mer­cials, bill­boards, mag­a­zines, and surf­ing the Internet, just to name a few. We are also chal­lenged by rapid advance­ments in tech­nol­ogy, par­tic­u­larly smart­phones and tablet com­put­ers such as the iPad, allow­ing every­one to access visual infor­ma­tion at the touch of a fin­ger. Visual com­mu­ni­ca­tors are respon­si­ble for the design of such arti­facts includ­ing posters, adver­tise­ments, annu­als reports, Apps, and info­graph­ics. Understanding visual rhetoric, what makes a visual argu­ment, and what a rhetor­i­cal sit­u­a­tion con­sists of, visual com­mu­ni­ca­tors have addi­tional resources and skills to ana­lyze and eval­u­ate effec­tive design. As visual com­mu­ni­ca­tors, we are also respon­si­ble for obtain­ing the nec­es­sary resources and skills to com­pose and ana­lyze effec­tive visual messages.

Happy Hour

Comments
AIGA encourages thoughtful, responsible discourse. Please add comments judiciously, and refrain from maligning any individual, institution or body of work. Read our policy on commenting.
  • http://www.mmcmahondesign.com/ Mike M

    A very thought pro­vok­ing arti­cle.  I think as we all go about our days we can some­times for­get to activly remen­ber these prin­ci­ples that help us in our design process.  Thank you! 

LOADING...
Your browser is too old to view this site.

Do yourself a favor and upgrade it to the latest version.