Visual & Web Design – Overview
Graphic Design
Brief History of Graphic Design Education
Communication Model
Practical Foundation
Swiss Design School & Grid System
Typography
Grid Construction
Grid System – Heuristics
Web Design
User Behavior  Design Implications  Design Specifics
Summary
Requirements for Web Pages
Food for Eyes
Colors Magazine
More Colors
Visual Essay
Assignment
Visual Storytelling
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Graphic Design
Graphic Design
–
–
–
–
Brief History of Graphic Design Education
Communication Model
Practical Foundation
Swiss Design School & Grid System
Sources
– Katherine McCoy, “Education in an Adolescent Profession”
– Josef Mueller-Brockmann, “Grid Systems in graphic design”
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Brief History of Graphic Design Education
Pre-Modernism
–
–
–
–
Focus on Image Associations
Lack of Formalized Method: early luminaries self-taught
Premium on Creativity: “BIG IDEA”
Learn from “Samples and Examples”
Functional Modernism
– "Swiss School" of Graphic Design
– Based on Bauhaus
– Focus on Formal Purity rather than Content
Post-Modernism
–
–
–
–
–
Influenced by French Literary Theory
Variety of Cultural Contexts and Personal Experiences
Possibility of Multiple Interpretations
Question Rigidity, Minimalism of Graphic Modernism
Subjective, Personal Layers of Meaning & Complexity
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Communication Model - Sender
Sender
Transmitter
Receiver
Functional Modernism
Post-Modernism
Science
Language
Systematic presentation
of objective information
Audience's response due
to different cultures and
subjective experiences
Design School
Pre-Modernism
Guiding Discipline
Art
Focus on
Personal content and
creativity
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Communication Model - Transmitter
Sender
Transmitter
Receiver
Functional Modernism
Post-Modernism
Science
Language
Systematic presentation
of objective information
Audience's response due
to different cultures and
subjective experiences
Design School
Pre-Modernism
Guiding Discipline
Art
Focus on
Personal content and
creativity
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Communication Model - Receiver
Sender
Transmitter
Receiver
Functional Modernism
Post-Modernism
Science
Language
Systematic presentation
of objective information
Audience's response due
to different cultures and
subjective experiences
Design School
Pre-Modernism
Guiding Discipline
Art
Focus on
Personal content and
creativity
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Communication Model
Sender
Transmitter
Receiver
Functional Modernism
Post-Modernism
Science
Language
Systematic presentation
of objective information
Audience's response due
to different cultures and
subjective experiences
Design School
Pre-Modernism
Guiding Discipline
Art
Focus on
Personal content and
creativity
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Future of Graphic Design
Digital Communications Design
– Different Design Strategy than Perfectionist Graphic Design
– Less Control, More Conceptual, More Interaction
– Users Co-Creators
Requires Deeper Understanding of the
Communications Process
Combines Art, Science and Language
Needed Expertise
–
–
–
–
–
Multimedia Design: Visual Art, Music, Film
Communications Theory
Cognitive & Perceptual Psychology
Social Sciences & Cultural Anthropology
Computer Science
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Practical Graphic Design
Graphic Design = Organic Process
– Cultural, Contextual, Personal
– Client & Designer Interaction
Good Design is “Stolen”
– Emulate what speaks to you
Need Practical Foundation
– Functional Swiss Design School
– Grid Systems
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Swiss Design School
Based on Bauhaus
– Form follows Function
– Minimalism, Universality, Rationality, Abstraction and Structure
Focus on Formal Purity rather than Content
Grid System
– Divide 2-D plane or 3-D space into Smaller Fields
– Intermediate Space so that Captions and Pictures Don’t Touch
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 8 Fields Example
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 8 Fields Example
Swiss Design School
The great Swiss innovators of the 1950s and
1960s can be seen as representing the classic
phase of modernism, the heirs to Bauhaus graphic
design and other early modern European graphic
designers. These Swiss innovators applied the
Bauhaus functionalist ethic to a systematic graphic
Caption Text
method that shared the Bauhaus values of
minimalism, universality, rationality, abstraction
The method, symbolized by the typeface Helvetica,
and structural expressionism. This fresh and
was enthusiastically adopted by several corporate
highly professional graphic design was first
and institutional design groups, including Container
transmitted beyond Switzerland to the rest of
Corporation, Ciba-Geigy, Herman Miller, IBM and
Europe and the U.S. through Swiss design
Massachusetts Institute of Technology. Montreal's
magazines and a few books, notably Graphis and
Expo '67 was a feast of Helvetica and systematic
the "Swiss" bibles by Muller-Brockmann, Gertsner,
environmental signage, as well as advanced
Hoffmann and Ruder.
architecture. Eventually, American corporate culture
Then, in the late 1960s, several professional
embraced "Swiss" school graphic design as the ideal
offices began to practice these ideas to solve the
corporate style. Although "Swiss" graphic design was
needs of large corporate clients in Holland, Great
first adopted in U.S. by professionals in their design
Britain, Canada and the U.S.
practices, soon several leading U.S. graphic design
schools followed suit, going directly to the source.
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 8 Fields Example
Swiss Design School
The great Swiss innovators of the 1950s and
1960s can be seen as representing the classic
phase of modernism, the heirs to Bauhaus graphic
design and other early modern European graphic
designers. These Swiss innovators applied the
Bauhaus functionalist ethic to a systematic graphic
Caption Text
method that shared the Bauhaus values of
minimalism, universality, rationality, abstraction
The method, symbolized by the typeface Helvetica,
and structural expressionism. This fresh and
was enthusiastically adopted by several corporate
highly professional graphic design was first
and institutional design groups, including Container
transmitted beyond Switzerland to the rest of
Corporation, Ciba-Geigy, Herman Miller, IBM and
Europe and the U.S. through Swiss design
Massachusetts Institute of Technology. Montreal's
magazines and a few books, notably Graphis and
Expo '67 was a feast of Helvetica and systematic
the "Swiss" bibles by Muller-Brockmann, Gertsner,
environmental signage, as well as advanced
Hoffmann and Ruder.
architecture. Eventually, American corporate culture
Then, in the late 1960s, several professional
embraced "Swiss" school graphic design as the ideal
offices began to practice these ideas to solve the
corporate style. Although "Swiss" graphic design was
needs of large corporate clients in Holland, Great
first adopted in U.S. by professionals in their design
Britain, Canada and the U.S.
practices, soon several leading U.S. graphic design
schools followed suit, going directly to the source.
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System - Motivation
Solve Visual Problems with Greater Speed
& Confidence
Maintain Consistency
– Title Location
– Annotations Location
– Image Rhythm
Create Visual Hierarchy & Rhythm
Invisible Guiding Hand
Information Presented Clearly & Logically
– Read More Quickly
– Understood Better
– Better Recall
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Typography
Readability
- how easy it is to read a lot of text
– Serif Typeface Better if a Lot of Text
– Type Size: 10 – 14pt
– Line Length
– Leading or Space between Lines
Legibility
- how easy it is to recognize short bursts of text
– Sans Serif Typeface is Better and Easier to Read on Screen
7 - 10 Words Per Line
– Overlong or Overshort Lines Tire
Column Width Proportional to Type Size
Bold and italic used for small blocks of text
Enough Contrast between Type and Background
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid Construction
Need to Know How Much Text
and How Many Images to Be Placed
Each Work Raises Many Questions
–
–
–
–
How Many Columns?
White Space and Margins Have Visual Function?
Annotations, Footnotes, Captions?
Large and Small Images? How Many?
Each Work Requires its Own Specific Grid
– Create Small Sketch
– Number of Columns Depends on Type Size
– Wider Columns Need Larger Type Size than Narrow Columns
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 8 Fields
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 8 Fields
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
8 Fields Grid - Image Size Options
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
8 Fields Grid - Image Size Options
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
8 Fields Grid - Image Size Options
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
8 Fields Grid - Image Size Options
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
8 Fields Grid - Image Size Options
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
8 Fields Grid - Image Size Options
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 20 Fields
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 20 Fields
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 20 Fields
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Grid System – 20 Fields
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
20 Fields Grid - Example 1
Swiss Design School
Although "Swiss" graphic design was first
adopted in U.S. by professionals in their
design practices, soon several leading
U.S. graphic design schools followed suit,
going directly to the source. A number of
Swiss teachers and their graduates, from
Armin Hoffman's Basel school in
particular, put down roots in schools
including Philadelphia College of Art,
University of Cincinnati and Yale. (The
Swiss influence seems to have been
particularly strong in U.S. and Canadian
schools; Europeans have often expressed
a certain mystification at this North
American reverence for the Basel
method.) Manfred Maier's book, Basic
Principles of Design, on the Basel
foundation program, was finally available
in the U.S. in 1977, spreading this method
farther. Under the influence of this highly
structured educational method and its
emphasis on the prolonged study of
abstract design and typographic form,
these American schools began to carefully
structure their curricula. Based on
objectivity and rationalism, this
educational system produced a codified
method that was easy to communicate to
students, giving them a foundation for a
visual design process and composition ..
SCILS@Rutgers
This classic modernist graphic aesthetic
is distinctly different from the
predominantly semantic imagery of the
"big idea". It stresses the grammar of
design and is rather neutral to content.
Regrettably, this language of structural
geometry has often resulted in a
sameness of form that is more the look
of function than truly communicative
function-- an emphasis on formal purity
rather than content. As this aesthetic
spread, however, a number of
Europeans, particularly in conjunction
with the Ulm school in West Germany,
began to apply semiotics to visual
communications problems. Related
explorations in the science of signs
were taking place in structuralist
philosophy, linguistics, literature and
film theory. Other efforts to develop
scientific design processes through
communication theory and computer
design method began in Great Britain
and at the Illinois Institute of
Technology during this period. Although
the Swiss never embraced these
communication theories, some of the
sounder graphic design schools outside
Switzerland have gradually begun to
incorporate theory into their curricula …
Multimedia Production Course
Prof. Anselm Spoerri
20 Fields Grid - Example 2
Swiss Design School
Poster Designs by
Josef Muller-Brockmann
Caption describing the poster
designs. When they were created.
Who the client was and their
effectiveness.
Although "Swiss" graphic design was first
adopted in U.S. by professionals in their
design practices, soon several leading
U.S. graphic design schools followed suit,
going directly to the source. A number of
Swiss teachers and their graduates, from
Armin Hoffman's Basel school in
particular, put down roots in schools
including Philadelphia College of Art,
University of Cincinnati and Yale.
SCILS@Rutgers
(The Swiss influence seems to have been
particularly strong in U.S. and Canadian
schools; Europeans have often expressed
a certain mystification at this North
American reverence for the Basel
method.) Manfred Maier's book, Basic
Principles of Design, on the Basel
foundation program, was finally available
in the U.S. in 1977, spreading this method
farther.
Under the influence of this highly
structured educational method and its
emphasis on the prolonged study of
abstract design and typographic form,
these American schools began to carefully
structure their curricula. Based on
objectivity and rationalism, this
educational system produced a codified
method that was easy to communicate to
students, giving them a foundation for a
Multimedia Production Course
visual design process and composition
that went far beyond the superficial
emulation of their heroes.
This classic modernist graphic aesthetic is
distinctly different from the predominantly
semantic imagery of the "big idea". It
stresses the grammar of design and is
rather neutral to content.
Prof. Anselm Spoerri
20 Fields Grid - Example 2a
Swiss Design School
Poster Designs by
Josef Muller-Brockmann
Caption describing the poster
designs. When they were created.
Who the client was and their
effectiveness.
Although "Swiss" graphic design was first
adopted in U.S. by professionals in their
design practices, soon several leading
U.S. graphic design schools followed suit,
going directly to the source. A number of
Swiss teachers and their graduates, from
Armin Hoffman's Basel school in
particular, put down roots in schools
including Philadelphia College of Art,
University of Cincinnati and Yale.
SCILS@Rutgers
(The Swiss influence seems to have been
particularly strong in U.S. and Canadian
schools; Europeans have often expressed
a certain mystification at this North
American reverence for the Basel
method.) Manfred Maier's book, Basic
Principles of Design, on the Basel
foundation program, was finally available
in the U.S. in 1977, spreading this method
farther.
Under the influence of this highly
structured educational method and its
emphasis on the prolonged study of
abstract design and typographic form,
these American schools began to carefully
structure their curricula. Based on
objectivity and rationalism, this
educational system produced a codified
method that was easy to communicate to
students, giving them a foundation for a
Multimedia Production Course
visual design process and composition
that went far beyond the superficial
emulation of their heroes.
This classic modernist graphic aesthetic is
distinctly different from the predominantly
semantic imagery of the "big idea". It
stresses the grammar of design and is
rather neutral to content.
Prof. Anselm Spoerri
Grid System – Heuristics
One Column
– Little Freedom for Pictures in Small, Medium and Large Size
Two Columns
– Text can go in First Column
– Illustrations, Images in the Second Column
– Text and Images can be Placed in Same Column
Three Columns
– Variety of Ways of Placing Text and Graphics
Four Columns
– If a lot of Text or Images Need to be Placed
– Statistics with Copious Figures and Graphs
– Can be Subdivided into 8 or 16 columns
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Web Guiding Principles
Diversity of Users & Rapid Change
– Diverse users, diverse computers, diverse skills, diverse …
– Rapid evolution of technology and expectations
– Short attention span
Common Sense
– No right way to design
Make it short
– More likely to be used and remembered
– Cut in ½ and cut in ½ again
Don't make me think
– Get rid of question marks - each item has clear purpose
Make it work at a glance
– People have little time
Support intented task - manage expectations
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Basic Design Principles
Alignment
– Don't Mix Alignment Styles - Simplicity
– Create Sufficient Left Margin
– Constrain Total Width of Page
Proximity
– Related Things Close Together
– Spatial Separation = Conceptual Separation
Repetition & Consistency
– Grid Layout, Navigation, Graphics Color Coding, Typeface
– Creates Ease of Use
Contrast
– Bigger, Bolder, Color, Spatial Distance
– Guide the Eye and Create Visual Hierarchy
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
User Behavior
Scan pages - don't read them
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
Muddle through
Don't figure out how things work
Resist forming models
Stick to what works
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Design Implications
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do on a page
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Stick to what works
• Repetition & Consistency
• Make obvious what is clickable
Get rid of question marks
Each item = clear purpose
Grid Layout, Easy Navigation, Graphics,
Color Coding, Typography
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
1 Use Grid System
• Maintain Consistency
Helps you decide: location of primary & secondary
navigation; location and sizes of images;
location of headlines, main text, annotations etc.
• Create Visual Hierarchy & Rhythm
• Present Information Clearly & Logically
Users can read info more quickly.
Facilitates understanding and recall.
• Invisible Hand guiding users and creating
sense of place
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
2 Create Visual Hierarchy & Guide Eye
• Important Things = Visually Prominent
(More Important = Larger / Sharp Contrast)
Use headlines to guide the eye
• Visual Contrast
Use sharp changes in size (headline), light intensity
(bold), color, texture, motion to create contrast.
• Proximity: related things spatially close
Spatial separation = conceptual separation.
Don't mix alignment styles.
• Use Grouping & Nesting to Increase
Information Density
(Short-term Memory = 3-7)
Use bounding shapes.
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic for small blocks of text
• Enough contrast between type & background
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
1 Use Grid System
•
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do
• Make obvious what is clickable
Muddle through
Don't figure out how things work
Resist forming models
•
•
•
Maintain Consistency
Helps you decide: location of primary & secondary navigation;
location and sizes of images;
location of headlines, main text, annotations etc.
Create Visual Hierarchy & Rhythm
Present Information Clearly & Logically
Users can read info more quickly.
Facilitates understanding and recall.
Invisible Hand guiding users and creating sense of place
2 Create Visual Hierarchy & Guide Eye
•
•
• Don't make users think
Get rid of question marks
Each item = clear purpose
•
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
•
Important Things = Visually Prominent
(More Important = Larger / Sharp Contrast)
Use headlines to guide the eye
Visual Contrast
Use sharp changes in size (headline), light intensity (bold),
color, texture, motion to create contrast.
Proximity: related things spatially close.
Spatial separation = conceptual separation.
Don't mix alignment styles.
Use Grouping & Nesting to Increase Information Density
(Short-term Memory = 3-7)
Use bounding shapes.
3 Typography Heuristics
•
•
•
•
•
•
SCILS@Rutgers
Sans Serif type is easier to read on screen
Type size 10 -14 points
7 - 10 words per line
Column width proportional to type size
Bold and italic used for small blocks of text
Enough contrast between type and background
Multimedia Production Course
Prof. Anselm Spoerri
Requirements for Web Pages
Web Page needs to easily answer
• What can I do here?
 Layout Presents Info Clearly & Logically
