Audience
This course is for those who want to create brilliant designs and prototypes for websites, mobile apps and games.
Prerequisites
There are no prerequisites for this course.
Duration
1 day. Hands on.
Course Objectives
Create brilliant designs and prototypes for websites, mobile apps and games. Learn to work efficiently and collaborate seamlessly using Adobe XD.
Delivered by an Adobe Authorised training provider.
What will I learn?
- Creating assets
- Working with artboards
- Creating accurate layouts
- Adding interactivity
- Testing and sharing
- Free digital course assets
- Free helpdesk support for 28 days
Course Content
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