Overview
-
Explore how to combine the power of Adobe XD and Photoshop for designing responsive web experiences.
Syllabus
-
Introduction
- Diving into XD
- Using the exercise files
- 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
- 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
- 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
- Duplicating artboards
- Responsive resizing
- Manually adjusting layouts
- Challenge: Adapting for breakpoints
- Solution: Adapting for breakpoints
- Discovering prototypes
- Wiring a prototype overview
- Prototype wiring basics
- Sharing web prototypes
- Exporting assets for development
- Challenge: Wiring prototypes
- Solution: Wiring prototypes
- Recommendations
