APPLICATION DESIGN - TASK 2: LO-FIDELITY APP DEVELOPMENT
Application Design 2
Task 2
Hybrid Lo-Fidelity Mobile App Development
Exercises
Task 1: Self-Evaluation and Reflection
Task 2: Hybrid Lo-Fidelity Mobile App Development
Task 3: Micro Interactions and Animated Micro Interaction Prototype
INSTRUCTION
UPDATED VERSION:
During my process of making the second task, I realized that there were many flaws in my old design. Therefore, I decided to make a few changes again. I was not sure whether the design changes that I did was part of task 1 or task 2, but I will just put the process in both blogs anyways.
Firstly, I realized that the notes feature wasn't looking very much appealing. I decided to go look for more references and found a few that I think look pretty interesting. I tried to apply it to my design and this is what the notes feature looks like:
in the old design, I didn't show the layout when there are few notes. This time I showcased how the layout will look with multiple notes inside with multiple variants as well. In the previous design, the color was solid. In this design, I made the color fade into white or gradient. This way it compliments the whole look and theme better.
The inconsistent stacking notes also show variety within the page and I believe it makes it look more interesting. In the previous design, the picture was placed inside with a huge border. I realized that it makes the design look messy so I changed it to borderless.
Since I did not get to design the other feature, I decided to design them as well. Next, I made the habit page:
So how it works is that when you click the plus button, it will lead you to the third page. If you click on the bar indicator, the dates will be highlighted in the calendar. If you click on the arrow button in the corner right, it will lead you to the details (page 4).
On the detail page, you will be able to see the percentage of you completing the habits, reminder, and also the pause button.
Next is the expense tracker page:
In the expense tracker, there are 2 versions. You may see your daily bill and also the statistic per month. The first and second pages are the ones you will see on the statistics layout. The third page is something you will see in your daily bill layout.
For the Statistic, once you click on the "set target", it will lead you to the fourth page where you can set your income and expense target.
When you are on your daily bill page, you may click the plus button and it will lead you to the 5th and 6th pages where you can determine your categories of income and expense.
Next is the diary:
For the diary, I decided to put the calendar weekly so the notes wouldn't be too cramped and the user doesn't need to scroll for too much after putting lots of notes. If you click on the plus button, the 3rd page will appear. On the editing page, you may choose your mood, things you've been up to, time, and also the diary you want to write.
After you've completed and pressed save, the layout will look like the 2nd and 6th page.
I also decided to add another color palette to make a comparison.
So here is my old color palette:
Here are the designs with both color palettes
I tried to ask the people that I know and most of them preferred the first one. They all said that the second one has a more vibrant color and they think it looks good, but they just prefer the first one because the color is more muted and it's easier to view.
So here is the end result:
Here is the Figma file:
After finishing the design, I decided to focus on the animation in Figma. I tried to make the splash screen interesting and this is how I made it:
After I made the splash screen, I made the onboarding page. This is how I made the animation:
These are the only animations that I think are pretty interesting. The rest are just mostly swiped left and right since I don't want the user to be too confused because of the animation. This is how you make the task in 2x speed:
This is what the animation looks like when you switch between pages:
After I finished the animation, I proceed with the presentation. Here is my Figjam:
REFLECTION
Honestly, I think this is one of the activities that I enjoy the most during this semester. Designing the page, and making the animation look appealing, I just wish I could work on this every time. I also learned how to do more complicated animation in Figma during this task. Before this, I had no idea how to use components and group components properly. Even though it took time for me to get the hang of it, I still pretty much enjoyed the process.
I also realized during the designing part, that not everyone prefers vibrant colors. At first, I thought the vibrant color was the best since it is easier to spot. However, to my surprise, most people prefer mute color because they said it looks more relaxing in the eyes.
1.jpeg)
Comments
Post a Comment