Fundamental Principles in Visual Design Value Dominance Balance Grids

Value – light & dark Value is short for “gray value,” and refers to the lightness or darkness of an area – the amount of black or white that is present. Colors have gray values that are separate from their hues (red, blue, yellow).

Value – light & dark Perceived gray value is relative … the same literal gray value is perceived differently depending on what is around it.

Value – light & dark The individual who is color-blind for blue and green, will see similar gray values as identical. Different gray values allow discrimination, even though the colors cannot be perceived. All of us differ in the range of gray values we can discriminate, so when in doubt – increase contrast. Click the link here …

Value – light & dark For people of all visual abilities, contrast in gray value is the key to discrimination of shapes – and this affects the visibility of text particularly since text is comprised of many small shapes. Highly visible text requires strong contrast between the letter forms and the background. Black and white provide the strongest possible contrast in gray value. Other combinations can also be effective.

Dominance Darker values advance in our visual perception and lighter ones recede. Thus, darker values dominate over lighter ones in a visual display.

Dominance This is true even when the relative size of two areas is unequal. Un-focus your eyes and look at these squares – the darker one stands out even though it is smaller.

Dominance Gray value is not the only determiner of dominance – color (hue) can also dominate a visual display, as in the case of the unfortunate IU Bloomington home page on the web.

Dominance Gray value does play a role in hue dominance, however. On the barbie.com home page the broad expanse of pink influences the perceived color scheme but does not dominate the display because it is low in gray value (it is light).

Dominance Consider what happens when a saturated pink is substituted for the pale one. Although the bright colors in the graphic hold up well, when you squint your eyes the “U” shape of hot pink is a very dominant element in the display, even though it should be subordinate to the main graphic.

Balance Primates prefer visual balance. Give a baby human or a baby chimp a crayon and a blank piece of paper and you get overall scribbles … left alone long enough, baby or chimp will tend to fill the page evenly.

Balance Give baby or chimp a piece of paper with a dominant figure in one corner and the scribbles will appear across the page, creating visual balance – or equivalent visual dominance across the display.

Balance Balance can be symmetrical – all elements mirrored by others of equal dominance...

Balance Balance can be symmetrical – all elements mirrored by others of equal dominance... even if everything is not the same color …

Balance … or the same shape.

Balance Balance can be asymmetrical too, and we are often drawn to this form of balance because it is visually exciting or interesting.

Balance The “white space” (which may not always be white) plays a key role in determining balance. The white space modifies the impact of every other element. You need comparatively less of a dark value to balance comparatively more of a light one. When you add the impact of color to gray value, you also affect the dominance relationship of elements.

Balance When the balance between “heavy” and “light” elements is off, you have difficulty focusing anywhere except in the heavy part. Even though there is a lot of white space counterbalancing the dark areas, it is not enough.

Balance A small change can make a difference … the impact of a small light value rectangle is amplified when it appears in the middle of a dark area. Likewise, a small rectangle of dark can add a lot of weight to the lighter area around it.

Analyzing Value & Dominance Analyzing visual displays in terms of gray values and dominance relationships prepares you to make strategic decisions about layout for your own visual designs.

Analyzing Value & Dominance Squint at the display you are analyzing. Look at the “big” structures … don’t get distracted by small elements unless those impinge on the larger ones.

Analyzing Value & Dominance What are the lightest (lowest gray value) structures in the display? Pay attention to the large structures, not the smaller details.

Analyzing Value & Dominance What are the lightest (lowest gray value) structures in the display? Pay attention to the large structures, not the smaller details.

Analyzing Value & Dominance Look at the remaining structures. Divide them into two more levels of gray value. They may not be identical, but divide them in contrast to each other

Analyzing Value & Dominance Look at the remaining structures. Divide them into two more levels of gray value. They may not be identical, but divide them in contrast to each other

Analyzing Value & Dominance Look at the remaining structures. Divide them into two more levels of gray value. They may not be identical, but divide them in contrast to each other

Analyzing Value & Dominance You might decide to indicate a separate structure within one of the gray levels, but don’t get too detailed about this

Analyzing Value & Dominance When you learn to make this kind of analysis automatically, you can begin discussing the dominance and balance issues is a given visual display. Are the appropriate elements dominant? Is the layout balanced? If one element needs to be adjusted, what will the impact be on everything else?

Analyzing Value & Dominance Remember that gray values are relative. Even if a display is all very “gray” (light values), you can still analyze the various levels present.

Analyzing Value & Dominance Remember that gray values are relative. Even if a display is all very “gray” (light values), you can analyze the differences in gray levels.

Analyzing Value & Dominance Also notice that you can represent different gray levels with colors as well as with actual black, white and gray.

Grids Most designers who are creating materials that will contain more than one display use an underlying grid to help organize the layout of those displays. 1.Grids support the consistency of the visual rhetorical for a display – information of the same type appears in the same place on each display. 2.Grids allow for variation from one display to another without opening the design to chaos. 3.Grids produce displays that are judged to be organized – and therefore easy to “read” -- at the pre-attentive level of perception.

Grids A grid is a design tool. It lies underneath the visual display and determines where “blocks” of content will appear. Gettysburg images by Mark Seymour for the Linux Gazette. Mark Seymour

Grids Grids should be flexible … content can be rearranged, but when it conforms to an underlying grid it still looks organized and still looks like part of the same document. Gettysburg images by Mark Seymour for the Linux Gazette. Mark Seymour

Grids Look for the grid in a display by finding the places where content objects line up vertically. On the first page of the airbagindustries.com website, the visible grid components are two outside “gutters” (margins), two narrow columns with gutters between them, and a larger column. There is also a horizontal grid element that we will be able to see carrying through the rest of the design.

Grids Notice that in another section of the site, the grid is still the same but it is being used differently. The narrow column in the middle is full of a narrow graphic instead of text. Text in the wide column still holds the same relationship to the horizontal grid line as the text on the previous display held.

Grids When we look at all the pages in the site, we notice that the grid is actually composed of five narrow columns (they are more equal than it appears here due to problems with resizing the screen shots). In earlier displays, content elements were allowed to spread across 3 of these columns – but they are always anchored within the underlying grid.

Grids The blimp image on the first page of the site extends across three vertical columns of the grid. Likewise the text that appeared to be a wide column is actually extending across three vertical divisions of the basic grid. The blimp image on the “Reading” page extends across the two horizontal divisions of the grid.

Activity Produce a value analysis and a grid diagram for your assigned website. The value analysis should be done on a “typical” screen – if the site includes images, pick a screen that has some, and do not conduct your analysis on the opening page of the site. Go to one of the tutorial pages. For the grid diagram, be sure you have looked at multiple displays so that your grid is complete. There are usually fewer horizontal divisions than vertical ones, so concentrate on the verticals (columns).

So what? Value, dominance and balance are core concepts in visual design. Each one affects the others and together they exert tremendous effect on any visual display. Every decision you make in the form of a design is linked to these aspects, so you need to recognize them and practice manipulating them consciously in order to observe what happens when you do. I expect you to use these concepts (and terms) when you discuss formal decisions you have made for your design projects. You should also practice applying these concepts during your critique sessions.