Interactive Design - Project 2: Working Web Page

⭐ 19/6/2024 - 29/6/2024 (Week 8 - Week 10)

🎀 Yan Zhi Xuan | 0369425 

💜 Interactive Design | Bachelor of Design (Hons) in Creative Media | Taylor's University

📚 Project 2: Working Web Page

---

TABLE OF CONTENTS

1. Lectures 

2. Instructions 

3. Project 2: Working Web Page

4. Reflection

---

1. LECTURES

Lecture Note: HTML & CSS

Doc. 1.1 Week 5 Lecture Note: HTML & CSS.

---

2. INSTRUCTIONS

Doc. 2.1 Module Information Booklet of  Interactive Design.

---

3. PROJECT 2: WORKING WEB PAGE

Introduction

Project 2 involved creating a fully functional web page with a focus on user experience and responsive design. The goal was to develop a web page that not only looks appealing but also performs well across different devices and browsers. The following is my prototype design of Project 1: Prototype Design. 

Prototype Design

I tried to analyse the initial prototype design we created in Project 1. Below is the original prototype layout I did in the previous project along with typography, colour palette, and images used.

Fig. 3.1 Prototype Design.

The development process began with wireframing and creating a basic layout. One of the initial challenges was ensuring the design was responsive. I used a mobile-first approach to address this, which helped in creating a flexible layout that adapts to different screen sizes. Another challenge was integrating various features such as forms and dynamic content. These were tackled by breaking down the tasks into smaller, manageable components and addressing each one systematically.

Typography 

Fig. 3.2 Chosen Font Families.

Roboto: https://fonts.google.com/specimen/Roboto

Righteous: https://fonts.google.com/specimen/Righteous?query=right

Colour Palette

Fig. 3.3 Colour Palette.

Image Used

Fig. 3.4 Images Used.

Work Progress

I started making the resume with Adobe Dreamweaver.

HTML 

Fig. 3.5 HTML development.

CSS

Fig. 3.6 CSS development.

Final Outcome

Fig. 3.6 Final Outcome - Project 2: Working Web Page

Link of Working Web Page (Netify): Resume

---

 4. REFLECTION

This project was an enriching experience that taught me the importance of planning and iterative development. I learned how to balance aesthetics with functionality and the critical role of testing in delivering a high-quality product. Moving forward, I will apply these lessons to future web development projects, with a continued focus on user-centered design and responsiveness.