Fundamental Principles in Visual Design Value Dominance Balance Grids.

40
Fundamental Principles in Visual Design Value Dominance Balance Grids

Transcript of Fundamental Principles in Visual Design Value Dominance Balance Grids.

Page 1: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Fundamental Principles in Visual Design

ValueDominanceBalanceGrids

Page 2: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Value – light & darkValue 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).

Page 3: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Value – light & darkPerceived gray value is relative … the

same literal gray value is perceived differently depending on what is around it.

Page 4: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Value – light & darkThe 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 …Click the link here …

Click the link here …Click the link here …

Page 5: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Value – light & darkFor 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.

Page 6: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Dominance

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

Page 7: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 8: Fundamental Principles in Visual Design Value Dominance Balance Grids.

DominanceGray 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.

Page 9: Fundamental Principles in Visual Design Value Dominance Balance Grids.

DominanceGray 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).

Page 10: Fundamental Principles in Visual Design Value Dominance Balance Grids.

DominanceConsider 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.

Page 11: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 12: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 13: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Balance

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

Page 14: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Balance

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

Page 15: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Balance

… or the same shape.

Page 16: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Balance

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

Page 17: Fundamental Principles in Visual Design Value Dominance Balance Grids.

BalanceThe “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.

Page 18: Fundamental Principles in Visual Design Value Dominance Balance Grids.

BalanceWhen 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.

Page 19: Fundamental Principles in Visual Design Value Dominance Balance Grids.

BalanceA 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.

Page 20: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 21: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 22: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Analyzing Value & Dominance

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

Page 23: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Analyzing Value & Dominance

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

Page 24: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

1

1

2

2

Page 25: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

1

1

2

2

3

Page 26: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

1

1

2

2

Page 27: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

1

1

2

2

Page 28: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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?

1

1

2

2

Page 29: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 30: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 31: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Analyzing Value & Dominance

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

Page 32: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.

Page 33: Fundamental Principles in Visual Design Value Dominance Balance Grids.

Grids

A grid is a design tool. It lies underneath the visual display and determines where “blocks” of content will appear.

Gettysburg im

ages by Mark S

eymour for the Linux

Gazette.

Page 34: Fundamental Principles in Visual Design Value Dominance Balance Grids.

GridsGrids 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 im

ages by Mark S

eymour for the Linux

Gazette.

Page 35: Fundamental Principles in Visual Design Value Dominance Balance Grids.

GridsLook 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.

Page 36: Fundamental Principles in Visual Design Value Dominance Balance Grids.

GridsNotice 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.

Page 37: Fundamental Principles in Visual Design Value Dominance Balance Grids.

GridsWhen 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.

Page 38: Fundamental Principles in Visual Design Value Dominance Balance Grids.

GridsThe 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.

Page 39: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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).

Page 40: Fundamental Principles in Visual Design Value Dominance Balance Grids.

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.