Introduction
• Overview of User Experience Design (UX) vs User Interface Design (UI)
• Working from a site-plan sketch
• Gathering assets for your project
• Understanding common file formats

Using Photoshop for UI and UX
• Creating multiple Artboards for different screens and platforms
• Using Pixel Perfect grids for accurate layout
• Using Generator to create assets
• Using Device Preview for mobile design

Introduction to Adobe Experience Design (XD)
• Working with the Design and Prototype views
• Navigating around your artboard

Part one: The Design Stage

Setting up a Project
• Designing Artboard grids
• Adding and deleting Artboards
• Creating additional screens for different display sizes and platforms

Drawing in Adobe Experience Design
• Drawing and combining simple shapes
• Setting Appearance attributes: solid fills, gradient fills, strokes, drop-shadows & background Blurs
• Controlling corner radius values
• Drawing with the Pen Tool
• Editing points and paths

Adding Text to your Design
• Formatting Text
• Using Typekit fonts
• Adding Placeholder text

Adding assets from other sources
• Using Illustrator vector graphics
• Importing bitmap graphics
• Masking techniques
• Using images from modern browsers

Creating accurate layouts
• Aligning and arranging Objects
• Creating a Repeat Grid

UI kits
• Exploring Apple, Google and Microsoft user interface kits

Part 2: Creating a Prototype

Adding Interactivity
• Linking and unlinking artboards
• Setting screen transitions
• Adding interactions to elements

Testing your Project
• Previewing a prototype
• Recording the user experience as a .mov file

Sharing your Project
• Sharing your prototype using links
• Exporting artboards as .png .svg and .pdf files

Part 3: A practical Workshop

Design your own Project
• Creating your own project site map
• Adding graphics and text

Prototype your own Project
• Converting your site map to linked artboards
• Testing and sharing your project
• Exporting your project

Questions and answers