AdobeXD has found a large reception since its debut. This new designing platform comes with prototyping tools bundled in it. While it effectively combines some infinite features and possibilities for the designers, it is not bulky, and this fact makes it a great choice.
If you already have Adobe Creative Cloud subscription, you already have the complete set of features of XD with you. When you have the designing, prototyping and feedback rolled into a single app; there is nothing more a designer can ask for in a resourceful and easy-to-use the designing app.
You can design low-fidelity wireframes
It is very easy to mockup a low-fidelity wireframe on Adobe XD quickly. This helps make a big stride towards creating a layout and assuring a terrific user experience. During the start, you do not need to worry about the visuals much.
The most important keyboard shortcuts are here:
- SelectTool (V)
For mocking up an idea, you can start by creating an artboard (A). Now select the ‘Android Mobile’ artboard by clicking on the inspector you will find on the right-hand side.
Use the toolbar on the left-hand side and draw some shapes to create your layout on the canvas.
If the layout is confusing with unaccounted spaces, you can add one or two images depicting for what space will be used for. Even basic icons will work for this purpose. The main idea here is to validate the concept with Feedback. It makes sense to give more time to make it more appealing only after verifying the concept.
User flows and prototyping interactions
Now you will have a rough idea mocked up in front of you. Now you must show how these screens will link and how the user will move from one screen to the other.
Switchto the ‘prototype workspace by clicking on the tab you find in thetop left corner. This workspace will look similar to the Design workspace. However, you will not see the inspector. If you have to select the object on the canvas, you can link the tap target to another artboard.
When you click on the ‘Explore Now’ button, you will see a blue handle you can drag on the right side. You can drag this handle onto the artboard next to the present one. Now you have created a user flow.
Before testing how to test the user flow in a real device, we can see how the user will find the transition.
When the handle is dropped onto the target artboard, you will see a modal. The settings given below will display.
Target: how to specify the destination (we have already done this)
Transition: the type of effect the user sees while moving from one screen to the other.
Easing: acceleration of the animation
Duration: the length of the animation
You can choose to work on the transition settings as you please.