How To Design An App Prototype In Adobe XD
What You’ll Need
- Adobe XD
- Adobe Illustrator
- Typekit Font – Swingdancer
- Google Font – Source Sans Pro
- Icons – Flat Icon
- Icons – Google Material Design (In Adobe XD)
The Design Phase
In Adobe XD, click the Artboard tool and select ‘Android Mobile’ from the predefined artboard sizes (right-hand panel). You should have a total of two artboards in your workspace.
Now, we’re going to make the gradient background in Adobe Illustrator by creating an artboard that’s 360x640px and using the gradient tool. The two colors used to make the linear gradient are #4ECDC4 and #66CC99. Once the gradient has been made, copy and paste it onto the first artboard in Adobe XD.
Now, let’s give this app a name. Place the logo 122px down from the top of the canvas. Then, using the rectangle tool, draw a rectangle that’s 283x47px. There should be a 35px space between the logo and the first rectangle. Round the corners of the rectangle by 27px.
Duplicate the rectangle shape two more times to create a total of three, and place them below one another leaving 21px of spacing in between each shape. Fill the first two rectangles with white and then set their opacity to 20%. The last rectangle will have no fill and a white 2px border.
Now, we’re going to add some icons. First, we’re going to add the hamburger menu icon to the top left corner. Then, we’re going to add the mail icon to the left-hand side of the first rectangle. Then, add the person icon in the second rectangle. We’re also going to add some text for all the text boxes and for the last button. Finally, we’re going to add three social media icons (Instagram, Facebook, Twitter) near the bottom of the app.
Now we’re going to start working on the second artboard. First, we’re going to copy the design on the first artboard and then paste it onto the second artboard. Move the whole design so that less than half of it is showing. Then, slide the gradient background over to fit the entire artboard. This is so that when we add the prototype effect, it will look like the menu is sliding out. Be sure to delete the hamburger icon and add an ‘X’ icon in its place. We’re also going to delete the ‘sign-in’ text and the last two social media icons.
To create the slide out menu, draw a rectangle that’s 222x640px on the left-hand side of the artboard. The color fill for this rectangle is black and its opacity will be set to 60%. Then, we’re just going to use the text tool to write out some links that we on the menu.
The Prototype Phase
To make the app interactive, we’re going to go into the Prototype mode. Then, we’re going to select the hamburger menu icon and drag the wire to connect it to the second artboard with the following settings: slide-right, ease-out, 0.2s. For the second artboard, we’re going to select the ‘X’ icon and drag the wire to the first artboard with the following settings: slide-left, ease-out, 0.2s.
To test the app, click the play icon and click the menu icons. It should look like you’re opening and closing the menu.