1. Visual Design Foundations FREE CHAPTER

• The Elements and Principles of Art and Design
• Line, Shape, and Form
• Space and Texture
• Value and Color
• Balance and Harmony
• Emphasis, Variety, and Proportion
• Movement and Rhythm

2. Handling Feedback as a UX Designer

• The Importance of Handling Feedback Well
• The Challenges of Handling Feedback
• Types of Feedback
• Requesting Feedback
• Getting into the Right Mindset
• Receiving Feedback
• Acting on Feedback

3. Receiving UX Feedback by Example

• Receiving Constructive Feedback
• Receiving Non-Constructive Feedback
• Receiving Prescriptive Feedback

4. Collecting Design Inspiration

• Sites and Tools for Collecting Inspiration

5. Introduction to Wireframing

• What Are Wireframes?
• Benefits of Wireframing
• Types of Wireframes
• How Wireframes Are Used
• Hand-Drawn Wireframes
• Demonstration of Wireframing on Paper
• Tips and Tools
• Sharing and Getting Feedback
• The Pros and Cons of Wireframing on Paper
• Wireframing in Balsamiq
• Demonstrating Wireframes in Balsamiq
• Sharing and Getting Feedback in Balsamiq
• Pros and Cons of Wireframing in Balsamiq
• Making Wireframes in Adobe XD
• Demonstrating Wireframes in Adobe XD
• Sharing and Getting Feedback in Adobe XD
• The Pros and Cons of Wireframing in Adobe XD

6. Practice Sketching

• Problem
• Solution

7. Practice Wireframing

• Problem
• Solution

8. Typography for Designers

• What Is Typography?
• How Typography Affects the User Experience
• Typography Terminology
• Different Types of Type
• Print vs. Digital
• Print vs. Digital
• Consider the Use Case
• How to Choose a Text Typeface for the Web
• How to Choose a Display Typeface
• Font Weights, Styles, and Sizes
• Horizontal Space, Measure, and Margins
• Vertical Space, Line Height, and Vertical Rhythm
• Introducing Typographic Hierarchy
• Typographic Hierarchy: Style, Weight, Size, and Position
• Typographic Hierarchy: Caps and Color
• Layout Treatments
• Combining Typefaces
• Responsive Typography
• More Grid Systems
• Variable Fonts
• The Fine Details

9. Before and After: Typography

• Typography Before
• Typography After

10. Designing Layouts

• Spelling, Grammar, and Title Casing
• Headers and Labels
• Typography and Hierarchy
• Using a Grid
• Colors and Contrast

11. Creating Mockups

• Introduction to Mockups
• The Purpose of Mockups
• Preparing to Make Mockups
• Making Mockups
• Efficiency Tips
• Sharing Mockups

12. Before and After: Color

• Color Before
• Color After

13. Before and After: Layout

• Layout Before
• Layout After

14. Prototyping with Adobe XD

• Why Prototype in Adobe XD
• The Adobe XD Interface
• Navigating the Workspace
• Drawing Shapes
• Adding Images
• Adding Text
• Layers and Repeat Grids
• Adding Artboards
• Creating New Screens
• Adding Interactivity to Prototypes
• Sharing Designs

15. Prototyping with Figma

• Why Prototype in Figma
• Project Setup
• Navigating the Canvas
• Arranging Design Elements
• Reusing Designs with Components
• Drawing with Shapes
• Drawing Curved Lines
• Finishing the Interface
• Adding Interactivity to Prototypes
• Sharing Designs

16. Practice Prototyping

• Problem
• Solution

17. Collaborating with Developers

• Intro to Collaborating with Developers
• Communicating for Development
• Final Design Handoff

18. Presenting Design Ideas

• Know Your Audience
• Set Expectations and Goals
• State the Problem and Goals
• Research the Problem
• Solving the Problem
• Timeline and Next Steps
• Feedback