Interactive Design - Task1

-

Interactive Design - Task1

20.4. 2026 - 

week1-week14
HIYORI HYAKUICHI
Interactive Design / Bachelor of Design (Honours) in Creative Media
Taylor's University

TABLE OF CONTENTS

1. INSTRUCTION
2. LECTURE
3. PROCESS WORK
4. FEEDBACK
5. REFLECTION

1. INSTRUCTION


2. LECTURE

week1: 
Introduction to Interactive Design.

Downloaded the software and checked the websites that will be used in class.

  • Visual Studio Code (software)
  • W3Schools (website)

Week2 : 

  • Learned how to write code by referring to W3Schools.
  • Created our own sample website.


Week 3 : 

  • Presented the website created by our group and received feedback from the lecturer.


Week 4 :

  • Continued learning the content on W3Schools.

3. PROCESS WORK
In this class, we will use Visual Studio Code to write HTML code.
In Task 1, students will form groups of 3 to 4 members and create a small-scale service that can be used on a website. For each website, students will present and orally explain: what the website does (its purpose and target users), how it is different from similar websites, and the actual layout they plan to create.

Group Theme: Virtual Study Space

About Virtual Study Space:
Virtual Study Space is a website where users can study together even from a distance. It is designed to create a study atmosphere and help users feel more immersed and focused on their tasks, as they can see that other users are also studying.

Unique Value Proposition (UVP)​ : Free study environment that recreates the feeling of studying together with gamification features to make studying more engaging.

 Primary Goal : To improve students’ productivity and consistency by providing a virtual study environment imitate real life group studying and decrease any distractions. 

Target Audience : Students

The role of each member : 

Jocelyn:

During the planning stage, she came up with the idea of creating a virtual study space with a subscription plan, which became our final idea. For task 1, she sketched the layout of the website and created the illustrations used as a background, character, and elements of the website. Come up with the overall idea of the features of the website.

Gemma:

During the planning stage, she came up with the idea of a website for thrifted clothes. For task 1, she created the core user flow, moodboard, and sitemap. 

Grace:

During the planning stage, she came up with the idea of a photobooth website that delivers physical copies to customers. For task 1, she also created the moodboard, core user flow, and the site map.

Hiyori:

During the planning stage, I further developed the thrifting website idea by adding a filter feature. For task 1, I did some research on 3 existing websites that are similar and anylse thir strength and weaknesses. From there, I thought of the possible features that we can have for our website.

(Fig1.1 website layout)

(Fig.1.2 Compare with other websites)

(Fig.1.3 layout1)

(Fig.1.4 layout2)

(Fig.1.5 layout3)

(PDF: Presentation slide)
During class

Class Content

  • In class, we mainly learn HTML using the software Visual Studio Code while referring to the W3Schools website.

Topics learned:

  • How to add text, adjust text size, and change fonts
  • How to change text colors
  • How to add backgrounds / text backgrounds
  • How to create borders
  • How to change icons
  • How to create links
  • How to insert images
(Fig.2.1 html website page)

(Fig.2.2 html website page)

(Fig.2.3 html create borders)

(Fig. 2.4 html link and picture)

4. FEEDBACK

Week 1

  • Changed the idea from a photobooth to a virtual study website.

Week 2
  • We conducted a class using W3Schools to learn HTML coding (using Visual Studio Code).
Week 3
  • Replaced comparison website images with more appropriate ones (Flocus, LifeAt, StudyStream).
  • Changed the flow line so that account creation is connected to character customization.
Week 4
  • Learned HTML using Visual Studio Code with reference to W3Schools. 

5. REFLECTION

In this class, I used Visual Studio Code and created code for the first time. Since it was my first time properly learning HTML coding, I was confused at first and could not understand how everything worked. However, by using W3Schools and following the lecturer’s explanations, I gradually started to understand it better.

I learned many things such as how to insert images, create borders, change text colors, and adjust font sizes. I also learned how to change the website icon (favicon). Through this experience, I was able to learn and understand the internal structure of websites and develop my coding skills.


Comments

Post a Comment