Adobe Photoshop to XD: Web Design Process

Explore how to combine the power of Adobe XD and Photoshop for designing responsive web experiences.

Introduction

• Diving into XD
• Using the exercise files

1. 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

2. 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

3. 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

4. Adapting Designs for Breakpoints

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

5. 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