.jpg)
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.
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.
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
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:
- What is this app going to be used for?
- Who’s the main target for this app? Who’s the user?
- 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.
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.
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.
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
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.
Click on the little arrow next to the element and guide it to the Artboard you want to link to that clickable element.
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.
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.
Test out different Interactions with the Preview button. Get the exact Animation, Action Type and Duration you’d like to offer your user.
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.
5. Share Link for Review and Test Your Prototype
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.
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.
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:
A to Z of Adobe XD: Tips & Tricks!
How to Make Wireframes for Web Design in Adobe XD.jpg)
.jpg)
10 Adobe XD Templates to Help You Design Faster and Smarter
Best Adobe XD Templates for Web Designers
How to Create a Finance App UI Design in Adobe XD
15+ Free Adobe XD Tutorials and Courses
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!
.jpg)
