LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / ADVANCED INTERACTIVE DESIGN
Project 02: Interaction Design Planning and Prototype
JUMPLINK
Instructions
Project 02: Interaction Design Planning and Prototype
Feedback
Reflections
Project 02: Interaction Design Planning and Prototype
In this project, we are tasked with planning our website's
interactive design elements and features. We are required to
create wireframes or prototypes that can demonstrate and explain
the animations to be included in our website.
Progress
I plan to create a wireframe and include it
in my slides, and also create a prototype using Adobe XD to
demonstrate how my website and the animations will look in my
video presentation.
Before starting the wireframe, I decided
to use Adobe Illustrator to create some graphics required for my
website. In my previous project, Project 01, I sketched the layout
of my website and compiled a list of the animations required. This
provided a clear roadmap for creating the necessary
graphics.
Figure 1.1 - 1.6 Sketches.
Opting for a minimalist graphic style, I researched references to inform my design direction before creating my own assets.
Figure 1.7 - 1.10 References.
Starting with the loading page graphic, I imported my sketch into Adobe Illustrator and developed the assets accordingly.
Figure 1.11, 1.12, 1.13 Progress screenshot.
To streamline the process and avoid returning to Illustrator for animation after completing the wireframe, I chose to complete both tasks simultaneously in Illustrator. This ensures that all graphics and animations will be prepared in advance, allowing for easy integration into the wireframe and prototype stages.
|
| Figure 1.14 Progress screenshot. |
To create the graphics for animation, I divided them into frames. Within each frame, the graphics intended for animation undergo slight changes to achieve the desired effect. For instance, I may adjust the position and rotation of trees to create the illusion of movement, simulating trees swaying in the wind.
|
| Figure 1.15 Progress screenshot. |
In addition to adhering to the layout sketched in Project 01, I incorporated some new graphics into the design. While most pages feature a consistent park scene background for continuity, I recognized the need for a different background on the nutrition page. Using references for inspiration, I created a background that resembles a table with a frozen yogurt placed on it, surrounded by various items. This background was chosen to better complement the layout and arrangement of information specific to the nutrition page, ensuring a cohesive and visually appealing design throughout the website.
|
| Figure 1.16 Progress screenshot. |
To ensure that certain graphics, such as angled or curved objects, seamlessly integrate with the design, I utilized the 'Envelop Distort' feature. This allowed me to manipulate the logo of llaollao to fit the contours of the object, preventing it from appearing disjointed or floating awkwardly above the surface.
Figure 1.17, 1.18 Progress screenshot.
Due to time constraints, I wasn't able to create the assets for fruits and crunch. Additionally, since the effect and appearance of fruits and crunch would be similar to the sauces, I decided to postpone their creation for a later time.
|
| Figure 1.19 Progress screenshot. |
Once I finished creating all the necessary graphics in Adobe Illustrator, I proceeded to create the wireframe. The wireframe essentially replicates the layout of my initial sketch, but in a digital format, utilizing the assets I created in Illustrator. Using Adobe XD, I created the wireframe by importing all the assets previously created in Adobe Illustrator. I then began arranging them according to the layout design, ensuring that the structure and placement of elements aligned with my initial vision for the website.
Figure 2.1, 2.2 Progress screenshot.
Final Wireframe
Link to Wireframe:
https://xd.adobe.com/view/3528722b-9302-47bc-837c-dde24d972f2c-607b/
|
| Figure 2.3 Final wireframe. |
After completing the wireframe, I duplicated the file and began
creating my prototype. Initially, I considered creating animations
using Adobe After Effects and saving them as GIFs to import into
Adobe XD. However, when I attempted to import a GIF from online
sources, I encountered difficulties.
Realizing I lacked
knowledge of how to use Adobe XD to create animations, hover
effects, and other desired effects, I sought out video tutorials
online.
Figure 3.1, 3.2 Progress screenshot.
After placing the assets, I attempted to connect the frames of the loading page together to achieve the loop animation. By setting triggers for time and auto-animation, I was able to create the desired animation. However, I noticed that it wasn't as smooth as I had envisioned. Since this was just a demonstration to visualize the effect, I planned to refine it later for smoother transitions and overall improved animation quality.
Figure 3.3, 3.4 Progress screenshot.
After completing the loop animation, I began linking the buttons
to their corresponding pages. However, I noticed that the graphics
I created in Adobe Illustrator had a large area of transparent
background. This resulted in the clickable area of the buttons
being larger than desired.
To address this issue, I
attempted to crop the graphics to a smaller size within Adobe XD,
but couldn't find a crop option. After searching online, I learned
how to use shapes and masks to achieve the desired smaller size
for the graphics. By applying this technique, I successfully
reduced the clickable area of the buttons, resolving the issue.
Figure 3.5, 3.6 Progress screenshot.
As I approached the final stage, adding hover effects to some elements proved to be a bit challenging. Reading text tutorials on how to apply hover effects didn't quite resonate with me, so I sought out video tutorials for a more visual explanation. These tutorials provided step-by-step guidance on the easiest way to create hover effects, helping me understand the process more effectively and ensuring that I could implement the desired effects seamlessly into my prototype.
Figure 3.7, 3.8, 3.9 Progress screenshot.
Final Prototype
Link to Prototype: https://xd.adobe.com/view/bc5abec8-cc1a-441c-b1ff-ff4c6731e1af-e909/?fullscreen
Figure 3.10, 3.11 Final prototype.
After completing both the wireframe and prototype, I recorded a video presentation using the prototype to demonstrate and explain my concept. Additionally, I created presentation slides using Canva, which included wireframes and explanations of the elements within my website. These slides provided a detailed overview of the design and functionality, and also included links to access the prototype for further exploration.
Final Interaction Design Planning and Prototype
Link to Wireframe: https://xd.adobe.com/view/3528722b-9302-47bc-837c-dde24d972f2c-607b/
Link to Prototype: https://xd.adobe.com/view/bc5abec8-cc1a-441c-b1ff-ff4c6731e1af-e909/?fullscreen
Figure 4.2 Final interaction design planning and prototype - Video presentation.
Week 06
There's no requirement to include mood boards or sketches anymore. Focus on creating either a wireframe or prototype to demonstrate how the animation works, making it easier for users to understand your design.
REFLECTIONS
Experience
I initially felt a bit lost when starting this project because I had already included the layout design and interaction planning for my website in Project 01. However, after Mr. Razif's explanation and briefing, I gained clarity on what I needed to do. Additionally, this project posed a challenge for me because I am not very familiar with using Adobe XD, so I spent a significant amount of time searching for video tutorials to help me create a website prototype that meets my requirements.
Observation
I've observed that creating an interactive website is more complex than designing its layout. It involves incorporating effects and animations that attract users and make them feel engaged with the website, which differs from traditional websites.
Findings
I've found that striking a balance between creating an interactive website that engages users and ensuring it's easy for them to understand and navigate is quite challenging. It needs to effectively deliver information to users while also providing an interactive experience that goes beyond simply clicking buttons to access information.
Comments
Post a Comment