BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES
BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES

Tutorial 3 | Adobe XD | Wireframe to Prototype

How to Design and Prototype a Website in Adobe XD tutorial will help you become more proficient on Adobe XD.
Share the results of each of the steps below in your E-portfolio/Blackboard.

Download the compressed file which has the XD file for you to work on along with a text file with the links to Adobe Stock for you to download the images you will need for the Step on images. Note that the in the XD file, the artboard on the left is the one you will be working on. The artboards on the right are the sample designs for each step so you can see how your artboard needs to look like after each step. copy. It is OK if you use your own assets but they need to be the same size and occupy the same space as in the sample artboards.

Step 1: Guides, grids, and wireframing.

Step 2: Create dynamic layout elements.

Step 3: Working with components, character styles, and colors.

Step 4: Adding imagery.

Step 5: Prototyping interactions.

Delivery:

Reproduce each of the steps in this tutorial and upload the corresponding png image of the step, and share the XD link to Blackboard under Tutorial 3. Each new step should be a new submission.

Grading:

Total 10 Points

Each tutorial step is worth 2 point.