Getting Familiar with the UI

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.

If you're switching from Sketch, you'll notice many similarities in Adobe XD (both visually and in terms of features). Although if you're switching from Photoshop, Adobe XD will still feel like an Adobe app in some ways, even if it doesn’t look like it, or some of the features seem a little unfamiliar to you.

Here's a swift comparison of XD (above) and Sketch (below).

Before We Begin

You can download Adobe XD via Creative Cloud like any other Adobe app. So if you already have a Creative Cloud subscription, you're all set. If not, you can start your Creative Cloud trial right here.

Let's dive in.

Workspace

Your workspace is comprised of an unlimited canvas and the artboards inside it. Artboards typically represent one webpage or one app screen in your design, where their size depends on the dimensions of the browser window or device screen that you’re designing for. Your workspace can contain as many artboards as necessary, even if they’re all different sizes.

Welcome Screen

When you open the app you'll see a welcome screen that asks you to specify what type of artboard you'd like to start with. It's commonplace to demonstrate what your design would look like on different desktop and device screens, effectively creating an adaptive design (that is, a design that adapts to the device/screen it’s been viewed on). It’s also widely accepted that you should start with the smallest-sized screen first (if you’re designing for the web, this is known as a mobile-first approach to design).

Why Mobile-First

Why? Because designing on smaller screens forces you to design with simplicity in mind. It’s much harder to scale down a design for smaller screens than it is to scale up a design for larger screens. If you were creating a responsive web design you would start with a mobile artboard and work up to tablets and then desktop screens. If you were designing an iOS app, you’d start with the smallest iPhone and work up to iPad, then iPad Pro.

Over the course of this book we’ll be designing and prototyping an iOS app, so choose iPhone 6/7 to start off.

Here's our very first artboard!

Canvas

As I mentioned, the canvas is unlimited. All artboards will be visible on the canvas at once, making it easy to flip back-and-forth between the different screens. Any objects that aren't inside an artboard are automatically inserted into what's called the pasteboard – a separate artboard for scattered objects.

Artboards

When you need to create new artboards, tap A and select a device from the inspector on the right-hand side. If you need a custom-size artboard (maybe you'd like to have your app icons in the same document), tap A and draw out the artboard using the mouse, rather than select one from the inspector.

In some cases, your content will exceed the dimensions of the screen. If you select the artboard and drag the handles you'll be able to resize it, but you'll also notice a dashed, blue line, which indicates the boundaries of the viewport (the above-the-fold content). Anything below the fold is accessed by scrolling, which you can do when testing prototypes in real devices. We'll definitely explore that later in the book!

You can change the viewport height at any time using the inspector, and you can also turn the viewport off completely if you don't want the screen to be scrollable in live preview mode.

Over the course of the book we’ll create many artboards, eventually wrapping up with the following end result:

Prototype Workspace

Adobe XD has an equally important secondary workspace called the Prototype workspace, and this is where we:

1. Link screens together with transitions
2. Create video demonstrations of our design
3. Prototype (test) the design in a browser or device
4. Share the prototype with teammates to request feedback

Prototyping is where Adobe XD outshines Photoshop and Sketch, and we’ll be using this workspace almost as often as the Design workspace.

Prototyping isn’t about throwing together a few fancy transitions to impress our clients and teammates; creating prototypes and testing them in real devices is integral to crafting exceptional UX. It helps us identify flaws that we wouldn’t ordinarily discover by simply looking at the design.

Toolbar

As in Photoshop, the toolbar appears on the left-hand side, so let's run through the tools, along with their keyboard shortcuts (the same on both macOS and Windows):

• Move (M)
• Rectangle (T)
• Ellipse (E)
• Line (L)
• Pen (P)
• Text (T)
• Artboard (A)
• Zoom-In (Z)

Layer List

In Adobe XD, the layer list appears on the left-hand side when you use the keyboard shortcut Cmd + Y (Ctrl + Y in Windows), or when you click the layer list icon in the very bottom-left corner of the app window. Photoshop, by default, always displayed the layer list on the right -hand side, but Adobe took a little inspiration from Sketch on this one.

Layers are the smallest of components that make up your design. Layers can be shape layers, text layers, bitmap layers, etc.

It's here that you'll see a hierarchical tree of your artboards, groups and layers. But what makes this interface so special, compared with other design apps, is that the layer list only displays the contents of the currently selected artboard, which reduces distraction. You only see what you need to see.

Property Inspector

When you need to style layers, the inspector is your friend. It's here that you define your backgrounds, fills, borders, border radii, shadows, widths, heights, rotation degrees, and so on. You can also activate Repeat Grids from here, as well as specify alignments and boolean operations. As you may have seen earlier, there are settings unique to artboards and so only appear when an artboard is selected (and the same for text).

Don't worry, we'll learn how to use all of these features in the following chapter.

Application Toolbar

Aside from the zoom dropdown, this toolbar mostly deals with prototyping tools. Here you can switch between the Design and Prototype workspaces, connect to a mobile device (for testing user flows and interactions), preview prototypes in Adobe XD itself, or share prototypes to receive feedback and comments.

In the six chapters to come, we're going to learn all about prototyping with Adobe XD, while designing a sample app. But if you're not into hands-on learning, you can still follow us on the journey using the screenshots in this book. It's totally up to you!

Next: Learning the Basics with Low-Fidelity Prototyping

In the next chapter we'll dive straight into low-fidelity prototyping. Now that we're familiar with the UI of Adobe XD, we'll be learning how to use the basic design tools while digitally mocking up the rough idea for our app.

As mentioned earlier, the end result will contain various screens that will make up our finished app design. This app design will be based on Adobe XD’s official iOS app, Dishy — a location-based food-ordering app.

See you there!