Labels

Interactive Design (Task 1): Exercise 1

22.9.2025 - 14.10.2025 / Week 1 - Week 4
Aw Wen Chia / 0368828
Interactive Design / Bachelor of Design (Honours) in Creative Media / Graphic Design

TABLE OF CONTENTS



1. INSTRUCTIONS

Week 2 |  Exercise 1
Write your report in e-portfolio

Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)


WEBSITE #1: 35mm

Purpose / Goal:
An informative website to educate the public about the Canon F-1 camera. It is telling the history and how the camera's inner functions, and a breakdown of the camera. 


Visual Design / Layout:
The website starts off with a custom loading screen that seems like a camera screen, followed by the words "TIMELESS CRAFT" appearing on screen with a model of a Canon F-1 camera. 

Fig 1, 35mm Home screen



Typography:
A custom sans-serif font was used on the website, which gives it a more industrial feel.


Colour: 
The website consists of the colours dark grey and white for a contrasting effect. 


Imagery:
The only imagery on the website was a picture taken by the Canon F-1 camera, while it is blurry by today's standards. It was ahead of its time back in 1971. The website did a detailed breakdown of how the camera was able to process an image. 

Fig 2, 35mm Image breakdown



Layout:
The model of the camera, which moves as you scroll, is the focal point of the website, and text explaining the history and camera functions appears at the sides of the page. 

Fig 3, 35mm Text layout




Functionality / Usability:

Navigation:
The entire website can be viewed through scrolling alone. While the website does not make it clear to scroll, it was pretty easy to figure it out. There is a scroll bar which takes form in a camera adjustment setting at the bottom of the page.

Interactive Elements:
The camera model on the website spins around and disassembles itself to show the inner workings of the camera as the user scrolls.

Fig 4, 35mm Camera model breakdown



Quality:
The information on the website is clean-ly presented to the viewer, and it is written in a way that is easy to consume and digest. Which is great for an informative website.

Relevance:
The website is very clean, with all elements playing a part in enhancing the feel of the website.


Performance:
The website is not very heavy, which makes it run smoothly with little to no lag. No lag was detected while using a laptop; however, slight lagging could be found on tablet.





WEBSITE #2: Tonami Komuro

Purpose / Goal:
A portfolio to showcase the work and experience held by Tonami Komuro, it also serves as a way to get in contact with him. 


Visual Design / Layout:
The website begins with a custom loading screen featuring the word "Loading" in a geometrical form, which later transitions into a custom sans-serif font. Followed by the main title screen with "portfolio TOKAMI KOMURO - Web Creator" appearing with an animated wave background.

Fig 5, Tonami Komuro Home Page




Typography: 
The website uses both serif and sans-serif. Serif font for the titles to help them stand out more, and sans-serif font for everything else. There are both English and Japanese on the website.


Colour:
The website showcases a variety of blue hues, while the colour for the fonts is an interveted colour of the blue background. There is also a light and dark mode on the website that will invert the colours.


Imagery:
The images in the website are of works Tonami Komuro did and himself, which gives the viewer a look at his work and himself.

Fig 6, Tonami Komuro Profile


Fig 7, Tonami Komuro Projects



Layout:
The text is arranged in a visual hierarchy to pull the viewer's attention to his name and titles. The text layout is in a way that makes it easy to read. 


Functionality / Usability:

Navigation:
There is a menu at the left side of the screen showcasing the different pages the viewer can go to in the website, making the navigation easy and simple.


Interactive Elements:
The background of the website has an animated background for most of its pages. Except for the "Gallery" page, which has a still background. However, there is a water ripple effect when the mouse is moved around.

Fig 8, Tonami Komuro Gallery



Quality:
The information is provided in a clean way, and the access to all the pages is available on the home page, which is great for a portfolio. 


Relevance:
The aesthetic of the website matches the information. The home page would immediately tell the viewer it is a portfolio.


Performance:
The website lags slightly during the loading screen, but lags little to none for the rest of the time on laptop; however, it does lag when changing pages on tablet.




Purpose / Goal:
A website to promote the fashion clothes line "FLOWER OF THE UNIVERSE" and more, for example, wedding photo service, fragrance collection and gift designs that are coming soon.


Visual Design / Layout:
The website started off with a custom loading screen with a loading bar and percentage. Followed by a story of a flower legend with calming music that can be toggled on and off. "Click to start" is shown at the bottom of the screen. It brings you to the home page.

Fig 9, Flower of the Universe Opening Screen



