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