PrismaticPay is a JavaScript-based bank app that I created to showcase my skills in JavaScript, HTML, and SCSS. The app is designed to provide a simple and user-friendly way for users to manage their finances, including checking their account balance, viewing transaction history, and requesting a loan. The app also allows users to delete their account if they wish to do so.
I started by defining the purpose and functionality of the app, and then created a flowchart to help visualize the user flow and interactions. This helped me ensure that the app would meet the needs of its users and achieve its intended goals.
Color Palette Next, I focused on the visual design of the app. I chose a color scheme that was both aesthetically pleasing and appropriate for the app's purpose. I selected colors that complemented each other and conveyed the right tone and mood, such as a bright, modern palette for my banking app.Thus, I decided on the following colors:insert colors.
Font I also chose a font that was readable, easy on the eyes, and consistent with the app's brand identity. I looked for a font that was both functional and visually appealing, and that conveyed the right tone and personality for the app. The font I decided on was: ‘OpenSans’.
For the layout of the app, I looked for inspiration from other successful apps and websites, and then adapted those designs to suit the specific needs and requirements of my app. I considered factors such as ease of use, clarity of information, and visual appeal when creating the layout.
I also created a custom logo and a hero image to enhance the visual appeal and user experience of the app. I used tools like Adobe Illustrator or Procreate to create high-quality, professional-looking graphics and images.
For styling I decided on using SASS, with the VSCode Plug-in Live Sass Compiler for ease of use. I prefer using Sass over normal CSS for the following reasons:
Modularity: Sass allows you to break your CSS code into smaller, more manageable modules using features like variables, mixins, and nesting. This can make it easier to write and maintain your CSS code, especially for larger projects.
Reusability: Sass's modular approach can also make it easier to reuse code across different parts of your project, by defining variables and mixins that can be used in multiple places.
Simplified syntax: Sass uses a simplified syntax with features like nesting and shorthand notation, which can make your CSS code more concise and easier to read.
Extensibility: Sass provides a number of additional features and functions that are not available in regular CSS, such as math operations, conditional statements, and loops. This can make it easier to write more complex styles and achieve specific design goals.
Compatibility: Sass is compatible with regular CSS, which means that you can use Sass features in your CSS code even if some parts of your project still use regular CSS. This can make it easier to gradually transition to using Sass without needing to rewrite all of your existing styles.