Interactive Design - Final Project

-

 21.11.2024 - 4.1.2024 / Week 9 - Week 14

Lim Pei Jiun (0372548) / Bachelor of Design (Hons) in Creative Media 

Interactive Design

Final Project 

Introduction

Final Project

For this project we needed to develop a final working website based on our redesign proposals and prototypes. This project is more complex than before. I only had some basic knowledge before this, so this project was a bit difficult for me. Fortunately, Mr. Sam recommended a website for us to refer to and allowed us to ask Chat GPT for help. These allow me to complete this project more smoothly.

Fig 1.1 Screenshot of project 2 layout

Because this project had to make the web page based on the layout of Project 2, I no longer had to spend time thinking about the layout of the web page and just used what I had.

Fig 1.2 navigation bar and page tittle

The first thing I made was the navigation bar and the page title for each page. Since the navigation bar and web page title design of each page are the same, I only need to copy and paste, and then modify the title name of the web page. By the same token, my areas are all the same color, so I agree that I can just copy and paste the same areas and modify the content later. This method has greatly improved my efficiency in making web pages.

Fig 1.3 reference of exercises

For the production of the navigation bar, I referred to the navigation bar produced by the exercises in the previous class. But I made some adjustments, such as changing the text to the right and adding the logo to the left. Besides, I also referred to the exercise to create a hover effect that enlarges the image when the mouse touches the image. These past exercises have helped me a lot in understanding how to create some effects faster and also taught me the importance of classroom practice.

Fig 1.4 vertical distribution

Fig 1.5 vertical distribution

Fig 1.5 vertical distribution

In addition, the most common problem I encounter in the process of making web pages is the layout of text. For example, I want the text to be distributed vertically, that is the content is distributed top and bottom, but my content is always distributed horizontally. I have asked Chat GPT many times, but the solutions it gave still did not solve my problem. Because I have a lot of content that needs to be distributed up and down, I have been stuck in this area many times. Chat GPT sometimes helps me and sometimes it doesn't. Eventually I separated the content into two areas.

Fig 1.6 ☰icon

Fig 1.7 Hidden navigation bar

After making the web page, I started to adjust the layout of the web page so that it can fit seamlessly on all screens. I had trouble adjusting at the beginning. When the navigation bar is on a small screen, there are too many menu buttons, so it cannot be fully displayed. Only the first three menus are displayed. Even if I modify the navigation bar to automatically change with the screen size, it is useless. Because the font is too long, it is useless even if the navigation bar shrinks accordingly. Finally, I modified the navigation bar to be hidden under ☰ when the screen is small, which solved the problem of the navigation bar being too long. When hiding the navigation bar under ☰, I found that no menu appeared after pressing ☰. Even after repeated modifications, it still didn't work. After asking about Chat GPT, I found out that it was because I did not add Java Script. After adding it, ☰ can operate normally.

Fig 1.8 vertical content

Fig 1.9 vertical content



After making the hidden navigation bar, I started adjusting the content. I changed most of the content to be centered vertically, keeping the content in the middle of the page.

I spent a lot of time on this one because after changing it to vertical, not all the content stayed in the center of the page, so I needed to make additional adjustments. The difficulty is that when adjusting, the layout often changes to the normal size, so modifications are required. So I was stuck here for a long time, revising it repeatedly and spending a lot of time.

I also encountered some problems. For example, after the content was modified, the webpage that was originally adapted to different screen sizes suddenly had white borders. The navigation bar is normal, but there is a white border next to the web content except the navigation bar. This white border is what bothers me the most. Some pages have white borders, and some pages don’t. I checked it many times and found no problem. Even after modifying GPT, the problem was not solved.

Through this project, I deeply understood the difficulty of making web pages. Making a web page requires repeated adjustments and modifications to ensure that everything is correct, which is something that requires a lot of time and energy. The code is very rigorous, and a small mistake may affect a lot of things. This is what I learned in this project. In addition, I learned a lot and improved my abilities.

Final Website Netlify Link:

Comments

Post a Comment

Popular posts from this blog

Typography Task 1/ Exercise

-
Image
22.04.2024 -26.05.2024 / Week 1- Week 5 Lim Pei Jiun (0372548)/ Bachelor of Design (Honour) in Creative Media Typography/ Taylor's University Task1: Exercises TABLE OF CONTENTS 1. Lectures 2. Instruction 3. Task1: Exercises 1&2                   Exercise 1: Type Expression                 Exercise 2: Text Formatting 4. Feedback 5. Reflections 6. Further Reading   LECTURES Week 1:  Introduction and Briefing Introduction Font: A single font or weight in a font Typeface: E ntire family of fonts/weights that share similar characteristics/styles. Development Phoenician like other Semitic people, wrote right to left. The Greek developed a style of writing called 'boustrophedon' , which meant that the lines of text read alternately from right to left and left to right. Fig1.1   'boustrophedon' style Fig1.2  early letterform development Hand Script from 3rd - 10th CE: Sq...
Read more

Advanced Typography - Task 1 Exercises

-
Image
24.9.2024 - 15.10.2024 / Week 1 - Week 4 Lim Pei Jiun (0372548) / Bachelor of Design (Hons) in Creative Media  Advanced Typography Task 1：Exercises TABLE OF CONTENTS 1. Lectures 2. Instruction 3. Task 1: Exercises     Exercise 1: Typographic System     Exercise 2: Findin g Type 4. Feedback 5. Reflection 6. Further Reading LECTURES Week 1: Typographic Systems There are eight major variations with an infinite number of permutations. Fig1.1 eight major variations Axial system : all elements are organised to the left or right of a single axis Fig1.2 A xial system Radial System : All elements are extended from a point of focus Fig1.3  Radial system Dilatational System : All elements expend from a central point in a circular fashion  Fig1.4  Dilatational system Random System : Elements appear to have no specific pattern or relationship Fig1.5  Random system Grid System : A system of vertical and horizontal divisions Fig1.6  Grid sys...
Read more

Video & Sound Production - Project 2

-
Image
   8/10/2024 - 3/12/2024 Week 3 - Week 11 Lim Pei Jiun / 0372548 Video & Sound Production / Bachelor of Design (Hons) in Creative Media Project 2 INSTRUCTION Project 2 Project 2A - Production Shoot For Project 2A, we need to reshoot and edit the video clip that Mr. Martin gave us. We assigned everyone their roles and prepared for the shoot. Fig 1.1  Behind the scene After shooting, we put the video clips we shoot into Google Drive to let all the members used. Fig 1.2  Final shoot and audio files I first edited the video clips into something like a movie trailer, then colour correct and colour grade the trailer. Fig 1.3  colour correction and colour grading process Youtube Link:  https://www.youtube.com/watch?v=Uj8UsuNtw4Y Fig 1.4  final production shoot Reflection: For this project, I learned a lot of new things. This is my first time to experience the complete shooting process. I learned that all the position is important and they have their own r...
Read more