Interactive Design · Final Project · Creating a Single-Page Website

-
3/7/2024 - /2024 / Week 11 - Week 14
Yang Zhi Ching / 0365154
Interactive Design / Bachelors of Design (Hons) in Creative Media
Final Project · Creating a Single-Page Website

Instruction

Doc 1.1 MIB of the module

In this web design project, we will create a single-page website dedicated to our favorite topic. The website should have at least five sections explaining the topic in an engaging and meaningful way, and include one call-to-action (CTA) button. The design should reflect our chosen topic with an appropriate color scheme and fonts, and feature a visually appealing layout with a balance of text and multimedia. Ensure the site is responsive and mobile-friendly. Implement smooth scrolling navigation or a simple menu for easy access to different sections. Additionally, consider adding interactive elements like image sliders, hover effects, or lightboxes to enhance user engagement.

Progress

1.    Sketch and Proposal

My Final Project Topic : Fan Page of Taiwanese Band "No Party For Cao Dong"

Content structure: Hero-section, News-section, Music-section (Album/MV), Tour-section, About-section. (5 sections total)

Visual reference: 

Fig 1.1 Band Photo, Week 11
Poster Reference
 
Fig 1.2 Album Cover of the Band, Week 11

 
Fig 1.3 Band Fanpage Website Reference, Week 11

Moodboard - Color scheme  (Primary, secondary, and ascent color), font choices (header, subheader, body copy, navigation)

I extracted the following colors based on the band's poster (flag).

Fig 1.4 Poster of the Band, Week 11

Fig 1.5 Color Scheme of Website, Week 11


Fig 1.6 Heading Font Chosen, Week 11

Fig 1.7 Content Font Chosen, Week 11
Wireframe ( > 5 sketches)

 
Fig 1.8 5 sketches of Wireframes, Week 11

2.    Sketch and Proposal

Based on the wireframe chosen, i proceeded it into Figma to have a complete prototype.

Doc 2.1 Prototype in Figma

6.    Final Outcome


Link to Website:


Screenshot Preview:
Fig 2.1 Final Preview, Week 14

Feedback

Week 11: Mr. Shamsul said my color theme and fonts is okay to move on, and he suggested me to go through by wireframe 3.

Reflection

| Experience |
Creating a fanpage for No Party For Caodong was an exciting and challenging endeavor for me. The lecturer's clear directions and the abundance of internet resources proved beneficial. The prior challenge helped me improve my core abilities and made me more comfortable with coding. Despite this, I had to balance the time allocated to this endeavor with other academic responsibilities, which caused considerable stress.

| Observation | 
One significant takeaway from this project was the significance of a well-organized content structure. Starting with a precise HTML layout made the CSS styling process go more smoothly than my last work. However, I encountered difficulties with sophisticated CSS methods and responsive design, which took more effort to understand and apply. 

| Findings | 
This task emphasized the importance of understanding both HTML and CSS in order to construct a visually pleasing and functional website. I decided that devoting more effort to mastering responsive design concepts and sophisticated CSS methods will greatly improve the quality of my work. Furthermore, greater time management tactics are required to guarantee that I can fulfill all of my academic obligations without being stressed.



Comments

Post a Comment

Popular posts from this blog

Application Design II · Task 2 · Interaction Design Planning & Prototyping

-
Image
21 April 2025 - / Week 1 - Week 7 YANG ZHI CHING / 0365154 Application Design II / Bachelor of Design (Hons) in Creative Media Task 2 · Interaction Design Planning & Prototyping INSTRUCTION Doc 1.1 MIB Requirements: 1. Interaction Design Documents: Creating detailed flowcharts and wireframes to map out user journeys,  creen layouts, and navigation paths. 2. Animation Prototyping Micro Animations: Small effects like button clicks, loading icons, and feedback states, prototyped in Figma. Macro Animations: Larger UI transitions or intro animations. I can use After Effects or reference similar examples if needed. 3. Explanation & Prese...
Read more

Experiential Design · Task 3 · Project Prototype

-
Image
21 March 2025 - 3 June 2025 / Week 6 - Week 11 YANG ZHI CHING / 0365154 Experiential Design / Bachelor of Design (Hons) in Creative Media Experiential Design · Task 3 |  Instruction Doc 1.1 MIB | Visual Design Prototype Concept and Theme | Together with my teammate Tze Wei, we decided on a theme centered around a "technological future" . To match this concept, we chose a light green color scheme and a minimalist visual style. The color light green symbolizes innovation, freshness, and comfort—qualities that align with our futuristic and user-friendly AR application. Fig 1.1 Reference Moodboard Design Guide | ...
Read more

Information Design · Exercises ·

-
Image
3 Feb 2025 - 10 Feb 2025 / Week 1 - Week 2 YANG ZHI CHING / 0365154 Infoemation Design / Bachelor of Design (Hons) in Creative Media Exercises · Quantifiable Information INSTRUCTION Doc 1.1 MIB Instruction | Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of marble ball 4. Set of colourful rubber strap In this exercise you're required to quantify our chosen objects and arrange them into  a presentable layout or chart .  The information must be presented as is, and you need to arrange the objects with relevant indicators written out with pens to help you to visualize the quantity and data. The examples of objects that can be use are buttons, coins, lego pieces, M&Ms, and more. Submis...
Read more