Name: Jump Start Adobe XD
Rating: 4.7 (32 reviews)
Author: Daniel Schwarz

Get practical lessons to design and prototype user interfaces, flows and interactions with Adobe XD. We'll explore how XD compares to Photoshop and Sketch, setting up your workspace, prototyping, styling designs with effects, saving time with repeat grids, creating vectors, keyboard shortcuts and much more! 

Jump Start Adobe XD

All SitePoint web design and UX books plus short videos and online courses on how to design a better web

Design & UX

UI Design

Preface

In the first chapter of this book we'll familiarise ourselves with the XD interface before taking a very hands-on approach to low-fidelity prototyping. All of the screenshots in this book are taken from the macOS version of Adobe XD. However, the walkthroughs (and shortcuts) are applicable to Windows, too.

Getting Familiar with the UI

In Chapter 1 we took a tour of Adobe XD, and even looked into the keyboard shortcuts of the most common tools. This should give us a good foundation to work with as we explore more of Adobe XD, then go on to design a low-fidelity mockup of an app.

Learning the Basics with Low-Fidelity Prototyping

Now we have two screens in our design – a welcome screen with a search function, and a location filter screen with a list of recently selected locations. Let's demonstrate how the user would flow from one screen to the other. This is the first time we’ll be switching to the “Prototype” workspace, but it won’t be the last.

Prototyping User Flows and Receiving Feedback

In this chapter we’ll learn about the property inspector, adding styles to our low-fidelity prototype as we transition our design into a high-fidelity mockup with colors, fonts and images. We’ll start by learning about all the styles available to us, as well as how to customise them. Then we’ll work on our design using those styles.

Getting Visual with the Property Inspector

In this chapter, we’ll learn two features that are designed to help you maintain visual consistency (and save you countless hours!) when high-fidelity prototyping. These are – how to create and use symbols, and how to automate the process of adding styles and content to components inside repeat grids.

Hi-Fi Prototyping With Symbols and Repeat Grids

Back when we were low-fidelity prototyping, I (on the sly) inserted some icons into the design to add some clarity to our somewhat basic-looking wireframe. In this chapter, we’ll learn how to design some of those icons from scratch. We’ll explore the delicate art of icon design, as well as learn about the export feature, which allows us to ready our image assets for the developers, who will then implement them into the coded app.

Designing Icons and Exporting

In this final chapter we’ll explore how keyboard shortcuts can accelerate our prototyping workflow. We learned several of these shortcuts throughout the book, but we’ll recap all of them here, as well as learn about any that we missed along the way. On top of that, we’ll explore certain repetitive tasks and see how we can speed them up using shortcuts.

Jump Start Adobe XD

About the course

Author

Course Outline

Reviews
4.7

Jump Start Adobe XD

About the course

Author

Course Outline

Reviews 4.7

Reviews
4.7