Visual Design Principles in HCI

Study Notes

Visual Design in HCI Interfaces

Visual Hierarchy

Organizing elements to direct user attention and create a clear flow of information
Principles:
- Size: larger elements draw attention
- Color: high-contrast colors stand out
- Position: top-left elements are most noticeable
- Alignment: aligned elements create a sense of order
Techniques:
- Grouping: related elements are grouped together
- Proximity: related elements are placed close together
- Emphasis: important elements are highlighted
- Repetition: consistent design elements create a sense of unity

Color Theory

Color wheel:
- Primary colors: red, blue, yellow
- Secondary colors: green, orange, purple
- Tertiary colors: yellow-green, blue-green, etc.
Color harmony:
- Monochromatic: different shades of the same color
- Complementary: colors opposite each other on the color wheel
- Analogous: colors next to each other on the color wheel
Color psychology:
- Red: attention, energy
- Blue: trust, calmness
- Green: nature, growth

Icon Design

Principles:
- Simple and consistent design
- Scalability: icons should be legible at different sizes
- Color: icons should be distinguishable in different color schemes
Types of icons:
- Literal: represent a real object
- Metaphorical: represent an abstract concept
- Arbitrary: no obvious connection to the concept
Icon design process:
1. Research and concept development
2. Sketching and prototyping
3. Testing and refinement

Typography

Font characteristics:
- Serif: fonts with serifs (e.g. Times New Roman)
- Sans-serif: fonts without serifs (e.g. Arial)
- Script: fonts that mimic handwriting
- Display: fonts designed for headings
Typography principles:
- Readability: clear and legible text
- Hierarchy: headings and subheadings create a clear structure
- Consistency: consistent font usage throughout the design
Typography in HCI:
- Font size and style should be consistent throughout the interface
- Headings and subheadings should be clear and distinguishable
- Body text should be readable and clear

Description

Test your knowledge of visual design principles in Human-Computer Interaction (HCI) interfaces, including visual hierarchy, color theory, icon design, and typography. Evaluate your understanding of these fundamental design concepts and how they apply to HCI.