Interactive Design - Lectures & Exercise 1, 2 & 3

|| 23/4/2024 / Week 1

|| Chen TianYao / 0357550

|| Interactive Design / Bachelor of Design (Hons) in Creative Media

|| Lectures & Exercise 1,2 & 3

LECTURES

INSTRUCTIONS

EXERCISE 1 ["Web Analysis"]

The first website I choose to analysis is: The freshest udon as if it's alive. Marugame Seimen

Website Link: https://jp.marugame.com/en/

["Purpose"]

The purpose of the site is very straightforward, from the first moment the user enters the site, they will be attracted by a video that takes up nearly 80% of the screen, the content of the video is the process of noodle being made, even in the absence of any text modification, the user can also guess that this should be a restaurant advertisement.

["Layout"]

The whole site looks exceptionally clean, with no overly fancy backgrounds. The background is white, and only the food is bright and colorful, which allows the user to focus on the food, and at the same time, it is in line with the website's ["Goals and Purpose"]. There is also a catalogue on the left hand side of the site, which allows the user to get to know the "menu" and "ordering" information at the first time.

["Functionality"]

Although the website lacks a bit of fun flavour, it is simple and clear, and with the menu bar on the left side of the site, the user can get the main information about the menu, the location of the restaurant, the app and so on at first glance. At the bottom of the site, each option is broken down and the background color is grey to differentiate it from the rest of the white background, making it easy for users to pay attention and quickly find what they are looking for.

EXERCISE 1 ["Web Analysis"]

The second website I choose to analysis is: SCRIB3

Website Link: https://www.scrib3.co/

["Purpose"]

The purpose of this website is to introduce a team of designers to attract other clients to work with this team. In order to showcase the design and web production capabilities of the design team, the site uses a lot of special effects and animations. However, this also makes it difficult for the user to know the purpose of the site at first glance, and the font in the background is relatively difficult to recognise.

["Layout"]

This website has a unified colour scheme for the whole website whether it's text or pictures, it's a combination of black and purple, which makes the whole picture very harmonious.

["Functionality"]

There is a floating menu below the screen, this menu shows the screen in the catalogue position, the user can also directly click on the floating menu bar to quickly jump to the content they want to see. However, to be honest, I don't think this menu bar is designed to be so obvious that users may not notice him.

Exercise2- Web Replication

Fig2.1 Final Project

fig2.2 Final Project

process:

Exercise3- Creating a recipe card

In Exercise 3, we need to select a video and create a website. On this website, we need to create an external CSS file named "style.css" and apply CSS rules to style our recipe card.

The recipe I choose is: Yellow Cake with Chocolate Frosting

Final Project:

Link: https://exercise3-recipecard-chentianyao.netlify.app/