001

Table of Contents
 
Title Page
Copyright Page
Dedication
Preface
Unique Features
Acknowledgements
The Team at Wiley
Contributors to This Book
Special Thanks
My Mentors
My Students
My Family and Friends
 
PART ONE - Theory and Principles
 
CHAPTER 1 - Communication Goals
 
What Is Graphic Communication?
Information
Persuasion
Education
Entertainment
References
Notes
 
CHAPTER 2 - Design: Definition and Devices
 
Design as a Problem-Solving Tool
Design Devices
References
 
CHAPTER 3 - Design: Elements and Principles
 
The Visual Pieces
Design Principles
References
 
CHAPTER 4 - Conceptualization and Planning
 
Inspiration
Seven-Step Design Process
Digital Design Project Types
References
 
PART TWO - Techniques
CHAPTER 5 - Raster Graphics
 
Digital Imaging and Raster Graphics
Raster Graphics Techniques
Online Movie Lessons
Bibliography
 
CHAPTER 6 - Vector Graphics
 
Digital Illustration and Vector Graphics
Vector Graphics Techniques
Online Movie Lessons
Bibliography
 
CHAPTER 7 - Digital Page Layout for Print
 
Page Layout Techniques
Online Movie Lessons
Bibliography
 
CHAPTER 8 - Web Site Design and Development
 
Creating a Web Site
Web Design and Development Techniques
Online Movie Lessons
Bibliography
 
Figure Credits
Index
APPENDIX I - Using the Seven-Step Design Process
APPENDIX II - Digital Photography
APPENDIX III - Widely Used Applications and Formats Chart

001

To my partner and my love, Kimberly, and my boys, David and Jack.

Preface
Digital Design for Print and Web: An Introduction to Theory, Principles, and Techniques was written to help people succeed with digital design. It is a learning product that incorporates both video lessons and an in-depth textbook written from two perspectives—that of a student, and that of a teacher.
First I put myself in the shoes of a new designer or design student caught up in a frenzy of information. The melding of new technology, techniques, and principles causes many inexperienced designers to default to honing their computer skills, rather than establishing their design sense. This is dangerous: it creates a backlash against the creative process, which requires us to think creatively and then produce—not the other way around. As tools and technology become increasingly accessible—and powerful—I see this problem among more and more students.
To learn design, you need to recognize it and extract its principles for use in your own work. To be a digital designer, you must marry the principles of design to software techniques. You are thus engaged in using theory in practice. That is what this book is about. It will help you discover the principles of design and understand the most vital digital design techniques used today. Along the way, you will learn by seeing real-world design examples from highly prominent designers and artists. Then you will learn by doing, using step-by-step examples and tutorial movies.
As a teacher of digital design, I have come to realize that I must deliver lessons in principles, techniques, and technology. Having only two of the three components in my lectures jeopardizes the learning experiences of my students. Finding teaching resources, especially textbooks, is difficult; most simply don’t deliver the depth and breadth of coverage needed to teach both theoretically and pragmatically. When teaching digital design in the past, I have often been forced to use several books for a single course—or no book at all—simply because no one book could provide both the theory and practical application that I felt I must convey to my students. That is why I wrote this book: a text that can be used in a classroom and that can serve as a valuable professional resource after the formal learning concludes. This text covers and connects introductory theoretical design foundations and industry standard techniques for visual communication problem solving using print and Web media.
Although the text presents several different industry-standard software applications, the book is technique driven rather than software driven. The techniques are applied to digital design problem solving across software titles and versions. The book aims to provide value to small lab settings that demand hands-on instructors as well as to larger courses planned around instructor-driven lectures and demonstrations that encourage experienced students to explore software techniques on their own. Inspiration is provided through images from classic and contemporary designers.
Part One presents introductory design and graphic communication concepts and principles. Theoretical coverage includes a concise design overview surveying communication goals and fundamental design principles, using historical, professional, and student images of digital print design, Web design, Web graphics, digital imaging, and digital illustration.
Part Two introduces technical coverage, providing a primer of basic to intermediate digital design techniques for students of communication design, graphic design, computer graphics, and media graphics.

Unique Features

