Learn how to use Photoshop to quickly create cohesive designs for UI and UX purposes. Dennis Meyer demonstrates how to set up a project, create a static wireframe, export a design, and even create a pixel-perfect mockup.
- UX designers take on a lot of different projects with a lot of different needs. Having a large variety of tools to rely on gives you the flexibility to be able to do your job as efficiently as possible. Hi, I'm Dennis Meyer, and welcome to this course where we'll be looking at how Photoshop can be tailored for UX Design. In this course, I'll be walking you through the steps of how to create a static wire frame in Photoshop. I'll show you how you can leverage Adobe Preview CC and Envision to share your work with others, I'll give you some suggestions for leveraging UI Kits to rapidly build out standard interfaces.
And lastly, I'll talk about some of the considerations for making up pixel perfect mockeup, like how to export accurate CSS from your designs? If you've never used Photoshop for UX design before, or if you dismissed it years ago because it didn't quite suit your needs, I'd encourage you to come along as we look at some of the latest options that Adobe has added in the last two years, making it easier and more efficient to get your UX Design workflow, done.
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.
Q: This course was updated on 07/10/2018. What changed?
A: We added one video, "Mobile preview on Adobe XD."