Advanced Interactive Design / Interaction Design Planning and Prototype
21/10/2024 - 11/11/2025 (Week 5 - Week 8)
Nadia Chong Wen | 0355736 /
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design -
Task 2 / Interaction Design Planning and Prototype;
Table of Contents
Instructions
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 can build their animation or user-reference animation to demonstrate the intended idea.
Task 2 / Interaction Design Planning and Prototype
I started working on the prototype after getting my ideas approved by Mr. Shamsul.
I was inspired by the example that he gave and took some inspiration from how he did it. I wanted to have a sketchy feel for the website but I found the use of Adobe Illustrator difficult. So, I decided to use Clip Studio Paint instead for the elements of the prototype.
|
| Figure 1.1 Home Page of Prototype |
I used the same size of the canvas for the illustrations to ensure it would not be too pixelated. I then decided to build up from the initial sketches of the characters I planned to use for the prototype.
|
| Figure 1.2 Initial Sketches of characters |
Figma Board
Components
|
| Figure 1.3 Components |
Most of the components within the Figma Prototype are hand-drawn by me. Some are made using Figma but most of the components are hand-drawn in CSP.
|
|
Figure 1.4 Pen Used |
The reason I chose this pen was due to its sketchy feeling that I felt would go well with the soft tone of the website. The characters will be easier to look at and cuter. There was the issue of the fear that maybe the drawings may get pixelated, but I found the solution that it was possible to avoid it if the drawing remains high quality and pixelated itself.
|
| Figure 1.5 Animation |
Animation is a simple sketchy loop that was inspired by a music video by Kenshi Yonezu called Eine Kleine.
|
| Figure 1.6 Eine Kleine by Kenshi Yonezu |
Prototype
|
| Figure 1.7 Main Page Flow |
The introductory pages start out with a cat sleeping. If you tap on the cat, there will be an animation of the cat waking itself up from the sudden touch. I decided to go along with the use of normal pictures for when I can't convey the feeling of the cat.
|
| Figure 1.8 Care Pages Flow |
|
| Figure 1.9 Breeds / Love Pages |
Comments
Post a Comment