Interactive Design - Project 2

8 May 2023 - 5 Jun 2023/ Week 6 - Week 10
Sim Jia Min 0349784
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 2: Working Web Page

---

INSTRUCTIONS (MIB)

---

Project 2 - Working Web Page

Project details:

- transform your static prototype from Project 1 into a fully functional and interactive web page

- apply your knowledge of web layout class to create a working website that closely aligns with original prototype

- use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype

- aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes

- upload the file in Netlift/Github

Figure1.1: Project 1 - Landing Page Design Prototype

Here are the sources that I used for this project:

Fonts

https://fonts.google.com/

HTML & CSS

https://getbootstrap.com/docs/5.3/getting-started/introduction/

https://cdnjs.com/libraries/font-awesome

https://www.jsdelivr.com/package/npm/bootstrap-icons

https://cdnjs.com/libraries/animate.css (CSS animation)

Java Script

https://www.jsdelivr.com/

https://jquery.com/

Figure 1.2: Assets

Figure 1.3: Assets

Header - Topbar & navbar

Figure 1.4: Header - topbar & navbar

Figure 1.5: Header - Topbar

Figure 1.6: Header - navbar

Carousel (Call-to-action button)

Figure 1.7: Carousel 1

Figure 1.8: Carousel 2

Figure 1.9: Carousel (HTML)

Banner

Figure 2.1: Banner

Figure 2.2: Banner (HTML)

General Information 

Figure 2.3: General information

Figure 2.4: General information (HTML)

Latest News

Figure 2.5: Latest news

Figure 2.6: Latest news (HTML)

Footer

Figure 2.7: Footer

Figure 2.7: Footer (HTML)

Just a few screengrabs of style.css (not going to put it all here it's too long)

Figure 2.8: style.css

Figure 2.8: style.css

Figure 2.8: style.css

CSS from Bootstrap

Figure 2.9: Bootstrap CSS

This is a template, but definitely was a pain to customise.

Comparison of prototype and final webpage

Figure 2.8 (Left): Project 1 prototype

Figure 2.9 (Right): Final webpage

Well obviously the prototype looks way better than the final webpage, I don't think my final webpage does the prototype justice, but I really tried my best. 

Using HTML and CSS to create a working webpage was painfully time-consuming, and I get frustrated a lot when doing the coding because the difference between designing a website prototype and making a working webpage is way too brutal, especially for me who always only use to doing design.

SUBMISSION

Website link: https://jasminesim12.github.io/jiamin_landingpage/

Link to the code files: https://drive.google.com/drive/folders/100cKfdGzqQk9Cmw7Z4Ii_V6AwFoQlBWd?usp=sharing

Figure 3.1 Screengrab of the website

REFLECTION

Quite a humbling experience. While doing the coding of the landing page, I regret a bit what I did in the prototype design, because some of the elements were challenging to code. And I experience the big difference between designing a webpage VS making a working webpage. I enjoyed the creative process of designing the layout of the webpage, but definitely not enjoying the coding process, I found it bland and not as interesting, which is why it took me a while to finally finish the coding.