Interactive design: Final Project

on

01.01.25 - 27.07.25 (Week 11-14)

Celine Christabelle Patricia / 0374872 

Interactive Design / Bachelors of Design (Hons) in Creative Media / The Design School

Final Project 

Table of contents 

  1. Instructions
  2. Final Project Website Progress
    • Website Development Process
    • Problem faced and how is overcome
  3. Final Project Result
  4. Feedback
  5. Reflection
Instructions 


Final Project Website Progress

Website Development Process
Website is firstly made from the html. I made the index.html for the home page. Firstly, I start making the navigation bar, directing to the Home page, About page, Help page, as well as and Contact page. I added the logo on the top left, the bars on the top right. I added indicators for every page to let users know their location. Moreover, I added a dropdown menu for the About button, for the Shops page, Career page and Member page. After making the html, I make the css to format the navigation bar, adding hover as well according to Fig 1.1, linking the css to the html link as well.
 
Fig 1.1 - CSS of navigation bar

Next, I made the footer, using the same method as how i make the navigation bar and the css. After these, I formatted the other pages by making new html files for each pages and linking the style.css. First, I made every html for every pages, adding class and id. I also made the banner of each pages using Photoshop, Procreate, and Canva and insert it under the navigation bar. I made the pictures accordingly to suit the original idea of the website layout as the original idea that is made previously in Figma. I search idea through Pinterest on how people make interesting banners to make it interesting for promotional purposes. Progress is shown on Fig 1.2.

Fig 1.2 - Making Banner Process

It was very challenging when making the css and html as sometimes it did not always go as I wish. I do use some tools to guide me to in this process. In making the css, I mostly used the attribute class from the html. I mixed all the html from all the pages in one html. According to Fig 1.3, that is the css style I used for the content in "About Us" in home page, also setting the paragraph alignment with the pictures. For some other pages that has the same style as this page, I will use the same class for efficiency. 

Fig 1.3 - CSS styling of some page. 

Moreover, when making the responsive page, I styled @media with the width 768px, then I added new styles to make it responsive to mobiles. Moreover, I also decided to make a new css page so I won't get mixed up with the current style, preventing myself to ruin the original desktop css I have made. I used a tutorial that I found from youtube and proceed on making the desired css and html according to Fig 1.4. 

Fig 1.4 - CSS for mobile responsiveness

After making the mobile and desktop view of the website, I recheck it by inspecting the view into the width of mobile, then start uploading on netlify. After uploading on netlify, I had to make sure that it really works on mobile, so I opened in my mobile phone and check if every navigation can be click and navigated properly to the desired pages.

Problem faced and how is overcome
Several problems were faced when making this html. When making the navigation bar and the footer page, I do not really find a problem since I have done it several times during class. However, when making the layout of the page, there were some parts that I found difficult because it was challenging. When making the layout for shops place, I decided to use the past projects that have been made previously during class. Moreover, I also asked my friends and other tools opinion about the website and what improvements are needed for better layout and interactivity. 

My proposed prototype for my homepage is originally a scrolled carousel, however I don't know how to actually execute the promotion carousel on my working website. In the end, I found out from my lecturer that we are allowed to use existing template from Bootstrap. I searched for the carousel template and inserted the code to my html, as well as inserting the banner pictures I have created to the tags. I was also assisted by my lecturer on making the carousel button icons for the icon.

I had difficulty when making the burger label for responsive page. I haven’t learn javascript and I didn’t found templates about it. Luckily I found a tutorial in youtube that helped me a lot (youtube link). Though I still had to refine it to adapt it with my website, I succeed making the hamburger menu with only css through this tutorial. It was challenging, but I learnt a lot of new css rules through this video that I haven’t learn in class, which clearly deepen my knowledge in making websites.

Another challenge I encountered was ensuring the responsiveness of the entire website layout across different screen sizes, especially mobile devices. Some elements such as images and text blocks did not align properly when the screen size changed. To solve this, I had to experiment with different CSS properties. This process took time and required a lot of trial and error, but it taught me how to make a more user-friendly and adaptable design. Through this, I realized the importance of responsive design in improving user experience and accessibility on various devices.

Final Project Result

Feedback

WEEK 11
Please remake the banner of the website and make it more interesting

WEEK 14 
Website is already interactive, accessible and the flow is well, now proceed on making the responsive version. 

Reflection

Throughout the process of creating this  website, I have encountered a lot of challenges that pushed me to apply and expand my existing knowledge. While building the navigation bar and footer was relatively smooth thanks to prior class exercises, designing the overall page layout proved to be more difficult. I struggled particularly with arranging the shop sections in a visually appealing and functional way. To overcome this, I referred back to past class projects and consulted both friends and online tools for feedback and suggestions. Their input helped me refine the layout and enhance the interactivity of the page. I initially planned to implement a custom scrolled carousel for the homepage promotions but didn’t know how to execute it from scratch. Thankfully, my lecturer introduced me to Bootstrap templates, which made it easier to incorporate a functional carousel by inserting the provided code and customizing it with my banner images. 

Additionally, I faced difficulty in creating a responsive hamburger menu, especially since I haven’t learned JavaScript yet and couldn't find ready-made templates that fit my design. After researching online, I discovered a helpful YouTube tutorial that demonstrated how to build a hamburger menu using only CSS. Although I had to adjust the code to match my website's structure, I eventually succeeded. This experience not only challenged me but also taught me new CSS techniques I hadn’t learned in class. I also gained a better understanding of responsive web design by experimenting with media queries and layout adjustments for various screen sizes. Overall, this project was a valuable learning experience that improved both my technical skills and problem-solving abilities in web development, I realize that I have gained a lot of skills in making this website and I hope that in the future my skill will improve more. I believe this website I have made will be the first website I may be proud of since it is one step of me developing my portfolio.





Comments

Post a Comment