• Over two hundred historical and professional illustrations of design concepts, print design, Web design, Web graphics, digital imaging, and digital illustration from world-renowned designers and design firms as well as students.
• Coverage of theory and practice in one text.
• Online tutorial movies for each chapter to support classroom lectures, student assignments, and lab sessions.
• Design assignments for in-class or homework assignments.
• Illustrated, step-by-step techniques.
• A comprehensive connection between theory and practice.
• Critical terms and techniques combined with short treatments to provide a thorough primer for new learners.
• Advanced production projects online for accelerated students.
• Progression toward print and Web project development.
• Pedagogical tools including chapter objectives, key design concepts, design assignments, endnotes, and additional bibliographic resources.

Acknowledgments
This book was a team effort. Following are the people who helped make it come together.

The Team at Wiley

I am thankful to the team at John Wiley & Sons who made my vision a reality. Senior editor Margaret Cummins and her assistants Leslie Saxman and Lauren Poplawski worked hard to mold my ideas into a publication that would impact the lives of students and professionals across the world. Margaret walked me through this project, sharing her wealth of experience and expertise freely. She challenged me to develop a book that would refresh the digital design publication market and enable people who read it to learn critical principles and techniques in a way that is clear, comprehensive, and innovative. I also need to thank senior production editor David Sassian and copyeditor Andrew Miller for polishing the manuscript into a finished work.

Contributors to This Book

I was so fortunate to connect with a wealth of great creative professionals when I was writing this book. These designers, photographers, and design history icons, as busy as they are, were kind enough to respond to the requests I sent them for images of their work. Those images helped make this book beautiful and practical, and I am grateful to each one of them for their contribution to my small piece of history.
James Biber of Pentagram Design
Michael Bierut of Pentagram Design
Michael Calandra
Kristen Crawford
Hillman Curtis of Hillman Curtis Inc.
Greg D’Onofrio of Kind Company
John Fekner
Brian Fendt
Kevin Fornito
Michael Gericke of Pentagram Design
Milton Glaser of Milton Glaser Studio
Luke Hayman of Pentagram Design
Kitt Hendricks of Pentagram Design
Julia Hoffmann, Creative Director, Museum of Modern Art (MOMA)
Angus Hyland of Pentagram Design
Don Leicht
Domenic Lippa of Pentagram Design
Alvin Lustig
Elaine Lustig Cohen
Richard Kirk Mills
Justus Oehler of Pentagram Design
Susannah McDonald, Archivist at Pentagram Design
Abbot Miller of Pentagram Design
Micha Riss of Flying Machine
Stefan Sagmeister of Sagmeister Inc.
Paula Scherof Pentagram Design
Jee Won Sin
Tommy Spero of Soul Associates
DJ Stout of Pentagram Design
Lisa Strausfeld of Pentagram Design
Richard Rex Thomas
Steve Watson of Turnstyle

Special Thanks

My former student, and now my friend and colleague, Kristen Crawford provided many of the illustrations and figures in this book, working through my sometimes cryptic requests. Her tireless dedication to this project was instrumental to its success. I am thankful to have met Kristen and value her friendship.
My former students Brian Fendt, Kevin Fornito, and Michael Calandra graciously provided their photography and artwork for the in-text examples and learning movies.
Richard Rex Thomas wrote a special appendix on digital photography for the book. I am thankful to Rex for taking time out of his busy life to give my readers a chunk of his expertise.

My Mentors

Dr. Frank Brady has given me the opportunity to succeed at the institution that I love, St. John’s University, and the guidance I constantly need to navigate academia and achieve my goals. I cherish my relationship with him and am honored to receive kind mentoring from such an accomplished scholar. I also need to thank Dean Kathleen Voute MacDonald of St. John’s University, who has supported my professional projects and research efforts from the beginning of my journey at St. John’s. Dr. Richard Smiraglia has been a foundation for learning and taught me how to perform research and write effectively. Finally, my former professors (whom I now call friends), John Fekner and Rick Mills have guided me to embrace a life of creativity—something I will cherish forever.

My Students

I am grateful to the many students who inspire me every day and allow me to pay it forward as much as I can. They make me constantly consider the clarity of my teaching and my mission in life.

My Family and Friends

