A recored /compliation to all assignment in this modual
Slide provided by lecture
This week, we are not having any physical or online classes, so we are preparing and finalizing our final assignment in-house as a group. The assignment includes recording a video, finalizing the app, and completing the e-portfolio.
This week, we had a consultation with Mr. Yusri and finally made some progress on the doctor's part! For the color scheme, we decided to make some changes. After researching several different options, we chose a lighter, more pastel palette to make the space feel livelier and less dull. Additionally, I was responsible for the application slide, so I needed to explain why we chose these colors and ensure the user flow was accurately documented. However,Mr. Yusri provided feedback on our latest color choice, indicating that it is better for now.
Figure 13.1 Original version
Figure 13.2 First version after changing
Figure 13.3 Second Version After Changing the Colour (Changing to Pastel Colour) - Final Colour We Decided to Use
This week, we are almost done with our application. We had a consultation with Mr. Yusri, and he provided us with some valuable feedback. He mentioned that the color scheme is not so suitable for the app and suggested that we make it brighter and adjust the tones. Additionally, he advised us to adjust the layout of the buttons on the homepage.
During this meeting, we realized that we do not have a clear target audience, so we will need to identify one. However, other than changes involves adjusting the color and layout. Mr. Yusri also suggested us to add a section for doctors, which they can use. After the meeting, Naura and I were unsure how to proceed with the application as we was stuck on it . We decided that wewould start working on the user flow and combine our ideas for the doctor interface part first and see what can we do for it . Meanwhile, we are still working on the modeling for the space.
In today’s class, Mr. Yusri showed us how to create a prototype using Figma and gave us some tips for creating an interface. After his explanation, he wanted to see our wireframe prototype by 4:30 PM. While creating the wireframe, Naura and I realized that we were missing some pages and ideas, so we redrew the user flow to make it simpler. Once we finalized the new user flow, I created the prototype. Although we encountered some technical issues when showing it to Mr. Yusri, he provided us with feedback on the wireframe and mentioned that the logo color was too dull.
We are planning to make some slight changes based on his feedback. At this stage, we are almost done with the wireframe and will soon add the color and logo. Next week, we are scheduled to present what we have so far in front of the class.
Figure 9.1 and 9.2 Sketch on getting the user interface and flow clear
This week we have an online meeting, and we decided to finish the wireframe first. We have divided the tasks among everyone and planned out the timeline for ourselves.
Figure 8.1 and 8.2 application progress
In this class, Mr. Yusri taught us the basics of using Flutter Flow and its benefits. He also introduced some design patterns that we can use while designing our application, highlighting the importance of planning, user flow, and wireframing. Overall, I gained new knowledge on creating an application and understood the importance of these elements.
Regarding the assignment, we showed progress on our wireframe, explained it, and received feedback. For example, we can include a QR code in the design. We continued working on the wireframe and selecting the color palette. Additionally, we revisited the user flow and user journey to clarify them further.
Figure 7.2 flutter flow outcome
Figure 7.1 figma progress
Figure 7.3 Figma Overview
In today's class, we started discussing what we wanted to do for the application for the physiology hospital. We began by brainstorming some ideas and identifying which ideas could be combined. We also started some rough sketching of the wireframe and almost finalized the functions we wanted to include in this application.
This week, we will begin designing the wireframes using Figma.
Figure 6.1 and 6.2
Wireframe Sketch
(Exploring and ideation process)
Trying to explore different layout and also considering what function we wanted to include
sketch 6.1
sketch 6.2
No class today
This week, we started our Application Design 2 class. Mr. Yusri began by briefing us on Assignment 1, which involves writing a report for Application 1 design reflection. He also discussed the importance of user interface design and its context. Additionally, he taught us how to use Figma, and we did an in-class exercise where we copied an interface. He shared many tips on using Figma effectively. However, the most interesting thing I learned in today's class was the different input methods for various designs. Regarding skills, I learned how to search for symbols in Figma and how to map a picture to change its color.
Figure 4.1 original
Figure 4.2 Class activity using figma to copy a user interface design