Interactive Design - Final Project: Design, Exploration and Application
INTERACTIVE DESIGN GCD 60904
WEEK 08 - WEEK 14 (12.06.2024 - 14.07.2024)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 04
Interactive Design - Final Project: Design, Exploration and Application
- LIST -
TABLE OF CONTENT
1. Instruction
2.1.1 Visual Reference
3. Feedback
4. Reflection
1. INSTRUCTION
Module Information Booklet (MIB)
<iframe
src="https://drive.google.com/file/d/1YEH0Ri7vzbhdZBqUNjLtI80L6MrIDxmn/preview"
width="640" height="480" allow="autoplay"></iframe>
2. FINAL PROJECT: DESIGN, EXPLORATION AND APPLICATION
To-Do list
- Create a single-page website for your chosen artist
- Include the artist's name in the header plus a simple tagline
- Insert an introduction section
- Insert a section biography of said artist
- Insert an image gallery
- Add in the contact information
2.1 Theme choosing and Proposal
This assignment allows us to freely design and develop a single-page microsite
focused on a lifestyle theme. Our aim is to create an immersive and visually
captivating microsite that effectively communicates the chosen lifestyle theme
and engages users through thoughtful design and interactive elements.
Therefore, I decided to create a website fan page about Seventeen, a K-pop
male group.
Theme: Fan Page for Seventeen
2.1.1 Visual References
I have made a mood board as a visual references.
Also, I have refer to their Official Website (Click
HERE).
.png)
Figure 2.1 Visual Reference (Moodboard)
Colour Palette
Figure 2.2 Colour Scheme for website
2.2 Figma Interface Designing (Wireframe)
Mr Shamsul told us to come out with at least 5 design of wireframe.
2.2.1 Low-Fidelity wireframe (Figma)
Low-Fidelity wireframe (Figma)
📌 Link to Figma: Click
HERE
2.2.2 High-Fidelity wireframe (Figma)
After the feedback session on physical class, I choose one of the low-fidelity
wireframe sketches and develop into high-fidelity wireframe.
High-Fidelity wireframe (Figma)
📌 Link to Figma: Click HERE
2.3 Adobe Dreamweaver Coding
Before start to code, I first double check that I have already download all
the picture I need.
Figure 2.3 Dowloaded the photo that gonna be used in website
HTML Structure
HTML Structure (PDF Version)
CSS Styling Structure
CSS Styling Structure (PDF Version)
JavaScript Interactivity
JavaScript Interactivity (PDF Version)
Website Navigation Video
Video 01 Website Navigation Video
2.4 Final Submission of Website Link
📌 Website link: Click
HERE
2.4.1 Screengrab of website (PDF Version)
Screengrab of Website in Desktop
3. FEEDBACK
No feedback given by Mr Shamsul.
4. REFLECTION
After four weeks of hard work, I designed a single-page microsite centered on
Seventeen. The project aimed to create an engaging and visually compelling
site that everyone can know about Seventeen. I focused on introducing them to
people, and hope them can know about Seventeen. This experience helped me
refine my skills in visual design and user engagement while creatively
expressing the Kpop Culture. The project also highlighted the importance of
cohesive design and functionality in enhancing user experience. So far so good
hhahaaaha.
