This project focused on developing an interactive website for the Dense Night event for our client, Nasmak PM. The aim was to create a dynamic, engaging webpage with multiple moving elements, along with a hidden "easter egg" for users to discover. The project started by splitting our class teams into smaller groups of two. We created a project plan and developed a website designed to generate excitement and engage visitors by showcasing dynamic elements and providing essential event information. We also focused on enhancing the existing website by improving the user interface and making the overall design more interactive. The development was done using HTML, CSS, and JavaScript, with an emphasis on functionality and user experience.
Working on this project together allowed me to apply my skills in web development and UX design. I gained hands-on experience in creating interactive features with JavaScript and in using CSS to design a visually appealing layout. Throughout the project, we worked collaboratively to refine the website based on user feedback and testing. One of the key takeaways was the importance of clear communication and iteration to ensure that the final product was user-friendly and met the client's needs.
Our new team created a project plan and set up a Trello board to ensure a better workflow and a more structured approach. We used research from the Media Campaign project to design merchandise for the website, which previously only had a submission form. Afterward, we focused on structuring the wireframe to create a strong foundation for the design. This structured approach allowed us to stay on track and deliver a functional and visually engaging prototype, which we tested with users to identify areas for improvement. After gathering feedback, we implemented changes and worked on adding dynamic elements like the easter egg. We used JavaScript to ensure the website was interactive, and CSS to bring the design to life. Throughout the project, we continually tested and refined the website to ensure it met the project's objectives.
The inspiration for this project came from the Dense Night event and the concept of creating an immersive, engaging user experience. We wanted the website to be dynamic and visually stimulating, capturing the energy of the event. Our design was influenced by the need for a clean, professional look that also allowed for fun, interactive elements. The color palette and visual elements were chosen to align with the branding and spirit of the event, while still being user-friendly.
To develop the design, we started by understanding the core needs of the event and the audience. Our goal was to create a seamless experience for users who would interact with the website, focusing on minimal clicks for actions and ensuring ease of use. We kept the design simple, focusing on functionality and interactivity, which we believed would help users engage more with the content. By constantly iterating on our designs based on user feedback, we were able to improve the overall user experience.
The design incorporates interactive features, such as the clickable insurance options and an adjustable order form, while maintaining a clean and engaging layout. We used moving elements to capture attention and create a dynamic feel. The final prototype showcases the visual design as well as the interactive features we implemented. Below are visuals and mockups of the website, illustrating its design and functionality.
