Adobe Photoshop to XD: Web Design Process

1h 42mIntermediate2019-09-05

Authors

Sue Jenkins

Author, Teacher at Marywood University, Owner of Luckychair.com

Course details

Transition your Photoshop-based web design process to a more UX-based workflow by adding Adobe XD. Vector-based XD allows for faster design revisions, easy adaptability to a variety of device sizes, and quicker development of prototypes to get customer buy-in before the development process begins. In this course, you’ll learn how to set up XD, prototype and collaborate your UX designs with clients and stakeholders, leverage cross-product workflows between Photoshop and XD, and export web-ready assets for developers.

Learning objectives
Setting up XD for web design
Web design strategies
Creating CC Library elements in Photoshop
Using Wireframe UI kits
XD tools overview
Editing graphics in XD
Adapting designs for breakpoints
Responsive resizing
Creating prototypes and exporting assets

Skills covered

WireframingAdobe XDUX DesignPhotoshopUser ExperienceProjectAdobeWeb Development

Concepts

0. Introduction

01 - Diving into XD
02 - Using the exercise files

1. Setting Up the XD Workspace

03 - Setting up XD for web design
04 - Configuring the artboard grid
05 - Creating color swatches
06 - Creating color assets
07 - Creating character styles
08 - Creating CC Library elements in Photoshop
09 - Creating CC Library elements in Adobe Illustrator
10 - Using wireframe UI kits
11 - Challenge - Build a wireframe
12 - Solution - Build a wireframe

2. Web Design Strategies

13 - Working from wireframes
14 - Building semantic, flexible layouts
15 - Using HD-ready graphics
16 - XD tools overview
17 - Using XD tools
18 - Challenge - Build a layout
19 - Solution - Build a layout

3. Designing for Desktop

20 - Repeating with Repeat Grid
21 - Using CC Library assets
22 - Editing graphics in XD
23 - Saving time with components
24 - Challenge - Update the portfolio
25 - Solution - Update the portfolio

4. Adapting Designs for Breakpoints

26 - Adapting designs for breakpoints
27 - Duplicating artboards
28 - Responsive resizing
29 - Manually adjusting layouts
30 - Challenge - Adapting for breakpoints
31 - Solution - Adapting for breakpoints

5. Creating Prototypes and Exporting Assets

32 - Discovering prototypes
33 - Wiring a prototype overview
34 - Prototype wiring basics
35 - Sharing web prototypes
36 - Exporting assets for development
37 - Challenge - Wiring prototypes
38 - Solution - Wiring prototypes

Conclusion

39 - Recommendations