Figma | HTML | CSS
This calculator app is a completely solo project, fueled by my own curiosity regarding app development. I am completing the research, design, coding, testing, and future publishing.
I aim to gain a solid understanding of the entire process of creating a product. I have already completed the initial design and development, and am excited to reach my final goal of app store deployment.
1
Planning the creation of a simple and effective design.
2
Using Canva and Figma for mockups and screen flows.
3
Coding a functional prototype for further development.
I laid the ground work with a color palette and some initial design references to spark inspiration. Playing with color combinations and font choices is an early part of my design process and lays the ground work for an accessible product.
I designed all the screens in Figma that I would need to have a complete product, and created some user flows to understand how the interface would change during user interaction.
This design served as a guide for the following front-end development. All the particulars from the size of the margins to what each button does was all thought out during this step.
I have learned from past projects that the more you plan before you start coding, the more success you will have. I worked to plan for success early on in this case.
With this in mind, I created mockups to lay out how I wanted to use grid and flexbox properties for the best layout. Nailing this early on is key to responsive design, and trying to back-track later on becomes a nightmare!
I have worked through the front end development of this project and am currently working on the JavaScript files. It's a work in progress, but the process is giving me the skills to showcase a fully fleshed-out prototype, and eventually to have a final product to share.
This experience developed my Figma, Canva, HTML, CSS, and JavaScript skills all in one project. Please feel free to check out my Figma prototype, which walks through a simple user flow.
My goal is to publish this app on the App Store and Google Play. Once I finish the JavaScript for the calculator, I’ll be moving into app development using React Native, which builds on the JavaScript foundation I’ve been working with.
This project represents my commitment to understanding the entire product lifecycle, from concept to launch, and I'm really excited to see where it takes me. It has already taught me so many new concepts and skills that I will take with me to future projects.
