Interactive Design | Final Project : Final Working Website

-
29.06.25 - 27.07.25 / week 9 - week 14
Subhana Salim / 0375936 
Interactive Design/ Bachelor's of Design (Honours) in Creative Media / Taylor's University 
Final Project : Final Working Website

TABLE OF CONTENTS

1. Instructions  
2. Final Project : Final Working Website
3. Reflection


INSTRUCTIONS

FINAL PROJECT :FINAL WORKING WEBSITE
The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES) based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.



FINAL PROJECT : 
FINAL WORKING WEBSITE


URL Of the Final Working Website: 



The Development Process

My website making process started with referring my Figma design. These are my layout design for the 3 pages from my Figma Prototype.
Final Images of the 3 Webpages
Fig 1.1 Home Page

Fig 1.2 Dino Facts (Content Page)

Fig 1.3 Dino Facts (Contact Page)

I started with making the home page. One of the main things that appear consistently in all my pages is the navigation bar and the footer. So I began the process of making that.

1. Organizing elements in the HTML file
These are the final color palette and font family, I chose for my final website. 
Fig 1.4 My final color palette and font-family


Before starting with the code, I did the following things:-
1. Embed the CSS file, and google fonts link
2. Rename the title
3. Create the relevant subsections
Fig 1.5 Organizing the html file



2. Footer
In order to add me in the footer making process, I referred to this video :https://youtu.be/FRRlFLfdvBE?si=-eY82Ey0eOPNXEmC
Fig 1.5 Video Tutorial 1

My footer consists of mainly 4 columns. 
Column 1:- Logo, Subscribe to the email
Column 2:- important links
Column 3:- Socials 
Column 4:- Footnote

I made column 1,2,3 align in the same row and column 4 to be placed in the second row. I also made the column 1 the widest, with it having a gap between it and column 2&3.

Fig 1.6 HTML Code Footer


Fig 1.7 CSS Code Footer


The final footer has some differences to the alignment. The important links has a heading and I change the socials icon.

Fig 1.8 Prototype vs Final (Footer)

2. Navbar
After which I decided to start working the navigation bar to my website. One main video that helped me with the navigation bar:https://www.youtube.com/watch?v=Og-YEeCTE7A
Fig 1.9 Video Tutorial 2

I wanted to make some changes to the navigation bar compared to the prototype.
Fig 1.10 Prototype vs Final (Navbar)

According to Mr. Shamsul's recommendation I changed the home button to the Logo and the website's brand name. Initially the navbar was transparent. But in the final website's code I decided to a a navigation bar to make the logo standout. I decided add a background along with a gradient to refine it. 
Fig 1.11 Navbar Logo

I also changed the navbar color and gradient for the other pages. I also changed the color of the Logo to blue it make it contrast from the navigation bar.


Fig 1.12 Change in the Navigation bar for selected pages

This is both my Html and CSS code for the navigation bar.
Fig 1.13 HTML and CSS code for Navigation Bar


Then I focused on the responsiveness of the page for navigation bar.
I condensed the menu options under the hamburger icon. For this I strictly use CSS and HTML only. I added a background when to the side menu bar to make the elements visible. 

Fig 1.14 Navigation Bar smaller dimension
Fig 1.15 CSS code for Responsive Navigation Bar

3. Hero Section

For the hero section I wanted each page to have a unique but consistent title card. I had previously made the title card for the 3 pages for my Figma prototype. But with the final website, I made 2 more. To make the designs, I first took the free dinosaur images from Freepic, removed their background and placed it into a new one with a similar color to my color palette.
Fig 1.16 Designing the Hero section

Fig 1.16 Final designs for the Hero section

In order to placed the image into the background of the hero section, I imported it using CSS properties. I also adjusted the with of the Title and Subtitle, so that the alignment is similar to Figma Prototype. 
Fig 1.17 HTML and CSS code for the hero section.

Final hero section:
Fig 1.17 Final hero section

In order to make the title card responsive, I centered the text and removed the padding and margin. 

