Overview
-
Learn how to quickly create cohesive UI and UX designs. Discover how to set up a project, create a static wireframe, export a design, and even create a pixel-perfect mockup.
Syllabus
-
Introduction
- Welcome
- The unique role of Photoshop in UX
- Using the exercise files
- Create a document with artboards
- Grids, guides, and guide layouts
- Add content placeholders
- Add text to your wireframes
- Use ligature fonts to quickly add icons
- Use layer comps to display states
- Annotate your artboards
- Mobile preview on Adobe XD
- Export artboards for review
- Export assets for use in InVision
- How pixels can go wrong
- What are user interface kits?
- Use a UI kit to create a pixel-perfect design
- Create your own interface kit
- Extract CSS values from a design
- Next steps