Nothing happens in my life without my most important support system, my family and friends. My wife Kimberly is my partner, my love, and my life. My boys, David and Jack, bring me joy and pride, and I only hope that I can help them grow into people who find true happiness and make a difference in society.
My parents, John and Frances DiMarco, show me the love and support that has helped me to pursue my dreams. My sisters, Margaret and Roseann; my brother Jerry; Gina and Richard; Corinne, Dylan, Tristan, and Ricky; and Alexis and Joey; Aunt Marie and Uncle Billy are constant sources of support and happiness. I must sincerely thank my extended family who treat me like one of their own: Karen, whom we miss dearly; Paul and Anell; Paul and Ginger; Brianna, Tori, Justin, Uncle Richie, and Aunt Chrissie; Jill and Joe; Julia, Jay, and Chris; Peyton, Josh and Matt; Aunt Barbara and Uncle Vinny; little Vinny and William; Aunt Cynthia, Brian and Eric; the DeAngelo and Molé families; and finally, our Babci, Florence Borowski. Our best friends and the godparents to my son, Steve and Debbie Demeo, are truly special. I am truly grateful to have such caring people in my life.

PART ONE
Theory and Principles
002
003
004
005

006
CHAPTER 1
Communication Goals
Chapter objectives
Define graphic communication.
Identify and define communication goals: information, persuasion, education, and entertainment.

What Is Graphic Communication?

Graphic communication is the result of a long evolution of tools and techniques. That evolution was greatly accelerated by the establishment of modern, industrial societies—and graphic communication itself greatly contributed to modern social and economic development, to the extent that today visual communication is a readily identifiable force in the growth of both Western and Eastern “postindustrial” information economies.
According to historical literature, graphic communication has taken as long as 30,000 years to evolve (Meggs 1998). The role of the visual communicator—and the function of communication—developed slowly: cave paintings done between 15,000 and 10,000 B.C., the invention of writing with pictographs in Mesopotamia (3100 B.C.), the invention of paper and Chinese relief printing (second century A.D.), the rise of late medieval illuminated manuscripts (eighth century A.D.), and the breakthrough of movable type in Europe (1450 A.D.) all contributed to that development. Investigation of communication design over the last century reveals patterns of technological, economic, occupational, spatial, and cultural development that can be attributed to the creation of an information-driven economy and society that relies on communication design and technology for stability and growth.
Although enhanced and changed by modern technology, including software and computers, the basics of communication have essentially remained the same through the millennia. Communication is a process that requires a sender (the designer), a message (information or an effort to persuade), a medium (the delivery platform), and a receiver of that message (the audience). Communication comes in various forms and is delivered in various media, or platforms for communication delivery. These media include all forms of printed paper or material (books, magazines, newspapers, brochures, flyers, signage, and billboards), the Internet, mobile phones and handheld devices, television, radio, CDs and DVDs, videos, video games, and films. Media transmitted to mass audiences is called mass media; it includes television, film, recordings, mobile technology, magazines, books, the Internet, and radio. Conversely, a brochure, part of a collection of collateral material, may only be seen by a few people.
Communication and media futurist Marshall McLuhan theorized that “the medium is the message,” meaning that we absorb and judge messages based on how they are delivered (Benedetti and deHart 1997). If we see an advertisement in a newspaper, we initially perceive it as factual simply because it comes to us via the mass media. Then, we step back and decipher the message to determine if it can be trusted, and to what level it can be absorbed and used by us; this process is part of media literacy. In all forms of communication, judicious design and professional production values therefore become vital to the success of a message. The final product—how it looks and performs visually—becomes a factor in the value of the communication and how it meets its goal. The content, design, and medium (output) make up the complete message, and each has an effect on the communication’s perceived credibility and persuasiveness.
FIGURES 1-1, A and B (overleaf) This brochure and Web page for the Tawkin’ New Yawk City Walls art exhibit combines panoramic photographs of New York City with classic graffiti stencil type that is lit up like a sign in Times Square. The copy takes a stab at the stereotypical New York accent. The exhibit’s theme is that the walls of New York City are always talking to us through street art and design. Design by Jeewon Shin.
007
FIGURE 1-1B
008
Communication can be written, as with copywriting and poetry. It can be visual, as with graphic design and fine art. It can be verbal, as with speech or song, or nonverbal, as with body language, dance, or instrumental music. This book focuses on visual communication and production in print (i.e., on paper) and on the Web.
The goals of such messages are to inform, to persuade, to educate, or to entertain. These goals overlap in many instances, but ultimately we plan communication vehicles such as brochures, Web sites, advertisements, commercials, animations, posters, flyers, books, magazines, video games, films, newspapers, and presentations with one specific goal in mind. For example, a children’s site could have the specific communication goal of educating children in math techniques. That central goal may be enhanced by using entertainment in the content of the site—for example, interactive games and animation that explain math techniques in a fun, engaging way. A newspaper attempts to deliver news that informs the reader quickly and efficiently by using headline text, charts, and graphs. When newspapers print sensual or shocking images, although the main goal may be to inform, the effect may be also to elicit an emotional response from readers.
Paul Martin Lester (2006, 50-51) outlined two ways that we process communication: sensually and perceptually. These differing pathways have been studied by scientists and other researchers. The sensual process, that which leads from sensation to visual communication, occurs when our eyes see visual forms and our brain takes the sensations (visual input) and makes a coherent image (also known as a gestalt). Perceptual processing occurs when our brains make immediate meaning from an image we see, such as that of a traffic light. The gestalt principle states that we see the whole before we identify the parts. Our brains separate wholes into parts to establish a figure (foreground) and a ground (background). When we can visually stabilize the parts into a whole image and identify figure and ground, we can make visual sense of an image. Combining images creates new meanings from the identification of associated symbols.
FIGURE 1-2 Sensual: American Institute of Graphic Arts (AIGA) Detroit poster designed by Stefan Sagmeister. Arresting imagery is used to convey the message that creating design can be painful. Art direction by Stefan Sagmeister.
009
Perception to visual communication occurs when we see images beyond the sensations and assign them complex meanings. An approach to understanding perception is semiotics, the study of signs. Signs have complex cultural meanings and can be seen in three ways: iconic, indexical, and symbolic (Lester 2006, 52-57). We are guided by iconic signs in everyday life: iconic signs are intended to be true representations of what they present—such as a photograph. Indexical signs have a logical connection to what they represent, such as dark clouds as a sign of stormy weather or falling snow as a sign of winter. Symbolic signs forge a cultural or social connection between an image or object and what it represents. Therefore, symbolic signs take on different meanings for different audiences—as in the case of a flag, monument, or style of dress.
As designers, we create a series of signs each time we create imagery. Our focus on the goals of a communication helps ensure that we create meaningful, simple, and understandable signs. Creating thoughtful communication requires researching the audience, recognizing its cultural and societal viewpoints, and delivering simple, clear messages that connect with its need or ability to be informed, persuaded, educated, and entertained. Indeed, using communication with the intended goal of informing, persuading, educating, or entertaining is the applied focus of digital design. The pervasive, all-encompassing power of digital information and communication technologies have given us a potent platform for gathering data, sculpting it into meaningful information, and producing designs that can be delivered via print, Web, broadcast, mobile technology, or industrial material.
FIGURE 1-3 Perceptual: This poster for Neenah Paper uses a single punctuation mark—an apostrophe—to symbolize the gun’s trigger. The deeper meaning is that the apostrophe is responsible for letter elimination. Art direction by Stefan Sagmeister.
010

