Interactive Design - Final Project

 23/06/2024 - 28/07/2024 

Week 11 - Week 14

Yang Jiayi (0369288) / Bachelor Of Design In Creative Media

Interactive Design / Final Project | / Design, Exploration and Application

---

INSTRUCTION 

---

Tasks

Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.

Project Requirements:
Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.

Content:
Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.  

Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).

Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

We chose a theme and made a draft on Figma. The theme I chose was my favorite Korean girl group BLACKPINK. I started making a draft.

fig1.1 Figma Draft Design

figma link：https://www.figma.com/design/ZfMTC7g4Y8ScTaYWcngNHq/Untitled?node-id=0-1&t=VFXvdgZpt1Vea4Z6-0

I started designing my homepage. My navigation bar is divided into five parts. The first part is the homepage, the second part is the information of the entire group, the third part is personal information, the fourth part is the album of the group, and the last part is contact us.

fig1.2 DW page design

I added a floating label effect to the last section. I searched online for how to add this code

fig1.3 DW page design

fig1.4 DW page design

CSS Code:

HTML Code:

Final website link：https://66a7b2e5a7aa1518222ec30b--meek-arithmetic-e68b18.netlify.app/

REflection

This semester is my first time to contact with website design. I started from the basics to understand the basic code, and learned a lot of syntax and logic of the code. I began to understand how difficult it is to create the web pages we have browsed before. I found that coding is not easy. It is also a very important thing in the process of designing the layout of the code, because the website we design needs to be attractive, and it is not just simply arranged through HTML, so CSS is very important. I learned JS online. In order to make the simple web page a little more interesting, I added a little sliding interface effect. So in the process of making a web page, patience and perseverance are very important. Learning code for the first time opened my eyes. I think this process is very interesting. Although the production process will be difficult, when I found that the web pages we usually see can be completed through some coding, I think it is very meaningful. Although the future major is not to learn coding, this learning experience process is very important for me to learn any knowledge in the future. I am very happy that this semester has allowed me to learn different knowledge. I hope I will create good works in the future.