Balance and White Space

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

Graphic Design ProcessJMA 505 : 

Graphic Design ProcessJMA 505 Overarching Graphic Design Principles #5 and #6: Balance and White Space

By the end of this lecture you should be able to: : 

By the end of this lecture you should be able to: Describe and apply the graphic design principles of Balance and White Space

Balance : 

Balance Graphic Design Principle #5

Balance : 

Balance Try walking a long distance with a 2 pound bag of rocks in one hand and a 10 pound bag of marbles in the other. After awhile you'll be wanting to shift your load around, putting a few marbles in the rock bag to balance your load, make it easier to walk. This is how balance works in design.

Balance : 

Balance Visual balance comes from arranging elements on the page so that no one section is heavier than the other. Or, a designer may intentionally throw elements out of balance to create tension or a certain mood.

Creating Balance : 

Creating Balance Repeat a specific shape at regular intervals, either horizontally or vertically Center elements on a page Put several small visuals in one area to balance a single large image or block of text Use one or two odd shapes and make the rest regular shapes Lighten a text-heavy piece with a bright,. Colorful visual Leave plenty of white space around large blocks of text or dark photographs Offset a large, dark photo or illustration with several small pieces of text, each surrounded by a lot of white space

Balance : 

Balance You can create balance using the three elements in this example: text block Graphic vertical text Right now, in this example they appear to random elements with no unity or balance.

Balance : 

Balance In this example, "Balance" is achieved through creating a text block and resizing the graphic to bring them closer together and better balance each other.

Balance : 

Balance To tie the elements together, move them closer together (resizing helps accomplish this). Notice that the graphic slightly overlaps the box enclosing the vertical text, unifying the two elements. Reversing the word "balance" out of the blue box also adds more contrast to the composition. The increased leading in the text block redistributes the white space in a more balanced manner.

Balance : 

Balance Three types of balance Symmetrical Asymmetrical Radial

Symmetrical Balance : 

Symmetrical Balance Symmetrical balance is easiest to see in perfectly centered compositions or those with mirror images. In a design with only two elements they would be almost identical or have nearly the same visual mass. If one element was replaced by a smaller one, it could throw the page out of symmetry. To reclaim perfect symmetrical balance, you might need to add or subtract or rearrange the elements so that they evenly divide the page such as a centered alignment or one that divides the page in even segments (halves, quarters, etc.).

Symmetrical Balance : 

Symmetrical Balance When a design can be centered or evenly divided both vertically and horizontally it has the most complete symmetry possible. Symmetrical balance generally lends itself to more formal, orderly layouts. They often convey a sense of tranquility or familiarity or elegance or serious contemplation.

Vertical Symmetrical Balance : 

Vertical Symmetrical Balance Each vertical half (excluding text) of the brochure is a near mirror image of the other, emphasized with the reverse in colors. Even the perfectly centered text picks up the color reversal here. This symmetrically balanced layout is very formal in appearance.

Vertical and Horizontal Symmetrical Balance : 

Vertical and Horizontal Symmetrical Balance This poster design divides the page into four equal sections. Although not mirror images the overall look is very symmetrical and balanced. Each of the line drawings are more or less centered within their section. The graphic (text and image) in the upper center of the page is the focal point tying all the parts together.

Asymmetrical Balance : 

Asymmetrical Balance Asymmetrical design is typically off-center or created with an odd or mismatched number of disparate elements. However, you can still have an interesting design without perfect symmetry. With asymmetrical balance you are evenly distributing the elements within the format which may mean balancing a large photo with several small graphics. Or, you can create tension by intentionally avoiding balance.

Asymmetrical Balance : 

Asymmetrical Balance Uneven elements present us with more possibilities for arranging the page and creating interesting designs than perfectly symmetrical objects. Asymmetrical layouts are generally more dynamic and by intentionally ignoring balance the designer can create tension, express movement, or convey a mood such as anger, excitement, joy, or casual amusement.

Asymmetrical Balance : 

Asymmetrical Balance This page uses a 3 column format to create a neatly organized asymmetrical layout. The two columns of text are balanced by the blocks of color in the lower left topped by a large block of white space. In this case, because the white space is in a block shaped much like the text columns, it becomes an element of the design in its own right.

Asymmetrical Balance : 

Asymmetrical Balance It can't be neatly sliced in half like a symmetrical design but most of the elements have only small differences in shape and mass. This page achieves an overall balance by the use of an underlying grid that spreads the many pieces out over the entire page, more or less, evenly.

Asymmetrical Balance : 

Asymmetrical Balance Like a wild, unruly garden, the elements of this brochure cover are barely contained on the page. The plants spring up primarily along the left side but with a few stems escaping and arching across the page. The text, although randomly placed, follows the lines of the plants keeping them anchored to the overall design. The off-balance design creates a sense of freedom and movement.

Radial Balance : 

Radial Balance On square and rectangular pages we generally place elements in orderly rows and columns. With radial designs the elements radiate from or swirl around in a circular or spiral path.

Radial Balance : 

