Designing An App With Adobe Xd

In this tutorial you will learn how to create a finance app design in Adobe XD, and (more importantly) how to easily animate parts of its UI.

What You Will Learn in This Adobe XD Tutorial

• How to create a finance app mockup in Adobe XD
• How to create and import icons
• How to set up grid
• How to save Adobe XD components
• How to create a repeat grid
• How to create interactive prototypes

For more inspiration on how to adjust or improve your final financial UI design you can find plenty of resources at GraphicRiver.

What You'll be Creating

We'll be designing dark and light variants of this UI. Smartphone apps often cater for dark or light mode, determined by the user's preferences, so it's a useful thing to consider. Here's a video to demonstrate the animation we'll be creating (the dark UI):

I'll show you the light mode variant later on in the process.

What You Will Need

You will need the following resources in order to complete this finance app UI design:

• San Francisco Compact Display font
• Finance & Banking Icons

Finance & Banking Icons

1. How to Add the UI Patterns to XD

Step 1

Let's start this finance app design with a basic sketch on paper. On paper you can easily establish the main components of your app design and the overall proportions and locations of the main features. A paper sketch is the perfect start for the digital wireframe.

Step 2

Let's open Adobe XD and select the iPhone XR/XS Max/11 (414 x 896) template to create a 414 x 896 artboard.

Step 3

Now let's start the work on the wireframe. Take a look at your paper sketch and start with the four main sections (or patterns) of the app design.

Pick the Rectangle tool (R) and create a 414 x 70 px shape. Use the smart guides to place your shape as shown in the following image and then go to the Property inspector. Disable the existing Border using that check box and then click the Fill color well and change the color to #646E83.

Don't waste time stylizing objects or adding too much text content in this initial phase. At this moment your only worry should be the overall structure of the app UI design. Establishing the proportions and the spacing between each section.

Step 4

Make sure that the Rectangle tool (R) is still active and create a 414 x 150 px shape. Place it as shown in the first image.

Using the same tool, create a 414 x 83 px shape and place it as shown in the second image, and the create a 414 x 446 px shape and place it as shown in the second image.

Step 5

These will be the main components of your financial UI design.

At the top, you have the classic navigation bar where you will add the control buttons for your app. Below the navigation bar you have the cards bar where you will add the available cards and the relevant information for each card. In the categories bar you will add a row of transaction categories while the transactions bar will be used to list the transactions history for the selected card.

2. How to Add the Controls to the Finance App Design

Step 1

Take a new look at your paper sketch and let's add the controls to this app UI design. Let's start with the navigation bar. Pick the Rectangle tool (R) and hold down the Shift key to easily create a 20 px square. Place it as shown in the following image, disable the Border and set the Fill color to #646E83. Use the same appearance attributes for the rest of the objects that will serve as controls.

Make sure that this square stays selected. Hold down the Option and the Shift key and simply drag a copy of your selection to the right, as shown in the second image. Use the smart guides to place this new shape exactly as shown in the second image.

Step 2

Move down to the top-left corner of the cards bar. Pick the Rectangle tool (R) and remember to hold down the Shift key to easily create a 30 px square. Place it as shown in the first image.

Using the same tool, create a 240 x 150 px shape and place it as shown in the second image.

Step 3

Focus on the left side of that categories bar. Using the Rectangle tool (R), create a 60 px square and place it as shown in the first image.

Move down to the right side of the transactions bar. Using the same tool, create a 30 px square and place it as shown in the second image.

Step 4

Keep focusing on the transactions bar and make sure that the Rectangle tool (R) is still active. Create an 80 x 30 px shape and place it as shown in the first image and then create a 60 px square and place it as shown in the second image.

Step 5

Your app mockup is complete. Some of these shapes will be stylized and used in the final app UI design, some will only serve as guides for buttons and icons that you're about to add, and a few will be removed.

3.How to Stylize the Navigation Bar of this Finance App Design

Step 1

