Interactive Design - Final project

  28/5/2025 - 18/5/2025 Week 6 - Week 14

Komugi Uchibori / 0363900

Interactive design / Bachelor of Design (Hons) in Creative Media

Final Project 



TABLE OF CONTENTS
  1. MBI
  2. Final Project
  3. Submission
  4. Reflection

MBI


Final Project

  • Preparation for Dreamweaver
Fig.1-1 Sketches for additional pages

Before starting to create website, I created two additional design sketches to define the overall direction of the remaining 2 sections. These new pages include "About" and  "Thanks", which appears after completing a booking. Originally, I planed to create "Rewards" instead of "Thanks", but there's no time to do much so I changed my plan.
Here's the final website pages:
  • Home 
  • Services
  • About
  • Contact
  • Thanks (after booking)

After that, I began developing the website itself, with support from a family member who has experience in coding and YouTube tutorials. I consulted him whenever I faced challenges during the implementation process. Based on his advice, I learned that using SCSS (Sassy CSS) would make the coding process more efficient, especially when dealing with complex styling. Then I researched how SCSS works and applied it in practice to improve the structure and maintainability of the style sheets. (one of the references: here )


  • HTML & CSS (+SCSS) in header & footer
Fig.1-2 html for head (basic setting)

First, I set up the basic information for the webpage in the HTML <head> section. I added elements like <meta charset="UTF-8"> to ensure proper character display, and <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make the page responsive across different devices.


Fig.1-3 html for header & footer

Basically I used basic elements like <p><img src>and others. <li> is used for menu to manage easily. I also added a lot of class to adjust the font size, margin and others to make it the same as the design in Figma.


Fig.1-4 CSS & the reflection to webpages for header and footer

My original design have slight variations in text color, size, and weight, which required me to create and apply multiple different classes. At this stage, I also implemented @media rules and the clump() function to make the layout responsive, as all pages include both a header and a footer.


  • HTML & CSS (+SCSS) in Home

Fig.1-5 original & refined design in home

I mainly used elements like <h1>,<div>,<img src>,<li> and <p> in home page. There were no major changes from the original design, but I made several adjustments to improve the overall layout. These included adjusting the gaps between text and images, as well as modifying font sizes and weights for better readability and balance.


  • HTML & CSS (+SCSS) in Services
Fig.1-6 Table in html & SCC

On the Services page, I mainly used <li>, <table>, and <td> elements to structure the content and display price information in a clear and readable format. Whenever there were differences in text size or styling, I adjusted them individually using CSS to ensure visual consistency across the page.


  • HTML & CSS (+SCSS) in About
Fig.1-7 Original & refined design in About

When I copied and pasted elements from one page to another, the text and background colors appeared differently because of the base CSS. To solve this, I customized the styles by using a more specific CSS. For example, I changed .experience__item (used in index.html for the Services page) to .about__2 .experience__item for the corresponding section on the About page.

After this, I adjusted the image size so that it matched the width of the text to create a more visually balanced.


  • HTML & CSS (+SCSS) in Contact
Fig.1-8  Datetime & dropdown menu in HTML

This page included elements that initially seemed more complex than what I had handled in previous HTML work, such as dropdown menus and embedded maps. I expected it to be challenging, so I researched as I coded. However, the implementation turned out to be easier than I thought, and the process went more smoothly than expected.


  • HTML & CSS (+SCSS) in Thanks 
 
Fig.1-9 Original & refined design in Thanks

This page was relatively simple compared to the others, so I was able to complete it quickly. As part of the design improvements, I adjusted the bottom margin, the h1 size, and the image size to allow the entire content to fit within a single screen without scrolling, in order to enhance the user experience.

I used a combined selector like .css 1 .css {} so the button keeps the base style from other pages but can be customized separately. As a result, the button size appears slightly different compared to the rest of the site.


  • Challenges of HTML & CSS (SCSS)
Fig.1-10 Link setting & responsibility

One of the main challenges I faced during development was making detailed CSS adjustments, particularly when fine-tuning the spacing between images and text. I experimented with different values of margin and padding, but these sometimes caused the text to break in unexpected places or interfered with the responsive layout.

After modifying the layout for the PC version, I noticed that it became broken on mobile devices. For example, on the Home page, the margin and padding settings around the text were originally designed for desktop, but they also affected the mobile layout.

