INTERACTIVE DESIGN，FINAL PROJECT

-

 INTERACTIVE DESIGN

Tuesday,April 23 .2024

2024.04.22/Week 1

Jia Wenbing /0365436/

Design principles/Bachelor of Design in Creative Media

 Final Project

LECTURE

INSTRUCTIONS

FINAL PROJECT

WEEK 11

Starting from week 11, I will start developing the final project. The first thing to progress is the planning stage. I need to prepare the following content for the teacher to check:

Content structure

Visual reference/design inspiration

Mood board - color scheme (primary color, secondary color and ascending color), font selection (title, subtitle, body, navigation),

Wireframe (> 5 sketches)

I am going to make a website about Hainan tourism in China, so I collected a lot of references of fulfillment websites and the color types I want to show, and made a draft model.

Fig 1.1 Visual reference Week 11   (05/07/2024)


Fig 1.2 Content structure Week 11   (05/07/2024)

Fig 1.3 Content structure Week 11   (05/07/2024)

Fig 1.4 Content structure Week 11   (02/07/2024)

I eventually chose the fifth line drawing design to make my final web page layout.

Fig 1.4 Content structure Week 13   (16/07/2024)

After the teacher's feedback, I made some simple changes to the layout, made the spaces on both sides consistent, and started to code.

HTML Code:

Fig 1.5 Web page HTML code Week 14   (25/07/2024)

Fig 1.6 Web page HTML code Week 14   (25/07/2024)

Fig 1.7 Web page HTML code Week 14   (25/07/2024)

Mr. Shamsul specifically reminded me to remember to add a footer to the website, which is very important.

CSS Code：

Fig 1.8 Web page CSS code Week 14   (25/07/2024)

Fig 1.9 Web page CSS code Week 14   (25/07/2024)


Final website link：https://lightheart-bubblegum-5ac5d1.netlify.app

Fig 1.10 Final website Week 14   (25/07/2024)

Feedback

WEEK 11
Mr. Shamsul hopes that my page can be more detailed and have an expand button.

WEEK 13
Mr. Shamsul looked at my design and suggested that I put the content title in a prominent position, or at the beginning of a content section, and keep the content on both sides on the same line to achieve visual optimization.

Reflection

This assignment allowed me to learn how to completely create a website. The process of creating a website requires me to have existing visual effects before starting to code, so that I can be more clear about my content. In the process of making the code, I encountered many problems, which are worth thinking about, but fortunately I solved them all. Through this assignment, I have a better understanding of professional knowledge about website design, and I have also learned a lot about HTML and CSS. This is very interesting to me. It is very similar to mathematics, but I only need to remember the corresponding code to use this command. In the future, I will learn more about this professional knowledge so that I can create better works.







评论

发表评论

此博客中的热门博文

TYPOGRAPHY TASK1

-
图片
Tuesday, September 26, 2023  2023.09.26-2023.10.17/week 1-week 4 Jia Wenbing /0365436/ Bachelor of Typography/Creative Media Design content: 1. Description   2.Lecture        Lesson 1 - Typo_0: Introduction       Lesson 2 - Typo_1: Development         Lesson 3 - Typo_3: Text_P1       Lecture 4: Text (Part 2)       Lecture 5 - Typo_2_Basic 3. Lectures:  face-to-face courses 4. Exercise        Task 1: Exercise - Font Design       Question 1: Exercise 2-Text Formatting 5. FEEDBACK 6.Reflection  7. Further reading
阅读全文

Minor Project-Compilation & Reflection

-
图片
MINOR PROJECT Friday,July. 25 .2025 21.04.2025 - 27.07.2025 | Week 1 - Week 14 Jia Wenbing /0365436/ Design principles/Bachelor of Design in Creative Media INSTRUCTIONS PROJECT  In the first week, we divided into groups and began to understand the content of our project. We were working on a healing VR meditation project, "WayangMind". First, we collected information to understand what types of products there were, including software, websites, etc., as well as data on the number of people who needed such products. Then we started to create user portraits. Since our target group is students, the user portraits are positioned on students. Later, we started our preliminary preparations for job hunting, started to create interview questions, and collected data. I participated in the question interview and asked friends around me about their thoughts on facing stress. Later we went to the company to visit the products and experience them, which was of greater help to us in our pr...
阅读全文

Information Design - Project 2: INFOGRAPHIC VIDEO ANIMATION

-
图片
  INFORMATION DESIGN Tursday,Feb. 27 .2025 Jia Wenbing /0365436/ Design principles/Bachelor of Design in Creative Media Project 2: INFOGRAPHIC VIDEO ANIMATION This time we need to make a basic video animation based on the FLIP group's research topic. Based on the instruction given by Mr. Shamsul, we have grouped a team of 8 people.  Rachel Yeo Rong Qing (Group Leader / Me)  Jia Wen Bing  Ruthlene Chua Zhen Si  Liu Zi Yu  Tan Jie Ying  Isabel Tan Xen Wern  Nadhrah Binti Abdul Razak  Myra Elida Binti Abd Azis Final Project First we came out with several topic such as cybersecurity, women's safety, recycling, traffic safety and more. After voting and getting feedback from Mr. Shamsul, we decide to go with  Cybersecurity  as our topic. Once the topic has been decided, we proceed to do the research. This is for helping us in creating the FLIP presentation slide. Based on the research above, we come out our FLIP presentation slide. After...
阅读全文