Information

What Is Information?

Information is a raw material of—and core ingredient in—all designs and is part of all communication goals. Information is gathered in myriad ways and then adapted to fit the goal of the communication—whether to inform, persuade, educate, or entertain. We must have information in order to create a design.
Information is structured data. Data consists of random bits and pieces that can be seen all around us and can be gathered. We process data to create information that has meaning and contextualizes our reality. Numbers are a great example of data. Random numbers have little meaning to us, but when they are placed in a context, such as a birthday, on a player’s uniform, or in a name (such as Louis XIV), they become information with meaning.
FIGURE 1-4 In this redesign of Time magazine, the infographic transforms data into meaningful information through thoughtful illustration and the dominance of some design elements over others. Design by Luke Hayman.
011
FIGURE 1-5 This Web page for Art Projects International provides small multiples of information in the form of symmetrical thumbnails to unify the visual as a whole. Design by Kind Company.
012
Information design arranges chunks of data and information to inform the viewer. Information-focused designs communicate to us each day as we stop at a stop sign, read a train schedule, or watch the weather report on the evening news. Information designs are seen in newspapers, news-casts, calendars, timelines, charts, corporate reports, news Web sites, and instructional materials.
The meaning attached to information design can be purposeful, as in a campus map, or it may be lifesaving, as in an emergency exit sign. Information design must have high fidelity in meaning and visual strength in execution-because it guides the viewer during action. People must navigate through a Web site in order find information (text, photos, video, and audio content). Similarly, when reading a newspaper, people must navigate through various articles and sections in order to find information (stories, box scores, and ads) meaningful to them. Although there is an element of curiosity (looking for things) and discoverability (finding things) in print and Web interactions, information design—both for print and the Web—works to guide a viewer toward meaning as quickly as possible. In print design, the message must be read, understood, and processed by the viewer so it can be acted upon. This is known as legibility. In Web design, it is known as usability. The concepts of legibility and usability are discussed further in part 2 of this book.