In addition to these, many of the internal links were not working.


  • Solutions for HTML & CSS (SCSS)

To address those challenges, I updated the CSS so that these styles would apply only to PC screens using media queries. However, not all of the issues were resolved, and for some of them, I could not identify the exact cause.

Additionally, the height of some images did not display properly on mobile devices, so I adjusted only the height values to ensure a more balanced appearance on smaller screens.

As for the link issue, the file structure was divided into two main levels, links like file/about.html did not work properly, so I modified the paths using relative references such as ../file/about.html, which correctly points to the target file based on the current directory structure. (982 words)



 Submission



Reflection

This coding assignment was a significant challenge for me. While working with HTML was relatively easy, CSS was much more complex. Setting margin and padding while also keeping responsiveness in mind, often made me feeling overwhelmed. There were many moments when I lost track of what I was doing or couldn’t understand how the code works.

Fortunately, my father has experience with coding, so I was able to ask him questions whenever I got stuck or encountered coding problems. Thanks to his help and my persistence, I was eventually able to complete the project.

Seeing artistic and beautifully designed websites on the internet, I now realize that the code behind them must be even more complicated. This experience made me appreciate how deep and creative web development can be.



Comments

Post a Comment

Popular posts from this blog

Advanced Typography: Task 2 Key Artwork & Collateral

Image
19 /5/2025 - 17/6/2025 Week 4 - Week 9 Komugi Uchibori / 0363900 Advanced typography / Bachelor of Design (Hons) in Creative Media Task 2 Key Artwork & Collatereal TABLE OF CONTENT LECTURE INSTRUCTION TASK 2 - Key Artwork & Collateral Final Compilation FEEDBACK REFLECTION FURTHER READING LECTURE Week 5 - Perception & Organization Perception in typography: deals with the visual navigation and interpretation of the reader via contrast, formthe organization of the content. Fig.1-1 Contrast Contrast: adds two more principles into the mix—texture and direction. Dair posits 7 kinds of contrast size weight contrast of form contrast of structure contrast of texture contrast of colour contrast of direction Fig.1-2 Contrast of size Size: provides a point to which the reader's attention is drawn, such as the use of the size in making a title or heading bigger or smaller. Fig.1-3 Contrast of Weight Weight: How the bold type can stand out in the middle of lighter type of the same ...
Read more

Advanced Typography: Task 1 Exercises

Image
22 /4/2025 - 13/5/2025 Week 1 - Week4 Komugi Uchibori / 0363900 Advanced typography/Bachelor of Design (Hons) in Creative Media Task 1 Exercises TABLE OF CONTENT LECTURE INSTRUCTION TASK 1 Task 1 Complition FEEDBACK REFLECTION FURTHER READING LECTURE Week 1 - Typographic systems Fig.1-1 Typpographic systems Typographic systems Axial:  All elements are organized to the left or right of a single axis. Radial: All elements are extended from a point of focus. Dilatational: All elements expand from a central point in a circular fashion. Random: Elements appear to have no specific pattern or relationship. Grid: A system of vertical and horizontal division. Transitional: An informal system of layered banding. Banding means segregating information within bands. Modular: A series of non-objective elements that are constructed as a standardized unit. Bilateral : All text is arranged symmetrically on a single axis. Week 2 - Typographic Composition Typographic Composition Fig.1-2 Typographi...
Read more

Video and Sound production: Exercises

Image
21 /4/2025 - 27/7/2025 Week 1 - Week14 Komugi Uchibori / 0363900 Video and Sound production / Bachelor of Design (Hons) in Creative Media Exercises TABLE OF CONTENTS MBI Week 1 Week 2 Week 3 Week 4 Week 5 Week 6-7 Week 8 Week 9 Week 10 Week 11-14 ! Asynchronous class materials and Exercie included in Week sections ! MBI Week 1  Asynchronous class materials:  Shot size Fig.1-1 Shot size Fig.1-2 Extream Long Shot Extream Long shot (Extream Wide Shot): make your subject appear small against their location. Also making the subject feel overwhelmed by its location, emphasizing the location or isolation. Fig.1-3 The Long Shot The Long  Shot (wide shot): refers that If the subject is a person, then his or her whole body will be in view — but not filling the shot. There should be a grate deal of space above and below the subject. Fig.1-4 Full Shot Full Shot: capture the entire subject from head to toe filling the bottom of the frame to the top of the frame while keeping emp...
Read more