Interactive Design GCD60904/Final Project:Design, Exploration and Application

22/06/2024 - 28/07/2024 (Week 8 - Week 14)

Shao Han/ 0369187

Interactive Design / Bachelor of Creative Media Design (Honours)

Final Project: Design, Exploration and Application

TABLE OF CONTENTS

1. Instructions
2. Lectures
3. Project
4. Final Submission
5. Reflections

INSTRUCTIONS

LECTURE 

Week 11

Lecture slides:

PROJECT

Job requirement

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.

Website planning

I chose a game I like to make, which is called Love and Deep Space. Before starting to design the page layout, I thought about the page sections I needed to use, and based on these sections to carry out a preliminary layout planning and web page framework production. Because the overall style of the game is dreamy and surreal, I chose a simple font and a blue-white-purple color match when designing.

Website Content 

I use figma to design the appearance of my specific web page, and what I imagine is a long-screen web page that can view different information in the web page by clicking on different section names.

Fig1.1 Module layout，Week 11 (2/7/2024)

The page layout design diagram is taken after completing the detailed design page of the final web page. The following is the detailed website page and production process of figma.

Fig1.2 Figma production,Week 11 (2/7/2024)

Figma Link

Page Code

In the 12th week, I started writing web pages on DW. In the process, I changed some pictures in figma because I wanted the pictures on the page to be clearer.

Fig1.3 DW process，Week 12 (8/7/2024)

Fig1.4 DW process，Week 12 (8/7/2024)

Because the web pages I drew needed to apply the relevant knowledge of js, I began to search for relevant knowledge points on youtube and some video sites, and tried to apply them to my web page production.

Fig1.3 Learn how to write js，Week 12 (8/7/2024)

But obviously, it was too difficult for me to write js, so I asked chatgpt and some friends for help. They taught me how to improve the basic js coding given by chat, so that my js was successfully applied to web page production.When they taught me, I deeply felt the complexity of js.It is so complicated that it took me a long time to understand it.

CSS Code:

HTML Code:

FINAL SUBMISSION

LINK（ Netlify(computer)

LINK（ Netlify(mobile phone)

FEEDBACK

Figma should be made with pictures to ensure integrity, and Mr. Shamsul suggested that I add footers when designing sketches, which is very important.

REFLECTION

The most center of interaction design is how users feel when employing a item  and how the item looks and works. I learned how to make a straightforward and user-friendly plan.

Making models and testing them with clients are vital steps in making great plans for association with items. I learned how to utilize apparatuses to rapidly make wireframe outlines.

The course educates imperative thoughts and rules for planning intelligent, like keeping things the same, making beyond any doubt they are simple to utilize, giving input, and permitting simple route. These rules offer assistance me keep my plan the same and organized, which makes it way better for clients. When making route menus, I center on keeping the format and how it works the same, so clients can effortlessly begin utilizing it.

By and large, this Intuitively Plan course has made a difference me make strides a parcel in both information and aptitudes.