Principles and Goals: Design for Information

When creating designs for information, decisions related to what viewers want—and what they need to be informed—become critical to success, and smart choices must be made based on the product definition, the audience, the environment, the development tools, and available raw materials. Decisions about text, images, and technology, which are needed to develop and deliver the message, should always be planned out.
Structure is the key component in information graphics (also known as infographics); achieving the proper gestalt (unification of the parts) leads to understanding on the part of the viewer or user. Therefore, information designers frequently use fact boxes, tables, diagrams, and illustrations. In his classic text Envisioning Information, Edward Tufte describes the flat, two-dimensional paper or video/computer screen media used in information design as “flatland.” “Escaping flatland,” states Tufte, is a key goal in designing the presentation of information (Tufte 1990,12). He promotes information density (quantity) and resolving power (clarity) in information design. He suggests the following principles to help escape flatland and build meaningful designs for information:
• Micro/macro readings represent information that is rich in detail and in overall structure. Micro refers to critical information that is read carefully to extract meaning. Macro refers to the larger whole that contains the micro components. We frequently see micro/macro readings in maps, flowcharts, blueprints, timetables, and monuments.
FIGURE 1-6 This spread from the book 100 Baseball Icons shows how composition can be used to present a rich overall structure (macro) using detailed visual components (micro). Design by Kit Hinrichs.
013
• Layering and separation represent an informational structure through overlapping elements, grids, margins, and white space. We frequently see layering and separation in Web pages, charts and graphs, catalogs, ads, magazines, newspapers, books, and brochures.
FIGURE 1-7 The Act French poster design uses layering of type and creates separation using line and space. Design by Julia Hoffmann.
014
• Small multiples represent information using repetition, consistency, mimicry, and iconic representation. We frequently see small multiples in instruction manuals, road maps, posters, computer interfaces, data tables, and charts.
FIGURE 1-8 This wrapping paper for AIGA presents a fun overall visual structure using patterning. Smaller, detailed images create micro structures that can be viewed independently, which is also fun. Design by Julia Hoffmann.
015
• Color provides hierarchical value, sensation, contrast, and visual texture.1 Color is a fundamental component of all design.
FIGURE 1-9 The Alvin Lustig history site by Kind Company uses black and white and warm colors to separate sets of visuals and information and to establish a stylized retro mood. Design by Kind Company.
016
FIGURE 1-10 This poster for the 2007 Shakespeare Festival uses sensual colors to evoke the feeling of love. Design by Paula Scher.
017

Persuasion

What Is Persuasion?

The notion of persuasion is essential to many scholars’ definitions of communication. David Berlo’s definition of communication states, “All communication behavior has as its purpose the eliciting of a specific response from a specific person (or group of persons)” (Berlo 1960,16).
FIGURE 1-11 This advertising poster for the Adobe Student Design Competition depicts a designer creating an award-winning work out of paper cups (real coffee was used). This emotional approach targets the design student who identifies with carefully crafted work and caffeine, as many do. Art direction by Stefan Sagmeister. Design by Matthias Ernstberger.
018
Persuasion is central to all communication, especially digital design, and particularly as it is applied to advertising. Information is converted into persuasive arguments during the advertising creative process (White 2007,11). Persuasive arguments provide controlled messages that highlight features, advantages, benefits, and a unique selling proposition to a target audience. Persuasion is attempted by delivering rational appeal (using factual argument) or emotional appeal (using values, opinions, and attitudes) to bring someone to action. Action comes in the form of buying a product or service, subscribing to an idea, donating to a public service organization, or voting for a political candidate.
FIGURE 1-12 The pieces of a standard corporate identity package are the business card, letterhead, and envelope. This design mark uses repetition, shape, and color to convey a visualization of science and media. Art direction by Stefan Sagmeister. Design by Matthias Ernstberger.
019
FIGURE 1-13 For the Barron’s logo, designer Milton Glaser married a strong illustration with reversed serif type that leaves no question about the brand name or the company focus on book publishing. Design by Milton Glaser. Courtesy Milton Glaser Studio.
020
Brands, an essential tool in persuasion, are “created in the mind,” according to Walter Landor (Wheeler, 2003). Brands become the icons that customers look for when purchasing products. Built around symbolic logos, brands evolve into identities recognizable to consumers. The designer works to establish a visual icon—a logo—that represents the brand and creates a channel of persuasion built on trust and recognition. We recognize and connect to certain brands as they become iconic, indexical, or symbolic to us. The look of the corporate identity is critical in representing the company and its products and services.
FIGURE 1-14 Paula Scher quickly made visual sense of the Travelers merger with Citibank. She effortlessly mocked up the concept on a napkin during the pitch meeting. Design by Paula Scher.
021
FIGURE 1-15 The Citi logo. Photo by John DiMarco
022

