DiMarco J. Digital Design for Print and Web: An Introduction to Theory, Principles, and Techniques

Подождите немного. Документ загружается.

ChaptEr 2 Design: Denition and Devices 53

“the principle of alignment states that nothing on a page should be placed on the

page arbitrarily. Every item should have a visual connection with something else

on a page” (1994, 27). Use left or right justied type to create clean visual lines

and easy-to-follow visual connections. Avoid using centered alignment unless it is

absolutely necessary or you are sure you can do it effectively.

The proper alignment of type and image creates the proper visual con-

nections; creating meaningful connections is also achieved by proximity and

grouping.

Figure2-23 The use of centered alignment can be effective if well thought out, as in these

business card and Web page examples. Design by Turnstyle.

98364c02.indd 53 1/15/10 1:08:32 PM

PART ONE Theory and Principles54

proximity and Grouping

The proximity of related items provides a visual guide for the viewer’s ingestion

of a page’s organization and content. While proximity demonstrates impor-

tance, grouping shows connections. Placing a company’s Web site address

underneath its logo in an advertisement is an example of grouping. Placing the

logo at the bottom of the page—far from the page’s main content—is an exam-

ple of proximity. The use of proximity as a design technique is also seen in the

manipulation of the page’s perimeter edge.

Figure2-24 Proximity

and grouping are critical

to good communica-

tion design and creating

cohesive visuals. Design

by Julia Hoffmann.

98364c02.indd 54 1/15/10 1:08:33 PM

ChaptEr 2 Design: Denition and Devices 55

perimeter Edge

The perimeter edge is the edge of the live space for the design. The four edges of

a piece of paper are perimeter edges. The four edges of a screen or monitor also

create a perimeter edge. Treatment of the perimeter edge can be varied with the

margins and bleeds. Margins are the spaces between text and graphics and the

edges of the paper or the screen. By leaving wide margins, you create a dramatic,

isolated visual. Bleeds are created by positioning text and images partially off the

edge of the page, so that they appear cut off. This technique of allowing images

to bleed off the page can be found in many print designs, including magazines

and book covers. Bleeds give a design a dynamic look and can also evoke the

feeling of motion because the type, image, or color drops off the page.

Figure2-25 T h i s

corporate philosophy

poster uses a perimeter

edge with bleed. Design

by John DiMarco.

98364c02.indd 55 1/15/10 1:08:38 PM

PART ONE Theory and Principles56

References

Arnston, Amy E. 2006. Digital design basics. Belmont, CA: Thomson

Wadsworth.

Barzun, Jacques, and Henry Graff. 2004. The modern researcher. 6th ed. Bel-

mont, CA: Thomson Wadsworth.

Bauhaus-Archiv Museum of Design. 1919. Manifesto. http://www.bauhaus.de/

english/bauhaus1919/manifest1919.htm.

Brainard, Shirl. 1991. A design manual. Englewood Cliffs, NJ: Prentice Hall.

Curtis, Hillman. 2000. Flash Web design: The art of motion graphics. Berkeley, CA:

New Riders.

———. 2002. MTIV: Process, inspiration, and practice for the new media designer.

Berkeley, CA: New Riders.

Elam, Kimberly. 2001. Geometry of design. New York: Princeton Architectural

Press.

———. 2004. Grid systems: Principles of organizing type. New York: Princeton

Architectural Press.

Golding, John. 1994. Concepts of modern art. Ed. Nikos Stangos. New York:

Thames & Hudson.

Grayson, Steve. 1995. Adobe Systems print publishing guide. Mountain View, CA:

Adobe Systems.

Heller, Steven, and Seymour Chwast. 2000. Graphic style: From Victorian to digi-

tal. New York: Harry Abrams.

Herman Miller. 2008. Discovering design (educational Web site).

http://www.hermanmiller.com/discoveringdesign.

Hollis, Richard. 2001. Graphic design: A concise history. New York: Thames &

Hudson.

Holtzschue, Linda. 2006. Understanding color: An introduction for designers.

Hoboken, NJ: John Wiley & Sons.

Kristof, Ray, and Amy Satran. 1995. Interactivity by design: Creating & communi-

cating with new media. Mountain View, CA: Adobe Press.

98364c02.indd 56 1/15/10 1:08:38 PM

ChaptEr 2 Design: Denition and Devices 57

Lauer, David, and Stephen Pentak. 2007. Design basics. Belmont, CA: Thomson

Wadsworth.

Lidwell, Paul, Kritina Holden, and Jill Butler. 2003. Universal principles of design.

