Interactive Design Project 2 & Final Project- Working Landing page

22.11.2022 - 11.12.2022 ( week 13 - week15 )
Len Hoi Yee / 0353430
Interactive Design / Bachelor of Design in Creative Media
Project 2 & Final Project - Working Landing page 

---

Instruction 

Progress of Project 2    

Fig 1.1 Input google font (02.12.2022)

I have chosen the google font which are Yeseva Regular and Playfair for the entire project. Yeseva Regular is for the title: ExtraOrdinary.

Fig 1.2 Adjusting the height of the subheader (02.12.2022)

I struggled with putting the first image as the background image and have the text over the image. However, it took me long it me to figure out and I have tried using <banner>, to execute this plan. 

 

Fig 1.3 <br> (02.12.2022)

By using <br>, the words will be broken down to the next line. This allowed me to align the long sentences to the center.

   

Fig 1.4 Aside right and left (02.12.2022)

For third page of the website, I have used aside right and left to locate the picture and text on the left and right as well as the fourth page. I have also used<b> to bold the title. 

Fig 1.5 Adjust margin(02.12.2022)

Fig 1.6 Adjust button(02.12.2022)

For the call-to-action button, I changed the button and colours when hovering.

Fig 1.7Adjust alignment of footer content(04.12.2022)

Fig 1.8 Import pictures of social media(04.12.2022)

Fig 1.8 Adding links to it (04.12.2022)

Progress of Final Project 

For the final project, we are tasked to create 4 pages and link them to Project 2. I have planned to create 3 pages for the products I have which are Cleanser, Toner, Moisturiser. The page's content will be different types of skin types for the product, and 1 page for the backstory of this brand

Fig 2.1 Working on first page (06.12.2022)

I have added the title of the page in the center. 

Fig 2.2 Adjust text alignment (06.12.2022)

Adjusting text alignment for each product in a column.

Fig 2.3 Adjust text alignment (06.12.2022)

I got confused with the alignment, row, and columns, so after few attempts, I realised that it was the row not the column that I should code.

Fig 2.4 Importing image (06.12.2022)

Fig 2.5 Changing the 'Moisturiser' padding (07.12.2022)

Fig 2.6  Working on the last page (08.12.2022)

I have also planned to input the story of the brand in 'Our Story' and 'About Us' button, 

Final Outcome 

Project 2 netlify app link: https://lenhoiyee-assignment2.netlify.app/

Final Project netlify link: https://lenhoiyee-finalproject.netlify.app/

Clickable pages: 

• Our Story 
• Cleanser
• Toner
• Moisturiser
• About Us

Reflection

To be honest, I am quite satisfied with the outcome I have due to how i did not like coding from the start. I kind of neglected this module but it was the module that I learnt a lot from. It is new to me, as I have never had any chance to come across coding stuff, and I hate all the complicated stuff, and for coding it's the rntire thing. I enjoyed the process designing the layout of the landing page and I was thinking aybe it would be fun to code them out. However, when I was working on project 2, I was panicked and nervous because of the time I have left, and the other incomplete assignments, I needed more time to explore, and try and error. All the codes are messy and complicated, I got confused many times and of course, I got panicked many times as well, I would say working on this module gave me the most panicked moments in my life. Well, on the bright side, I felt excited when I got the codes right and the outcome I wanted, that feeling is just like I am a genius! 

I would say this module let me experience different emotions at one time, worn-out, frustrated, panic, nervous, uncertain, all these emotions hit me the entire time. It was one hell of experience and at least after this module, I am able to do simple coding, and I am sure it will benefit me in the future even though UI/UX is not what I plan to pursue in my second year, but it was a new thing for me to learn in this semester.