Principles and Goals: Design for Persuasion

Our goal as designers who create persuasive documents is simple in theory, but quite challenging in practice. We must use type, image, and multimedia to bring the viewer to an understanding of the message and a desire to act upon it. We want the viewer to understand the feature, advantage, or benefit we are presenting. We want the viewer to agree to the unique selling proposition we are pitching through the visuals we present in our persuasive designs.
Certain elements of persuasive designs have resonance in the human mind. A design cannot be persuasive if it cannot be understood. Concentrate on one idea for each persuasive communication. Follow these suggestions in your print and Web designs to increase their persuasive value:
• Do research on the audience and the competition to put you in the viewer’s situation.
• Use arresting or thought-provoking images (photos or illustrations) that act as a magnet for the viewer’s eyes.
• Use display type (which is larger and more dominant than the body text) that draws the reader in. Create visually dominant attention-seeking headlines.
• Explain and clarify features, advantages, and benefits in highly legible body copy.
• Use grids to arrange elements in order of importance.
• Use size to clarify meaning and create visual hierarchy.
• Use color to attract attention, group elements, indicate meaning, and enhance aesthetics (Lidwell et al. 2003, 38).
• Keep messages and visual elements simple so recognition is quick.
• Use themes to connect with the audience.
FIGURE 1-16 A digitally created, thought-provoking visual dominates this poster, “We Are All African,” which forges a persuasive message. Design by Milton Glaser.
023

Education

What Is Education?

Simply stated, education is the process of transferring knowledge and skills. Instructional design is also known as designing for education and is also used in designing for training. The goal of education design is to translate learning objectives (lessons) into measurable outcomes fort he learner. Connecting a lesson-based communication into a learning experience requires instructional design; the designer must create engaging, understandable chunks of communication that guide the viewer toward comprehension, application, criticism, and synthesis of something that is new. We see design for education in textbooks (such as this one) and children’s books, online learning objects (such as interactive games and activities), educational brochures (like the one at your dentist on how to properly brush your teeth), educational television and videos (Sesame Street and Blue’s Clues, for example), posters, classroom teaching materials, and e-learning courses for academic credit or corporate training.
FIGURE 1-17 E-learning is used to educate employees at Canon. This screenshot from Canon and the Imaging Industries e-learning course uses small multiples and chunks to deliver the history of the organization. Design by John DiMarco.
024

Principles and Goals: Design for Education

In their book Universal Principles of Design, Lidwell, Holden, and Butler answer the question, How can I help people learn from a design? The authors provide some fundamental sections on how a designer can enhance the learning experience for the viewer.
• Use chunks (small units) of information in designs. Chunking involves combining many units of information into smaller units, or chunks, so it is easier to remember the information (Lidwell et al. 2003, 30). Using bulleted lists, tables, and short paragraphs of text helps the learner grasp topics and avoid overload when absorbing new information.
• Use hierarchy in designs for education. Using trees, nests, and stairs in educational graphics helps the viewer make relationships to the material presented and emphasizes the importance of each element (Lidwell et al. 2003,104).
• Pursue legibility at all costs in design for education, because it is critical to understanding. Legibility ensures that items are as clear and simple as possible so that the viewer can digest the information without questions. Using contrast, space, type, and images consistently helps build legibility in your education designs.
• Use mental models to illustrate concepts that involve user experience and how something works (Lidwell et al. 2003,130). Use real-life models if available and appropriate, but do not use models that are not specific to the task. The design should incorporate the real event and the expected outcome in order to create scenario-based learning. Mental models are used in simulations. For example, flight simulators teach pilots how to use aviation instrumentation without being in planes. For the designer to understand the model and to grasp key interactions, he or she should use the model in real life first, before—as well as during—the design process, if possible.
FIGURE 1-18 Children’s books are educational design projects. They require the designer to focus on using communication to educate and entertain through design and, most importantly, illustration. Design and illustration by Milton Glaser.
025
• Use progressive disclosure in education and instructional designs to manage complex information so that it is displayed only at the necessary time (Lidwell et al. 2003,154). Give viewers only what they need to learn at that particular moment. New, more complex information should be discovered upon request or after simpler information is digested. In print design, progressive disclosure is seen in footnotes, appendices, and instructions. Instruction manuals guide the reader toward learning a bout a product by revealing more complex features as the reader gets deeper into the manual’s contents. In Web design, progressive disclosure is seen by clicking a button labeled More or Next. Web-based training, also known as e-learning, uses progressive disclosure to pace the learner through the materials and to give relevance to each chunk of information being presented.
FIGURE 1-19 The Sugar interface design for the One Laptop per Child Foundation is built for intuitive operation and uses a mental model to represent neighborhoods. Design by Lisa Strausfeld.
026

