Project Details
Title: Code Fizz Credit Card Payment Page
Client: Code Fizz (Conceptual)
Tools: Adobe InDesign, CodePen, HTML, CSS, JavaScript, SCSS, CSS Flexbox
Objective / Brief
Create a user interface design to allow a user to enter their credit card payment information. The overall design will be clean and minimalist, incorporating colorful and modern components that match the aesthetic of any other Code Fizz pages, such as the Code Fizz Sign Up page created for Day 1 of the Daily UI challenge. The design must also match the overall Code Fizz brand guidelines, including the colors, fonts, and brand elements.
Designer Notes
I used the previous Daily UI challenge as a template to create the new design in Adobe InDesign. This allowed me to retain the original fonts, colors, and branding elements from my first design. Eventually, I will likely transition to Adobe XD, especially once I want to start creating an overview of the entire application. But for now, I am happy with the simplicity that InDesign provides.
Responsive Design
The idea behind the credit card payment design is that it is the same no matter what platform is used (desktop, tablet, or mobile). As such, I chose a vertical, mostly-centered layout that can be used for any screen size or orientation.
Next Steps
Using the user interface design, I will create a functional and responsive front-end website using HTML, CSS, and JavaScript, in order to capture sample data and provide the guideline for a more secure design for future use. Some changes may be made during this process, but the overall design concept and aesthetic should remain the same.
