08GraphicDesign

Download
Share  Add to  Flag Embed
Uploaded from authorPOINTLite
Views:
 
Category: Entertainment
     
 
License:   All Rights Reserved

Presentation Description

No description available.

Comments

 

By: sara44 (16 month(s) ago)

please i want to dowload it

Presentation Transcript

Graphic Design: 

Graphic Design The “look & feel”

Graphic Design: 

Graphic Design It shares aspects of engineering, but with aesthetic, communicative aspects and consumer appeal.

Graphic Design: 

Graphic Design As a practice, it has been around for thousands of years.

Graphic Design: 

Graphic Design With the industrial revolution, art and design began to diverge.

Graphic Design: 

Graphic Design In the US, it grew into a profession after WWII.

Graphic Design: 

Graphic Design It relies on a BALANCE and integration of: & feel

Graphic Design: 

Graphic Design Objective: relies on quantitative studies, like usability and legibility measures. Does the “look and feel” work?

Graphic Design: 

Graphic Design Subjective: “look and feel” relies on subjective judgement by experts, depends on contextual factors.

Graphic Design: 

Graphic Design Subjective: “look and feel” Culture is learned, cultural meanings change, meanings can be multiple. Uniqueness is valued (not programmable).

Graphic Design: 

Graphic Design You cannot empirically measure its subjective aspects, but it is rigorous in its own epistemological realm (knowledge base).

Graphic Design: 

Graphic Design It is rigorous in its own epistemological realm. 1. Graphic Design experts. vs. 2. Deploying graphic design principles (anybody).

Graphic Design: 

Graphic Design So what? Deploying graphic design principles will: - enhance your ability to communicate w/designers & feel

Graphic Design: 

Graphic Design Deploying graphic design principles will: - enable you to create more user-friendly interfaces

Graphic Design: 

Graphic Design Deploying graphic design principles will: - enhance the knowledge base of HCI, which is increasingly necessary with millions of users

Agenda:: 

Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content Conveys an impression, mood

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Role of Graphic Design: 

Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Agenda:: 

Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

Principles of Graphic Design : 

Principles of Graphic Design Concept/Metaphor Hierarchy Clarity Consistency Alignment Proximity Contrast

Principles: Concept/Metaphor: 

Principles: Concept/Metaphor Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant) Metaphor: (specific subset of concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart.

Principles: Concept/Metaphor: 

Principles: Concept/Metaphor Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant) Apple: accessible, fun, familiar; “for the rest of us” Metaphor: (specific subset of concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. desktop metaphor

Principles: Hierarchy: 

Principles: Hierarchy What are the relative “levels” of importance? What should the user see first? Second?

Principles: Hierarchy: 

Principles: Hierarchy What are the relative “levels” of importance?

Principles: Hierarchy: 

Principles: Hierarchy .

Principles: Clarity: 

Principles: Clarity Every element in an interface should have a reason for being there Make that reason clear! Less is more

Principles: Clarity: 

Principles: Clarity White space Leads the eye Provides symmetry and balance through its use Strengthens impact of message Allows eye to rest between elements of activity (increases legibility) Used to promote simplicity, elegance, refinement

Principles: Clarity: 

Principles: Clarity White space

Principles: Clarity: 

Principles: Clarity White space

Principles: Consistency: 

Principles: Consistency Be consistent in every aspect: In layout, color, images, icons, typography, text Within screen, across screens Stay within metaphor everywhere Platform may have a style guide -- follow it!

Principles: Alignment: 

Principles: Alignment Western world Start from top left Allows eye to parse display more easily

Principles: Alignment: 

Principles: Alignment Grids - use them

Principles: Alignment: 

Principles: Alignment Grids (Hidden) horizontal and vertical lines to help locate window components Align related things Group items logically Minimize number of controls, reduce clutter

Principles: Alignment: 

Principles: Alignment Grids (Hidden) horizontal and vertical lines to help locate window components Align related things Group items logically Minimize number of controls, reduce clutter

Principles: Alignment: 

Principles: Alignment Left, center, or right Choose one, use it everywhere Novices often center things No definition, calm, very formal Use only in small quantities (hard to read) Here is some new text Here is some new text Here is some new text

Principles: Proximity: 

Principles: Proximity Items close together appear to have a relationship Large distance implies -- no relationship Time

Principles: Proximity: 

Principles: Proximity Items close together appear to have a relationship Large distance implies -- no relationship Time

Principles: Contrast: 

Principles: Contrast Pulls you in Guides your eyes around the interface Supports skimming Take advantage of contrast to guide user through hierarchy of information; add focus; or to energize an interface with “texture” Can be used to distinguish active control

Principles: Contrast: 

Principles: Contrast Can be used to set off most important item Allow it to dominate Ask yourself what is the most important item in the interface, highlight it Use geometry to help sequencing

Agenda:: 

Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

Animation/Rollovers: 

Animation/Rollovers Blinking Good for grabbing attention, but easily becomes obnoxious; use very sparingly Reverse video, bold Good for making something stand out

Agenda:: 

Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

Typography: White space: 

Typography: White space White space Leads the eye Provides symmetry and balance through its use Strengthens impact of message Allows eye to rest between elements of activity (increases legibility) Used to promote simplicity, elegance, refinement

Typography: Hierarchy: 

Typography: Hierarchy How do you lead the user through visual information (by visual means)? Some traditional navigation devices (conventions): Size Color Composition (where it is on the rectangle) Page numbers Type and Image emphases

Typography: 

Typography Characters and symbols should be easily noticeable and distinguishable AVOID HEAVY USE OF ALL UPPERCASE Studies have found that: mixed case promotes fastest reading and that 55 characters per line is optimal

Agenda:: 

Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

Color Attributes: 

Color Attributes Hue native color, pigment Saturation relative purity, brightness, or intensity of a color Value lightness or darkness of a color

Color: 

Color Use it for a purpose, not to just add some color in

Color Guidelines: 

Color Guidelines Display color images on black background Avoid brown and green as background colors Be sure foreground colors contrast (in both brightness and hue) with background colors

Color Guidelines: 

Color Guidelines Use color sparingly--Design in b/w then add color where appropriate Use color to draw attention, communicate organization, to indicate status, to establish relationships Avoid using color in non-task related ways (experiment coming next)

How many small rectangles: 

How many small rectangles

How many small ovals: 

How many small ovals

Find the...: 

Find the... V R Z M F G Q J C T D W A P

Color Guidelines: 

Color Guidelines Color is good for supporting search Do not use color without another redundant cue Color-blindness Monochrome monitors Redundant coding enhances performance Be consistent with color associations from jobs and cultures

Color Guidelines: 

Color Guidelines Limit coding to 8 distinct colors (4 better) Avoid using saturated blues for text or small, thin lines Use color on b/w or gray, or b/w on color To express difference, use high contrast colors (and vice versa) Make sure colors do not “vibrate”

Color Palette: 

Color Palette Example of Color hierarchy

Color Associations: 

Color Associations Red hot, warning, aggression, love Pink female, cute, cotton candy Orange autumn, warm, Halloween, Cell phone Yellow happy, caution, joy Brown warm, fall, dirt, earth Green lush, pastoral, envy Purple royal, sophisticated, Barney Culturally specific, contextually specific

Color Palettes/Suites: 

Color Palettes/Suites Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)

