In this video, learn about setting up global color assets.
Resume Transcript Auto-Scroll
Author
Sue Jenkins
Released
9/5/2019
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.
Topics include:
- 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
Skill Level Intermediate
1h 41m
Duration
10,333
Views
Show More
Show Less
-
Introduction
-
Diving into XD59s
-
-
1. Setting Up the XD Workspace
-
Setting up XD for web design2m 47s
-
Creating color swatches2m 32s
-
Creating color assets2m 37s
-
Creating character styles4m 13s
-
Using wireframe UI kits3m 32s
-
Solution: Build a wireframe1m 25s
-
-
2. Web Design Strategies
-
Working from wireframes4m 4s
-
Using HD-ready graphics2m 50s
-
XD tools overview5m 19s
-
Using XD tools5m 14s
-
Challenge: Build a layout1m 38s
-
Solution: Build a layout2m 27s
-
-
3. Designing for Desktop
-
Repeating with Repeat Grid4m 22s
-
Using CC Library assets3m 23s
-
Editing graphics in XD2m 16s
-
Saving time with components3m 25s
-
-
4. Adapting Designs for Breakpoints
-
Duplicating artboards2m 16s
-
Responsive resizing4m 58s
-
Manually adjusting layouts2m 58s
-
5. Creating Prototypes and Exporting Assets
-
Discovering prototypes2m 22s
-
Wiring a prototype overview4m 12s
-
Prototype wiring basics2m 27s
-
Sharing web prototypes2m 14s
-
-
Conclusion
-
Recommendations1m 6s
-
Show MoreShow Less
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating color assets