Entertainment

What Is Entertainment?

Dictionary.com defines entertainment as “something affording pleasure, diversion, or amusement, esp. a performance of some kind.”2 Design for entertainment is seen in fine art, television programs, plays, animation (for TV, Web, and gaming), video games, films, books, magazines, movies (on television or the Web), e-books, and digital video on the Web.

Principles and Goals: Design for Entertainment

Entertainment design requires focus on creating an art form that has the ability to engage the viewer or listener to appreciate a product emotionally and intellectually (Pramaggiore and Wallis 2008, 3). The basic framework of items that you would need to focus on when designing for entertainment are:
• Narrative or documentary (the story and the writing: fiction or nonfiction)
• Cinematography (the camera work: shot setups, framing, lighting)
• Staging (the set design: stage or screen)
• Audio (dialogue and sound effects)
• Characters (the talent: actors or animations)
• Visuals (titling, images, special effects)
• Style (the look and feel of the details)
• Delivery medium (television, print vehicle, Web site, DVD, video, CD-ROM, movie theater, stage, concert hall).
FIGURE 1-20 The A&E Web site is built to entertain and persuade the viewer to explore the program offerings and visit the site’s banners and links.
027
Entertainment design as a visual product (not a manuscript of text only) relies upon images and narrative to create connection with the viewer. The digital design of visual entertainment content is seen extensively in works with moving images, such as movies and animations. Entertainment design is also seen in the packaging of entertainment content and news, such as posters, CD and DVD covers, books, digital videos, Web sites, and magazines.
FIGURE 1-21 This poster for recording artist Lou Reed’s album Set the Twilight Reeling uses handwritten typography over a tightly cropped photograph of the artist to transfer the personal emotions embedded in the lyrics. Art direction and design by Stefan Sagmeister.
028
FIGURE 1-22 The Hillman Curtis Web site is a functional business promotion site as well as an entertainment portal showcasing short films shot and designed for both Web and broadcast output. Design by designer and filmmaker Hillman Curtis.
029

References

Benedetti, Paul, and Nancy deHart. 1997. On McLuhan: Forward through the rearview mirror. Cambridge: MIT Press.
Berlo, David K. 1960. The process of communication: An introduction to theory and practice. San Francisco: Rinehart.
Holtzschue, Linda. 2006. Understanding color: An introduction for designers. Hoboken, NJ: John Wiley & Sons.
Lidwell, Paul, Kritina Holden, and Jill Butler. 2003. Universal principles of design. Gloucester, MA: Rockport.
Lester, Paul. 2006. Visual communication: Images with messages. Belmont, CA: Thomson Wadsworth.
Meggs, Phillip. 1998. A history of graphic design. New York: John Wiley & Sons.
Pramaggiore, Maria, and Tom Wallis. 2008. Film: A critical introduction. London: Laurence King.
Tufte, Edward. 1990. Envisioning information. Cheshire, CT: Graphics Press.
Wheeler, Alina. 2003. Designing brand identity: A complete guide to creating, building, and maintaining strong brands. Hoboken, NJ: John Wiley & Sons.
White, Alex W. 2007. Advertising design and typography. New York: Allworth Press.

Notes

1 Holtzschue (2006, 30) writes that sensation is the body’s response to stimulus.
2 http://dictionary.reference.com/browse/entertainment

030
CHAPTER 2
Design: Definition and Devices
Chapter Objectives
Define design as a problem-solving tool for communication.
Introduce basic design types.
Identify modern, functional influences.
Identify and integrate modern, functional design devices.
Explore exemplary and inspirational images from a variety of artists and designers.

Design as a Problem-Solving Tool

What Is Design?