Fig 1.18 Responsiveness of hero section


4. Card Section (Home)

For the card section, put all the 3 cards under one div element and made them align as a row. Card includes an image, description and a button. Each card element is center and aligned as block.
Fig 1.19 CSS Code for the card section

Final card design section.
Fig 1.20 CSS Code for the card section

For the responsiveness of this section I decided to make this card be aligned as block. 

Fig 1.21 Responsive card section


5. Bootstrap Element:1 Popover (Dino Types)
I decided to add some bootstrap elements in my design. First starting with using popovers. I wanted to make a pedigree chart for the 'Dino Types' section and each sub title in the pedigree chart acts as a button for the popover. 


In order to use bootstrap, I first went into their website and embedded the link into my code.
Fig 1.22 Adding Bootstrap link


Fig 1.23 Embedding the Js script into my code

In order to make the pedigree chart, I decided to use the col and row divs. I made the whole elements to be displayed as a col and within it made column and rows respectively. This is my Html code.

Fig 1.23 HTML code for the pedigree chart

This is my CSS code:
Fig 1.24 CSS code for the pedigree chart


For the pedigree chart I aligned made the two types :saurischia and ornithischia into two separate columns placed side by side, and each sub elements is also placed within that column. The pedigree elements are cornered round and colour coded based on the row location. For the popover: I made the element to be placed on the bottom when the button is clicked. The popover also has a similar colour palette to the buttons. 
Fig 1.25 Final Pedigree chart

6. Bootstrap Element:2 Collapse Element(Top Dinos)
'Top Dinos' webpage I wanted to add a collapse feature to facts section of each of the dinosaurs. I did the same where I copied the embedded Js code into my code. This is my Html and Css code.
Fig 1.26 HTML code for Collapse element

Fig 1.26 CSS code for collapse element

I copied the bootstrap code and embedded the link onto my code and changed the id and class names. The main content and image lies within the class collapse sec2 collapse content.
Fig 1.27 Html code for collapse element

This is the final collapse element layout. For the layout I chose to place 3 rows. First row consists of the the heading, which is centered. Second row I placed the image and the relevant text next to it. Finally the last row involves the collapse content section. I gave a min height to the collapse content to ensure that it looks even when all the collapse elements are expanded.
Fig 1.28 Collapse element layout


Challenges Faced

1. Responsiveness 
One of the main things I struggled with this assignment is managing the responsiveness of the website. One of the main elements giving me trouble was the footer of the website. Despite trying to make all my elements align into column, it wasn't showing up in my final layout.

Fig 2.1 Layout Footer


The layout for the other aspects are also very poor despite my best effort to improve them and stack them vertically. One of the main issues I had with the webpages is to stack them vertically and ensure they are centralized.
Fig 2.2 Layout of Other pages

I have noticed when the webpage I view the website on, has its dimensions reduced, the vertical alignment is more visible. But the media dimensions do not transfer into the inspect, or other devices. 
Fig 2.3 'Inspect' alignment vs web-reduced aspect ratio alignment

With help from chatgpt, I realized the missed one line of code to be placed in the header, which causes layout issues for other devices. <meta name="viewport" content="width=device-width, initial-scale=1">. Most of the responsive issues were fixed.
Fig 2.4 Fixing the responsiveness issue

2. Layout for the Pedigree chart 

Another issue I had was adjusting the layout for the Pedigree chart in mobile devices as I couldn't place the elements as row. Therefore I stuck with the column element but added extra padding to differentiate the differences between each section.
Fig 2.4 Phone ratio alignment Pedigree chart

3. Embedding Bootstrap
Initially when I embedded bootstrap into my website, I ran into the issue of it creating weird white spaced in my website alignment. I tried looking into the embed link to make sure it was right. I also checked the other error in my code, but i was unable to remove the white space. There I resulted to placing the embed link in the two pages I used bootstrap. And I had to remove the content container in order to restore the layout.
Fig 2.5 Bootstrap embedding issue

