Adobe Photoshop to XD: Web Design Process
Offered By: LinkedIn Learning
Course Description
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
Taught by
Sue Jenkins
Related Courses
Mobile Web DevelopmentGoogle via Udacity iDESWEB, Introducción al desarrollo web
MirÃadax Information Design
University of California, San Diego via Coursera Advanced Styling with Responsive Design
University of Michigan via Coursera Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera