.jpeg){kind=small}
24/04/2024 - 26/05/2024 / Week 1 - Week 5
Reema Arif Hamza / 0362792
Advanced
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's
University
Task 1: Thematic Interactive Website Proposal
Content
Week 1: Assignment briefing, looking at interactive websites.
Week 2: Cancelled due to public holiday.
Week 3: Learning Adobe Animation.
Week 4: Learning Adobe Animation.
Week 5: Canceled due to public holiday.
Instructions
Task 1: Thematic Interactive Website Proposal
Students are required to create a thematic interactive website proposal with the topic of their choice. Completed UI/UX proposal document. All processes (concept, wireframes, mood board, flow chart) have to be documented and posted in your E-portfolio as your reflective studies.
Process
I began by brainstorming possible topics for the interactive website. I
narrowed it down to 2 options.
- Zebra Mildliners (highlighters) - A bright colorful website showcasing the highlighters
- Matcha (the drink) - An interactive step-by-step website about matcha + a themed character designer game.
When I asked people which topic would be fun to interact with they
picked 'Matcha'. I personally really like Matcha, so it would be fun to
create a website about it. The main interactive elements I thought of
were: animations, hover effects, character-maker game.
After researching different interactive websites, this particular one
really caught my eye. I enjoyed interacting with different elements and
felt the design was fun.
Fig. 1.1 Montreal Reference Website, Week 3 (08/05/2024)
At first, I wanted each page to explore the history, growing process, and
benefits of matcha. After deeper thought, I realized it would be difficult
to animate so much, especially when we're still learning how to use Adobe
Animate.
Thus, I focused on the step-by-step process of making a cup of matcha.
However, I'll still include additional info (facts) on each page. I
started breaking down by site into a flowchart. After receiving feedback
in Week 4, I used my reference website as a foundation for my own
flowchart.
Fig. 1.2 Flowchart (draft), Week 4 (15/05/2024)
Fig. 1.3 Reference Website Flowchart, Week 4 (17/05/2024)
.jpg)
Afterward, I roughly sketched how I wanted my wireframes to look like. I
further refined it when making the wireframes on Figma.
Fig. 1.5 Wireframes rough sketches, Week 5 (20/05/2024)
I compiled all my processes: topic, mood board, concept, flowchart, and
wireframes onto the slides below.
Final Proposal
Thematic Interactive Website Proposal
by REEMA ARIF HAMZA
Feedback
Week 4: Your concept based on your mood board is a flat illustration
style. Look at the website you're referencing and make a flowchart
for it. Then use that as a reference for your own website.
Week 6: Add a navigation method and a sound button. Make sure your concept images are cohesive.
Reflection
Experience
It was fun to think about all the different interactive elements you could
include to create an interactive experience for users. It helped that I chose
Matcha as a topic because I could place myself on the other side and think
about what would I want in a site all about matcha.
Observation
When I was looking through all the interactive websites on the FWA. I saved
the ones that really caught my eye. After observing them, the elements that I
enjoyed interacting with were the games and animations. I personally
like character maker games Picrew, so I thought it would be fun to include it
on my own website. I looked at YouTube to see if it was a feasible idea, there
were tutorials using scratch. On scratch, I could remix existing designs and
personalize them.
Finding.
Analyzing existing websites served as a good foundation for my own website. By
dissecting them I could add the aspects I liked into my website. Sketching
onto paper helped form multiple iterations of how I wanted my website to flow.
I changed a lot of things before finally settling on my current wireframes in
the proposal presentation.
Comments
Post a Comment