Task 2: prototype
29/05/2024 - 26/05/2024 / Week 6 - Week 9
DAVIES ANNIKA ANGELA /
0362108
Advanced Interactive Design / Bachelor of Design (Hons) in
Creative Media / Taylor's University
Task 2: Interaction Design Planning
and Prototype
Content
- Lecture
- Instructions
- Task 2: Interaction design planning and prototype
- Feedback
- Reflection
Lectures
Week 6: Lecture on Text Masking
Week 7: Lecture on Buttons and Actions
Week 8: Independent Learning Week
Week 9: Lecture on New Page, Hover Effect, and Actions.
Instructions
Task 2: Prototype design
Students are required to work on their visual design and start planning
their website’s interactive design elements and features. Unlike traditional
static website, when it comes to interactive design where animations are
present, the plan not only should include the layout visuals but also the
animation example or reference. Students are can build their animation or
user reference animation to demonstrate the intended idea.
Process
I had intially wanted to do Shrek as I said in my previous post but I am now
working on a Phineas and Ferb website where it will basically be showcasing
the characters as well as songs from Phineas and Ferb.
I began my process by gathering images of characters in Phineas and ferb and
getting information of each Chacacter fron fan websites such as https://phineasandferb.fandom.com/wiki/Phineas_and_Ferb_Wiki. I wanted the website to be simple and not to overload the users with too
much information so I made short character bios as well including a famous
quote from each character
I found it difficult to find vector images of each character so for some of
the characters I would look for colouring book charcters then image trace and
use the live pain bucket tool and eye dropper tool to fill in the colours.
Fig 1.1 process of me image tracing and filling out characters
For some on the Icons I used simple illustrations from Phineas and Ferb.
For the buttons I thought it would be a cool idea to use Phineas' head as an
arrow key as it is triangular on nature
I also had my navigation bar at the bottom left for when users want to go to
another section of the page as seen below.
Figure 1.2 Phineas head as arrow keys
Figure 1.3 Navigation Bar
After gathering all my assets I went to figma and started my prototype to
showcase the animations I would like to put in my website.
Figma showcase of different animations for website
Figma Link:
https://www.figma.com/proto/PJhRh5vn4OjfFzmMgLkBtA/phineas-and-ferb?node-id=0-1&t=91ipx2xchnS23QPT-1
User flow chart
Walk through video
REFLECTION
Experience
This was a very stressful experience and I found it difficult to get everything done in a short period of time as I changed my topic last minute so I had to rush through everything the best I could. Though I rushed through everything I actually enjoyed doing the prototype design and found the task to be fun and seeing the animations play out was a satisfying experience for me.
Observations
I observed the importance of doing research in order to gain inspiration for the website and I also noticed that I gained more ideas by watching the show back. I observed I enjoyed doing the Phineas and Ferb website more than I enjoyed doing the shrek website even though I am a lover of both shows I found for the level that I am at right now I preferred doing a 2D website for Phineas and Ferb than the initial Shrek Idea.
Findings
I found that in this field of UI/UX design I have to watch a lot of tutorial videos in order to get my desired outcome I also noticed that with this module a lot of trial and error is needed when seeing what animations works best.
Comments
Post a Comment