Interactive Design: Finale Project

 31.10.2023 - 10.12.2023 | Week 10 - Week 14

Zoë Lena-maria Nelson | 0364991 | Rotterdam University Of Applied Science

Interactive Design | Final Project

---

Introduction

Requirements

For my microsite, I need at least five sections. It should look good and be easy for the people I want to reach. It must be easy to move around, with clear labels and menus. My microsite needs to work well on different devices. Also, I should follow the best ways to design websites, like making them accessible. Adding pictures, videos, or audio will make it more attractive for users.

Deliverables:

1. Create a comprehensive site map and wireframes detailing the layout and functionality of your microsite design.
2. Develop the necessary HTML, CSS, and other code components for building and implementing your website.
3. Integrate both created and sourced multimedia elements to enhance your website's overall content and visual appeal.
4. Once completed, provide a link to the published website and submit it through Google Classroom.

Learning Goals :

1. Develop critical thinking skills by employing ideation strategies to synthesize, assess, and evaluate prototype/final product outcomes, fostering further development during the project.

2. Enhance appraising and valuing competencies by systematically analyzing and measuring performance, promoting self-development through constructive feedback, self-evaluation, and engaging in consultations as integral aspects of the project

---

Finale Project

Exploration and Ideation

In the project's initial phase, I generated sketches and translated the envisioned design concepts into a cohesive Moodboard using Miro. 

 Figure 1.

The colour palette was carefully curated, drawing inspiration from Rihanna's signature colours: Red, Black, White, and Purple. To ensure a harmonious visual presentation, I selected fonts from Google Fonts, ultimately settling on Bebas Neue for headers, body text, and other elements. 

Figure 2.

For a more detailed exploration of visual references and inspiration, please refer to the Miro board associated with this project: Miro.

Sketches

After delving into exploration and ideation, I transitioned into the next phase of the design process by creating a Figma recreation that was informed by the insights gathered during my research. This involved translating conceptualized ideas and design elements into a tangible digital prototype. The Figma recreation visualizes the refined concepts, ensuring a more concrete and interactive understanding of the envisioned design.

Figure 3.

After crafting the prototype, I discussed with the instructor to gather valuable feedback. Incorporating the feedback, I made several adjustments to the initial sketch to enhance its alignment and simplicity, ensuring a more visually appealing design. Notably, the instructor's reminder about the importance of accessibility for colour-blind individuals influenced my decisions during this refinement process. This was a critical consideration, emphasizing the need for an inclusive and user-friendly design to accommodate all users, including those with colour blindness.

Figure 4.

Develop

After receiving valuable feedback, I commenced the website creation process. I encountered initial challenges, particularly in centring the layout and incorporating Bootstrap and CSS elements. Despite these hurdles, perseverance and iterative problem-solving led to successful outcomes. The HTML structure and CSS styling were carefully crafted to ensure a visually appealing and responsive design. Noteworthy features include a dynamic navigation bar, multimedia integration, and a cohesive colour scheme inspired by Rihanna's signature palette. The final result reflects a seamless blend of functionality and aesthetics, providing users with an engaging and accessible online experience.

Figure 5.

Implemented a scroll event listener (window.onscroll) to enhance the user experience by making the navbar stick to the top after the user scrolls a certain distance. The mechanism involves checking the scroll position using either window.pageYOffset or document.documentElement.scrollTop. When the scroll position exceeds 200 pixels, the 'sticky' class is added to the navbar, ensuring it remains fixed at the top. Conversely, if the scroll position is less than 200 pixels, the 'sticky' class is removed, allowing the navbar to return to its normal state. This implementation results in a smooth transition effect for the sticky navbar, dynamically responding to the user's scroll behaviour.

Summary

Figure 6.

 

Figure 7.

Embarking on an insightful journey from exploration to execution, this project seamlessly integrated critical thinking, design finesse, and coding expertise. Beginning with a meticulous site map and wireframes, the project unfolded through exploration, ideation, and sketch refinement phases. The design process navigated challenges, incorporating feedback loops that enhanced alignment, simplicity, and accessibility considerations for all users.

The development phase showcased perseverance in overcoming obstacles related to layout centring, Bootstrap integration, and CSS styling. The result is a visually appealing and responsive microsite, featuring dynamic navigation, multimedia integration, and a harmonious colour palette inspired by Rihanna's distinctive style.

The implementation of a scroll event listener adds a dynamic touch, making the navigation bar stick to the top after a user scrolls a certain distance. This thoughtful addition enhances the overall user experience, providing a smooth transition effect based on scroll behaviour.

The culmination of efforts is a microsite that meets functional objectives and captivates with its aesthetics. Users are invited to explore the seamless blend of content and design at Netlify.