Application Design - Final Project: High Fidelity App Design Prototype
2/12/2024 - 7/1/2025 / Week 11 - Week 14
Cindy Clarissa Leslie / 0367677
Application Design / Bachelor of Design (Hons) in Creative Media
Final Project: High Fidelity App Design Prototype
Application Design / Bachelor of Design (Hons) in Creative Media
Final Project: High Fidelity App Design Prototype
LECTURES
INSTRUCTIONS
Project 3: Lo-Fi App Design Prototype
Design process
Figure 1.1 Deciding on the final colour scheme
At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a subtle way.
I referenced TikTok for the colour scheme since the brand also has 3 colours overall in the logo, I noticed that they focus on one of the colours instead and only used the blue parts as some of the accents which I followed suit.
Figure 1.2 Changing post background.
I also decided upon setting the post background from being white to black to further follow the 60 30 10 rule, I figured that the design looked neater this way and I can consistently set the text as white.
Figure 1.3 Figuring shades and gradients
Since the home button will be prominent, I had a lot of different ideas in making it stand out. I wanted to implement gradient into it and this will be deciding on if I wanted darker shades for my colour scheme or lighter. I eventually went with the radial gradient with the dark shade.
Figure 1.4 Drop Shadows
I also implemented drop shadows in my design, where I mostly used them onto buttons or elements that I want to emphasize.
Figure 1.5 Home page design
For the home page itself, I wanted to make it more interactive. I decided to get pictures that align with the blue colour scheme and created rotating screens that would loop infinitely.
Usability test
Figure 2.1 Final remarks on high fidelity
During this feedback session, I invited each of them in going through all the scenarios so that they can rate the app design in a whole manner. After receiving feedback, I figured the improvement that I could make is to reposition some elements slightly.
Final Project: High Fidelity App Design Prototype
Final UI Kit
Figure 3.1 Final UI Kit
Final Video Showcase
Figure 3.2 Final high-fi video showcase
Link to Figma File
Figure 3.3 Final high fidelity figma file
Link to Figma Prototype
Figure 3.4 Final high fidelity prototype
REFLECTION
Experience
This task was overall less complicated than all the other tasks since all I basically did was to insert relevant images and decide on a colour scheme to use, but I've never thought I'd struggle and be confused so much on deciding with the final colours. Flickr conveniently had blue and pink that was essential to the branding, if I chose both colours I knew the design would come out a bit tacky and I had to stick to one colour being the accent since I was designing a social media. Thankfully, by referencing real apps such as TikTok and asking others for feedback, I was able to come up with a design that I was satisfied with.
Observations
I've observed how putting in colours and content can create such a big change in experience already, it felt more like a real prototype and an actual developed app. Changing from low fi to high fi is a satisfying jump in a way. Though I didn't really change much of the features since the feedback it creates a brand new experience.
Findings
Going through all of the projects, I found that the designing process of UI takes a lot of different process to make sure that it is effective as possible. I definitely learned the importance of having empathy and being able to understand the needs of users.
Comments
Post a Comment