Collaborative Design Practice // Task 3
04/10 - 03/10/23 Week 7 - Week 9
Chan Siew Ni #0352518
Bachelor of Design in Creative Media
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
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.
.png)


















Comments
Post a Comment