Gloucester, MA: Rockport.

Meggs, Phillip. 1989. Type and image: The language of graphic design. New York:

Van Nostrand Reinhold,

Meggs, Phillip, and Alston Purvis. 2006. Meggs’ History of Graphic Design, 4th ed.

Hoboken, NJ: John Wiley & Sons.

Stewart, Mary. 2002. Launching the imagination: A comprehensive guide to basic

design. New York: McGraw Hill.

Swann, Alan. 1997. The new graphic design school. Hoboken, NJ: John Wiley &

Sons.

Tufte, Edward. 2003. The cognitive style of PowerPoint. Cheshire, CT: Graphics

Press.

Wheeler, Alina. 2003. Designing brand identity: A complete guide to creating, build-

ing, and maintaining strong brands. Hoboken, NJ: John Wiley & Sons.

White, Alex W. 2005. Thinking in type: The practical philosophy of typography.

New York: Allworth.

———. 2007. Advertising design and typography. New York: Allworth.

White, Jan V. 1990. Color for the electronic age. New York: Watson Guptill.

Williams, Robin. 1994. The non-designer’s design book. Berkeley, CA: Peachpit.

98364c02.indd 57 1/15/10 1:08:39 PM

98364c03.indd 58 1/15/10 1:08:48 PM

Chapter Objectives

Identify and dene visual

design elements.

Introduce basic design

principles.

Explore exemplary and

inspirational images from

a variety of artists and

designers.

ChaptEr 3

Design: Elements

and Principles

98364c03.indd 59 1/15/10 1:08:48 PM

PART ONE Theory and Principles60

The Visual Pieces

Line

A line is a connected series of points that contrasts with its background. Lines

can be rectilinear (straight with corners) or curvilinear (rounded), to project dif-

ferent visual themes. Curvilinear lines are seen in nature (plants and animals do

not have absolutely straight lines) and are therefore considered organic. Recti-

linear lines are associated with industry—buildings and machinery, for example.

Considered mechanical, they are typically harder edged and more constraining.

Figure3-1 Heavy and light variations of line are the main elements that provide value and

structure in this design. Design by Richard Kirk Mills.

98364c03.indd 60 1/15/10 1:08:50 PM

ChaptEr 3 Design: Elements and Principles 61

Lines can be used to create the contour of an object, resulting in a shape.

Lines can be overlapped, or hatched, to create textures. Lines can also be used

to create boundaries or to suggest motion. We create lines in digital design

applications by drawing or painting and by using line tools and rules. We also

create them transparently through alignment, proximity, and grouping.

Shape

A shape is an area in space created by closure. Shapes can be organic (from

nature), geometric (formed according to mathematical formulas), or freely

imaginary. Shapes occupy space and create a relationship between gure and

ground. Shapes (gures) are image elements that contrast with the background

(ground). (The ground is the “negative space.”) In graphic design, by composing

shape elements (type and images) using a grid, we create a gestalt. When we

use the same shapes and use space as a buffer, we create an illusionary shape

from the negative space. We create shape in digital design by using digital tools

to draw and paint marks that connect and by using various digital design soft-

ware shape tools to draw geometric and abstract shapes.

Figure3-2 Shapes are drawn based on perspective to create a realistic landscape of New York

City’s Park Avenue South. Design by Richard Kirk Mills.

98364c03.indd 61 1/15/10 1:08:52 PM

PART ONE Theory and Principles62

Texture

The surface quality of a shape or line is its texture. Texture can be seen and felt

(tactile) in sculpture or other three-dimensional objects; it can be seen (visual) in

two-dimensional artwork and design pieces. Texture is created in digital design

by using overlapping images, lines, and shapes. We can also invent textures by

creating different patterns (repeating elements) that simulate a textured surface

(Stewart 2002, 1-15–1-17). Digital design software provides layers, so that dif-

ferent elements can be separated and we can then experiment with overlapping

and changing their stacking order to create textures.

Value

Value is the relative lightness or darkness of a hue. A hue’s value is measured by

comparing it to hues of other values. These values establish an image’s contrast:

an image composed mainly of hues of similar values is said to have low contrast,

while a high-contrast image contains hues of widely disparate values. Values

can be graduated into a gradient scale (grayscale, for example) to show the dif-

ference between light and dark, as well as all the midrange values in between.

Figure3-3 Texture is achieved by overlapping various marks, patterns, and materials. Design

by Richard Kirk Mills.

98364c03.indd 62 1/15/10 1:08:55 PM