Presentation or Visual Design Gabriel Spitz 1 Lecture # 14.

Gabriel Spitz

1

Presentation or Visual Design

Lecture # 14

Gabriel Spitz

2

Presentation

The physical characteristics and organization of controls and information on the UI

It elicits an initial and global response to the site or application – it sets the stage for attitude formation

It communicates to the user what functions and information are available, where they are located and their usage sequence

Gabriel Spitz

3

Why is Presentation important? Differentiating your UI from your competitor’s

Gabriel Spitz

4

Why is Presentation important?

useful usable

These aspects of the design are functionally very important, but when everything is equal

Gabriel Spitz

5

Why is Presentation important?

useful usable

Adds an emotional dimension to the equation

desirable

Gabriel Spitz

6

Role of Presentation

Getting the user’s attention

Creating a positive first impression

Communicating a message

Supporting an overall brand identity

Gabriel Spitz

7

Important aspects of presentation

Two important aspects of presentation include:

Layout or spatial organization of functionality and information

Appearance of windows, pages and dialog boxes

8

Elements of Presentation

text

image

color

shape

line

layout

Layout: Position of elements relative to one another

9

Principles of Layout

Proximity, Alignment, Repetition & Contrast

Creates positive and negative spaces

Gives a sense of scale and dimension

Show importance through hierarchy

Robin William (1994)

Proximity

Use proximity to group related items and separate them from other items

Helps users locate items faster by enabling them to ignore groups of items

Clumped items feel like one unit rather than several

Items relating to each other are grouped together

10

11

Proximity Principle

Visual elements in the info space should be distributed purposefully To communicates strength and stability e.g., for a

traditional and conservative look use Symmetry - elements are centered, and have equal weight on either side..

To communicates variety, movement, and surprise – e.g., for entertainment related applications use Asymmetry - elements are off-centered, and have un-equal weight.

12

Proximity – Symmetry

13

Proximity - Asymmetry

Alignment Principle

Items should not be placed on a page arbitrarily

Items on a page or dialog box should have some visual relationship with each other

One way of creating a relationship is using alignment. When items are aligned they create a strong cohesive unit

14

15

Alignment

16

Repetition Principle

Elements should appear visually similar and be placed consistently throughout the screen/application

Helps communicate the organization of the application

Repetition of some elements throughout the application makes the application appear cohesive

Repetition Principle

Repetition helps communicate the organization of an application and strengthen its unity

Repeat visual elements of the design throughout the application

You can repeat color, texture, shapes, spatial relation, etc.

17

18

Repetition

19

Contrast Principle

Contrast communicates importance

Use contrast to focus user’s attention

Creates a focal point through: Change in color (hue, value, or

intensity) Change in scale

20

Contrast

Contrast Principle

Contrast or differentiation is one of the most important visual attractions

Avoid elements on a page that are merely similar

If elements are not the same e.g., color, shape, size, then make them very different

21

22

Design Principles in Action

Proximity

Alignment

Repetition

Contrast

Gabriel Spitz

23

Appearance

The look and feel of a user interface Character (e.g. warm & friendly vs. serious &

businesslike) Style (e.g. retro)

Gabriel Spitz

24

Elements of Presentation

text

image

color

shape

line

layout

Gabriel Spitz

25

Elements of Presentation

Line, Shape, Image, Text, & Color

Create a mood

Suggest an emotion

Directs attention This is the focus of interaction design

Gabriel Spitz

26

Elements of Presentation: Line

Straight

Jagged

Curved

Gabriel Spitz

27

Elements of Presentation: Line

Gabriel Spitz

28

Elements of Presentation: Shapes

Geometric Abstract Representational

Gabriel Spitz

29

Elements of Presentation: Image

People

Places

Things

Gabriel Spitz

30

Elements of Presentation: Text

Serif

San-Serif

Script

Italic

Bold

Underlined

Gabriel Spitz

31

Elements of Presentation: Color

Bright colors for entertainment purpose

Gabriel Spitz

32

Elements of presentation: Color

Muted colors for enabling purposes