Books web site Part 2- Setting up adobe Xd

Introduction

Adobe Xd is a free prototyping tool that makes it easy to create wireframes and working mock-ups.

Welcome to part two of a series that explores how to prototype a book shop website in Abobe Xd. As with most projects there is some setting up to do. Just follow the steps below. This post assumes that you have no experience with Xd. Each step will be explained as we go.

Learning objectives

  1. Create a free Adobe Creative Cloud account.
  2. Download and install the Creative Cloud app.
  3. Download and install Abobe Xd
  4. Download a UI kit from the Abobe site
  5. Open Xd and then open the UI kit, Save it to the cloud.
  6. Link the UI kit to your project

Steps 1 and 2 – Create a free Adobe Creative Cloud account. Download and install the Creative Cloud app.

Create an abode account and download the creative cloud app. This app acts as the control centre for all Adobe apps. It allows you to download and install any of their apps.

Step 3 – Download and install Abobe Xd

Once the CC app is installed open it and click on the install button next to the Xd button, see the image below. this will download and install Xd on your local machine.

The Adobe Create Cloud App.

Top tip

To move the pasteboard (the background where the artboards sit) around, hold down the shift key and drag.

Step 4 – Download a UI kit from the Abobe site

Download the responsive UI kit, Extract the zip file to your project folder. Click the image below to go to the download page for Xd resourses.

The Adobe Xd resources page for UI kits

Step 5 – Open Xd and then open the UI kit, Save it to the cloud

!important

In order to link the UI kit to your Xd project you need to save it to the Abobe cloud platform. Open Xd and then open the UI kit. Click on save as and save it to the cloud.

The Save as window in Adobe Xd

Step 6 – In the assets panel link the UI kit to your project

In Xd create a new project and name it book site. Open the assets panel and click on the + at the top of the panel. Find the UI kit and click on it, this will link the UI kit to your project.

Link assets

Part 3 looks at creating a simple wireframe of the site using no colour, just functional blocks and placeholders.

Leave a Reply

Your email address will not be published. Required fields are marked *