EX1: Adobe XD Prototyping
“Prototyping in Adobe XD allows you to quickly validate your concepts before actually taking your time to engineer them” (Beaumont, 2019)
I have followed a series of tutorials which show how to use prototypes in Adobe XD to express ideas and concepts for web and mobile designs, including how the design should be navigated and how it is intended to be used.
Tutorial One - Welcome To XD
I have created a prototype after following this tutorial which leads you through the steps to customizing and wiring an app for travelling and camping. A lot of the content is already provided, but the tutorial shows how to edit things such as the colour of an element or how to make headers sticky so that they stay visible when scrolling down. The tutorial shows how you can use wires to prototype the app and connect the featured post in the home screen to a page dedicated to that article. The transition used is just a tap one, which takes you directly to the new page. It is a simple transition but works effectively and directs the user straight to the article they want to read more on.
Tutorial Two - XD Some Basics In Five Steps
This next tutorial is from Dani Beaumont’s YouTube tutorial series for Adobe XD. In this tutorial, she shows how to create new artboards and add content onto them, such as images. She shows how to quickly drag images onto the artboard and mask them into shapes, and how to use repeat grids to create a scroll-able gallery quickly. The repeat grid effect is really helpful because it lets you space items evenly in an order just by dragging down on the grid, which saves you time and effort making sure things are properly spaced out. She shows how to use tap animations to prototype a plant app where a user can browse plants and click each one to find out more information about that plant. Like the first tutorial, this is a simple yet straight-forward transition which is easy to understand. The tutorial also shows how to use assets and how you can save your prototype as a video recording, or how to share it as a link that lets other people test it out within XD.
Tutorial Three - XD Creating A Prototype In Five Steps
Here is another tutorial I have followed by Dani Beaumont, which follows up from the last tutorial with the plant app. This tutorial goes more into detail about prototyping and how different animations and triggers can be used to add effects to a prototype. The first is a basic tap animation again, which was already shown before.
The second uses auto animate to smoothly transition between elements that are the same yet different sizes. Here, auto-animate is used to click through a gallery horizontally, making the selected element larger and move to the center of the screen. Even though the prototype is moving between two art boards, the auto-animate setting makes it appear as if the action is happening all on one screen because of how smooth it is.
For the third, the drag trigger is used to create a similar effect with elements becoming larger when they are selected. This is a lot like the second step except users are able to drag through the screen instead of tap. The drag feature is more useful for mobile screens since it works with one quick swipe, and is easier than tapping a small area, which may be harder to do for some users.
The fourth is an overlay. An overlay action uses a separate art board that has a transparent background, so that elements look like their hovering over the original art board. The overlay animation is good for displaying menus, which is what it has been used for here, after clicking on a burger menu to trigger the animation.
The last uses voice activated commands. It is triggered by clicking the microphone icon, which then takes you to a screen which gets you to press the space bar and say what plant you are looking for. This feature is helpful because it is accessible to people who may have a harder time reading, or cant see the text very well and aren’t sure where the plant they are looking for is.
All of these methods are helpful and I have applied some into my own work for the Freedom Festival 2024 project. For example, I have used the overlay animation to make a navigation slide in over the screen, so users can easily navigate the mobile version of the site. I have also experimented with the animation tab to make the overlay slide in from the left, where the burger menu icon is positioned.
References:
Beaumont, Dani (2019) Get Started with Adobe XD: Creating a Prototype [Quote]. Available online: Step 00 creating a prototype introduction – YouTube [Accessed: 09/12/2023]