Interactive Design - Final Project/ Design, Exploration and Application

July 02, 2024

Interactive Design - Final Project/ Design, Exploration and Application

02.07.2024 -03.08.2024 / Week 11 - Week 14

Siang Huey Yee / 0369549

Interactive Design / Bachelor of Design (Honours) in Creative Media

Final Project: Design, Exploration and Application

OUTLINE

INSTRUCTIONS

BACK TO OUTLINE

Module Information Booklet

FINAL PROJECT - DESIGN, EXPLORATION & APPLICATION

BACK TO OUTLINE

Project Overview:

Create a single-page website dedicated to your favorite topic to develop web design and development skills.
Showcase your passion for the topic through engaging content and design.

Project Requirements:

Artist Selection: Choose a favourite topic you're genuinely interested in; ensure the site has a clear goal and content.
Content: Include at least 5 sections explaining the topic with engaging, significant content, and one CTA button reflecting the content.
Design Elements: Select a colour scheme and fonts that reflect the topic's style or your taste, ensuring a visually appealing layout with balanced text and multimedia.
Responsive Design: Ensure the website adapts to different screen sizes for a mobile-friendly experience.
Navigation: Implement smooth scrolling navigation or a simple menu for easy access to different sections.
Interactivity: Add interactive elements like image sliders, hover effects, or lightboxes for multimedia content.

1) Wireframe Sketch

I first designed my final project by considering which topic I was most interested in, ultimately deciding to create a single-page website about my favorite K-pop artist, IU (Lee Ji-Eun). I began by sketching out the wireframe for my website. After finalizing the wireframe, I presented it to my lecturer, Mr. Shamsul, for approval during a feedback session. Mr. Shamsul approved my wireframe and advised me to proceed with the prototype design.

Figure 3.1a Wireframe Sketch

Figure 3.1b Wireframe Sketch

Figure 3.1c Wireframe Sketch

2) Prototype - FIGMA

I completed my first attempt at designing the prototype for my single-page website.

Figure 3.2a My First Attempt - Prototype Design (FIGMA)

After receiving feedback from Mr. Shamsul on my prototype design, I made several modifications. I adjusted the alignment of the Profile section to make it more visually appealing and aligned the boxes in the Song Albums section to ensure they are evenly spaced. Additionally, I added a logo to the header section.

After presenting the modified prototype design to Mr. Shamsul, he recommended that I proceed with coding the HTML and CSS in Adobe Dreamweaver. He also suggested using Bootstrap for reference and incorporating embedded code for the song albums from Spotify.

Figure 3.2b IU Fansite Prototype Design (FIGMA) - PNG

Figure 3.2 IU Fansite Prototype Design (FIGMA) - PDF

3) HTML & CSS - Adobe Dreamweaver

I proceeded with coding the HTML and CSS for my website in Adobe Dreamweaver. During the Week 14 feedback session with Mr. Shamsul, I presented the half-completed website code. He noted that the overall design looked good but suggested a few adjustments: updating the navigation bar, choosing a more suitable typeface, adding the embed code for the song albums from Spotify, and making some adjustments to the carousel in the movies and drama section.

Figure 3.3a HTML Code (Adobe Dreamweaver)

Figure 3.3b CSS Code (Adobe Dreamweaver)

4) NETLIFY

After making all the required and suggested modifications, I uploaded my file to Netlify for submission.

Figure 4.1 Netlify

Figure 4.2 Final Project - IU Fansite (Full Size Screenshot)

Figure 4.3 Final Project - IU Fansite (Song Albums Screenshot)

Here is a screenshot of the full capture of the website. However, the screenshot did not capture the embedded song album from Spotify for some reason. Therefore, a screenshot of the Song Albums section from the actual website is provided for reference. Please refer to the Netlify link below for the full view of the website.

Netlify Link: https://iu-fansite-2024-hueyyeefinalproject.netlify.app/

FEEDBACK

BACK TO OUTLINE

Week 11:

Mr. Shamsul approved my wireframes and asked me to proceed with the prototype design. However, he also recommended preparing alternative plans in case the chosen wireframe does not work with the prototype design or the HTML and CSS coding for the final website.

Week 12:

Mr. Shamsul also approved the initial prototype design I created on the Figma platform. He advised me to make some adjustments to the alignment of the Profile section to enhance its visual appeal and to align the boxes in the Song Albums section to ensure they were evenly spaced. After implementing these adjustments, Mr. Shamsul suggested me to proceed with the HTML and CSS coding for the final website. He also recommended using Bootstrap for reference and incorporating embed codes for the song albums from Spotify.

Week 14:

During the Week 14 feedback session with my lecturer, Mr. Shamsul, he reviewed my half-completed website and HTML and CSS code. He commented that the overall look was good but suggested some adjustments to enhance the final website. He recommended updating the navigation bar, selecting a more suitable typeface, adding the embed code for the song albums from Spotify, and making adjustments to the carousel in the movies and drama section. He indicated that I could make my submission after implementing these changes.

REFLECTION

BACK TO OUTLINE

Throughout this Final Project, I had the opportunity to explore various topics and designs for my own website. Ultimately, I chose to focus on my favourite K-pop artist, IU. I thoroughly enjoyed creating a website dedicated to IU, as it allowed me to learn more about her information and lifestyle. Additionally, I had the chance to design a single-page website, where I get to decide on the theme, color scheme, content, and layout by myself. This project greatly strengthened my skills in utilizing HTML and CSS code. Furthermore, I received extremely helpful feedback from my lecturer, Mr. Shamsul, which enabled me to produce a more satisfactory outcome for this final project. This process not only deepened my understanding of web design but also allowed me to create something personally meaningful and enjoyable.

Search This Blog

Siang Huey Yee (0369549)