Agenda:: 

Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

Icon Design: 

Icon Design Relies on drawing ability -- hire someone to do it (here are standards and ways to critique icon design) Avoid meaningless, gratuitous use of icons Too many icons quickly become illegible

Icon Design: 

Icon Design Represent object or action in a familiar and recognizable manner

Icon Design: 

Icon Design Represent object or action in a familiar and recognizable manner

Icon Design: 

Icon Design Represent object or action in a familiar and recognizable manner

Icon Legibility: 

Icon Legibility Limit number of different icons Make icon stand out from background Ensure that a singly selected icon is clearly visible when surrounded by unselected ones

Icon Legibility: 

Icon Legibility Make each icon distinctive (legible) but Make icons harmonious members of icon family Avoid excessive detail Accompany with names (though it shouldn’t be necessary)

Icon Design: 

Icon Design Is the symbolic aspect of the icon meaningful?

Icon Design: 

Icon Design Is the symbolic aspect of the icon meaningful?

Icon Design: 

Icon Design Is the symbolic aspect of the icon meaningful?

Icon Design: 

Icon Design Meaning is ASCRIBED to icons -- they don’t have an essential, measurable “essence.”

Role of Graphic Design in HCI: 

Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Role of Graphic Design in HCI: 

Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Role of Graphic Design in HCI: 

Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

Graphic Design: 

Graphic Design Like any design job, there must be a logic to the visual design The logic drives Color scheme Materials choices Lighting style Fonts etc.

Eacmples - WarCraft: 

Eacmples - WarCraft 2 Teams: Orcs & Humans Each team has unique biology: Collection of Team physiques Unique means of living Unique culture

WarCraft: 

WarCraft Culture manifests itself: What they eat How they work How they live How they kill How they die How they live: Choice of building materials Choice of fighting styles

WarCraft: 

WarCraft How Orcs live & eat Hog farms How humans Grain farms

Warcraft: 

Warcraft Orcs do war with offensive spells Humans have defensive spells

WarCraft: 

WarCraft Orc People Green Horns Orc Buildings Bone Leather Dark Cast Iron

WarCraft: 

WarCraft Human People “Flesh tone” humans Silver armor Human buildings Light wood Light-colored metal (roofs, etc)

WarCraft: 

WarCraft Invading Orc Town

Examples: 

Examples Invading human town

Warcraft: 

Warcraft

WarCraft: 

WarCraft

WarCraft Problems: 

WarCraft Problems This stark contrast causes problems Why are Orcs chopping wood? Why is the Orc woodshed a big, hollow log? Violates the Orc bone-and-leather look On the sea, similar problems These problems arise because of game play

Example: Age of Empires/Kings: 

Example: Age of Empires/Kings Logic: Numerous historical civilizations do battle Each civilization specializes Special force elements Special resource-gathering Special Wonders-of-the-world

Age of Empires/Kings: 

Age of Empires/Kings Historical building style Historical costume

Celts: 

Celts

Celts: 

Celts

Vikings: 

Vikings

Vikings: 

Vikings

China: 

China

China: 

China

Persia: 

Persia

Turks: 

Turks

Turks: 

Turks

Byzantium: 

Byzantium

Age of Kings: 

Age of Kings Problems Tough to recognize foreign buildings Tough to recognize own buildings Where’s my stables? All Castles look the same