Application Design 1 - Final Project
xx.xx.2024 - xx.xx.2024 / Week 8 - Week 14
IAN CHOO XIN ZHE / 0369451
Application Design 1 / Bachelor of Design (Honours) in Creative Media
MIB
In this step, we were required to move from the low-fidelity wireframe stage to the high-fidelity stage. This is where the design becomes colorful and comes to life, transitioning from the grayscale phase to a more polished and visually appealing version.
For the UI toolkit, I approached it differently than initially planned. While we were supposed to create it during the low-fidelity (lo-fi) stage, I felt it made more sense to work on it after completing the lo-fi wireframes and applying colors to the high-fidelity (hi-fi) version. This allowed me to have a clearer vision of the overall design.
For the color palette, I began by experimenting with Steam's official brand colors. However, these colors felt too moody and lacked the vibrancy needed to make the interface visually engaging. To address this, I tweaked the brightness and vibrance of the brand colors while staying true to Steam’s identity. Additionally, I opted for a slightly darker shade of white instead of pure white to minimize potential eye strain.
For typography, I selected General Sans. Its modern, legible, and clean characteristics align perfectly with my goal of creating a more polished and user-friendly version of Steam's interface.
When it came to icons, I decided on a simple, minimalistic outline style. This choice was driven by the need to maintain a clean and neat aesthetic throughout the app.
Finally, for the buttons, I drew inspiration from Behance and developed several variations for different functions. Each button was carefully designed to ensure clarity and ease of use, while still maintaining a cohesive visual style with the rest of the app.
Once my UI toolkit was ready, I began the next phase of applying the base colors to the pages I had designed. This step was crucial to setting the tone and establishing a cohesive visual style for the app. After applying the base colors, I shifted my focus to the finer details, such as integrating pictures, graphics, and designing buttons to complement the overall aesthetic.
|
| Fig 1.1 Work In Progress |
I started with the game description page, as I considered it the primary feature of the app. Once that was polished, I completed the high-fidelity (hi-fi) design for the purchasing game flow, ensuring that the user experience was seamless and visually engaging.
|
|
|
|
|
|
|
|
|
|
|
|
Working on the high-fidelity stage of the app redesign was incredibly enjoyable and rewarding. It was exciting to see the transformation from a colorless wireframe into a fully developed, realistic app. This step brought my ideas to life, making all the effort worthwhile. However, I do regret not managing my time better during this project. If I had planned my schedule more effectively, I might have been able to include additional features beyond the three main flows, making my app even more robust and comprehensive. This realization has motivated me to focus on improving my time management for future projects to avoid similar regrets.
Overall, this module has been a tiring yet fascinating journey. It challenged me to think creatively, learn new tools like Figma, and embrace a more structured design process. I want to take a moment to express my gratitude to Mr. Zeon for his guidance and dedication throughout this module. His ability to communicate effectively and support students made a significant difference, and I sincerely hope to have the opportunity to work with him again in future courses. This experience has sparked a deeper interest in UI/UX design, and I am eager to continue improving my skills in this field.
Comments
Post a Comment