Intro to Graphic Design- Ch 1
Definition of Graphic Design
 Some Basics
 Design Process
 Graphic Design Fundamentals

Defining Graphic Design
Defining Graphic Design





Not about Software (just tools)
Visual Communication/ Functional Art
Problem Solving
“Information Architects”
“…The designer conceives, plans, and executes
designs that communicate a specific message to
a specific audience within given limitations…”
Some Basics
Logos- simplified forms
 Contrast- attention
 Visual Hierarchy- comprehension
 Layout- organization
 Integrating Type and Image
 Visual Themes

The Design Process


Defining the Problem
Research (Audience, Constraints, Goals)







Build your Visual Vocabulary- search for samples
Build on the work of others- combine in a new original way
Thumbnails
Roughs
Comprehensives
Presentation
Ready for Press
It Starts With Creativity


Good design is created with a basic
understanding of:
- Design processes
- Theories and concepts of design
Designer/client relationship governs the entire
design process
Fundamentals of Design

Design elements
 Line,
Shape, Value,
Color, Texture, Space

Design principles
 Balance,
Proximity,
Alignment, Unity,
Emphasis, Rhythm
Elements of Design- Ch 2
We have a catalog in our brains that filters
the information.
 How the eye sees and the brain organizes
to give meaning.
 Big Idea- Purposeful use to create
meaningful designs

Basic Design Elements
Line
 Shape
 Value
 Texture
 Size
 Color
 Gestalt Principles

Lines
Begins with 4 linesedges of the page/screen
 Type
 Direction
 Quality

Shape
Lines to create 3-D world
 General outline of something
 Geometric, Natural, Abstract
 Design is the arrangement of shape.
 Figure and Ground

Geometric Shapes

Square- What does a square symbolize?

Circle- What does it symbolize?

Triangle- What does it symbolize?
Grouping Shapes
Shapes affected by surrounding shapes
 Begin to understand by identifying overall
pattern
 Tend to recall letters if grouped in words.
 Group marks into recognizable/repeating
shapes is the simplest way to perceive

Figure and Ground

What is the object and what is the
background?
Figure and Ground-Categories
Stable
 Reversible
 Ambiguous

Figure and Ground-Conditions
Enclosed area
 Textured area
 Convex
 Simplicity
 Familiarity
 Lower Half (gravity)
 Black tendency

Value
Lightness/Darkness
 Gives the image detail and texture
 Contrast is the relative emphasis
 Create Movement


Lead the Eye
Texture



Tactile- actual paper
Visual Objects in Photos
 Photoshop effects
 Pictures of Textures
 Symbolic Textures
Choose textures that relate to the concept of the
piece and are appropriate to the design
Size or Mass
Need to hold content
 Expectations
 Mood and Emphasis
 Contrast
 Creating Balance

Creating Balance
“Successful communication requires
balance, the directing and conducting of
visual tensions.”
 Equal tension created by all elements
pulling equally
 Symmetry and Asymmetry

Balance- Symmetry
Traditional balance
thru mirrored images
left to right
 The traditional book
 Good is looking for a
“quiet sense of
order”, tradition and
stability.

Balance Asymmetry



Balance thru contrast
Visual Weightdominance of an
object
Visual Direction- way
the eye is drawn
between elements
Direction
How to move thru the information?
 Text and Images are intentionally placed
to direct the viewers eye and to achieve
visual unity
 How do we get them to look at what we
want and see the connections?
 Use of contrast and unity

Intellectual vs. Visual Unity

“One is thinking of subject matter (intellectual
unity); the other is looking at the design (visual
unity).”
Intellectual is idea and word
Visual is placement for the eye

Ideally work together to create the message.


Visual Dynamics
Top to bottom – comfort of gravity
 Vertical and Horizontal- comfort in stability
(diagonal lines- dynamic flux)
 Left to right- comfort in reading

Weight and Direction Influences





Location
Spatial Depth
Size
Texture
Isolation





Subject matter
Value
Shape
Structure
Color
Color
Color Wheel
Properties of Color
Hue- name for the color
 Value- degree of light/dark
 Intensity or Saturation- purity and
