Interactive Design Final Project

Interactive Design Project 3

Week 11- Week 15

Siam Siew Yong 0358399

Bachelor of Design in Creative Media | Taylor’s Design School | Taylor’s University

INSTRUCTION

Before we start this project, we have done html exercise in class

We learn how to do box model layout in CSS

And my final project will also include box model layout as I want to create a music catalog website

Final output for this exercise: http://127.0.0.1:52584/preview/app/index.html

fig 1.1 exercise in class

FINAL PROJECT

In this task, we have to bring our Project 2 website redesign proposal to life, and it must be a functional website

Project 2 link

FINAL WEBSITE LINK: https://blimpredesign.netlify.app/

REPORT

Introduction:

The music catalog website is designed to showcase music albums in an organized, visually appealing layout. The website provides users with easy navigation, responsiveness across devices, and an engaging experience with a clean interface.

This report outlines my development process, challenges I faced, and solutions implemented to ensure the final product.

Development process:

I began with converting a prototype design into a fully functioning website using HTML and CSS

fig 2.1 ss of initial process

In HTML structure, I created a semantic structure for the website, including a header, nav, and section for the catalog. The navbar contains a logo 'The Blimp' with navigation links on top left and right.

fig 2.2 navbar coding

I also included "Search" navigation on navbar, which include interactive elements

fig 2.3 search bar coding

In CSS styling, I used flexbox for the header layout, ensuring alignment of logo and navigation elements. I also applied CSS grid to the catalog section to create a responsive album grid.

fig 2.4 css coding for navigation bar

fig 2.5 css coding for navigation bar

To ensure consistency of the website, I used Roboto and Archivo as the font for readability, because both of this two fonts are sans-serif fonts. Beside, I also used minimalist color scheme which provide sophisticated look.

Most of the images and color used by original website is lacks of the lively accent color, so I add some pink color in this redesign website to prevent audience may feel boring while browsing.

fig 2.6 adding lively color

fig 2.7 adding lively color

The imagery like the album covers and logo I used was in consistent dimensions to ensure uniform layout.

fig 2.8 imagery

For the responsive design, I used this link to create a responsive website, this will set the viewport of my page which can control and provide good page's dimensions and scaling.

Besides, this website was tested on major browsers like Chrome, Firefox and Safari, and it shows consistent rendering of layout and grids.

Core Features:

I created a navigation bar which includes logo, links to key sections such as Home, Archive, Genres, and Contact. I also added search bar and genre filter in the pages of website to help user find specific content easily.

fig 2.9 search bar

fig 2.10 genre filter

I also added interactive hover effects to navigation links and album covers, forms and search functionality can be added as future enhancements.

Technical Consideration:

I set my images to scale dynamically with width 100% and height auto; which ensure they adapted seamless to different screen sizes.

Rigorous testing ensured the website's usability, responsiveness, and cross-browser compatibility. Usability tests confirmed that the navigation system was intuitive, while cross-browser testing verified functionality on platforms like Chrome, Firefox, Safari, and Edge.

fig 2.11 ipad view

Responsiveness checks were conducted using both developer tools and real devices.

(ipad and dekstop)

Besides, my website was carried out successfully through Netlify.

Challenges:

This is a challenging task as I really not good at coding.. The first challenges was centering the logo while maintaining equal spacing for the side navigation links. This was resolved using CSS Flexbox, where display: flex and flex: 1 were applied to the navigation containers, ensuring proper alignment.

The second challenge involved creating a consistent and responsive layout across various devices. To achieve this, media queries were implemented to adjust the side navigation on smaller screens, allowing the catalog content to remain the focal point.

Additionally, maintaining the grid layout for the catalog section proved challenging, as the album cards needed to resize dynamically without overlapping. This was accomplished by using flexbox,margin,padding,align-items...in the CSS Grid configuration, enabling the grid to adjust seamlessly to different screen sizes.

The final website successfully adheres to modern web development standards, delivering a visually appealing, responsive, and user-friendly experience. It got a little bit difference with the layout of prototype in Project 2, but with the same color schemes and typography.

Conclusion:

Looking ahead, the website can be enhanced further to improve functionality and user engagement. Introducing a search bar or filtering functionality would make the catalog more dynamic, allowing users to locate albums quickly. Implementing a backend system could enable real-time updates of album data, making the website more interactive and scalable. Moreover, performance can be elevated by incorporating advanced techniques like lazy loading for images and leveraging content delivery networks (CDNs) to reduce loading times and improve overall efficiency. These enhancements would not only enrich the user experience but also position the website as a robust platform for showcasing music albums, catering to a diverse audience with evolving needs.

I know I still have shortcomings, and I’m ready to continue pushing myself to become better at what I do!

FINAL WEBSITE LINK: https://blimpredesign.netlify.app/

Siam Siew Yong 0358399

Search This Blog