Interactive Design | Exercise 1 - Web Analysis
21/04/2025 - 28/04/2025 | (Week 1)
Nadia Chong Wen | 0355736 |
Bachelor's of Design (Honours) in Creative Media
Interactive Design |
Exercise 1
Table of Contents
1. Lecture Notes
Week 1
No class.
2. Instructions
3. Exercise 1 | Web Analysis
For this exercise, we need to choose 5 websites from the multiple links (1/ 2/ 3/ 4) that were given to us to review the websites that we've selected and take note of its design, layout, content, and functionality. We then need to identify the strengths and weaknesses of the website, and consider how they impact the user experience. We had to write no less than 200 words per review.
3.1. Taiki Sato
Purpose & Goals
This is a portfolio made by a visual designer based in Tokyo named Taiki Sato which I found from awwwards.com. The website presents a showcase of his work in web design, graphic design, and his art direction. The purpose of this portfolio is to introduce him to his future clients and provides reference to his personal works and works that he has made for past clients.
Design & Layout
The design of the website introduces good visual hierarchy within the initial page of the website with striking movement of the elements within the page. It keeps the elements (photos, animation, symbol, etc.) balanced and ensures that it doesn't affect the focus within its respective sections. The choice of color for the background and font provides strong contrast which allows for emphasis on the important parts of the website itself (ex. Figure 1.1, 1.2).
Movement and transitions are often used in this website to draw attention towards the elements within the website which makes it more interesting for the user viewing his portfolio and provides a pleasant user experience. While transitioning into the certain section of the page where it showcases his work, the typography chosen is not bold enough and is easily overshadowed by the images of his work encapsulating his screen (ex. Figure 1.3).
Quality & Content
The quality of the website is excellent and does a good job showcasing the works of Taiki Sato. THe presentation of his portfolio and its contents are well-executed and gives a sense of a professional designer. While the contents of the images used in Figure 1.2 are unrelated to his jobs, it gives a good inclination that he could work with any topic.
However, it is slightly harder to view some content and its sub-header like in Figure 1.3. I also believe that Taiki Sato should not put the contact button on the bottom of the page.
Functionality & Usability
The functionality of the website is pretty simple with the few interactive elements of the websites being the buttons and the linked images to Taiki Sato's personal and clients' works. While the linked images I mentioned did give an indication that the element could be interacted on with the use of the mouse and the round symbol that accompanies it on PC, it could be easily brushed off with the focus being on the image.
Performance
Taiki Sato's portfolio is able to be seen through mobile viewing as well. While there are not as many transitional motions and was missing an element, it manages to give the same user experience as its PC version and give a better glimpse of the works that Taiki Sato made. The interactive elements of the portfolio are able to be used in both versions of the site as well.
3.2. Mario Roudil
Purpose & Goals
This work portfolio belongs to a Paris-based film director named Mario Roudil that I found in awwwards.com. He specializes in the creation of music videos with other productions such as short films and commercials. The website showcases productions that he has worked on and serves to inform the user through the videos shown throughout the site.
Design & Layout
It displays a very strong contrast between the text and background with its colors and chosen font type for the "Roudil." The slide form of the video displays also serve as a colorful contrast while serving as a way to show the work done by the artist immediately.
In changing the Slide and List formation of the display, the website shows great use of motion and transitions that move into each other smoothly while still being comprehensible and giving more information to its users as seen below in Figure 3.7. The List form of the page also shows feedback from moving the cursor around the names of the productions.
Figure 1.7 | Mario Roudil Portfolio #3 / Week 1 (25.04.25)
Quality & Content
Mario Roudil's portfolio is great and presents a minimal stylistic website that allows the users to easily comprehend the contents shown on screen. The elements are quite clear and easy to follow even though the blackening of the names of the production while you move your cursor by isn't something I'd usually do.
Functionality & Usability
The portfolio also allows the user to watch a preview of the productions by moving your cursor over the film and are able to watch it once you click on it.
One of the portfolio's issues are that it is slightly hard to navigate within the portfolio with its small buttons. The videos within the slides and list sometimes scroll past too quickly if you were to move your mouse in certain directions in list mode.
Performance
The portfolio is available for mobile viewing as well. The mobile version of the porfolio is not optimized to be as dynamic or interactive as the PC version and is only able to scroll one by one through the thumbnails of the films and not be able to watch any of the films on the site.
3.3. Seasoned
Purpose & Goals
Seasoned is a website created by Good City Digital Studios and produced by Koto Studio. The purpose of the website is to bridge the gap between design education and professional practice and acts as a digital hub for brand learning with a rich collection of e-books and expert insights.
Design & Layout
The colors, images, and videos displayed on the website have good contrast and show an understanding in balance and harmony. It also displays good color harmony and contrast between the chosen and existing colors in imagery. The imagery sticks to the theme of home-cooking in a retro time with the background having warm color tone with overlaid static found in its retro theme while incorporating its theme in the style of the hierarchy with the placement of the main text and body. The type in the website are both varied and consistent in a way that keeps you interested as well.
Quality & Content
The quality of the website and the design choices within the website are cute, unique, and creative, as well as high-quality as retro styles are hard to pull off effectively. The content of the website is displayed in a retro theme that is straightforward and stylish. It states its information clearly and elaborates on branding through its interactive elements.
Functionality & Usability
The navigation of Seasoned is quite straightforward at the opening page with interactive elements that function well. There are parts where the navigation of the website doesn't fit the controls. For example in Figure 3.10, the control for the screen to show more information is to scroll down despite the information being presented in the way of going from right to left.
Performance
The load time for website is quick and easily accessible and responds quickly as long as the connection to the internet is good. It is compatible to mobile devices, but with many of the transitional motions and animations lessened in order for the information to be comprehensible.
3.4. Gebetshaus
Purpose & Goals
Gebtshaus is a Christian website produced by Yellow Tree. The purpose of the website is to promote religious activity and encourage people to join in those religious activities by blending editorial clarity, expressive typography and interactive storytelling.
Design & Layout
This website has a display of incredible understanding of design principles and the motion of transitioning to one part to another. The type chosen for the titles and body helps to draw attention towards the elements by using emphasis (with an example above of Fig 3.13) and contrasting striking colors and fonts that are able to achieve unity.
The smooth motion and transitions of the sections of the website are able to keep the user's attention on the subjects while seamlessly transitioning into another section. However, it can be slightly disorienting with the amount of motions.
Quality & Content
The website and its contents are high quality with its contents being able to translated and understood via chrome translator. The graphics shows the content of well and effectively through interactive elements within the transitions and made it more accessible.
Functionality & Usability
Gebtshaus presents readable graphics which allows for the user to easily navigate through the site. The website is very easy to use and has simple interactive elements that are easily identifiable by their bright colors that contrast the page.
Performance
Overall, the website responds quickly with images loading in quickly as you scroll. While this website has done a great job of offering unique interactive elements within its transitional elements, the optimization within the mobile version looks slightly off where the transitional motions aren't as smooth and shows some white spots when you scroll down. It can also be slightly disorienting to scroll through all the motions as well.
3.5. JY Contents
Purpose & Goals
JY Contents is a personal blog that was made as practice for Wordpress by its designer, JorY37.
Design & Layout
JY Contents has a minimalist like style that takes advantage of light colors that would deeply contrast with the elements within the website. It gives a sense of unity and emphasis between all the post topics with neon and bright colors that contrasts the more neutral grey of the website. It also shows good hierarchy in its design with how the elements and information are placed (ex. Fig 3.16). The font choice used help complement the aesthetics of the website while being comprehensive in its grid system. The simplistic approach of the blogs themselves in contrast with the motions in the animations of the gifs in the blog also helps focus. The posts of the blog are also made to fit completely over the screen and could be either overwhelming or satisfying to some users.
Quality & Content
The website's quality is quite good. JY Contents is a website that has many active elements such as animation, gifs, interactive objects that allow the user to be more engaged. The content of the posts are displayed in a clear manner with brief previews of the body of the post with a interactive logo accompanying the post. YJ contents is slightly hard to navigate through with many distracting animations happening around the website with a lot of unnecessary elements in it.
Functionality & Usability
The many interactive aspects of the website shines when you interact with the elements (ex. in Figure 3.17) as it gives feedback with movement of the topic of the posts. The navigation is clean and the website is easy to use.
Performance
The website is optimized for mobile view as well. The interactive elements of the website are slightly diminished and the random animated parts of the website lag and only move slightly. Besides that, the website runs smoothly on both PC and mobile.
4. Reflection
Experience:
Being told that the first exercise was due a week after the semester started is really nerve-wracking with how many classes I have to take and how sudden it was but I did what I could. My knowledge on UX is quite limited to research papers that I had to do in previous semesters but with the design principles, I was able to identify some elements on websites. It was difficult though.
Observation:
I found that analyzing art more critically than a usual person is quite difficult for me as I usually generally look at the big picture of the websites. Slowly but surely enough observation on the sites, I was able to see what could be a bad UX decision for the websites. I also was able to observe how the designers of the websites were able to produce visually appealing sites even through stills.
Findings:
This exercise made me realize how much creativity matters within the making of websites in order to stay interesting while also making it feel fresh for the users that pass by their sites. Many of the websites use a similar formula of transitional motions and more and that contrast plays a very big part in creating structure.
Comments
Post a Comment