What are the essentials of effective visual communication?
One-Minute Summaries and Questions
How to Use C.R.A.P. Design Principles For Better UX? Jul 15th 11:59pm PDT
plugin:page-inject
Accessibility for Visual Design Jul 15th 11:59pm PDT
Weekly Quiz
Week 10 Review Quiz due Jul 17th Jul 17th 11:59pm PDT
Assignments
Usability Assessed Interactive PrototypeAug 4th 11:59pm PDT
Required Readings
How to Use C.R.A.P. Design Principles For Better UX? (8 minute read)
Typography Tutorial - 10 rules to help you rule type, a Video (3 minutes)
Accessibility for Visual Design (9 minute read)
BlackBoard Collaborate Session Slides
Visual Design Essentials — Mini-lectures and Activities | PDF
Week 10 Review and Discussion | PDF
Supplemental Readings
Accessibility
Accessibility is the practice of removing barriers that prevent interaction or access to websites by people with disabilities.
- 4 Ways to Make Online Content More Accessible
- 7 Things Every Designer Needs to Know about Accessibility
- 40 Tips For Inclusive And Accessible User Interface Design
- A is for Accessibility — 12 top tips for designing an inclusive user experience
- Accessibility according to actual people with disabilities - Axess Lab
- Accessibility for Visual Design
- Accessibility Guidelines
- Accessibility resources for designers
- Baby Boomers Are Aging–And Designers Need To Adapt
- Design Accessibly, See Differently: Color Contrast Tips And Tools
- Font Awesome & Accessibility
- Learn to Create Accessible Websites with the Principles of Universal Design
- Unlock your universibility
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
- Natural color palettes for UI design
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.
- 5 typography mistakes new designers make & how to avoid them
- 9 Laws of Typography That Every App Designer Should Know
- A Quick and Comprehensive Guide to Type (Infographic)
- Best UX practices for line spacing
- Guide for designing better mobile apps typography
- 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
- The details of UI typography
- 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.
