Interactive Design - Final Compilation

 

Interactive Design-Final Compilation

Rafa Maritza Hertrian [0364958]

Bachelor of Design (Honours) Creative Media/ Taylor's University

Interactive Design GCD 60904

---

SUBMISSIONS

Exercise 1 - Web Analysis

WEBSITE 1: MISO TONE 

Creator: M-Hand,Inc.

Link: https://misotone.m-hand.co.jp/

Figure 1.1 Miso tone main web page

Miso Tone allows intended audiences to explore the beauty of Japanese shrines, temples, and ancient artifacts in Kyoto through high-quality images and cinematic clips. It also introduces the concept of 'Wabi-Sabi' which is explained to be the appreciation of the beauty of aging and evolving nature. 

Purpose and Goals of 'Miso Tone' 

• Purpose: This website mainly focuses on showing Japanese traditional temples, shrines, and artifacts throughout the centuries while also explaining several Japanese ideologies connecting to nature. This indicates that the website promotes the richness of Japanese tradition in this era of modernism. 
• Goals: The website might aim to make more people from all over the world informed about Japanese culture and motivated to explore it. 

Effectiveness of Communication of 'Miso Tone' 

This website is written in 2 languages which are English and Japanese. This is very effective as it allows people from around the world to peek into Japanese history while also being accessible for Japanese people to review their own culture in case they are not aware of some of the content. Miso Tone explains their concept and other terminologies in a very brief but sufficient text. They use languages that are easy to understand making this website suitable for a large range of audience. 

Visual Design Layout

