Interactive Design - Final Project: Design, Exploration and Application

⭐ 3/7/2024 - 24/7/2024 (Week 11 - Week 14)

🎀 Yan Zhi Xuan | 0369425 

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

📚 Final Project: Design, Exploration and Application

---

TABLE OF CONTENTS

1. Lectures 

2. Instructions 

3. Final Project: Design, Exploration and Application

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. FINAL PROJECT: DESIGN, EXPLORATION AND APPLICATION

Introduction

In this assignment, we have the creative freedom to design and develop a single-page microsite centred around the theme of lifestyle. Our goal is to craft an immersive and visually appealing microsite that effectively communicates the chosen lifestyle theme and engages users through thoughtful design and interactive elements.

Hence, I decided to create a microsite about Y2K fashion.

Theme: Y2K Fashion

Fig. 3.1 Y2K fashion.

The Y2K look actually spans from the late 90s to the mid-2000s and was typified by scarf tops, boot cut jeans, velour tracksuits, pastels, metallics, cowl necks, pedal pushers (aka capri pants) and showy accessories, from furry bucket hats and trucker caps to bowling bags and butterfly clips.

Visual References

Fig. 3.2 Visual References.

Wireframes

I tried out 5 different layouts on Figma There were 5 sections: Home, Article, Photo Gallery, Expert

Testimonials, and Join us sections. 

Fig. 3.3 Wireframes on Figma.

The following are the 5 different layouts:

Fig. 3.4 5 Different Layouts.

Colour Scheme

Fig. 3.5 Colour Scheme.

Colours used: dark navy blue, bright blue, light pink, medium purple, light blue, and medium pink."

Typography

Fig. 3.6 Chosen Font Family.

The chosen font family: Righteous by Astigmatic

Prototype

I tried out the first wireframe to do a prototype.

Feedback: The Home section still has room for improvement. The distance between the 5 rectangles of the Article section still can be adjusted to look good. The background of the Join Us section can be darker.

Fig. 3.7 First Attempt - Prototype.

After getting feedback, I tried another one. I deleted some unnecessary designs from the previous prototype and changed some information and some ideas. The following is my chosen prototype:

Fig. 3.8 Second Attempt - Prototype (Chosen).

Work Progress

I designed my logo, figures, background images and other design elements using Adobe Illustrator and Photoshop. After designing, I export the design elements and compile them in the folder called images.

Fig. 3.9 Work Progress #1.

Fig. 3.10 Work Progress #2.

Fig. 3.11 Work Progress #3.

Fig. 3.12 Work Progress #4.

Visual Elements

After designing and editing, I exported the design elements and compiled them in the images folder.

Fig. 3.13 Visual Elements.

HTML

Doc. 3.1 HTML.

CSS

Doc. 3.2 CSS.

Final Outcome

Fig. 3.14 Final Outcome.

Fig. 3.15 Website Navigation Video.

Final Submission

Link to Netify/ Website: Y2K Fashion

---

4. REFLECTION

Over the past four weeks, I designed a single-page microsite centered on Y2K Fashion. The project aimed to create an engaging and visually compelling site that captured the essence of the Y2K era.

I focused on incorporating vibrant, nostalgic design elements and interactive features to immerse users in the theme. This experience helped me refine my skills in visual design and user engagement while creatively expressing the Y2K aesthetic. The project also highlighted the importance of cohesive design and functionality in enhancing user experience.