fundamental principles in visual design value dominance balance grids
TRANSCRIPT
Fundamental Principles in Visual Design
ValueDominanceBalanceGrids
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).
Value – light & darkPerceived gray value is relative … the
same literal gray value is perceived differently depending on what is around it.
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 …
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
1
1
2
2
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
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
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
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
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 im
ages by Mark S
eymour for the Linux
Gazette.
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.
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.
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.
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.
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.
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.