7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Adobe XD

How to Create a Banking App Prototype in Adobe XD

Scroll to top
Read Time: 6 mins

Are you about to pitch a banking app design proposal to a client? You’re in the right place. In this tutorial we’ll learn how to prototype a basic banking app interface.

Budget Planner IIBudget Planner IIBudget Planner II

Adobe XD is a software specialized in app and web applications, offering tools for designers to create the most realistic web simulations or prototypes.

The tools provided by Adobe XD save time and help us create functional app prototypes. By visualizing the design in action, with buttons and animations, this tool makes it easier for designers to communicate their ideas to clients and programmers. 

Adobe XD Banking App Templates on Envato Elements

Once you get the hang of the Adobe XD workflow, it’s always helpful to have creative resources and inspiration at hand. A subscription on Envato Elements will give you access to thousands of creative assets, including Adobe XD app templates and UI design for apps. 

Adobe XD app templates on Envato Elements Adobe XD app templates on Envato Elements Adobe XD app templates on Envato Elements

Full Course: Advanced Adobe XD

Are you already familiar with Adobe XD? Well, it sounds like a good time to take your skills to the next level! Check out this free and easy-to-follow Advanced Adobe XD tutorial by Adi Purdila. Also find plenty of Adobe XD related video tutorials on Envato Tuts+ YouTube channel to become a pro in no time. 

Before prototyping, learn how to use Adobe XD to make an app, specifically the UI design. Check out this tutorial on how to make a finance app UI in Adobe XD:

How to Create a Banking App Prototype in Adobe XD

do
Before getting started, it’s highly recommended to check out different banking apps. 

1. Analyze Other Banking Apps

You must even have one on your phone. Keep in mind that the ultimate goal of web and app design is to elevate the users’ navigation experience. Most user problems relate to the most simple questions. Start by asking yourself:

  1. What is this app going to be used for?
  2. Who’s the main target for this app? Who’s the user? 
  3. What are the main sections and functionalities this app must feature? 

Write all this down and apply the best practices you find to your design. 

2. Sketch Out Sections 

Let’s get ideas out on paper. Consider all the information gathered from the existing banking apps you analyzed. Sketch out the screens you’ll be prototyping. I usually do this first by hand, it helps me internalize the design process. But feel free to do this directly in Adobe XD. 

Sketch out sections Sketch out sections Sketch out sections
These are the main sections I’ll be prototyping.

3. Translate Sketch into Design

At this point you could turn your sketch into wireframes and design your app from scratch. You could also look for a template that covers most of your design needs and start from there.

Step 1: Download an App UI Kit

For the purposes of this tutorial, I’ll be working with a Fundia - Wallet & Banking Mobile App UI Kit from Envato Elements. It comes with a great UI design for mobile app. I chose this template based on the sections and functions I sketched out earlier. 

Fundia - Wallet & Banking Mobile App UI KitFundia - Wallet & Banking Mobile App UI KitFundia - Wallet & Banking Mobile App UI Kit
This premium template has a great UI design for mobile app.

Step 2: Customize Screens and Elements

Choose the Artboards and elements you’re going to use for your banking app design. Distribute, remove and add elements in this Adobe XD app design template. Adjust colors and fonts to match your branding. 

Banking app design in Adobe XD app original template fileBanking app design in Adobe XD app original template fileBanking app design in Adobe XD app original template file
This is what the banking app design in Adobe XD original template file looks like.

Change the names to each section they’ll belong to. For this tutorial I’ll create the prototype with these sections:

  • Login
  • Home
  • Transaction Success
  • Card Details
  • Profile
Banking app design in Adobe XD adjusted templateBanking app design in Adobe XD adjusted templateBanking app design in Adobe XD adjusted template
I customized the template to my design needs. These are the sections we’ll prototype.

Once you know how to use Adobe XD to make an app, you’re ready to start prototyping. 

4. Prototype Your Design

Step 1

Define the main interactions in your banking app design. In this case we want out user to Login, click on the arrow and go to Home. We also want to link our main menu at the bottom of each screen with the different sections we designed. 

Step 2

Go to Prototype on the top of your screen. Select the first element or area you’d like to make clickable. In this case I’ll start with the next button. 

Select element prototype Adobe XDSelect element prototype Adobe XDSelect element prototype Adobe XD

Click on the little arrow next to the element and guide it to the Artboard you want to link to that clickable element.

Link element to Artboard you’ll like it to be linked.Link element to Artboard you’ll like it to be linked.Link element to Artboard you’ll like it to be linked.

Adjust specific aspects of your interaction. What’s going to Trigger the animation? In this case we want to user to "Tap". What Type of action we want to see? We’re staying with "Transition". Make sure your Destination is set to the right Artboard. Finally, what kind of Animation we’d like to see? We’ll keep Dissolve for the Login to Home interaction. 

Adjust interaction for your prototype in Adobe XDAdjust interaction for your prototype in Adobe XDAdjust interaction for your prototype in Adobe XD

Try out other kinds of Animation with different interactions. For example, to go to the Card Details screen, the user will have to click on the card. Then, I’ll switch the Animation to Slide Left to get a smoother transition when the user clicks on the card. I also adjusted the Duration to get a nicer visual effect. 

Adjust interaction in your prototype in Adobe XD Adjust interaction in your prototype in Adobe XD Adjust interaction in your prototype in Adobe XD

Test out different Interactions with the Preview button. Get the exact Animation, Action Type and Duration you’d like to offer your user. 

Preview interactions prototype Adobe XDPreview interactions prototype Adobe XDPreview interactions prototype Adobe XD

Do the same with all your elements and buttons to link them to the screen the belong to. Select your Artboards and see all the links you’ve created. 

Prototype links Adobe XDPrototype links Adobe XDPrototype links Adobe XD

Testing your prototype will help you find out if your navigation is intuitive enough. It is highly recommended for you to test out this prototype with other people to tackle potential navigation problems. 

do
With Adobe XD you can create and share an online link to get feedback from clients and colleagues. 

Go to Share at the top left of your screen (next to Prototype) and choose Design Review as your setting. This will generate a link that can be reviewed and commented online by anyone with the link. 

Share prototype for review online in Adobe XDShare prototype for review online in Adobe XDShare prototype for review online in Adobe XD

More Adobe XD Resources 

Want to become a pro in Adobe XD app design and web design? We’ve got plenty of articles, tutorials and creative tips for you to make the best of Adobe XD. Also find amazing Adobe XD app templates to work with. We’ve got a little selection for you:

Looks Like You’re Becoming a Pro!

The more skills, tools and tricks you learn, the more efficient your design work will be. Keep learning Adobe XD and get all the inspiration and creative resources you need on Envato Elements. You’re one step closer to your next best UI and UX design! 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.