Part 4: Interactive Visual Prototype

Introduction

For part 4, you are tasked with creating an Interactive Prototype of your website. This involves applying triggers and actions to your visual designs to simulate the functionality of a live website, enhancing the user experience through interactive elements.

Instructions

1. Initiate Your Prototype:

   • Within your existing wireframe file, establish a new page entitled "Interactive Visual Prototype - Part 4." This segregation is crucial for maintaining an organized workflow and clearly delineating different phases of your project.

2. Seamless Screen Navigation:

   • Ensure that your prototype facilitates intuitive navigation by implementing clickable links that connect all your screens. This feature should allow users to navigate forward and backward through the screens, mimicking the fluidity of navigation found in live websites.

3. Incorporate Additional Interactivity:

   • Enrich the user experience by adding at least one additional interactive element beyond "click" and "hover" triggers. Consider incorporating a dynamic image carousel, or any element that uses a different trigger (i.e Delay). The goal is to create engaging and interactive moments that captivate users.

4. Enhanced Interactivity:

   • Elevate the visual feedback within your prototype by applying a hover effect to every clickable item. This enhancement is essential for simulating the interactive cues expected in a functional website, improving the prototype’s usability and realism.

5. Realistic Look and Feel:

   • Your prototype should not only showcase your design skills but also emulate the experience of navigating a real website. Pay close attention to the details—such as transition effects, responsiveness of interactive elements, and overall user flow—to ensure your prototype convincingly replicates the look and feel of an actual website.

Example

Your wireframes should closely resemble a fully interactive website.

Evaluation Criteria

Prototype Setup and Navigation

• [ ] A new page titled "Interactive Visual Prototype - Part 4" is created within the existing wireframe file.
• [ ] Clickable links are implemented for intuitive navigation between screens, allowing seamless movement forwards and backwards.
• [ ] Scrolling is correctly implemented where necessary, providing a realistic navigation experience through longer pages.

Interactivity and Realism

• [ ] At least one additional interactive element beyond "click" and "hover" triggers is included, such as a dynamic image carousel or animations with a delay trigger.
• [ ] A hover effect is applied to every clickable item, enhancing user interaction.
• [ ] The prototype emulates the experience of a real website, with close attention to transition effects, responsiveness of interactive elements, and overall user flow.

Presentation and Format

• [ ] The prototype is designed for desktop viewing, ensuring a comprehensive evaluation of the user experience.
• [ ] The prototype demonstrates cohesive design and functionality, convincingly replicating the look and feel of an actual website.

Submission and Documentation

• [ ] The link to the Figma project is provided.
• [ ] The theme of the website is clearly described.
• [ ] Names of all group members are included.

How to Submit

Your submission will be through Figma's sharing feature. On Brightspace in the submission comment, please include:

• The Figma project link
• Your websites's chosen theme
• The names of all team members

Make sure your professor has been added to the Figma Project with editing permissions.