Design Concepts
Using Text & Graphics Effectively
CIS 1300 – Web Design Software
Michael J. Losacco
Underlying Principles of Design
• Subjective
– Communication
– Visual Appeal
• Objective
– Utility
– Engagement
CIS 1300 – Web Design Software
Underlying Principles of Design
• Communication
– User Interaction
• First Seconds
– Site Must Clearly Communicate Why it is Useful
• 10 Seconds
– Convince User Site can be Navigated Easily
• 1 Minute
– Content is of Real Interest & Value
CIS 1300 – Web Design Software
Underlying Principles of Design
• Communication
– Clarity
• Logical Organization
– Opening Content that can be Scanned v. Read
» Concisely Stated, Without Extraneous Material
• Benefit to User
– Clear v. Obscure
• Error Free
– Spelling & Grammar
– Accurate & Current
– Link Rot, Link Quality, & Link Descriptions
CIS 1300 – Web Design Software
Underlying Principles of Design
• Communication
– Legibility
• High Contrast
– Color
• Text Size
– Typeface
– Density
» Use Headings & Lists
• Images
– Meaningful Relationship to Content
– White Space
CIS 1300 – Web Design Software
Underlying Principles of Design
• Communication
– Readability
• Understanding
– Familiar Terms & Phrases
• Language
– Vivid
– Active
– Personable
• Images
– Meaningful Relationship to Content
– White Space
CIS 1300 – Web Design Software
Underlying Principles of Design
• Visual Appeal
– Richness
• Uncluttered
• White Space
– Balance
» Images Complement Content & Each Other
• Images
– Meaningful Relationship to Content
– White Space
– High Quality
CIS 1300 – Web Design Software
Underlying Principles of Design
• Visual Appeal
– Style
• Suitable for Purpose
– Convey Mood or Tone
» Formal/Informal, Youthful/Mature, Playful/Serious
• Stylistic Elements Fit Together
– Color Combinations
– Typefaces
– Images
CIS 1300 – Web Design Software
Underlying Principles of Design
• Visual Appeal
– Unity
• Organization
– Consistency & Repetition
» Color, Navigational Elements, Logo
– Makes Each Page Appear to be Part of the Whole
– Creates a Sense of Order
» Immediately Obvious Which Elements Relate to Each Other
CIS 1300 – Web Design Software
Underlying Principles of Design
• Utility
– Intuitive Interface
• Easy to Use
• Clear as to How to Perform Tasks
– Predictable
– Lack of Frustration
– Successful Accomplishment of Tasks
CIS 1300 – Web Design Software
Underlying Principles of Design
• Utility
– Navigability
• Clearly Identified Links
– Describes Link Destination
• Should NOT Have to Backtrack to Home
• Where You Are, Where You Can Go, Where You’ve Been
• Logical Organization of Content
CIS 1300 – Web Design Software
Underlying Principles of Design
• Utility
– Value
• What is Benefit for User?
• Remember Site
• Return Visitors
CIS 1300 – Web Design Software
Underlying Principles of Design
• Engagement
– User Awareness
• Types of Visitors Site Hopes to Engage
• Anticipate What Users Want & Expect
• Clearly Recognize Benefits
CIS 1300 – Web Design Software
Underlying Principles of Design
• Engagement
– User-Centered Purpose
• Does the Site Have a Purpose?
– Knowledge
– Decision Support
– Accomplishing Tasks
– Interconnectedness
– Enjoyment
• Is Purpose Immediately Apparent?
CIS 1300 – Web Design Software
Underlying Principles of Design
• Engagement
– Interpersonal Rapport
• Visitors Feel
– Comfort
– Trust
– Understanding
• Duration
• Return to Site?
CIS 1300 – Web Design Software
Heading (Sans Serif) v. Body (Serif)
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in
libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio.
Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In
hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet
et, nonummy eu, sagittis sit amet, est. Nam faucibus nulla nec nulla. Praesent
porttitor ultricies eros. Nam mauris. Proin augue libero, convallis non, hendrerit
sed, condimentum at, magna. In convallis, ligula ac interdum adipiscing, lorem leo
ultrices dolor, id tincidunt odio dolor at nibh. Aliquam nisl ante, vestibulum sed,
ultricies a, ullamcorper id, turpis. Pellentesque quam lacus, dapibus vitae,
interdum at, viverra non, orci. Suspendisse orci neque, mattis venenatis, semper
at, lobortis at, mauris. Nunc convallis, quam non scelerisque rutrum, elit nunc
euismod neque, ac euismod risus augue quis turpis.
Heading / Body Size Contrast
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc
placerat ante in libero. Vivamus sed
enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras
tortor. Etiam consequat diam at
ligula. Sed vestibulum diam sed
pede. In hendrerit nulla et justo.
Donec ullamcorper mattis pede.
Donec lectus pede, aliquet et,
nonummy eu, sagittis sit amet, est.
Nam faucibus nulla nec nulla.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc
placerat ante in libero. Vivamus sed
enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras
tortor. Etiam consequat diam at
ligula. Sed vestibulum diam sed
pede. In hendrerit nulla et justo.
Donec ullamcorper mattis pede.
Donec lectus pede, aliquet et,
nonummy eu, sagittis sit amet, est.
Nam faucibus nulla nec nulla.
Headings (Fewer & Larger)
Lorem Ipsum
Dolor Sit Amet
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc
placerat ante in libero. Vivamus sed
enim. Nunc malesuada. Sed facilisis.
Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed
vestibulum diam sed pede. In
hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec
lectus pede, aliquet et, nonummy eu,
sagittis sit amet, est.
Lorem Ipsum
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc
placerat ante in libero. Vivamus sed
enim. Nunc malesuada. Sed facilisis.
Pellentesque et odio. Cras tortor. Etiam
consequat diam at ligula. Sed
vestibulum diam sed pede. In hendrerit
nulla et justo. Donec ullamcorper mattis
pede. Donec lectus pede, aliquet et,
nonummy eu, sagittis sit amet, est. Nam
faucibus nulla nec nulla.
Subheads As Named Anchors
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in
libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio.
Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In
hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet
et, nonummy eu, sagittis sit amet, est.
Dolor Sit Amet
Nam faucibus nulla nec nulla. Praesent porttitor ultricies eros. Nam mauris. Proin
augue libero, convallis non, hendrerit sed, condimentum at, magna. In convallis,
ligula ac interdum adipiscing, lorem leo ultrices dolor, id tincidunt odio dolor at
nibh. Aliquam nisl ante, vestibulum sed, ultricies a, ullamcorper id, turpis.
Pellentesque quam lacus, dapibus vitae, interdum at, viverra non, orci.
Suspendisse orci neque, mattis venenatis, semper at, lobortis at, mauris.
Leading
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc
placerat ante in libero. Vivamus sed
enim. Nunc malesuada. Sed facilisis.
Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed
vestibulum diam sed pede. In
hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec
lectus pede, aliquet et, nonummy eu,
sagittis sit amet, est.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc
placerat ante in libero. Vivamus sed
enim. Nunc malesuada. Sed facilisis.
Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed
vestibulum diam sed pede. In
hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec
lectus pede, aliquet et, nonummy eu,
http://typetester.maratz.com/
sagittis sit amet, est.
White Space
• Space Between Visual Elements
• The Part of the Design that “Isn't" There
– Just as Important as the Elements that are There
CIS 1300 – Web Design Software
White Space Testing
CIS 1300 – Web Design Software
White Space Testing
Wichita State University
CIS 1300 – Web Design Software
2006
Typographic Contrast - Typeface
Chicago Power
Chicago Power
CIS 1300 – Web Design Software
Typographic Contrast - Size
Chicago Power
Chicago
Power
CIS 1300 – Web Design Software
Typographic Contrast - Style
Chicago Power
Chicago Power
CIS 1300 – Web Design Software
Typographic Contrast - Weight
Chicago Power
Chicago Power
CIS 1300 – Web Design Software
Typographic Contrast - Spacing
Chicago Power
Chicago P o w e r
CIS 1300 – Web Design Software
Typographic Contrast - Background
Chicago Power
Chicago Power
Chicago <span style="background-color:yellow; color:green">Power</span>
CIS 1300 – Web Design Software
Typographic Contrast - Color
Code Red
Blue Moon
Code Red
Blue Moon
CIS 1300 – Web Design Software
Layout (Conservative / Dynamic)
Well-defined, rectangular areas on the page
Overlapping panels
Warm greens accompanied by cool blues
Imagery evokes customer service & technology
Balance intimacy with professionalism
Entertain the eye & communicate innovation
CIS 1300 – Web Design Software
Balance (Symmetrical / Asymmetrical )
• Provide Sense of / Lack of Equilibrium
– Create Tension & Visual Weight
Use of Approximate Horizontal Symmetry
Imagery Incorporates Good Amount of White
Graphic Text is Thin & Unobtrusive
Elements Blend into Background
Not Dominant in Any One Place
Subtle Greens Used Sparingly
CIS 1300 – Web Design Software
Dominance
• Emphasis & Visual Weight in a Composition
– Where Eye is First Led When Looking at a Design
Right-most Column is Dominant
Largest Area of Color
Uses Big, Reversed Text for Major Headings
Center Column is Subdominant
Uses Less Color & Smaller Text in Less Space
Left-most Column is Subordinate
CIS 1300 – Web Design Software
Color
• Eye’s Response to Wavelengths of Radiation
– Hue, Value, Saturation
All Hues Brought Down to a Mid-range Value
Surrounded by Red & Orange
Plays Off of Natural Complements
Very Warm, Very Rich Set of Tones
Feel Full & Vibrant
CIS 1300 – Web Design Software
Color
• Psychological Response
– Red
• Power, Energy, Warmth, Passion, Aggression, Danger
– Green
• Nature, Health, Renewal, Good Luck, Jealousy
– Problems in Global Market
– Blue
• Trust, Conservative, Security, Order
CIS 1300 – Web Design Software
Color
• Psychological Response
– Yellow
• Optimism, Hope, Cowardice, Betrayal
– Sacred Color to Hindus
– Purple
• Spiritual, Mystery, Royalty, Arrogance
– Orange
• Energy, Balance, Warmth
– Signifies a Product is Inexpensive in the US
CIS 1300 – Web Design Software
Color
• Psychological Response
– Brown
• Earth, Reliability, Comfort, Endurance
– Successful Food Packaging in US
– Poor Sales in Columbia
– Gray
• Intellect, Future, Modest, Sadness, Decay
CIS 1300 – Web Design Software
Color
• Psychological Response
– White
• Purity, Cleanliness, Precision, Innocence, Death
– Signifies Marriage in the US
– Signifies Death in India, Other Eastern Cultures
– Black
• Death, Mystery, Fear, Unhappiness
• Packaging
– Power, Sexuality, Sophistication, Elegance
CIS 1300 – Web Design Software
Shape
• Psychological Response
– Rectangle
• Order, Logic, Containment
– Circle
• Connection, Community, Wholeness
• Female
– Warmth, Comfort, Sensuality, Love
– Triangle
• Energy, Power, Law, Science, Religion
• Male
– Strength, Aggression, Dynamic
CIS 1300 – Web Design Software
Graphic Placement
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit. Nunc
placerat ante in libero.
Vivamus sed enim. Nunc
malesuada. Sed facilisis.
Pellentesque et odio.
Cras tortor. Etiam
consequat diam at ligula.
Sed vestibulum diam sed
pede. In hendrerit nulla et
justo. Donec ullamcorper
mattis pede. Donec
lectus pede, aliquet et,
nonummy eu, sagittis sit
amet, est.
CIS 1300 – Web Design Software
Graphic Cropping (Visual Impact)
CIS 1300 – Web Design Software
Branding
• Signifies Goods/Services
– Name
– Slogan
– Logo
• Something That Won’t Come Off in the Wash
CIS 1300 – Web Design Software
Branding
• Functional — Objective, Logical, Practical
– Communicate
– Recognition & Recall
– Differentiate
• Emotional — Subjective, Emotive, Creative
– Personality
– Add Value
– Attractive
CIS 1300 – Web Design Software
Branding
• General
– Leo Burnett
– Nike v. Adidas
– Logitech
– Michelin v. Firestone
– FedEx
CIS 1300 – Web Design Software
Branding
• Web Principles
– Consistency
• Logo
• Tagline
• Navigation
• Color Scheme
– www.lattice.com
– www.YOURSITE.com
CIS 1300 – Web Design Software
Branding
• Industry Examples
– Implementing Color Scheme
• Rolex v. Barnes & Noble
– Shopping Experience
• Old Navy v. Eddie Bauer
CIS 1300 – Web Design Software