APPLICATION DESIGN 2 // PROJECT 1-3
29.8.2023 - 4.12.2023 (Week 1 - Week 14)
Ang Shin Er / 0355231
Bachelor Of Design (Hons) In Creative Media / Taylor's University
Application Design // Project 1-3
INSTRUCTIONS
|Task 1: Self-Evaluation & Reflection
We were required to share a post on our blog about self-evaluation and reflection on the app design that we did in Application design 1.
Here is my high-fidelity prototype from App Design 1:
The flow of my apps
The changes I have made:
| Payment Method
There are too many different thickness of the font that have been used, I changed to only 3 different thickness of the font: Regular, Meduim and Bold. Previously, the "Pay Now" box for displaying the entire amount of money was too near to the margin.
Old
New
| Service page
I added the "reviews" to each service page and rearranged parts of the layout. Because the set price listed there is unreasonable, I switched it to a booking deposit so that users can deal directly with the company. The "label" section has been deleted. I've placed the "rating" at the top so that users can view it immediately.
old
New
New (In detail)
| Booking Confirmation
I've added a booking confirmation pop-up window.
New
Here is my new flow:
| HIFI Prototype in Adobe XD (New) : https://xd.adobe.com/view/ee349813-bec3-488f-9f75-fccd624961b2-bb67/
|Task 2: Micro-interactions and Micro interaction Prototype
We were required to develop a prototype based on the redesigned design from Task 1 and plan a complete interactive animation for integration into the app at Figma Jam or MIRO.
I start by importing all the pages intended for the animation into Figma Jam. Next, I establish connections between each page using arrow lines with some explanations of the elements to be animated on the respective pages.
Providing some explanation for each page that shares the same transition
Some micro-animation that happens on some specific elements.(red sticky note)
Here is my outcome :
-
| Task 3: Final Completed Apps
In this task, it will bring together everything that had learned from previous tasks. The goal is to take the prototype and turn it into a fully functional app. I first saved all the pictures and symbols I made in Adobe XD from my last semester. Then, in Adobe Dreamweaver, I made a special folder for the files that hold the style and structure of my website. After that, I began creating the look and layout of my webpage using HTML and CSS. Here's what I've completed so far.
The font I have use:
Once I completed the HTML and CSS, I began implementing JavaScript, leveraging GSAP for animation purposes:
:: defaults to open in Visual Studio Code.
We learned the basics of HTML and CSS, and we improved our design from the previous semester by doing several practices in class. We also learned the fundamentals of JavaScript and gained a general idea of what it is. I did an additional study and made the app seem greater based on Mr Razif's suggested changes, and is far improved than before.
|Task 2:
This task was more challenging than it was. Making a prototype and planning animations taught me a lot about design and how people use things. It made me think in new ways, solve problems better, and showed me that good design is more than just making things look nice.
|Task 3:
In this task, using GSAP in Adobe Dreamweaver was a bit tricky at first. I struggled to figure out how to begin and got stuck with type errors while coding. It was tough not knowing where to start and facing those frustrating errors repeatedly. But with practice and some help from online resources and friends, I finally learned how to get things going and fix those pesky type errors. While I'm not completely satisfied with my final result, I did learn something new along the way. I think I can improve next time. Being new to HTML and CSS, this was tough, but overcoming the challenges made learning more rewarding for me.
_
Comments
Post a Comment