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