ADVANCED INTERACTIVE // TASK 02
Hasnol Rafiq Bin Hasnol Raduan / 0356767
Games Development / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
Task 02: Interaction Design Planning and Prototype
References:
 |
| Reference from https://www.hardikbhansali.com/ |
The animation in the website shows content revealing progressively (e.g., text sliding in, elements fading in). Which is inspiring because it creates a sense of discovery and guides the user's attention effectively.. The smooth transitions creates a cohesive, flowing experience as users navigate the gallery.
Each animated element has a clear purpose, whether it's introducing content or highlighting navigation options. This purposeful approach to animation enhances usability and user engagement. The animations maintain a consistent style throughout the different sections creating cohesive animation language.
Prototypes:
I am required to work on my visual design and start planning my website's interactive design elements and features. Unlike a traditional static website, when it comes to interactive design where animations are present, my plan should include not only the layout visuals but also animation examples or references. I can build my own animations or use reference animations to demonstrate my intended ideas.
 |
| Low Fidelity Prototype |
This low-fidelity prototype outlines the structure and flow of an interactive website for a graphic design gallery. The prototype consists of three main pages, each represented by a wireframe layout:
Graphic Design Gallery (Main Page):
- Header with navigation options for "Designers" and "Workshops"
- Main content area with "About" section
- Footer with "Explore Galleries" and "Workshops" options
- A footer area labeled "Footer"
Virtual Gallery:
- Header similar to the main page
- "Designer Portfolios" section with four selectable items
- "Virtual Tour" section with ten circular elements, likely representing different gallery spaces or exhibits
- "Information Panel" at the bottom with a circular element and a "Details" button
- Footer area
Workshop:
- Header consistent with other pages
- "Tutorial" section with four selectable items, similar to the Designer Portfolios
- "Community" section with placeholder content areas
- Footer area
The arrows between the pages indicate the following user flow:
- From the main Graphic Design Gallery page, users can navigate to both the Virtual Gallery and Workshop pages
- The Virtual Gallery page links to the Workshop page
- The Workshop page links back to both the Virtual Gallery and the main Graphic Design Gallery page
This prototype demonstrates a interconnected structure allowing users to easily navigate between different sections of the website, exploring gallery content, designer portfolios, virtual tours, workshops, and community features.
 |
| Animation Sheet |
Prototype Preview
Homepage Introduction:
- The first two panels show the homepage with "GRAPHIC DESIGN GALLERY" and a brief description sliding in, likely from left to right.
- The second panel adds two rectangular elements, possibly menu items or featured content, sliding in from the right.
About Section:
- The third panel transitions to an "ABOUT" page, with text explaining the purpose of the website.
- This animates in when scrolling down after the homepage introduction.
Navigation Options:
- The fourth panel shows "EXPLORE GALLERIES" and "WORKSHOPS" options, presumably main navigation categories.
- These elements animate in sequentially after the About section.
Virtual Gallery:
- The lower sequence starts with a "VIRTUAL GALLERY" landing page similar to the homepage.
- It transitions to a "DESIGNER PORTFOLIOS" page, with a sliding animation.
- The next panel shows three selectable gallery options appearing.
Virtual Tours:
- The final two panels display "VIRTUAL TOURS" pages.
- The first shows the title, while the second reveals a grid of 8 squares, likely representing different virtual tour options.
- These squares will animate in sequentially.
Overall, this animation sheet showcases a smooth, progressive reveal of content as users navigate through the site. The animations appear designed to guide the user's attention, create a sense of depth, and provide a dynamic, engaging experience as they explore the graphic design gallery's various sections.
- The lower sequence starts with a "VIRTUAL GALLERY" landing page similar to the homepage.
- It transitions to a "DESIGNER PORTFOLIOS" page, with a sliding animation.
- The next panel shows three selectable gallery options appearing.
Virtual Tours:
- The final two panels display "VIRTUAL TOURS" pages.
- The first shows the title, while the second reveals a grid of 8 squares, likely representing different virtual tour options.
- These squares will animate in sequentially.
Overall, this animation sheet showcases a smooth, progressive reveal of content as users navigate through the site. The animations appear designed to guide the user's attention, create a sense of depth, and provide a dynamic, engaging experience as they explore the graphic design gallery's various sections.
.jpg)
Comments
Post a Comment