• Color: In the layouts, Miso Tone mostly shows neutral earth colors such as Greenish brown (HEX #B7AF96) and beige (HEX #F3F0EA). This choice of colors compliments the calmness and peacefulness that this website trying to show on this website. This is proved by how slow and peaceful instrument is played on the website while the users go through the website. Using only two main colors to this website adds simplicity making the website looks more comforting. 
• Typography: Simpler fonts such as Figtree, Syncopate, and Zen Kaku Gothic New are used in this website to increase readability making it easier for users to enjoy and focus more on the imagery and the visuals given in the website rather than focusing too much on trying to read the text. 

• Imagery: This website consists of countless photographs and short movies to show parts of the shrines and temples, ancient artifacts, and other connecting images that complement their purpose of promoting Wabi-sabi. 

• Layout: Miso Tone has layouts that allow users to easily understand different parts of the website they can explore by listing the components. In other departments of the website such as the layout to show movies of the temples, they clearly show the preview of each movie and also name each of it by the temple/shrine names making it easier for users to choose movies they might be interested in watching. The Wabi-sabi department has an ordered layout of the contents of the Wabi-sabi which can make users interested to go through and read all of it.

Functionality and Usability 

• Navigation: The website provides navigation for each section of the website on one page making it easier for users to access the page they want to visit. It also provides a button on the top right-hand side that appears on every page allowing users to reopen the navigation page at any time

• Interactive elements: At the beginning of the page, the website makes users choose whether they want to go through the page with sound or not. If users choose to click the 'ON' button, calming and continuous music will appear as the website is opened. They also provide 3 choices of music at the top of the website screen and also an ON/OFF button. On each page, users can also click on the items they want to observe, the website will zoom images and play the videos the user clicks. 

Quality and relevance of the website content

The website gives introductions to several terminologies in the Wabi-sabi concept such as Zen, Shakkei, Karensansui, Roji, and Kokei. However, for the rest of the website parts, it does not contain information but rather focuses on the visuals and only the names of the items are provided. 

Website's Performance

• Load time: Every element that can be interacted with in this website loads excellently. It takes less than a second to get a response from any button. The load time of the website also did not take a lot of time. 
• Responsiveness: the website gives simple transitional animation as users scroll through the website. This adds visual attractiveness, making the website non-monotonous. 

Strengths 

• The website is simple and straightforward forward with consistency in colors and fonts making it comfortable to look at. 
• All elements such as sound, fonts, layout, and images are harmonized making the theme of the website clear. 
• There are no issues with the load time 
• can be used in different devices and works all the same way. 

Weaknesses

• In the "movie" section, the page slides horizontally while other pages slide vertically which can be confusing. It also moves that way by swiping up and down instead of left and right, it gives off an unsettling feeling. 
• The navigation page brings users to the same pages of each section but in different layouts. Users can confuse those pages as different ones as it is not consistent. 
• The website has a "view more" button but it does not lead anywhere which is unnecessary to add to the website. 
• At the beginning of the page, they highlighted "shrines and temples of Kyoto" but did not give any information/ introduction to shown temples and shrines other than their names. 

WEBSITE 2: YOY NATURA

Creator: Jumix

Link: https://naturafood2u.com/hi-yoyo/

Purpose and Goals

• Purpose: The purpose of this website is to promote a brand of healthy food products from Southeast Asia made with natural ingredients. The contents of this website show that the brand does not only focus on promoting its product but also promotes healthy alternatives of everyday food ingredients that most people are using. 
• Goals: The goal of the website is to allow users to learn more about the products that the company offers in a simple yet fun way.  

Effectiveness of Communication

This website consists of texts and images to introduce the contents of the product that they are selling. Some of the images are used to clarify the text making it easier to understand but some illustrations just appear to make the website look more intriguing. It also contains readable headlines that show what the long text is about. 

Visual Design Layout

• Color: The website consists of various colors, mostly earth-toned colors that complement the idea of healthy products that connect to nature. 
• Typography: The website only consists of 1 font which creates unity to the website. Not only that the font the same, but the colors used in most of the texts, excluding the highlighted ones, are all also the same. All of the texts are mostly written in dark brown. 
• Imagery: The website has cartoon illustrations with a consistent decoration which is also one of the ways to communicate their message to the users. Not only illustrations, they also provide images of their products. 

Functionality and Usability 

• Navigation: in the top right of the website, they provide a button that brings users to a list of the components of the website. This allows users to choose the location of a page they want to be on at any moment 

• Interactive elements. The website consists of interactive items such as “contact us”, a subscription button, a shortcut to their WhatsApp information, etc.
  

Quality and relevance of the website content

The contents that are placed on the website are several introductions and explanations to their products, the company’s purpose, and a little narrative in the brand’s new series. These contents are brief and written with language that is easy to understand. The contents inside the website each has its own role to promote the products that are sold by the Yoy Natura brand. They are organized neatly based on the categories and labels making it easy for users to explore all of the items offered by the company. 

Website's Performance

• Load time: every button or shortcut inside this website loads in less than seconds. However, it took a few seconds for the main page to load when opening the website for the first time.
• Responsiveness: All of the items that can be interacted with on this website respond very well when it is interacted with. Every button transfers users to the page according to its symbol/label. 

Strengths 

• The website uses original and consistent illustrations which makes the website memorable and attractive 
• It contains multiple access to contact the company so that the customers can reach out easily
• The navigation is clear and straightforward making it easier for users to explore the website 
• At the bottom of the page, there are logo certificates that show how the brand is credible

Weaknesses

• On the main page, they did not immediately show that the website is about a food brand but instead, they just started with a fictional story. This can be puzzling as the main page should summarize the whole website. 
• Some of the contents are missing in this website which makes it look less professional

Exercise 2 

Exercise 3: Recipe Card

https://coconutcreampierecipe.netlify.app/ 

Project 1 Digital Resume Prototype

CV Final JPG

Project 2 - Working Web

https://rafamaritzacv.netlify.app/ 

Project 3 - Single page Website

https://w2efinalproject.netlify.app/

---

REFLECTION

Learning about creating sites from HTML is a whole new experience for me. It was a challenge catching up with the tutorials but overall I felt that the new knowledge I have gained from this module motivates me to learn more on the field. This is because I realized that learning how to use HTML and CSS is a very important skill to have on this age where almost everything is digital