Interactive Design | Project 2: Working Web Page

-
19.06.2024 - 01.08.2024 / Week 9 - Week 15
Khu Ying Ying / 0357306
Interactive Design / GCD60904 / Bachelor of Design (Honours) in Creative Media
Project 2: Working Web Page

TABLE OF CONTENTS


 

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1XxZ4GlWre0iUTmrVDC7BdScj8GtVotBm/preview" width="640" height="480" allow="autoplay"></iframe>

PROJECT 2: WORKING WEB PAGE

Week 15 (01/08/2024)

Objectives:
  1. Transform the static prototype from Project 1 into a fully functional and interactive web page.
  2. Create a working website that closely aligns with the original prototype from Project 1.

Requirements:
  1. Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
  2. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
  3. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
  4. Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission

Progress:

Prototype

This was my prototype from Project 1.
Figure P2.1: Prototype, Week 15 (01/08/2024)

Before starting on the HTML and CSS for my resume, I listed the fonts and color codes here to make the work easier later on.
  • Fonts:
    • Kanit: Headings and subheadings.
    • Fira Sans: Normal (paragraphs).
  • Colour Codes:
    • #BEC6A0 (light green colour): Sections 1 and 3, and boxes in Section 2.
    • #FEF3E2 (cream colour): Sections 2 and 4.
    • #000000 (black colour): Fonts.

I began by typing all the resume contents in HTML with Adobe Dreamweaver.
Figure P2.2: Content in HTML, Week 15 (01/08/2024)

Then, I worked on the CSS. I tried my best to make it look as similar as possible.
Figure P2.3: CSS, Week 15 (02/08/2024)


Final Submission of Project 2.
Website: Link.

Figure P2.4: Final Submission of Project 2 - Webpage Screengrab, Week 15 (02/08/2024)

REFLECTIONS

Experience
Notes

QUICK LINKS


Comments

Post a Comment

Popular posts from this blog

Brand Corporate Identity | Task 1: Breaking Brand

-
Image
23.09.2024 - 07.10.2024 / Week 1 - Week 3 Khu Ying Ying / 0357306 Brand Corporate Identity / MKT62404 / Bachelor of Design (Honours) in Creative Media Task 1: Breaking Brand TABLE OF CONTENTS LECTURES     Week 1 (25/09/2024)  Introduction     Week 1 (25/09/2024)  Brand     Week 1 (25/09/2024)   Types of Marks     Week 1 (26/09/2024)   Brand Ideals     Week 1 (26/09/2024)   Positioning INSTRUCTIONS TASK 1: BREAKING BRAND     Week 1 (23/09/2024)  Grouping & Research     Week 2 (30/09/2024)   Google Slides     Week 3 (06/10/2024)   Final Submission of Task 1 FEEDBACKS REFLECTIONS FURTHER READING QUICK LINKS LECTURES Week 1 (25/09/2024) Introduction Brand Corporate Identity: ...
Read more

Brand Corporate Identity | Task 2: Logo

-
Image
23.09.2024 - 30.10.2024 / Week 1 - Week 6 Khu Ying Ying / 0357306 Brand Corporate Identity / MKT62404 / Bachelor of Design (Honours) in Creative Media Task 2: Logo TABLE OF CONTENTS LECTURES INSTRUCTIONS TASK 2A: RESEARCH & ANALYSIS     Week 2 (30/09/2024)   Collecting Logos & Google Slides     Week 3 (10/10/2024)  Final Submission of Task 2A TASK 2B: IDENTITY SYSTEM     Week 1 (23/09/2024)  Career Choices     Week 2 (29/09/2024)   Mind Maps     Week 3 (07/10/2024)   Sketches     Week 4 (19/10/2024)   Digitisation     Week 6 (29/10/2024)  Adjustments & Digitisation     Week 6 (30/10/2024)  Final Submission of Task 2B FEEDBACKS REFLECTIONS FURTHER READING...
Read more

Interactive Design | Exercises

-
Image
23.04.2024 - 01.08.2024 / Week 1 - Week 15 Khu Ying Ying / 0357306 Interactive Design / GCD60904 / Bachelor of Design (Honours) in Creative Media Exercises TABLE OF CONTENTS LECTURES     Week 1 (23/04/2024)  Introduction     Week 1 (24/04/2024)  Usability : Designing Products for User Satisfaction     Week 3 (07/05/2024)  Understanding Website Structure     Week 4 (14/05/2024)  Web Standards     Week 5 (21/05/2024)  HTML & CSS     Week 7 (05/06/2024)   CSS Selector     Week 9 (18/06/2024)   Box Model TUTORIALS     Week 2 (30/04/2024)  Prototype Design INSTRUCTIONS EXERCISE 1: WEB ANALYSIS     Week 1 (24/04/2024)  Website 1: Poison Studio     Week 1 (24/04/2024)  Website 2: Fiteg² - Protein Smoothies EXERCI...
Read more