Interactive Design / Final Project
29.6.2024 - 3.8.2024 / Week 10 - Week 15
Bong Sue Zhiun / 0366866
Interactive Design / Bachelor of Design ( Hons ) in Creative Media
Final Project / Single Page Lifestyle Microsite
TABLE OF CONTENTS
1. Instructions
3. Feedback
4. Reflection
INSTRUCTIONS
FINAL PROJECT
Final Project: Single Page Lifestyle Microsite |
For the final project, we'll design and build a single-page website centered around our favourite lifestyle topic. This project will not only enhance our web design and development skills but also give us the opportunity to showcase our passion for a topic we love.
Requirements:
1. Topic Selection:
- Choose a lifestyle topic we're passionate about. Define the website's goal and ensure the content is clear and engaging.
2. Content:
- Include at least 5 sections that thoroughly cover our topic.
- Make the content engaging and relevant.
- Add a CTA button that complements the content.
3. Design:
- Select a colour scheme and fonts that match our topic or personal style.
- Ensure a visually appealing layout with a good mix of text and media.
- Make the design responsive, suitable for all screen sizes.
4. Navigation:
- Use smooth scrolling or a simple menu to help users easily navigate between sections.
5. Interactivity:
- Add interactive elements like image sliders, hover effects, or lightboxes to enhance the user experience.
To begin this project, I first created a proposal outlining my topic and the structure of the content.
I plan to make a fan page for Stray Kids where I’ll share my love for the group, write about their music and performances, and talk about my concert experiences. It will be like a blog all about Stray Kids.
Fig.1.1. Proposal , Week 11, 3.7.2024
After receiving Mr. Shamsul's feedback, I promptly started creating the prototype based on his suggestions to save time. In this phrase, I’m uncertain about which layout to choose. I’ve reviewed numerous references for inspiration but haven’t yet found the direction I want to pursue.
 |
| Fig 2.2. First Attempt , Week 11, 4.7.2024 |
The issue is that I want the website to have a more elegant style since it’s like my blog, but I feel that Stray Kids' image would be better suited to a playful style. So, I decided to change the colour palette to black, blue, and white to match the photos of Stray Kids that I want to use on the website. Also, I created another layout similar to the first one but explored more sections this time.
Fig 2.3. Second Attempt , Week 12, 11.7.2024
However, I’m still feeling stuck because I haven’t decided on the content yet, so I’m unsure how long it will be. I also don't know how to proceed with the community interaction section and the footer (About Me). To save time, I decided to shift my topic from a blog-style fan page to a more professional one, similar to an official fan page. I also changed the colour theme again because I believe black and red are signature colors for Stray Kids, as their logo features these two colours.
Fig 2.4. Proposal ( Third Attempt ), Week 12, 11.7.2024
After that, I started working on the prototype based on my wireframe. I also added content to ensure the layout would work effectively. Here's the result of the prototype for the Stray Kids fan page:
Fig 2.5. Prototype ( Third Attempt ), Week 13, 18.7.2024
Moving on, I began coding the prototype using HTML and CSS.
Progress:
1. Header & home
 |
| Fig 2.5. Process work of header & home, Week 14, 25.7.2024 |
2. News
 |
| Fig 2.6. Process work of news, Week 14, 25.7.2024 |
3. About
 |
| Fig 2.7. Process work of about, Week 14, 25.7.2024 |
4. Profile
 |
| Fig 2.8. Process work of profile #1, Week 14, 25.7.2024 |
 |
| Fig 2.9. Process work of profile #2, Week 14, 25.7.2024 |
5. Discography
 |
| Fig 2.10. Process work of discography, Week 14, 25.7.2024 |
6. Gallery
 |
| Fig 2.11. Process work of gallery, Week 14, 25.7.2024 |
7. Tour
Fig 2.12. Process work of tour, Week 14, 25.7.2024
8. Subscription & footer
 |
| Fig 2.13. Process work of subscription & header, Week 14, 25.7.2024 |
9. Media queries
Fig 2.14. Screenshot of the website on my phone, Week 14, 25.7.2024
 |
Fig 2.15. Process work of media queries, Week 14, 25.7.2024 |
Final Project / Single Page Lifestyle Microsite
Fig 2.15. Final Project : Single Page Lifestyle Microsite, Week 15, 1.8.2024
FEEDBACK
Week 11
Specific Feedback: I should shorten the section names in the navigation and use the same font for the sub header, body, and navigation, but with different variations. Mr Shamsul recommended following the layout and style of visual reference #1. Additionally, he noted that my current wireframe is too plain and advised me to look at the Boyz II Men official website for inspiration.
REFLECTION
This project was really enjoyable because I got to work on something I'm passionate about, Stray Kids. It was exciting to create a fan page for them. However, I found out that making a professional and clean website isn't easy. It was challenging to find the right balance between professionalism and the playful vibe of Stray Kids. I spent a lot of time at the start just trying to figure out the right direction for the website, which was frustrating.
At first, I felt stuck and wasn't sure how to continue. I tried different layouts, color schemes, and content structures, looking for the best way to represent the group and make the page appealing to fans. There was a lot of trial and error, and it sometimes felt like I wasn't getting anywhere.
Luckily, as the deadline got closer, I started to understand what I wanted to do and how to do it. I decided to change the concept from a blog-style fan page to a more professional, official-style fan page. This change helped me focus on the design and content. Even though this realization came a bit late, it helped me finish the project on time.
In the end, the project felt rushed, and I know there are areas where it could be better. Still, I'm happy with what I managed to do, given the time constraints and challenges. The final website isn't perfect, but it shows the skills and knowledge I've gained over the last 14 weeks. It's proof of my growth and learning in web design and development, and I'm proud of the work I've done.
Comments
Post a Comment