brightness

Psychology of Color
Colors evoke
specific emotional
responses
(personal or
universal)
 Warm – Stimulate
 Cool- Relax

Psychology of Color

Associations- personal and cultural
 Red- aggressive, sexual, national color
 Example- sports car
 Blue- authoritative (darker), cleanliness
and honesty
(middle), overall calming color

Example- power blue suit
warmth, good health and optimism… (in the
past-weakness and cowardliness)
 Yellow
Example- food packaging
 Green- natural, environment,
 Example- cigarettes
soothing and cooling
Selecting Color





Cultural Color Associations
The profile of the audience and its color
preference
The character and personality of the
organization presented
The designers personal relationship to the color
An awareness of current color trends
Understanding Electronic Color

RGB vs CMYK
Gestalt Principles



Whole is the sum of its parts
Each part is influenced by those around it.
The eye seeks to create a whole
 Similarity
 Proximity
 Continuation
 Closure
 Figure
and Ground
Application Practice
Read the Golbeck Handout on Art Theory
 Before Friday, meet in your groups and
find a website to examine.
 Friday, come in with a website example
and be prepared as a group to discuss
how basic graphic design principles were
applied to this site.

Typography
Typeface- design of the letters
 Font- complete set of characters (software
typeface)


Above all else, the audience must be able
to read it!
Typeface Categories
Serif- conservative and highly legible
 San-Serif- casual and legible
 Scripts- hand written
 Novelty-immediate tone setting and hard
to read

Type Characteristics

Size
 Measured
in pica or points- 72 points in an
inch… 12 points in a pica… 6 picas per inch
 Computer screen can be deceptive
 Printed proof to see actual size
 Web design should be judged on a screen
Type Characteristics cont.

Line Length
 Measured
in pica
 Flow to fill predetermined column

Style
 Legibility
prime concern
 Either stick to one type family or they need to
be very different
Type Characteristics cont.

Leading
 Vertical
Space between lines
 Readability concerns

Spacing
 Kerning-
space between letters
 Word Spacing
Type Characteristics cont.

Format
 Justified-all
lines same length
 Unjustified- flush left or right, center and
asymmetrical

Style and Content
 Visual
tone
 Affects image of client
Type Characteristics Examined






Type
Type
Type
Type
Type
Type

Type
Type
Type
Type
Type

Type




Typeface Layout Tips







Serif body/San Title or vice verca
No novelty in body
Italics for emphasis
Never all caps
Limit 2 fonts per page
Limit 3 font sizes per page
Simplify
Text Contrast Layout Tips
Contract title and body text for interest
 Vary size, weight, style, separation, color
differences
 Best legibility (black text/white paper)
 Reduce legibility (black text/dark paper)
 Simplify

Text Format Tips







Consistent space
Separate paragraphs with either line space or
indent, not both.
50-70 words per line
Leave plenty of white space
Balance
Look at the whole
Simplify
Type Design
Type Design
Images- Ch 4
Creating Graphics
 Illustration- using images that represent or
express to make a visual statement
 Can show something that cannot be
photographed
 Purpose- present product, tell story, clarify
concept, or demonstrate a service.

Basic Types of Graphic Creation
Programs

Drawing- Vector programs
 Illustrator-

draws object… no layers
Paint- Bitmap programs
 Photoshop .bmp
working in pixels and layers
.jpeg .gif .pic .tif
What is a Pixel?
Building Blocks
 # of pixels and color determine image
quality, size and the look of the image
 Cannot delete a pixel, just change its color
 More pixels, larger file size… so eliminate
unnecessary pixels
 # of pixels per inch determine resolution,
the key to image quality

Pros/Cons of Bitmap images





Most appropriate for photo-realistic images and
complex drawings
Large file size, inability to resize or scale without
effort and loss of quality
Bit-depth determines # of colors that can be
displayed by individual pixel
Can grab from screen, scan it, download or
capture it
Can manipulate it, adjust it, cut and paste it
Pros/Cons of Vector images







