Collaborative Design Practice // Task 3

 
04/10 - 03/10/23 Week 7 - Week 9
Chan Siew Ni #0352518
Bachelor of Design in Creative Media
Collaborative Design Practice // Ms Tai Li Lian

INSTRUCTION

<iframe src="https://drive.google.com/file/d/14ZzjhQAfT0vlOERfaC8kDBZqqCe0yhnm/preview" width="640" height="480" allow="autoplay"></iframe>



PROCESS

B&W Final Wireframe 
Before we start designing the pages, we first decide which pages as our final wireframe and also distribute the work to each of us. 
Figure 1: About Us page wireframe

Figure 1.1: FAQ page wireframe

Figure 1.2: Home Page wireframe

Figure 1.3: Product page wireframe

Figure 1.4: Product details page wireframe

Figure 1.5: Sign-in page wireframe


Week 7
This week, after we had decided on our final wireframe layout, we started to design our website prototypes. I am in charge of doing the Home Page and FAQ page. 

Figure 2: Work Progress on designing website prototypes

Figure 2.1: Work Progress on designing website prototypes

Figure 2.2: Work Progress on designing website prototypes

Figure 2.3: Work Progress on designing website prototypes

Week 8
During the independent learning week, we then show them our first attempts at website prototypes

First Attempts 
Figure 3: two attempts on Home page 

Figure 3.1: Attempt on FAQ page 

Figure 3.2: Three Attempts on the Product and Shop Page    

Figure 3.3: Few Attempts on the About Us Page 

Then, our clients had chosen among the attempts and we made some amend according to their comments. 

Week 9:
For this week, we started to make minor animations like hovering or clicking buttons. For my part, I made an expand and collapse FAQ so that people can expand the question and collapse to close it.

Figure 4: Work progress on animating the FAQ Page


Figure 4.1: work progress on animating button




FEEDBACK

Week 7:
Ms Lilian said that we should quickly ask our client about the requirement on the packaging and also the information that we need when doing the website so that while we doing it would be easier and quicker. 

Week 9: 
Ms Lilian asked us to change the text-align justified to another alignment like left or right as she said that the spacing between word and word will make the viewer feel hard to read the text. Then, for my home pages, the first part text and image should separate instead of overlapping. She likes our overall design and our typeface use. She also asked us to compile everything and put it in Miro and Google Drive. Next week is going to be our final task 3 presentation. She asked us to prepare and present it to all our classmates. 


NEXT COURSE OF ACTION
Week 7: Choose the final wireframe and start to design the prototypes

Week 8: Completing the prototypes and making some attempts for our client to choose. Refind and amend based on their feedback.

Week 9: Refine and compile work progress in the blog. Upload all files into drive and Miro. Prepare presentation slides for presentation on week 10




SUBMISSION 

Google Drive Link
Miro Board Link
Figma Prototype Link

Presentation Slides
<iframe src="https://drive.google.com/file/d/1QHxNTqAE24JDiXjXEXspG4U_F11jsrct/preview" width="640" height="480" allow="autoplay"></iframe>





REFLECTIONS

Experience 
It's finally ended! I felt so glad that I had all my groupmates who worked together and helped each other out. I learned a lot in this module. This is the first time I worked with other coursemates, and I realised that we see things in different aspects can affect how we do things. 

Observation
I have observed that three of the groups are doing well, and they both have mascots I think it's very cute and represents the brand well. Then, I also observed that design shouldn't use the justify text because the space between words could make people find it hard to read. 

Findings
I found that this module overall is fine, but maybe we got messy information in the beginning which made us feel confused and messed up our plans. But as mentioned before, communication is very important to keep us on the right track. We sent our decisions and each steps of prototypes to our client so that we could get their feedback and we were on the same track. 
























Comments

Popular Posts