Create an Intuitive Currency Converter App Design in Just 4 Days
Table of Contents
- Introduction
- What is 100 Days of Design?
- The Currency Converter Exercise
- Designing a Mobile View of a Currency Converter
- Choosing Colors for the App
- Creating Input Fields for Amounts
- Setting up a Layout Grid
- Designing Currency Selection Dropdowns
- Adding Flags and Icons for Currency Selection
- Displaying Currency Conversion Results
- Designing the Purchase Button
- Showing the Result of the Conversion
- Creating a Navigation Bar
- Designing Icons for Navigation Links
- Finalizing the Design
- Conclusion
Introduction
In this article, we will explore the concept of 100 Days of Design and delve into a specific exercise from this design challenge. We will focus on designing a currency converter mobile app. Throughout the article, we will cover various design elements, including color choices, layout grids, input fields, dropdowns, icons, and navigation bars. By following these step-by-step instructions, you will learn how to create a user-friendly and visually appealing interface for a currency converter app.
What is 100 Days of Design?
100 Days of Design is a design challenge where participants engage in daily design exercises to improve their skills and familiarity with different design tools. One of the exercises in this challenge is the creation of a currency converter app. By completing these daily exercises, designers aim to master user experience (UX) design and gain proficiency in the tools they are using.
The Currency Converter Exercise
For the currency converter exercise, the goal is to design a mobile view of a currency conversion app. The app should allow users to enter an amount in one currency and convert it to an equivalent amount in another currency. In our case, we will focus on converting between Nigerian Naira and US Dollars. Although the real-world currency conversion involves multiple currencies, for this exercise, we will limit it to these two currencies.
Designing a Mobile View of a Currency Converter
To start the currency converter design, we first need to create a frame that represents the mobile screen. In this case, we will use an iPhone 30 Pro Max frame. Next, we will rename the frame as "Currency Converter" to provide a clear indication of the app's purpose.
Choosing Colors for the App
Color selection is an important aspect of any design. For the currency converter app, we will use shades of blue to give it a modern and professional look. By choosing the right color palette, we can create an interface that enhances user experience and adds visual appeal to the application.
Creating Input Fields for Amounts
To facilitate currency conversion, we need to include input fields where users can enter the amount they want to convert. It's essential to create a layout grid that guides the placement of objects on the screen. By setting up a column layout with appropriate margins and gutters, we can ensure consistency and alignment in our design.
Setting up a Layout Grid
Implementing a layout grid helps maintain consistency and organization in our design. We will create a six-column grid with a margin and gutter of 16 pixels. This grid will help us position various design elements, such as input fields and buttons, accurately on the screen.
Designing Currency Selection Dropdowns
To allow users to select currencies, we will incorporate dropdown menus. These dropdowns will display the flags of the respective countries to provide a visual representation of the currency selection. By using appropriate icons and designing the dropdown interface effectively, we can create an intuitive user experience.
Adding Flags and Icons for Currency Selection
To enhance the currency selection dropdowns, we will use flag icons representing the countries' currencies. By leveraging icon libraries and plugins, we can find suitable flag icons for Nigeria and the United States. Incorporating these icons into our design will make the app more visually appealing and intuitive.
Displaying Currency Conversion Results
After users enter the amount and select the currencies they want to convert, we need to display the conversion results. We will provide a clear visual representation of the converted amount, along with the correct currency symbols. This way, users can easily understand the equivalent amount in the desired currency.
Designing the Purchase Button
To finalize the currency conversion process, we need to include a purchase button. This button will trigger the conversion and display the result to the user. By designing the button with appropriate text, size, and color, we can ensure it stands out and encourages user interaction.
Showing the Result of the Conversion
To demonstrate the success of the currency conversion, we will show the converted amount on the screen. We will design a section that displays the result and include a label to indicate the currency type (USD in this case). By using appropriate typography and color, we can make the result section visually appealing and easy to understand.
Creating a Navigation Bar
Every mobile app needs a navigation bar for easy access to different sections of the application. We will design a bottom navigation bar that includes links for Home, Accounts, Convert, Profile, and Menu. By using appropriate icons and assigning clear labels, users can effortlessly navigate through the app.
Designing Icons for Navigation Links
To enhance the visual appeal of the navigation bar, we will design icons for each link. These icons should represent the corresponding section and provide visual cues to users. By following best practices for icon design, we can create recognizable, visually appealing icons that improve the overall user experience.
Finalizing the Design
In the final stages of the design process, we will refine the layout, adjust color contrasts, and ensure consistency in font choices. We will also make any necessary adjustments to improve the overall usability and aesthetics of the currency converter app. By paying attention to details and implementing thorough testing, we can create a polished and user-friendly design.
Conclusion
Designing a currency converter app requires careful consideration of various design elements, from colors and layout grids to input fields and icons. By following the steps outlined in this article, you can create a visually appealing and intuitive interface for a mobile currency converter app. Remember to incorporate user feedback and conduct thorough testing to ensure a satisfying user experience.
