What are the essentials of visual interface design?
Assignments
Due
Design Scenarios and Storyboard Mockups Mon Mar 15th 11:59pm PT
New
Interactive Prototype Wed Apr 7th 11:59pm PT
One-Minute Summaries and Questions
The Principles of Design and Their Importance Thu Mar 18th 11:59pm PT
Guide for designing better mobile apps typography Thu Mar 18th 11:59pm PT
Weekly Quiz
Week 10 Review Quiz Sun Mar 21st 11:59pm PT
Required Readings
The Principles of Design and Their Importance (9 minute read)
Guide for designing better mobile apps typography (6 minute read)
BlackBoard Collaborate Session Slides
Visual Design Essentials — Mini-lectures and Activities | PDF | Recording (Look in Hamburger menu)
Week 10 Review and Discussion
Not held, Zoom 1-on-1 Office Hours offered instead.
Supplemental Readings
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
- Why Does a Design Look Good?
Visual Interface Design
The design and presentation of visual user interfaces.