Most appropriate for shapes (mathematically
expressed)
Can be filled with color and patterns
Use a fraction of the file space as bitmaps
For web, downloads faster
Most programs can export vector to bitmap
Vector images require a plug-in to display on the
web (Flash)
Can not be used for photo-realistic images
File Formats

High Quality for printing
 TIFF-
high image quality
 EPS- less common

Compression Formats for Screen
 JPEG-
photos and illustration
 GIF- text, logos and charts
 PNG- need transparency around the graphic
 PDF- design intact- paper files
Basic Photo DesignIssues
Aspect Ratio
 Scanning and Essential Area- Over scan
 Information Density

 Watch
for information overload
 Try not to crowd too much info into one space
Digital Cameras and Scanning

Choosing the Best Resolution?
 Input
and Output
How distribute? 72 for web, 100-300 for
printing
 Formula for resolution- x 1.5 or 2
 Pros use 1,200 or 2,400 hundred for
original and link to file

Impact of
Photography

Not capturing reality
 Fact
that camera is there can change things
 Editing and Manipulating
Website Requirements Gathering




Site Owner’s goals
 What do you want? A job
Site User’s goals
 What matters to that specific employer
Human and Technical Resources
 What can you do?
 What can the host server do?
Content Needed
What is the goal(s)?

Owner’s Goals
 Business
aspect =
Making money
 Measure the audience
 Brand Positioning =
Personality

User’s Goals
 Information
 Commerce
 Easy
 Useable
 Identifiable
Defining Owner’s Goals






How do you make money? How are they
successful?
What are the goals for the site?
Research size of market opportunity
What are the competitors doing?
Identify the user’s behaviors that will best
support the site?
Decide on Brand Personality or Positioning
(3 key adjectives)
Identifying Business Goals

Let’s use the website your group is working on.

What would be some goals for a site?
What is their market?
What are the potential user behaviors?
What are the 3 key adjectives for brand
positioning?



Defining User’s Goals
Analyze the users habits and environment
 What characteristics would affect the
user’s interaction with the site?
 What is the user looking for?
 What steps are involved for the user to
perform tasks ?

Identifying User Goals

Again, let’s use the website your group is
working on.

What would be some user goals for a site?
How would they use the site?
What do they want from this site?
How many steps would be acceptable to perform
a task?



Technical Considerations
What tech resources do you have?
 Any technical restraints? (security,
bandwidth, etc.)
 Who will host the site?
 Is there people to maintain the site?

Determine cost, timeline, and tasks
As a general rule, three variable are time,
money, and people.
 Budget is total of estimated hours for each
task at hourly rate
 Have contractors and consultant work offsite and with own equipment, so they are
not employees

Project Bid
The cover and package
 Table of contents
 Needs analysis and description
 Target audience
 Creative strategy
 Project implementation
 Budget

Content Acquisition





Self produced
Third party content sources (clip art, stock
footage library, public domain sources)
Public Domain has no owner, but never assume
Copyrighted material can not be used without
permission
If in doubt, don’t use it unless you paid for it.
Using Talent






American Federation of Television and Radio
Artists (AFTRA) or Screen Actors Guild (SAG)
Talent Agency
Auditions and Casting Calls
Union Contracts ($540/8 hour day)
Release Forms
Always think about future use, when working
with release forms.
Layout- Ch 5
Balancing Act
 Diverse Elements of the Design that
communicates and looks good
 Every element affects how the others are
perceived

Review the Fundamentals
of Design

Design elements
 Line,
Shape, Value,
Color, Texture, Space

Design principles
 Balance,
Proximity,
Alignment, Unity,
Emphasis, Rhythm
Size and Proportion

Organization of several things into a
relationship (size, quantity, or degree)
Visual Rhythm
Repetition of shapes, values, colors, and
textures
 Life is rhythm

Grid Layout
Grids provide order, but are flexible
 Choosing a grid

 Elements-
Copy
 Art- Photos
Path Layout
No grid
 Designer visualizes elements on blank
sheet of paper
 Unity relies on Unit Forming

 Focal
