Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page,...

31
Usability and Visual Design Principles

Transcript of Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page,...

Page 1: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Usability and Visual Design Principles

Page 2: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Unity and Variety• A web page, like any other two-dimensional image, is

a collection of marks, shapes, colors, textures and values

• It is usually set against a background and bounded by a rectangle

• One goal of the overall design of each page is to achieve both unity and variety

Page 3: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Variety Unity

Unity and Variety

Page 4: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Browse to www.win-stuff.com

Unity and Variety

Page 5: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

In Class ActivityGo to www.win-stuff.com

What unifies this web page?

Name an important element that gives this page variety.

Page 6: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Browse to www.zapomarks.com

win-stuff vs. zapomarks

Page 7: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Similar colors tend to groupbut is this extreme???

WE ARE PENN STATE is evident.

Page 8: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 9: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Two distinct headings

Does the feathering help or hurt this web page?

To what extent does this scroll bar add to the visual clutter?

A very strongly colored photograph placed in the middle of what is otherwise a subtly colored page.

Does this horizontal rule have a purpose?

Page 10: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Form and Content

What can I do for you ?

What can I do for you ?

What can I do for you !!!?

Page 11: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Define it please…

• Form can be considered everything that makes it look the way it does. (e.g. color, value and style)

• Content can be thought of the message that the FORM is sending

Page 12: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 13: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

From: Artforms 5th edition, by Duane and Sarah Preble, Harper-Collins, 1994.

Page 14: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 15: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 16: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

The Heart

• What did we learn from that?

• …as the form changed so did the content.

Page 17: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

From: A Typographic Workbook, by Kate Clair, John Wiley & Sons, 1999

Pictographs and Ideographs

Page 18: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 19: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

From: My Abstract New York, by Christoph Niemann, The New York Times Magazine, September 17, 2000

Page 20: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 21: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 22: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Value and Contrast

• Value – relative lightness or darkness as compared to something else

• Gamma – monitor contrast controlled by 2 major computer operating systems (Windows is darker)

Page 23: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

HelloHello

Speaking normally

Whispering

Hello

Value and Contrast

Page 24: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

If you choose a background color whose value is in the middle of the gray scale your text may not contrast enough to be legible on some monitors.

A AA

AA

A

Value and Contrast

Page 25: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 26: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,
Page 27: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

1 2

3

Site Consistency

Page 28: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Activity

Open your browser to www.metmuseum.com

Browse a few pages deep into this site

Notice the visual consistency

Page 29: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Visual Hierarchy

Page 30: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Visual Hierarchy

Page 31: Usability and Visual Design Principles...Visual Design Principles Unity and Variety • A web page, like any other two-dimensional image, is a collection of marks, shapes, colors,

Above the fold

Below the fold


Principles of Visual Design LCC 2720 Instructor: Brian Schrank DRP-R... · Principles of Visual Design 2720 Principles of Visual Design LCC 2720 Instructor: Brian Schrank Design Theory,

Principles of Visual Design LCC 2720 Instructor: Brian Schrank DRP-R... · Principles of Visual Design 2720 Principles of Visual Design LCC 2720 Instructor: Brian Schrank Design Theory,

3 Visual Design Principles for Webinars

3 Visual Design Principles for Webinars

Principles of Visual Design LCC 2720 Instructor: Brian Schrank Intro to Design

Principles of Visual Design LCC 2720 Instructor: Brian Schrank Intro to Design

Visual communication: Principles of design · Visual communication: Principles of design Unity and variety Balance emphasis and subordination directional forces ... 108 de Hooch,

Visual communication: Principles of design · Visual communication: Principles of design Unity and variety Balance emphasis and subordination directional forces ... 108 de Hooch,

Chapter 3: Visual Design: Principles and Applications

Chapter 3: Visual Design: Principles and Applications

Study Guide Test 2 (Visual Elements and Design Principles)

Study Guide Test 2 (Visual Elements and Design Principles)

Analyze the product’s visual properties using Visual Analysis Visual design principles and Visual design elements constitute an aesthetic vocabulary that.

Analyze the product’s visual properties using Visual Analysis Visual design principles and Visual design elements constitute an aesthetic vocabulary that.

Design Principles for Visual Communication · Design Principles for Visual Communication ... Hand-designed Wedding Map . ... Graphics Interface 2004.

Design Principles for Visual Communication · Design Principles for Visual Communication ... Hand-designed Wedding Map . ... Graphics Interface 2004.

New Visual Elements and Principles of Design

New Visual Elements and Principles of Design

Principles of Visual Design LCC 2720 Lecture 3 Color

Principles of Visual Design LCC 2720 Lecture 3 Color

Visual Design Principles - Indiana University · 2013. 7. 1. · Visual Design Principles Katy Börner Cyberinfrastructure for Network Science Center, Director Information Visualization

Visual Design Principles - Indiana University · 2013. 7. 1. · Visual Design Principles Katy Börner Cyberinfrastructure for Network Science Center, Director Information Visualization

Principles of Visual Design LCC 2720 Instructor: Brian Schrankhomes.lmc.gatech.edu/~bschrank/2720/lectures/ColorTheory.pdf · Principles of Visual Design 2720 Color Theory Lecture

Principles of Visual Design LCC 2720 Instructor: Brian Schrankhomes.lmc.gatech.edu/~bschrank/2720/lectures/ColorTheory.pdf · Principles of Visual Design 2720 Color Theory Lecture

Basic Visual Design Principles Karen Ferneding C&I 335.

Basic Visual Design Principles Karen Ferneding C&I 335.

Fundamental Principles in Visual Design Value Dominance Balance Grids.

Fundamental Principles in Visual Design Value Dominance Balance Grids.

Principles of Visual Design

Principles of Visual Design

Principles of Visual Design LCC 2720 Instructor: Brian Schrank Logos

Principles of Visual Design LCC 2720 Instructor: Brian Schrank Logos

Activity 6.1 Visual Design Principles and Elements …jacquelinecarlisle.weebly.com/uploads/2/9/8/3/29834017/6... · Web viewActivity 6.1 Visual Design Principles and Elements Identification

Activity 6.1 Visual Design Principles and Elements …jacquelinecarlisle.weebly.com/uploads/2/9/8/3/29834017/6... · Web viewActivity 6.1 Visual Design Principles and Elements Identification

Basic Design Principles for Visual Presentations.

Basic Design Principles for Visual Presentations.

Activity 6.1 Visual Design Principles and Elements …€¦ · Web viewFollowing the steps in the design process and applying visual design principles and elements are key ingredients

Activity 6.1 Visual Design Principles and Elements …€¦ · Web viewFollowing the steps in the design process and applying visual design principles and elements are key ingredients

Visual Design Elements and Principles Mini Lesson.

Visual Design Elements and Principles Mini Lesson.