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

Introduction

Diving into XD
Using the exercise files

Setting Up the XD Workspace

Setting up XD for web design
Configuring the artboard grid
Creating color swatches
Creating color assets
Creating character styles
Creating CC Library elements in Photoshop
Creating CC Library elements in Adobe Illustrator
Using wireframe UI kits
Challenge - Build a wireframe
Solution - Build a wireframe

Web Design Strategies

Working from wireframes
Building semantic, flexible layouts
Using HD-ready graphics
XD tools overview
Using XD tools
Challenge - Build a layout
Solution - Build a layout

Designing for Desktop

Repeating with Repeat Grid
Using CC Library assets
Editing graphics in XD
Saving time with components
Challenge - Update the portfolio
Solution - Update the portfolio

Adapting Designs for Breakpoints

Adapting designs for breakpoints
Duplicating artboards
Responsive resizing
Manually adjusting layouts
Challenge - Adapting for breakpoints
Solution - Adapting for breakpoints

Creating Prototypes and Exporting Assets

Discovering prototypes
Wiring a prototype overview
Prototype wiring basics
Sharing web prototypes
Exporting assets for development
Challenge - Wiring prototypes
Solution - Wiring prototypes

Conclusion

Recommendations