Typography:
The website uses a custom serif font for a more aesthetic approach. However, the colour of the text often matches the colour of the background, making the text mildly unreadable.


Colour:
The website implores a galaxy aesthetic with cosmic colours, pink, purple, blue and green can be found with a black background.

Fig 10, Flower of the Universe Home Page



Imagery:
The images present on the website are fashion, bridal, and gift-related, fitted with a bloom filter to give a dream-like aesthetic to the pictures.

Fig 11, Flower of the Universe Gallery



Layout:
The website has a very clean design with visual elements next to text, which makes it easy to read.

Fig 12, Flower of the Universe Fashion



Functionality / Usability:

Navigation:
The website is viewed by scrolling, as it says at the bottom left corner of the screen. This makes for easy navigation on the website. There is also a menu button that takes the viewer to the exact place they want in the top right corner.


Interactive Elements:
The website has an animated background as the stars fade in and out, giving the effect of a galaxy. The images also move when the mouse is hovering over them. The mouse also has a light surrounding it that follows the mouse around the screen.


Quality:
The website is very clean with a galaxy aesthetic, which suits the title "Flower of the Universe". 


Relevance:
The website did not give off the image of a wedding service. However, the clothing brand 


Performance:
The first few parts of the website performed fine; however, when scrolling up or down to the different categories, it often lags and freezes or has a slow response time on laptop. This is worse on tablet.




WEBSITE #4: BOYD

Purpose / Goal:
To showcase art in the form of an art gallery. Viewers can also buy art shown in the gallery.


Visual Design / Layout:
The website starts off in a custom loading screen with the words "Out of Love for Art" on screen, with a click-to-enter button under it. Then it takes the viewer to the home page. "Visual Arts & Design" plastered on screen.

Fig 13, BOYD Loading Screen

Fig 14, BOYD Home Page



Typography:
The website uses a mix of custom serif and sans-serif fonts throughout.


Colour:
Neutral colours, such as a variety of beige, were used on the website. 


Imagery:
The images on the websites showcase the variety of art in their catalogue.

Fig 15, BOYD Gallery


Layout:
The layout is very neutral, which is great considering it draws the viewers' eye towards the art, as the background and colours are very minimalistic.


Functionality / Usability:

Navigation:
The entire website can be viewed through scrolling, which is made obvious with the scroll bar on the right side. There is also a menu on the top left corner to bring viewers to the exact location.


Interactive Elements:
There are minimal interactive elements to draw attention to the images of the art, which move when the mouse hovers over it. The mouse also has a yellow line tracing over the movement of the mouse.

Fig 16, BOYD Curation



Quality / Relevance:
The website presents the information in a clear and direct way. This may be appealing to artists who may take an interest.

Performance:
The website runs relatively smoothly, with no lag on laptop. However, lags quite a lot on tablet, especially when there is a video.




WEBSITE #5: HiKeys-1977

Purpose / Goal:
This website was made to promote and sell a synth keyboard by showing its features and functions.


Visual Design / Layout:
The website starts off with a custom loading screen using a percentage to show the loading progress, followed by the home page with the model of the synth keyboard, with the text "H K 77" behind the model. 

Fig 17, HiKeys-1977 Home Page



Typography:
The website uses a sans-serif font for all the text, which gives it a more futuristic look.


Colour:
The website uses black and white for its colour palette for its entire design, except for the video at the bottom of the website.


Imagery:
There is only one video on the entire website, which presents the viewer with professionalism.

Fig 17, HiKeys-1977 Example


Layout:
The model of the synth keyboard moves around while the viewer scrolls with text advertising and explaining its functions appearing and disappearing as the viewer scrolls. This makes it very enticing to scroll through the website.

Fig 17, HiKeys-1977 Home Page

Fig 17, HiKeys-1977 Specs & Features



Functionality / Usability:

Navigation:
The entire website can be viewed through scrolling; the scroll bar at the side makes it obvious. The navigation is very simple.


Interactive Elements:
The model of the synth keyboard moves and spins around as the viewer scrolls, and the specs and features slide in while scrolling, making the website look very clean and professional. 


Quality / Relevance:
The model of the synth keyboard is the focal point of the website; the model moves very smoothly when scrolling with text formatted for easy reading. However, there were a few bodies of text with a substantial amount of rivers and orphans.

Fig 17, HiKeys-1977 Home Page



Performance:
The website ran smoothly with little to no lag on both laptop and tablet. This may be due to the website not being very heavy.

3. FEEDBACK







4. REFLECTION








Labels:

Comments

Post a Comment

Popular Posts