Interactive Design - Final Project

Interactive Design - Final Project

For our final project, we are required to code our website based on our previous Figma assignment, using HTML and CSS in Adobe Dreamweaver. The goal of this assignment is to create a responsive and functional website that allows user interaction. Kindly refer to my previous project to view my Figma design: Link to Project 2

 Figma Design

Before we started coding, we were given the option to use Bootstrap to help us develop our website. With this resource, I utilized Bootstrap to code the top menu, making it responsive across different devices. It transforms into a hamburger menu when viewed on a mobile device.

Bootstrap navbar

Then, I manually coded the rest of the website. Since I'm not familiar with coding a responsive website for different devices, I encountered many challenges during this part. With the help of YouTube tutorials and ChatGPT, I managed to create a responsive website using the @media rule in CSS, which adjusts the appearance of the website when the screen size changes.

The first page I coded was the landing page, which was relatively difficult as it was more complex compared to other pages that only required simple, repetitive layouts. As a result, I faced many issues while coding this page, especially with the layout not aligning with my initial design. I had to go through numerous trials and errors to achieve a satisfactory result. Since this was my first time coding a webpage based on a Figma design, the final layout still didn't match my vision perfectly. However, I decided to move on to the simpler pages first and planned to return to the landing page after gaining more experience and knowledge.

I proceeded to the next page, which is the "About" page. This page was relatively simpler than the landing page, and I did not encounter many issues while coding it. While duplicating the design from Figma to Adobe Dreamweaver, I maintained its responsiveness by coding it with CSS. This was the first page I successfully coded, and I was satisfied with the outcome. Following that, I worked on the "Our Artist" and "Programs" pages, both of which were completed successfully. Below is an overview of the main code structure I used for these three simpler web pages.

HTML

I started with the <section> tag and used <div> tags to separate different parts of the content, assigning unique classes to each section.

CSS

1. General Styling
   I first identified the custom fonts, background settings (such as margins and colors), and headers that would be used consistently throughout the website.

2. Layout Design
   I primarily used margin, padding, justify-content, align-items, and flex properties to align the layout according to the dimensions I wanted.

3. Image Adjustments
   To ensure images fit within their designated areas, I controlled their width and height. I also used the object-fit: cover; property to maintain the correct aspect ratio, preventing distortion when the dimensions changed.

Responsiveness
To maintain responsiveness so that my web pages could be viewed on different devices without misalignment or loss of information, I used CSS media queries. This allowed the layout to realign when the screen size changed. Below are some of the adjustments I made:

• Adjusted margins and padding to ensure the content remained readable on smaller screens.
• Used flex properties to change the layout based on the screen size.
• Resized images to fit properly on mobile devices and tablets.

After a few weeks of coding, I successfully developed a website that aligns with my initial design, particularly for the desktop version. Since I didn't design alternative versions for smaller devices, such as tablets and phones, my goal is to make the website responsive so that all the information is presented effectively across different screen sizes. Below is the link to my website, along with the final outcome for each device: desktop, tablet, and mobile phone.

• Link to my website
• Compilation

Landing page (Desktop)

About (Desktop)

Program (Desktop)

Our Artists (Desktop)

Join Us (Desktop)

Landing page (Tablet)

About (Tablet)

Programs (Tablet)

Our Artists (Tablet)

 Join Us (Tablet)

Landing page (Phone)

About (Phone)

Programs (Phone)

Our Artists (Phone)

Join Us (Phone)

Landing page HTML

About HTML

Artist HTML

Program HTML

Join Us HTML

CSS

Reflection
Coding a website has been both a challenging and rewarding experience for me. It was challenging because I had to undergo numerous trials and errors while coding a website that followed my Figma design, all while ensuring the website remained responsive across different devices. On the other hand, it was satisfying when I successfully achieved the exact design I had envisioned.

One of the biggest difficulties was coordinating both HTML and CSS, especially when dealing with features like menus and gallery, which appear differently on various devices. This is where Bootstrap proved to be incredibly useful. It simplified the process of making these features responsive and consistent across devices.

The overall process has been very rewarding. It's easy to generate multiple design ideas for a website, but turning those ideas into a fully coded website is a different challenge altogether. Designing also requires careful consideration of responsiveness — thinking about how the layout will adapt to different screen sizes.

Despite the struggles, I gained valuable insights from this module, and I am looking forward to learning more advanced concepts in interactive design. I hope to further develop my skills and bring my designs to life as functional websites.