What are the essentials of visual interface design?

One-Minute Summaries and Questions

How to Use C.R.A.P. Design Principles For Better UX? Wed Nov 18th 11:59pm PST
Guide for designing better mobile apps typography (8 minute read) Wed Nov 18th 11:59pm PST

Weekly Quiz

Week 11 Review Quiz Fri Nov 20th 11:59pm PST

Assignments

Interactive Prototype Mon Dec 7th 11:59pm PDT

Required Readings

How to Use C.R.A.P. Design Principles For Better UX? (8 minute read)
Guide for designing better mobile apps typography (8 minute read)

BlackBoard Collaborate Session Slides

Visual Design Essentials — Mini-lectures and Activities | PDF | Recording (Look in Hamburger menu)

Week 11 Review and Discussion | PDF | Recording (Look in Hamburger menu)

Supplemental Materials

Typography Tutorial - 10 rules to help you rule type

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

Visual Interface Design
The design and presentation of visual user interfaces.

• 3 Parts of Good Visual Interface Design
• A guide to interface design for older adults
• How to Arrange Interface Elements
• What’s the next UI design trend?

Previous Post Next Post