Facilitates Understanding & Recall
• Where do I start?
 Visual Hierarchy Guides Eye to Important Things
Web Navigation needs to easily answer
• What site is this?
 Site ID – logo, image, text
• What page am I on?
 Page name
• Major sections of site?
 Primary Navigation
Top Row or Left Column
Simple text hyperlinks, icons, rollovers, image-maps, pull-downs
• Options at this level?
 Secondary Navigation
Below Top Line or Left Column
 Expanding / Nesting Hierarchies
Static or Dynamic Outlines
• Where I am?
Go higher or home?
SCILS@Rutgers
 Color Coding, Breadcrumbs
Primary / Secondary Navigation
Multimedia Production Course
Prof. Anselm Spoerri
Food for Eyes – Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Color Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Colors Magazine
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
More Colors
Colors Magazine
: Select “Archive”
Initial Designer: Tibor Kalman
#2 : Immigration : placement of text on image background
#3 : Evolution : placement of text along image contour
#14: War : effective imagery and good copy
#20: Marriage : simple, effective image and good copy
#24: Death : simple, effective image and excellent copy
#25: Fat : simple, effective image and good copy
#47: Madness : simple image and good copy : website animation
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Visual Essay - Goal
Visual Storytelling
Visualize idea you want to communicate
Create Layout of images & limited text that "tells visual story”
Create layouts with clear Visual Hierarchy & good rhythm
Ask: What is most important?
Images = "adjectives“ in story
– Close ups, Faces, Detail, Shows action, Matching reaction
Make sure that key idea is visible “above the fold”
(640x480 area)
Introduce pauses in your animated GIFs.
Can use several animated GIFs to guide the eye across page
SCILS@Rutgers
Multimedia Production Course
Prof. Anselm Spoerri
Visual Essay - How
Find Images to Support Storyline
– Scan from Books or Magazines
– Scan at high enough resolution
– Web Images
– “Save As” in the Browser: saves images in supporting folder
– Mouse Right Click on image and use “Save Target As”
Fireworks / Photoshop
–
–
–
–
Resize or Crop original image
Create Selections (rectangle or polygon)
Create Collages by combining layers
“Export / Save for Web”: JPEG if rich in color, GIF if limited colors
Create Grid & Layout
– Resize images if needed
or Crop image
SCILS@Rutgers
(via image handles + SHIFT key)
Multimedia Production Course
Prof. Anselm Spoerri