.jpg)
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / ADVANCED TYPOGRAPHY
Final Project: Completed Mobile Application Design Prototype
JUMPLINK
Instructions
Final Project: Completed Mobile Application Design Prototype
Feedback
Reflections
The final project involves transforming the refined low-fidelity prototype into a high-fidelity version, integrating visual assets to complete a mobile application for the three selected scenarios.
Progress
For the high-fidelity prototype, I experimented with different color combinations to enhance readability while avoiding a monotonous color scheme. However, despite trying various combinations, the results did not meet my expectations. Some combinations appeared boring, while others lacked readability.
 |
| Figure 1.1 Attempts. |
So, I spent more time searching for visual references on Pinterest, Behance, and Dribbble. I looked for mobile applications that use orange as the main color in their palettes. By studying existing mobile app designs, I observed the techniques and strategies they used to apply colors to different elements. I also reviewed the current MyUMobile app design to understand how it highlights important information while maintaining vibrant colors. However, I aimed to create a unique design that differed from the current application, bringing out a distinct feel and showcasing my originality.
After getting inspiration from the visual references, I decided to make small changes to the UI kits and color palette. The color palette chosen during the low-fidelity phase included brighter colors, which made the layout design and text hard to read. To address this, I replaced one of the light orange shades with dark brown. The new palette now combines brown, orange, and white, offering a balanced mix of dark, bright, and light colors, making it easier to integrate into the application design.
Figure 1.7, 1.8 Color.
After that, I began by creating the high-fidelity prototype for the home page to examine if the new color palette was suitable and met my expectations. I also included images for the special offer section. I used the primary color, orange, for important information or icons such as the balance icon for both credit and data, arrow icons, and certain buttons. Additionally, I replaced the previous illustrations with new ones that incorporated the primary and secondary colors to ensure consistency with the overall style of the app.
 |
| Figure 1.9 Home Page. |
After creating the high-fidelity home page and being satisfied with the results, I proceeded to design the rest of the pages using the same techniques to apply color to every element. This approach ensured consistency and maintained the overall style throughout the application.
Figure 1.10, 1.11 Progress screenshot.
Final High-Fidelity Prototype
Link to Prototype
Link to Figma File
Figure 2.1 Final high-fidelity prototype.
Week 14
Consider trying a different color selection for better visibility.
REFLECTIONS
Experience
Working on the high-fidelity prototype was a rewarding yet challenging experience. The process involved experimenting with various color combinations to enhance readability and visual appeal. Adjusting the color palette while ensuring it remained true to the brand's identity required careful consideration. Applying the chosen color scheme consistently across all pages demanded meticulous attention to detail.
Observation
I observed that color selection must be handled with care. Although my initial color palette was vibrant individually, the combination proved to be less readable. The challenge lies in creating a harmonious color scheme. Visual references are invaluable as they provide inspiration and aid in making better design decisions.
Findings
I found that most designs avoid using only vibrant colors for the entire app. Instead, they combine vibrant colors with some neutral tones to create a more engaging and balanced look. Additionally, using a single color series throughout the design can make the interface appear tacky. Mixing colors from different series helps in achieving a more visually appealing and cohesive design.
Comments
Post a Comment