CIS 1300 – Web Design SoftwareMichael J. Losacco Design Concepts Using Text & Graphics Effectively.

CIS 1300 – Web Design Software M i c h a e l J . L o s a c c o

Design Concepts

Using Text & Graphics Effectively

CIS 1300 – Web Design Software

Underlying Principles of Design

• Subjective

– Communication

– Visual Appeal

• Objective

– Utility

– Engagement



• 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



• 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



• Communication– Legibility

• High Contrast– Color

• Text Size– Typeface

– Density

» Use Headings & Lists

• Images– Meaningful Relationship to Content

– White Space



• Communication– Readability

• Understanding– Familiar Terms & Phrases

• Language– Vivid

– Active

– Personable

• Images– Meaningful Relationship to Content

– White Space



• Visual Appeal– Richness

• Uncluttered

• White Space

– Balance

» Images Complement Content & Each Other

• Images

– Meaningful Relationship to Content

– White Space

– High Quality



• Visual Appeal

– Style

• Suitable for Purpose

– Convey Mood or Tone

» Formal/Informal, Youthful/Mature, Playful/Serious

• Stylistic Elements Fit Together

– Color Combinations

– Typefaces

– Images



• 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



• Utility

– Intuitive Interface

• Easy to Use

• Clear as to How to Perform Tasks

– Predictable

– Lack of Frustration

– Successful Accomplishment of Tasks



• 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



• Utility

– Value

• What is Benefit for User?

• Remember Site

• Return Visitors



• Engagement

– User Awareness

• Types of Visitors Site Hopes to Engage

• Anticipate What Users Want & Expect

• Clearly Recognize Benefits



• Engagement– User-Centered Purpose

• Does the Site Have a Purpose?

– Knowledge

– Decision Support

– Accomplishing Tasks

– Interconnectedness

– Enjoyment

• Is Purpose Immediately Apparent?



• Engagement

– Interpersonal Rapport

• Visitors Feel

– Comfort

– Trust

– Understanding

• Duration

• Return to Site?

Heading (Sans Serif) v. Body (Serif)

Lorem IpsumLorem 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 IpsumLorem 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 AmetLorem 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.


Subheads As Named Anchors

Lorem IpsumLorem 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 AmetNam 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 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.http://typetester.maratz.com/


White Space

• Space Between Visual Elements

• The Part of the Design that “Isn't" There

– Just as Important as the Elements that are There


White Space Testing


White Space Testing

Wichita State University 2006


Typographic Contrast - Typeface

Chicago Power

Chicago Power


Typographic Contrast - Size

Chicago Power

Chicago

Power


Typographic Contrast - Style

Chicago Power

Chicago Power


Typographic Contrast - Weight

Chicago Power

Chicago Power


Typographic Contrast - Spacing

Chicago P o w e r

Chicago Power


Typographic Contrast - Background

Chicago Power

Chicago Power

Chicago <span style="background-color:yellow; color:green">Power</span>


Typographic Contrast - Color

Code RedBlue Moon

Code RedBlue Moon


Layout (Conservative / Dynamic)

Well-defined, rectangular areas on the page

Warm greens accompanied by cool blues

Balance intimacy with professionalism

Overlapping panels

Imagery evokes customer service & technology

Entertain the eye & communicate innovation


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


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


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


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


Color


– 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


Color


– Brown

• Earth, Reliability, Comfort, Endurance

– Successful Food Packaging in US

– Poor Sales in Columbia

– Gray

• Intellect, Future, Modest, Sadness, Decay


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


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


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.


Graphic Cropping (Visual Impact)


Branding

• Signifies Goods/Services

– Name

– Slogan

– Logo

• Something That Won’t Come Off in the Wash


Branding

• Functional — Objective, Logical, Practical

– Communicate

– Recognition & Recall

– Differentiate

• Emotional — Subjective, Emotive, Creative

– Personality

– Add Value

– Attractive


Branding

• General

– Leo Burnett

– Nike v. Adidas

– Logitech

– Michelin v. Firestone

– FedEx


Branding

• Web Principles

– Consistency

• Logo

• Tagline

• Navigation

• Color Scheme

– www.lattice.com

– www.YOURSITE.com


Branding

• Industry Examples

– Implementing Color Scheme

• Rolex v. Barnes & Noble

– Shopping Experience

• Old Navy v. Eddie Bauer

CIS 1300 – Web Design SoftwareMichael J. Losacco Design Concepts Using Text & Graphics Effectively.

Documents

web design softwaremichael

contentwhite spacecis

link quality

link descriptionscis

navigational elements

nunc malesuada

nunc placerat ante

vivamus sed enim