Interactive Design Final Project: Single-page Website

Week 10 - Week 14
Nitish A/L Naveen Kumar 0346592
Interactive Design, Bachelors of Design in Creative Media
Final Project: Single-page Website

---

INSTRUCTIONS

 

---

Single-page Website

1.0 References (2/7/24)

This was all the reference I gathered from pinterest. My interest was about Leonardo and his works, so i decided to create a biography website about him but later decided to make it look like an "art class" about him.

1.1 Creating the layout in Figma (9/7/24)

Once I have gathered all my references and had the approval of Mr Shamsul i then started mapping out my work in Figma. I started with how the layout will look like by adding the images ive gathered the fonts ive chosen and the colours ive created.

1.2 Picking out Colours for the website (9/7/24)

I went to the web to generate colours i liked and wanted to create my website, i then found colours that i liked then changed it a bit and this was the final results of the colours ive decided to use.

1.3 Adding texts (9/7/24)

I then started placing the texts to see how the webpage will turn out, i decided to chose 3 fonts to use to make the website look neat and professional. 

1.4 Adding the info of Leonardo da Vinci (9/7/24)

After that i started adding the details about Leonardo and added his works with a small description about them.

1.5 Last page and footer (10/7/24)

Finally i was done with the last section as well as the footer of my design in Figma, then i started to recreate the website on dreamweaver.

1.6 Recreating the layout in Dreamweaver (16/7/24)

Here in dreamweaver i started adding the wireframe and started to make it look like how my website reference i made in Figma.

1.7 Testing the website (16/7/24)

Once i have added all the necessary work and details i then started to preview my code on chrome to see if everything was working properly, there was some few errors as well as some things were not working so i had to keep readjusting it.

1.8 Checking the responsiveness of the website (23/7/24)

After that i checked for the responsiveness of the website, there was some problems as the images were starting to distort in space as well as some of the text was not aligning well and from the feedback of Mr Shamsul he told me to add a hamburger menu for the mobile ver as well as to cleanup certain things.

1.9 Creating the layout for mobile version on Figma (27/7/24)

I then followed Mr Shamsul instructions to add the hamburger menu from a bootstrap but somehow it wasnt working and i coudnt figure out why so i copied my Figma work and readjusted it to how it would look like in a mobile version.

2.0 Checking the responsiveness for mobile ver (28/7/24)

At one point certain commands werent working so well on dreamweaver and i had no idea why so i decided to retry my codes in visual studio code and it worked, This was me checking if the responsiveness was working and it was.

2.1 Adding the hamburger menu (28/7/24)

And for the final touch i added the hamburger menu and the contents in the hamburger menu is working well.

---

FINAL OUTPUT

My Single-Page Website

Colours: Colour 1 #0D0B07 , Colour 2 #5F5544 , Colour 3 #4BBE8E , Colour 4 #E3F2EF.

Fonts: Inter, Redressed, EB Garamond

Apps: Dreamweaver, Visual Studio Code

References: Pinterest