We'll go for a dark style for the overall app design and we'll only use vibrant colors for the most important features. The main components will use different shades of black to subtly separate the most important sections without being too strident. We'll use white for all the icons and text to create a nice contrast and make every elements as legible as possible. In the end you will have the dark mode of this app design. In the final steps, you will learn how to easily adjust your app design and switch the overall design from the dark mode to the light mode.

Let's start by changing the color of the artboard. Click the name above your artboard and go to the Property inspector. Click that Fill color well and change the color to #0A0E17.

Step 2

Focus on the left square from your navigation bar and let's create a small arrow icon. First, you need to set-up the grid to make it easier for you to create pixel perfect objects. Click the name of your artboard and go to the Property inspector.

Focus on the Grid section and click that check-box to enable the grid. Select Square from the drop-down menu, enter 1 in the input box, and then click the color well. Change the color to #C7C7C7 and don't forget to lower the Opacity to 50%.

Pick the Pen tool (P) and create the arrow path shown in the following image. Make sure that it stays selected and go to the Property inspector. Disable the Fill, change the Border color to white, increase the Size to 4 and don't forget to check the Round Cap and Round Join buttons.

Step 3

Move to the right square from your navigation bar. Pick the Rectangle tool (R), create a 20 x 4 px shape and place it as shown in the first image. Make sure that it stays selected and focus on the Property inspector. Disable the Border, change the Fill color to white (#FFFFFF) and set the Corner Radius to 2.

Hold down the Option and the Shift key and simply drag a copy of this rounded rectangle below the original shape, as shown in the second image. Add a third copy between the two rounded rectangles, decrease its width in half and place it as shown in the third image.

Step 4

Select the dark squares that lie behind your navigation bar buttons and simply delete them.

Pick the Text tool (T), click inside your artboard and add the "Accounts" piece of text. Place it as shown in the following image, make sure that it stays selected and go to the Property inspector. Set the color to white. Select the San Francisco Compact Display font, change the Style to Bold and the Alignment to Center, and then set the Size to 20.

We'll use this system font from Apple for all of our text because it offers an extensive range of styles and languages which gives you the possibility to achieve optimal legibility at every point size or to easily adjust text content when needed.

4. How to Stylize the Cards Bar of this Finance App Design

Step 1

Select the rectangle used to demarcate the cards bar and simply delete it.

Move to the shape used to demarcate the navigation bar and select it. Increase its height to 190 px, place it as shown in the second image and change the Fill color to #1C2230.

Step 2

Select the 30 px square from the cards bar. Go to the Property inspector, change the Fill color to black (#000000) and set the Corner Radius to 10.

Step 3

Keep focusing on your black rounded square. Pick the Rectangle tool (R), create a 2 x 14 px shape and place it as shown in the first image.

Make sure that this thin rectangle is selected and duplicate it (Command-D). Select the copy, go to the Property inspector and set the Rotation angle to 90 degrees.

Step 4

Select the rectangle from your cards bar and go to the Property inspector. Set the Corner Radius to 10 and then click the Fill color well. Change the Fill type from Solid Color to Linear Gradient and then focus on the gradient sliders.

Select the left one and change the color to #2E64F8 and then select the right one and change the color to #0C23AC. Return to your artboard and move the gradient sliders as shown in the first image.

Step 5

Pick the Text tool (T) and add the "Debit Card" piece of text. Place it as shown in the following image, make sure that it stays selected and go to the Property inspector. Set the color to white. Select the San Francisco Compact Display font, change the Style to Light and the Alignment to Left, and then set the Size to 10.

Using the same tool, add the rest of the text shown below and use the text attributes shown in the following images.

Step 6

Select the blue rounded rectangle and all the text that lies on top of it. Use the Command-G keyboard shortcut to group these selected objects.

Go to the Layers panel and rename this newly made group "Card Blue".

Step 7

Make sure that your "Card Blue" group is selected and duplicate it (Command-D). Move to the Layers panel and rename this new group "Card Purple".

Select the rounded rectangle from this new group and replace the existing linear gradient with the one shown in the following image.

Step 8

Keep focusing on the "Card Purple" group and adjust the text content as shown in the first image. Once you're done, hold down the Shift key and drag your "Card Purple" group to the right as shown in the second image.

5. How to Stylize the Categories Bar of this Finance App Design

Step 1

Download these Finance & Banking Icons and drag the four icons shown below inside your app UI design. Scale these shapes to 20 px and change the Fill color to white.

Select each icon one by one, open the Assets panel and save your icons inside the Components panel. Name these components as shown in the following image.

Step 2

Focus on the categories bar, select the dark square and go to the Property inspector. Set the Corner Radius to 10 and change the Fill color to #1C2230.

Pick the Text tool (T) and add the "All" piece of text. Place it as shown in the following image, make sure that it stays selected and go to the Property inspector. Set the color to white. Select the San Francisco Compact Display font, change the Style to Light and the Alignment to Center, and then set the Size to 12.

Step 3

Pick the Rectangle tool (R) and create a 9 px square. Fill it with white and set the Corner Radius to 2. Drag a copy of this shape to the right and leave a 2 px gap between the copy and the original, as shown in the second image. Duplicate these two shapes, drag the copies down and remember to leave a 2 px gap between the copies and the the originals.

Once you're done, select all four shapes and click the Union button from the Property inspector. Place this new object as shown in the third image.

Step 4

Select the three objects highlighted in the first image, go to the Assets panel and save your selection as a new component. Name it "Category".

Step 5

Make sure that your newly saved component is still selected and click the Repeat Grid button from the Property inspector. Click that right handle and drag it to the right to add four copies of your component, as shown in the first image.

Move the cursor anywhere between your components and click and drag to reduce the overall spacing between components to 19 px, as shown in the second image.

Step 6

Focus on the second component from your repeat grid. Double click on the icon twice to isolate it, and then delete it. Drag the "Household" component from the Assets panel and place it exactly as shown in the second image. Repeat this technique for the next components from your repeat grid.

Step 7

Keep focusing on your repeat grid and adjust the text as shown in the first image. Once you're done, select the rectangle used to demarcate the categories bar and delete it.

6. How to Stylize the Transactions Bar of this Finance App Design

Step 1

Pick the Text tool (T) and add the "TRANSACTIONS" piece of text. Place it as shown in the following image, make sure that it stays selected and go to the Property inspector. Set the color to white. Select the San Francisco Compact Display font, change the Style to Semibold and the Alignment to Left, and then set the Size to 15.

Step 2

Focus on the top-right corner of the transactions bar and select that square. Go to the Property inspector, set the Corner Radius to 5 and change the Fill color to #1C2230.

Step 3

Keep focusing on the shape edited in the previous step. Pick the Rectangle tool (R), create a 10 x 2 px shape and fill it with white. Add two copies of this rectangle and drag them below the original, as shown in the second image.

Step 4

Select the other square from the transactions bar, set the Corner Radius to 10 and change the Fill color to #1C2230.

Select the rectangle from the transactions bar, set the Corner Radius to 15 and change the Fill color to #FD7074.

Step 5

Pick the Text tool (T), add the "Electricity" piece of text and place it as shown in the first image. Set the color to white. Select the San Francisco Compact Display font, change the Style to Medium and the Alignment to Left, and then set the Size to 20.

Using the same tool, add the "13 Jan 08:45 PM" piece of text and place it as shown in the second image. Set the color to white and lower the Opacity to 50%. Select the San Francisco Compact Display font, change the Style to Light and the Alignment to Left, and then set the Size to 14.

Finally, add the "$29.99" piece of text and place it as shown in the third image. Set the color to #1C2230. Select the San Francisco Mono font, change the Style to Bold and the Alignment to Center, and then set the Size to 14.

Step 6

Add an instance of the household component and place it as shown in the first image. Select the objects highlighted in the second image and save them as a new component. Name it "Transaction".

Step 7

Make sure that your newly saved component is still selected and click the Repeat Grid button from the Property inspector. Click that bottom handle and drag it down to add four copies of your component. Reduce the spacing between components to 20 px, as shown in the first image.

Isolate the icons from each component copy and replace them with the ones shown in the second image.

Step 8

Select the second from the bottom red shape and change its Fill color to #00b980. Adjust the text information as shown in the following image.

Step 9

Select the rectangle used to demarcate the transactions bar and change the Fill color to #0A0E17. Select this shape along with the rest of the object that make up your transactions bar and group them (Command-G). Go to the Layers panel and name this group "Transactions Blue".

Step 10

Pick the Rectangle tool (R) and create a 414 x 5 px shape. Fill this thin rectangle with #2E64F8 and place it as shown in the following image.

7. How to Mask Objects and Multiply Artboards

Step 1

Go to the Layers panel, select the "Card Blue" and the "Card Purple" groups and Group them (Command-G). Name this new grou "Cards".

Step 2

Pick the Rectangle tool, create a 344 x 150 px shape and place it exactly as shown in the first image. The appearance attributes of this new shape are not important. Select it along with your "Cards" group and go to Object > Mask with Shape (Shift-Command-M). This will mask your "Cards" group keeping visible only the content of the group that's covered by the mask rectangle.

This won't change the look of your design, but you will understand its use once we mode to prototyping. Once you will turn this group into a horizontal sliding menu, the mask will keep the slide effect visible only in the masked area.

Step 3

Select your artboard (click the name) and duplicate it (Command-D). Leave a 200 px gap between your two artboards. Focus on the new artboard. Select that thin, blue rectangle and change the Fill color to #772CCB.

Go to the Layers panel and open your masked group. Select that "Cards" group and move to your artboard. Hold down the Shift key and drag your selection to the left. Make sure that your leaving a 20 px gap between the right edge of your selection and the right edge of the artboard, as shown in the second image. Return to the Layers panel and rename the "Transactions Blue" group "Transactions Purple".

8.How to Turn Your Financial UI Design Into an Interactive Prototype

Step 1

Switch from the Design mode to the Prototype mode.

Go to the Layers panel and select the "Cards" group from the first artboard. Return to your artboard, click that blue arrow button and simply drag it above the second artboard to connect the two artboards. Go to the Property inspector to set-up the behaviour of the interaction. Set Drag as the trigger, select Auto-Animate for the type and keep the Easing set to None.

Step 2

Select the "Cards" group from the second layer and connect it with the first artboard. Keep the same interaction behaviour used in the previous step.

Step 3

Select the first artbaord and focus on the Layers panel. Select only the "Card Purple" group from the "Cards" group and connect it with the second artboard. Go to the Property inspector to set-up the behaviour of this new interaction. Set Tap as the trigger, select Auto-Animate for the type, keep the Easing set to None and change the Duration to 0.4.

Select the second artbaord and focus on the Layers panel. Select only the "Card Blue" group from the "Cards" group and connect it with the first artboard.

Step 4

Select the "Transactions Blue" group, copy it (Command-C) and paste the copy inside the second artboard on top the "Transactions Purple" group. Copy the "Transactions Purple" group (you can easily select it from the Layers panel) and paste the copy inside the first arboard on top of the "Transaction Blue" group.

Select both group copies added in this step and drag them 500 px below the artbards. Having these groups outside your artboards will add a nice slide in & out of the screen animation for your "Transactions Blue" and "Transactions Purple" groups.

Now that you're done, you can click the Preview button to have a look at your prototype.

Step 5

You can easily change the style of your financial UI design from dark mode to light mode. All you have to do is change the colors used for text, icons and the empty space.

Start with the text and icons and replace the white with #2A2B90. Move to the artboard color and change it to white. Do the same thing for the rectangle that serves as the background for the "Transactions" groups and the rounded square behind that plus icon. Finally, change the color of the navigation bar to #F0F3FD. Do the same for the rounded squares that encapsulate your icons.

Congratulations! You're Done!

Here is how it should look in light mode. I hope you've enjoyed this tutorial and can apply these techniques in your future app UI design projects. Don't hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your financial UI design.

Want to learn more?

We have loads of tutorials on Tuts+, beginner to intermediate level, take a look!

Designing An App With Adobe Xd

Source: https://webdesign.tutsplus.com/articles/finance-app-ui-design-in-adobe-xd--cms-34554

Posted by: elliotalcon1969.blogspot.com

Share this post