Radial Balance Here we have an example of radial balance in a rectangular space. The year represents the center of the design with the subtle color sections radiating from that center. The calendar month grids and their corresponding astrological symbols are arrayed around the year in a circular fashion.

Radial Balance : 

Radial Balance Colors and text radiate out from the apple in the middle of this CD cover design. The effect is almost one of spiraling down into the center of the apple. The apple itself looks nearly symmetrical but the curving text and the outlines edging off the page to the top and right throws it all slightly off-balance.

Rule of Thirds and Balance : 

Rule of Thirds and Balance The rule of thirds says that most designs can be made more interesting by visually dividing the page into thirds vertically and/or horizontally and placing our most important elements within those thirds. Take this concept a step further, especially in photographic composition, by dividing the page into thirds both vertically and horizontally and placing your most important elements at one or more of the four intersections of those lines.

Rule of Thirds and Balance : 

Rule of Thirds and Balance

Rule of Thirds and Balance : 

Rule of Thirds and Balance

Rule of Thirds and Balance : 

Rule of Thirds and Balance In this vertically symmetrical layout the headline appears in the upper third of the page, the logo in the middle third, and the supporting descriptive text in the lower third. The most important information is in that lower third and anchors the page.

Rule of Thirds and Balance : 

Rule of Thirds and Balance This asymmetrical layout has most elements in the upper third and leftmost third of the page with the main focal point being around the intersection of the topmost and leftmost dividing lines.

Visual Center and Balance : 

Visual Center and Balance Placing important elements or the focal point of the design within the visual center of a piece is another design trick. The visual center is slightly to the right of and above the actual center of a page.

Visual Center and Balance : 

Visual Center and Balance See how the focal or center point of this design actually falls in the visual center of the page. It's easy to see the actual center, it's where the four box corners meet. But the focus is on the earth.

Visual Center and Balance : 

Visual Center and Balance In this calendar, the months emanate from the year located front and (visual) center.

Balance in Interface Design : 

Balance in Interface Design

Balance in Interface Design : 

Balance in Interface Design

Balance in Interface Design : 

Balance in Interface Design

Balance in Interface Design : 

Balance in Interface Design

Balance in Interface Design : 

Balance in Interface Design

Balance in Interface Design : 

Balance in Interface Design

Concluding Remarks on Balance : 

Concluding Remarks on Balance Balance in graphic design refers to the equal distribution of visual weight Visual weight is determined by size, darkness, lightness, and thickness of lines Three types: Symmetrical Asymmetrical Radial

White Space : 

White Space Graphic Design Principle #6

White Space : 

White Space Imagine that you've just moved into a new house. Remember how excited you felt about all the extra room in your new house? Now imagine your dismay when you look around, and all you see is wall to wall boxes. You can't stand the clutter, so you go to work unpacking the boxes and putting everything away.

White Space : 

White Space Next you throw out the boxes. Suddenly you have a home: there is room to walk around and breath. White space is the equivalent of uncluttering your home. Just as you don't want wall to wall boxes in your home, you don't want wall to wall text, graphics or boxes in your designs.

Purpose of White Space : 

Purpose of White Space White space is the distance or area between or around things White space can be used to: Create ties between elements Highlight an element Give the eye a visual rest Make a layout easier to follow Make type as legible as possible Put a lot of white space around something to draw attention to it

White Space : 

White Space White space is vital to graphic design The key is to add just enough white space so the eye knows where to go and can rest a bit when it gets there You can control white space in the following locations: margins, paragraph spacing, spacing between lines of text, gutters (the space between columns) and surrounding text and graphics

White Space : 

White Space The space between visual elements — is an integral part of the message. White space tells you where one section ends and another begins.

White Space Tips : 

White Space Tips Don't Trap White Space Although you want white space in your designs, you don't want to trap that white space between two design elements. This interrupts the flow of the design. You might increase the size of a font, the size of the graphic, or reposition elements to avoid trapped white space.

White Space Tips : 

White Space Tips Keep Text Cells Small We've all come across Web sites that have text stretching across the entire length of the browser. While that might be readable on a fourteen inch monitor, it's very difficult to read on a larger monitor whose browser window is maximized.

White Space Tips : 

White Space Tips Avoid Rivers Rivers may appear if you set your type justified. A river is word spaces that appear near each other on subsequent lines of text. It is better to edit the text than to change the word spacing on a line by line basis to correct rivers.

White Space : 

White Space White space doesn't have to be white. The large block of black created by the graphic of people adds a large block of black white space.

White Space : 

White Space Multiplying the number of people and reducing the size of the car in this "White Space" example provides additional contrast and reinforces the theme of the copy. Additional leading, larger margins, deeper paragraph indents all add white space or breathing room to the design. The oversized drop cap is another element of contrast and also helps to balance the page with the large, dark elements at the bottom of the page. The drop cap style, reversed title, and blue box are consistent with the rest of the series.

White Space in Interface Design : 

White Space in Interface Design

White Space in Interface Design : 

White Space in Interface Design

Concluding Remarks on White Space : 

Concluding Remarks on White Space White space is the distance or area between or around things Space separates or unifies, highlights and gives the eye a visual rest

authorStream Live Help