What are the essentials of effective visual communication?
Summaries and Questions
Nov 12 Class One-Minute Summaries
Weekly Quiz
Presented Slides
Visual Design Essentials | PDF (Propose Changes to these Slides on SFU GitLab)
Assignments
Required Reading
Supplemental Readings
Color
Aspects of an object described in terms of hue, lightness, and saturation.
- Color - Usability Matters
- Color Basics: Dos and Dont's
- Color in UI Design: A (Practical) Framework
- Color Theory for Designers, Part 1: The Meaning of Color
- Colorblindness - A Usability Guide for Commercial Applications, Part 1
- Designing for Colour Blindness
- Latest UXD Tool: UI Color Psychology Map
Grids
A visible or invisible structure of intersecting lines.
- Create a grid that adapts to all screens
- Designing With Grid-Based Approach
- The Grid System: Building a Solid Design Layout
- Using Layout Grids Effectively
Hierarchy
Differences between items shown visually.
- A Closer Look at Hierarchy in Web Design
- Creating Better Typographic Hierarchy
- Design Principles: an introduction to visual hierarchy
- Visual Design and Usability Yellow Brick Road
Icons
Visual symbols representing concepts or commands.
- Bad Icons: How to Identify and Improve Them
- Designing For User Interfaces: Icons As Visual Elements For Screen Design
- Icons As Part Of A Great User Experience
- Small Elements, Big Impact: Types and Functions of UI Icons
- Usability Testing of Icons
Layout
The arrangement of individual visual objects within a composition.
- Importance of White Space in Design
- Unbox the Web!
- Using Gestalt Laws of Perceptual Organization in UI Design
- Using White Space (or Negative Space) in Your Designs
- UX & Psychology go hand in hand— How Gestalt theory appears in UX design?
Typography
The design of typefaces, and the way type is selected and arranged.
- A Quick and Comprehensive Guide to Type (Infographic)
- Best UX practices for line spacing
- HTML & CSS - Working with Typography
- How to Speak Typography: Terms You Should Know
- Legibility: how to make text convenient to read
- Reading Online Text: A Comparison of Four White Space Layouts
- Typography Terms Cheat Sheet
- Web Typography: Designing Tables to be Read, Not Looked At
Visual Design Principles (CRAP)
The visual design principles of contrast, repetition, alignment and proximity.
- Build Better User Experience With C.R.A.P. Design Principles
- CRAP Way to Design
- The Four Basic Principles of Design
Visual Interface Design
The design and presentation of visual user interfaces.