A noun and a verb, design has a variety of meanings. As a verb, design designates an activity. To design something is to conceive, invent, or create to solve a problem. As a noun, design designates a visual or industrial composition. Connecting the two, we can define design as a visual or industrial composition that solves a problem.
Design is a process and a tool. We see the residual effects of design in new and improved products and technological innovation. On the industrial side of design, let’s use automobiles as an example. A major automobile safety problem is the head-on car crash. A head-on crash may cause a driver or passenger to be catapulted out of the vehicle upon impact, causing serious or lethal injury. To solve this problem, industrial designers first invented lap-only seatbelts. Lives were saved as time went on. However, research showed that injuries still occurred, because passengers were getting injured from the whip of their upper bodies into the dashboard. So the seatbelt was redesigned to add a shoulder harness. The shoulder harness was better, but it still did not offer protection if the vehicle crumpled into the occupants during a crash. Recognition of that problem spawned the design of the airbag for drivers and front passengers. Still not good enough. Passengers in the front and back seats can be injured or killed when there is a side impact crash. Problems move design, and design moves innovation forward. The latest innovation in automobile safety is the side curtain airbag.
Can you see how design spirals through innovation and creation to solve problems through iterations and process? The iterations, also known as versions, help the designer build on the notion that form follows function, meaning that we must solve the problem at its core initially. This requires us to get the function and purpose clear; only then can we think about form and the aesthetic aspects of the project.
FIGURE 2-1A This cover for Creativity magazine shows how form is translated through clear, functional type and image. Design by Michael Bierut.
031
FIGURE 2-1B This Web site for Hillman Curtis Inc. shows how form is translated through clear, functional layout. Design by Hillman Curtis.
032
Design is not simply a final result; design is a spiraling process that is used to solve a problem and achieve a goal. So, what are the problems we work to solve as digital designers? The problems we solve, through visual communication and multimedia communication, are rooted in the communication goals of our clients. The problem could be that more products need to be sold; we therefore focus on design for persuasion. The problem could be that we need to tell the story of a great event or person; we therefore focus on design for entertainment. The problem could be that we need to guide people to a destination; we therefore focus on design for information. The problem could be that we need to transfer knowledge about how to do something; we therefore focus on design for education. Remember, the problem exists in the communication goal we are trying to achieve. We have to figure out who our audience is and how to inform, persuade, educate, or entertain them using print or Web media. In many cases, we must pursue multiple goals. We want the viewer to see the communication, read the message, and act upon it.
FIGURE 2-2 Milton Glaser’s classic logo I Heart (love) NY was initially created for the New York State Department of Economic Development to promote tourism. After the September 11 attacks on New York City, the mark’s design was updated to communicate a message of hope and unity. The logo is a cultural icon that is adored worldwide. Design by Milton Glaser.
033
FIGURE 2-3 Seattle design firm Turnstyle shows modern design influence with clear communication and legibility in BrandScents, a series of self-promotion air fresheners that focus on client brand awareness. Design by Turnstyle.
034
In Edward Tufte’s 2003 manifesto on the evils of bad presentation design, The Cognitive Style of PowerPoint, he warns that “the tools are not the content...the content is the content and those who create content must care how it is presented in the form of quantity, style, pace, and most importantly, message” (Tufte 2003). The tools of design are whatever you have. We use pencils, markers, and paper to create two-dimensional designs on paper. We use cameras, scanners, computers, and digital design software to create computer graphics, printed page layouts, animations, and Web pages that move into the realm of 3-D virtual design and 4-D time-based design. But the tools do not make the designs. The designer must find the solution through knowledge of the client, source materials, and calculated methods. The next section provides broad information on modern styles.

Modern Influence

The Industrial Revolution spawned innovations in manufacturing that created an increased need for graphic communications. As the United States, England, and most of Europe began this shift toward mass production, technologies such as photography and lithographic printing provided the production tools needed to deliver information to mass audiences. The modernism in commerce was fueled by modernism in the art and design disciplines. Modernism movements in design gave birth to functional design and challenged designers to create meaningful communications based on predetermined standards and formats, including posters, brochures, book covers, magazine designs, and advertisements (Meggs 2006).
Tools and techniques used by designers today were influenced by modernism; these techniques include montage, collage, symmetrical and asymmetrical typography, geometrics, and most importantly, function before form. Many modern movements, including futurism, Dada, and de Stijl, have influenced artists and designers. You can explore art history texts and archival Web sites to get exposure to all the movements in modern and postmodern art.