Point
 Clear Path to next element
Path Layout

Focal Point Tips
 Make
an object bright
 Make an object dark and the rest light
 Make an object sharp and all else soft focus
 Give object different texture
 Place object in an unusual direction/position
 Isolate the object
Path Layout

Integrating Type and Image
 Near
focal point
 Along the path of the focal point

Visual Hierarchy
 Importance
of the info
 Follow path of understanding based on size,
color and placement.
Path Layout

Unity
 Each
object has a relationship
 Alignment, color, direction, shape, etc.

Symmetrical/Asymmetrical Layout
 Symmetrical
is not always engaging
 Asymmetrical more conscience of placement
and balance.
Photo Layout

Dynamic photos, strong in
design and human interest
 Cropping-focus
 Resizing-
and drama
ratio
 Selecting- Quality, Merit,
Strength
Multi-panel Design
3-D design
 Each unfolding
present new facet of
design

 1st
panel- lure
 Build interest / theme
 Mailer?
Designing Content Elements

Using Photographs Effectively
Tell story or relevant to text
 Attention grabbing
 Clear, sharp, look good
 Well cropped and focused
 Do you have permission to use it?

Designing Content Elements

Text Design

Emphasize headings
Text to background contrast
Use Sans-Serif fonts, not Serif.
Larger Type Size
Shorter Lines
NO ALL CAPS
Avoid excessive italics
Use plenty of blank space around text







Logo Design- Ch 6
Types of Logos
 Creative Process

Simple little marks that communicate an
enormous amount of information.
 Must be visually uncomplicated

Logos

Ease of Recognition
 Quick
or partial viewing
 How fast can you recognize logos?
Logos

Ease of Recall
 Too
many details are hard to remember
 Good logos with simple marks are easy
 How
many logos can you put on paper right
now?
Logos

Ease of Reproduction
 Variety
of sizes and media
 Must be crisp and clear.
 Limit number of colors (1 or 2)-Cost
 Black and White repo- Do greyscale
Logos

They must encapsulate the company
without focusing on one aspect.
Types of Logos
Logotypes
 Initials
 Abstract Symbols

 Allusive

Abstract Symbols
Pictorial Symbols
 Associative
Symbols
Creative Process
Understand the Problem
 Get inspired
 Brainstorm
 Sketch
 Produce

Creative Process

Understand the problem
 Restate
in own word
 Communication Goal
 Audience
 Research client and industry
 Understand organization, product and
competitors
Creative Process

Get Inspired
 Look
around you
 Others art can be an inspiration to your
creativity

Brainstorm
 Generate
as many as possible
 Don’t judge- No bad ideas
 Edit after.
Creative Process


Sketch
 Thumbnails
 Always use paper before keyboard
Produce
 Need a clear idea
 Create many options
 Get Feedback
 Rehearse explanations (concepts and choices)
Creating a Logo

Font choice
 Try

typing name in many fonts
Designing a symbol
 Iconic
or Symbolic picture
 Color combinations

Key is simplicity in form
Visual Themes- Ch 7

Unify the overall look of multi-page
publications.
 Magazines
 Websites
 Brochures
 Ad

Campaigns
Inconsistent themes confuse and lose.
Creating Visual Themes






Color Choice
Typeface
Image Style
Layout
 Visual Hierarchy
Editorial themes
Tactile effects
 Costs?
Electronic Publishing
and Printing




Computers connected to thousands of printers
outputting more paperwork than ever before
Difficult to store, retrieve information
Environmental concerns
1992 Adobe Solution: first version of the
Portable Document Format (PDF)
Compression
Lossless- less compression but preserve
original file
 Lossy- high compression but lose some
info (JPEG- high frequency)

Preparing Electronic Files









Assemble files in page layout program
Bring all your images
Select automatic trapping option in layout program and
ask to check
All files must be CMYK if you are doing full color output
In Photoshop, check color picker for an alert symbol (will
not print)
Include all original scans and vector graphics
Be sure all documents are linked.
Supply all fonts
Organize and label all the files on a disk