XD Essentials Day 1

Objectives

• Students can explain what UX and UI are and how they apply in XD.
• Students can make a prototype and explain its role.
• Students can navigate XD to accomplish basic functions and keep learning.

Outline

Introduction

• Hook
• Patron Badges
• Survey for experience with paths in Illustrator or other vector program

Why XD?

• Prototyping
  • Experience Design
  • UX and UI

Today’s Topics

• Foundational tools
  • Interface
  • Making screens
  • Adding objects
  • Basic prototype
  • Share

Note:

If taught on campus, make sure that students save their project to the cloud (the default for Save As and indicated by an icon at the top center of the screen). This will ensure access to students’ files even if computers are wiped between classes.

Interface

Tabs

• Design
• Prototype
• Share

Zoom Options

Design

Layers Panel

• Artboards
  • Creation by preset
  • Naming
• Assets
  • Primitives
    • Shapes
    • Rounding Corners
    • Text
  • Paths: Double-click shapes (more in future)
  • Images
    • Import
    • Vector vs Raster files

Properties Panel

• Fill
• Border
  • Color
  • Weight
  • Dashes
  • Location/Relation to Path

Prototype

Set Home board

Create a basic wireframe using the click-and-drag method

Preview on Desktop

Share

Create a link for user testing

Enable coediting

Conclusion

• Recap
• Next Time
• Chat/Lab