22.5.2024 - 23.6.2024 | Week 5 - Week 9
Zhao GuanMei | 0363166
Advanced Interactive Design| Bachelor of Design (Honours) in Creative
Media
Task 2 : Interaction Design Planning and Individual
Prototype
Task 2 : Interaction Design Planning and Individual
Prototype
Moodboard
Progress
Final Prototype
Feedbacks
Reflections
Further Reading
LECTURES
Task 2: Interaction Design Planning and Individual Prototype
Recap
In this task we are required to work on visual design and start planning their website’s interactive design elements and features.the plan not only should include the layout visuals but also the animation example or reference.
Requirements:- Walkthrough Video presenting the plan and
showing the animation examples and/or references. - Online posts in your E-portfolio as your
reflective studies with links to any resource involved in the creating of the
plan. (i.e.: Figma link, Miro link, etc.)
Mood board
I searched for some flat website designs. This two-dimensional style can make the Jellycat website look different from the original soft toys, which is also a feature of this page.
Progress
The project began with illustrating the products from photos, To ensure the elements can be animate,I used pen tool in Figma finish all illustration. This step is now complete, and the illustrations have been refined for consistency in style and quality.
Figure 2.0 Amuseables Baguette product Photo & illustration (week 7 7.6.24)
Figure 2.1 Amuseables Daisy Product Photo & Illustration (Week 7 7.6.24)
Figure 2.2 Bashful Cream Bunny Product Photo & Illustration (Week 7 7.6.24)
Figure 2.3 Amuseables Bird Of Paradise Product Photo & Illustration (Week 7 7.6.24)
Figure 2.4 Amuseables Daffodil Product Photo & Illustration (Week 7 7.6.24)
Figure 2.5 Amuseables Tulip Pot Product Photo & Illustration (Week 7 7.6.24)
Figure 2.6 Bartholomew Bear Product Photo & Illustration (Week 7 7.6.24)
Figure 2.7 Amuseable Purple Orchid Product Photo & Illustration (Week 7 7.6.24)
Figure 2.8 Fuddlewuddle Elephant Product Photo & Illustration (Week 7 7.6.24)
Figure 2.9 Amuseables Toast Product Photo & Illustration (Week 7 7.6.24)
Figure 3.0 - 3.1 Progress of elements animation (Week 7 7.6.24)
To ensure the visual appeal and thematic consistency of the website, a color scheme was developed using ColorHunt. This color palette has been applied across all design elements.
With progress of illustrations, basic flow and animation techniques learned, background elements nearing completion, and the loading bar and layout for the gallery and product details well underway. The next step is finalising background elements, completing the loading bar, refining the gallery and product details layout, implementing animations and interactive elements, and prototype testing.
Figure 3.1 Outcome - main page (Week 9 17.6.24)
Figure 3.2 Outcome - main page (Week 9 17.6.24)
Figure 3.2 Outcome - main page (Week 9 17.6.24)
Figure 4.2 outline overview
Final Submission
Reflections
Experience:
Completing my first interactive proposal was an exhilarating journey that merged creativity with technical know-how. The process began with brainstorming and refining the core concept, which was a 2D interactive gallery website. Drawing the concept wireframe in Illustrator was particularly rewarding as it allowed me to visualise the structure and flow of the website. Creating the flowchart helped in mapping out user interactions and navigation paths clearly. Each step, from initial ideas to final details, was a learning opportunity that deepened my understanding of interactive web design.
Observations:
Observing existing interactive websites provided essential insights into best practices and innovative features that could be adapted and improved upon. I also noted the necessity of balancing creative vision with technical execution, as both aspects are essential for a successful project. The process is detail-oriented, with every element playing a critical role in the overall experience.
Findings:
Through this project, I discovered that a clear concept is crucial as it serves as the foundation for all design elements. Visual tools like wireframes, flowcharts, and mood boards proved invaluable, guiding the design process and effectively communicating ideas to our module coordinator.
Comments
Post a Comment