Interactive Design

05/04/2023 - 25/04/2023 / Week 1 - Week 14

Hayato Saito / 0350466

Interactive Design / Bachelor of Design in Creative Media
INTRODUCTION

EXERCISES

・Exercise 1: Web Analysis

   - Process

Fig.1.1 Hyer landing page

The purpose and the goals of the website


This website is called Hyer. It is the website to book the private flights that are already shared or to book private flights that can be customized with customer’s needs so the purpose and goals of this website are to provide the customers the flights which have more flexibility and to provide a more comfortable flight experience. It is really easy to understand what they are trying to provide because there are a plane in the middle and short descriptions on the right and left bottom and buttons to book on the right bottom which allows user to understand what this website is about really effectively.



Fig.1.2 Hyer landing page


Fig.1.3 Hyer landing page


Fig.1.4 Hyer landing page


Fig.1.5 Hyer about us page

The visual design and layout of the website

The layout is really simple and well-balanced. They use mostly bold simple typography and simple color palette which are black, white, dark blue, and greenish gray.  In Fig.1.1, the big name of the company is really impactful and the contents and background create high contrast which makes it easy to read and the different weights of the texts lead the viewer's eyes really effectively. That being said, there are a few parts that I think can be improved. Firstly, in Fig.1.2 I feel like this white space is pretty awkward so makes the user think there is a picture that isn't loaded properly It should be either aligned on the left or put the bold content on the right and put the other elements on the left. Secondly, in Fig.1.3 I feel like the heading is too big because it takes almost half of the screen and I don't think it's that important to be this big so I think it's not necessary to be this huge. Thirdly, in fig.1.4, the emoji they used ruins the whole mood of the website, and also they catch the user's eyes so it doesn't lead the viewer's eyes effectively. Lastly, in Fig.1.5, they used the greenish-gray color in the about us page as a background and I think it ruins the consistency of this whole website. Also, the edge of the image in the middle isn't rounded like the picture on the right so it kills the consistency of this website as well. 


Fig.1.6 Hyer landing page

The functionality and usability of the website and the quality and relevance of the website's content

Every place that you can click has animations or color changes so it's really easy to understand. As you scroll down from the landing page, there is general information about this company and the options that they have. and at the end, there is a book a flight button again which makes it easy for the users to book after reading all details.

The website's performance

The website's performance is really good everything works without any problems, the load is really fast, and the mobile website also works great as well.


Fig2.1 simply chocolate landing page

The purpose and the goals of the website
 
This is a website called simply chocolate. It's the website where we can buy many kinds of chocolates. The goal of the website is to sell chocolates.


Fig2.2 simply chocolate landing page


Fig2.3 simply chocolate landing page


Fig2.4 simply chocolate broken link

The visual design and layout of the website

The visual design is really enjoyable, joyful, colorful, and really interesting. They use so many colors and elements but this website still has consistency and harmony because all colors are used to match the color of each product. The layout is really simple and well-balanced. As you scroll down, different kinds of chocolates show up and there are ingredients that products include on the left top The background is divided horizontally in half, with the top half in colors related to the product and the bottom half with continuously moving image of the raw materials contained in the product. The 3D image of the product in the middle is very eye-catching, and the colors in the top half of the background make the text easy to read. And the 3D image has a very unique trick: by dragging the cutout down, you can open the product and see what it looks like and the details of the product. That said,  there was a broken link and I thought it was a little difficult to read because the categories in the upper right corner were written tilted 90 degrees to the side.

The functionality and usability of the website and the quality and relevance of the website's content

The website is really straightforward and easy to use because what you need to do is just scroll down to see many kinds of chocolate bars and drag down to look for more information about specific chocolate and click the shop when you want to buy the chocolate.

The website's performance

The website's performance is really really good. It's a responsive website I could do and see the exact same things like cool animations and dragging things in the mobile websites as well. 


・Exercise 2: Replicating a Website

Fig.3.1 


Fig.3.2


Fig.3.3


Fig.3.4 



・Exercise 3: HTML and CSS Document Development




・Exercise 4: CSS Layout



Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Final Compilation & Reflection

Image
05/04/2023 - 05/07/2023 / Week 1 - Week 14 Hayato Saito / 0350466 Advanced Typography / Bachelor of Design in Creative Media Final Compilation & Reflection INSTRUCTIONS Task 1:  Typographic Systems & Type & Play Task 2:   Key Artwork and Collateral Task 3:  Type Exploration and Application Submissions   Task 1: Exercise 1 - Typographic Systems (05/04/2023 - 03/05/2023 / Week 1 - Week 5) Fig.1.1  Final Axial System - JPEG (14/04/2023) Fig.1.2    Final  Radial  System - JPEG  ( 14/04/2023 ) Fig.1.3   Final  Dilatational  System - JPEG  ( 14/04/2023 ) Fig.1.4   Final  Bilateral  System - JPEG  ( 14/04/2023 ) Fig.1.5   Final Grid S...
Read more

Advanced Typography - Task 2: Key Artwork and Collateral

Image
03/05/2023 - 09/06/2023 / Week 5 - Week 10 Hayato Saito / 0350466 Advanced Typography / Bachelor of Design in Creative Media Task 2: Key Artwork and Collateral LECTURE Task 1: Exercises INSTRUCTION Task 2 (A): Key Artwork For Task 2 (A) we are to design a key artwork, which behaves as a logo and artwork. We are to use our name/initials. This key artwork will subsequently be used in Task 2B on various collateral. - Not necessarily legible - Artwork made from a type - Explore options - compositions etc - Almost monogram-ish - Certain level of simplicity - Elegant solution, visual communication - Artwork needs to be scalable 1. Ideation and sketches Fig.1.1 Sketches 1 (03/05/2023) I straight started working digitally because I found it easier. In the left design, I distorted the letter H and create a negative space that looks like the letter S. In the middle design, I changed the shape of the letter H to make it look like t...
Read more

Advanced Typography - Task 3: Type Exploration and Application

Image
31/05/2023 - 05/07/2023 / Week 9 - Week 14 Hayato Saito / 0350466 Advanced Typography / Bachelor of Design in Creative Media Task 3: Type Exploration and Application LECTURES Task 1:  Exercises INSTRUCTIONS For Task 3, we get to dictate our own project. We are to either design a typeface to solve a problem in the area of our interest (Graphic Design, UI/UX, Animation, Entertainment Design, or any other) or explore the use of a typeface in our area of interest. The end outcome would be the designed typeface in its application - any kind of format related to the issue being solved or explored: animation, 3D, print, ambient, projection, movie title or game title, use of different materials, etc. 1. Proposal of ideas Fig.1.1 Proposal - Google Slides (31/05/2023) These are the slides we were asked to make in the first week of this project to explain our ideas for this project. I chose graff...
Read more