4. Alignment Issue in Dino Facts
One of the biggest issues I faced was fixing the alignment in the 'Dino Facts' page. The main content section wasn't aligning in the center as well as there was a huge gap in the center. Eventually with enough edits to the code I was able to centralize the section, but I am still unable to reduce the big gap in the middle.
Fig 2.6 Figma Vs final website alignment


Final Website Layout

1. Home page
For the home page it includes the navbar, hero section, content, and footer. The color palette mainly consists of blue, yellow and orange. For the heading font I used Palaquin Dark, Sans-Serif and for the other text is used Cabin-Sans-serif.

The navbar section includes the title and logo of the website on the left. There is 2 menu options 'Dino Info' and 'Contact Us' on the right. The 'Dino Info' is a drop down menu with 3 options ('Dino Facts', 'Dino Info', 'Dino Types') that appear when hovered over it. 
And the hero section has the background design with dinosaurs with text placed on top.
 
The content section has 2 parts:- the introduction section as well as the card section with 3 options leading to you the 3 drop down menu options.

Finally the footer section includes 4 sections, 3 of which are  aligned as a row. Section 1 includes the logo title, and below is placed the newsletter section. Section 2 includes important links, Section 3 includes socials and the final section includes footnote. The footer remains the same in all the other pages

Fig 3.1 Home Page Layout 

2. Dino Facts 
The Dino facts section includes a navbar, header, 3 content section and a footer. The header section color palette for 'Dino Facts' is primarily orange with dark blue text. 

There is 3 section in the main content area. With the first section, providing a general description about dinosaurs. For the other 2 content sections, answer specific questions about dinosaurs. For these two section I made the heading and the text one column and the image and another, which are all placed in one row.
Fig 3.2 Dino Facts

3. Dino Types
Dino types section consist of a navbar, hero section, 2 content sections and a footer. The header section has a similar color to 'Dino Facts' with subtle changes. 

The content section has 2 parts. The first part is the introduction section. The second content section includes the pedigree chart with all the types of dinosaur classification. This section includes a header 'Dinosaur Types' below it are labelled buttons. Clicking on the buttons activate the popover window. 
Fig 3.3 Dino types


4. Top Dinos
'Top Dinos' page has a navbar, hero section, 3 content sections and a footer. The header section has a similar color palette to 'Dino Facts' as well with orange background and dark blue text. 

The content section has 3 parts. Each part is a description section of a dinosaur. The dinosaur description section consists of an image and body of text placed in the same row and exists within a gradient box. 

Below it are 3 collapse buttons, that by clicking on the button it expands the content hidden in collapse. Each collapse content section has a body of text as well as an image.
Fig 3.4 Top Dinos

5. Contact us
The 'Contact Us' page has a similar color palette to the 'Home' page. With subtle differences. The 'Contact Us' page has a nav-bar, hero section, 1 content section and a footer.

The main content section, includes the details required for the user to type in placed against background image of a dinosaur. The image was inserted as background using CSS properties. The Contact Us section includes details such as input name, email, country, message, consent and captcha section. The submit button is place on the right side of the container 

Fig 3.5 Contact Us





REFLECTIONS

This project has been one of the most intimidating one to start. Having zero experience in code previously simple things such as layout and alignment was difficult to and time consuming. Nevertheless it got easier over time. With the help of my friends feedback and the lectures as well as watching tutorial videos, I was getting the hang of the coding. 

Html is easy to learn but difficult to apply. I often find myself spending large amounts of time trying to figure out where the error has been made. I had lots of difficulty throughout the process of making this website. Bootstrap also caused me a lot of issues, that I have yet to figure out where I went wrong. The responsiveness specifically was difficult to administer, and I still find a lot of issues in my website.

I also felt very time constrained. If I had more time, I could perhaps fix the bugs and alignment issues that I have with my website. Overall I do think I learned a lot about coding and website designing. However, there is soo much more for me to improve. 



Comments

Post a Comment