Tutorial 4: Adobe Xd


Points: 10 pts
Due date: Nov. 2 at 11:59 p.m.
Resources: Adobe XdAdobe Tutorials
Summary: Learn how to use Adobe Xd to create working interface prototypes for websites and mobile applications.


Overview

adobe-xd-logoAdobe XD is an interface design tool you can use to create prototypes for websites and mobile applications.

In these two tutorials, we’ll cover the basics of the Adobe XD interface and the process to set up a project in Adobe XD. The goal is to gain an understanding of what is possible with the tool and hopefully spark some ideas for your final project.

At the end of the tutorial series, you’ll publish a link to the Dad’s Weekend – iPhone app prototype you develop in the last part of the assignment.

You don’t need to turn inand turn it in on Blackboard


Tasks

Download XD

We’ll use the free version of Adobe XD to complete the tutorials. You’ll need to download the program to your personal computer.

  1. Go to the main Adobe XD product page
  2. Select the Download XD – It’s free option
  3. You should also download the Adobe XD app to your mobile device. This will enable you to preview your prototypes as you build them!

Getting to know the interface

Open up Adobe Xd on your computer. Explore the main interface elements.

  • Two main modes to the interface
    • Design – design individual screens for your interface
    • Prototype – setup the flows for your interface
  • Toolbar
  • Properties Inspector
  • Asset Panel
  • Artboard Panel

Intro Tutorial

Complete the tutorial on the welcome screen (when you first open Adobe XD).

  1. Select Begin Tutorial to complete the Explore the Basics tutorial
  2. Complete Steps 1-7 in the Tutorial
  3. Either plug in your mobile device to your computer using a USB cable and/or login to Creative Cloud on both your computer and your mobile device.

Setup Projects Course (tutorial series)

In the next tutorial, we’ll walk through the process of creating a project in Adobe XD. If you don’t finish the tutorial during class, you can follow the series of instructions and short tutorial videos on the Adobe website.

Tutorial 1: Start an XD Project

  1. Create a project
  2. Add an artboard (iPhone)
  3. Save the file

Tutorial 2: Add and Edit Artboards

  1. Rename artboard “Splash
  2. Resize vertically
  3. Add three more artboards (same size, iPhone)
  4. Add one web artboard (Web 1366)
  5. Add a custom size artboard

Tutorial 3: Set Columns and Margins Using Layout Grid

  1. Download and open the layout-grids.zip file from the tutorial page.
  2. Open the Layout_grids.xd file
  3. Select the Splash – Desktop artboard
  4. Select the checkbox for layout grid
  5. Change the number of columns to 16
  6. Change the color of the grid, gutter width, and column width
  7. Apply layout grid to the second artboard
  8. Drag the image on to the layout grid

Tutorial 4: Aligning Content with Square Grids

  1. Download and open the square-grids-to-align-content.xd file
  2. Turn on the square grid for the third artboard
  3. Change color of the grid
  4. Make it the new default
  5. Apply to the other artboards
  6. Draw a rectangle on the third artboard

Tutorial 5: Start Your Design with UI Kits

  1. Download and open the ui-kits.xd file
  2. Complete the steps described in the tutorial video.

Tutorial 6: Create Scrollable Artboards

  1. Download and open the scrollable.xd file
  2. Complete the steps described in the tutorial video.

Dad’s Weekend – iPhone app

Using the skills you learned, develop a 3-5 screen mobile application for Dad’s weekend. Your app should enable the following content/functions:

  1. Intro page
  2. Favorite Dads
  3. Dad’s Weekend Events

Your prototype should include the following elements and functions:

  • Interface elements from the Apple iOS UI Kit
  • Artboards sized for iPhone 6/7/8
  • At least one photo
  • All screens must be clickable (linked in Prototype mode)

 


Turn it in

Now that you finished your tutorials and built your prototype, it’s time to publish your prototype and turn it in on Blackboard.

  1. Open the Adobe XD file you create for the Dad’s Weekend app.
  2. Select the share icon in the top right corner of the main window in Xd.
  3. Select Publish Prototype (you may need to login to Adobe Creative Cloud to do this)
  4. Select the link icon, which will copy the link to your prototype

Then, log in to the 381 Blackboard.

  1. Go to the Assignment Dropboxes section, and locate Tutorial 4: Adobe Xd
  2. Paste the URL to your prototype into the text submission box
  3. Select Submit

Grading Criteria

Your main goal with this task is accuracy and completion. Using elements of a standard Tutorial rubric – you will be graded on content, completion, and conventions. Your instructor is looking for the following criteria:

  • Content: Meets all the criteria for the assignment.
  • Complete and Thorough: All steps of the tutorial are completed in full. Demonstrated ability to understand and follow requirements.
  • Conventions: No misspellings or grammatical errors. The finished tutorial is properly formatted and is correctly turned in to Blackboard.

NEXT LEVEL

Adobe Xd is an easy tool to get started with, but this tutorial only scratches the surface of what is possible. You can use Xd to create prototypes for websites and even a mobile application as part of your final assignment.

Visit the Adobe Xd Tutorials page and try out some of the Set up Projects Course tutorials.

Time to level up!