6: Visual Design

Question 1

What is Gestalt Theory?

Answer 1

When human beings see a group of objects, we perceive their entirety before we see the individual objects.

Question 2

What are the goals of visual design?

Answer 2

1. Guide
   - help users find their way. Convey structure, relative importance and relationships.
2. Pace
   - draw users in, help them get oriented.
3. Message
   - give distinct look and feel, express meaning and style, breathe life into the content.

Question 3

How do you use the following, and give examples of each:

• Grouping & whitespace
• Typography
• Grids & layout
• colour

Answer 3

whitespace

• conveys grouping and relationship
• creates balance and layout
• leads the eye
• ease of reading

Typography

• break a chunk of text down into different segments, each containing key information
• point, leading, x-height, ascenders, descenders, weight, serifs, kerning, font choice

Grids and layout
- for placement and alignment of all visual objects on the webpage
- help users can and understand a page quickly
- alignment guides the eye
- reduce clutter
- eg.
rule of thirds
short elements extended to begin and end on grid boundaries
long elements allowed to span multiple grids
avoid slight misalignment
use proximity and scale
left-aligned text is easier to skim

colour
1. hue circle
pick non-adjacent colours. Opposite colours go well together
2. colour guidelines
- avoid simultaneous display of highly saturated,
- spectrally extreme colours
- use pastel colours unless drawing attention
- consistent with conventions and expectations
- Do not use too many different colours

Question 4

How do users navigate and read pages? What are the implications of such user navigation?

Answer 4

Users navigate in an “F” shape when scanning the text
Tend to read above the fold line
implications: important information should be placed above the fold line on the top left corner where users will most likely notice immediately. Subsequently, least important information can be placed below the fold line on the bottom right corner.