YoVDO

Adobe Photoshop to XD: Web Design Process

Offered By: LinkedIn Learning

Tags

Adobe XD Courses Web Design Courses Adobe Photoshop Courses Prototyping Courses Responsive Design Courses Wireframing Courses Artboards Courses

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

Taught by

Sue Jenkins

Related Courses

UX Design for Mobile Developers
Google via Udacity
Information Design
University of California, San Diego via Coursera
Web Application Development: The Presentation Tier
University of New Mexico via Coursera
Desarrollo de Aplicaciones Web: Nivel de PresentaciĆ³n
University of New Mexico via Coursera
UX Design: From Concept to Wireframe
University of Michigan via edX