Interactive Design - Exercise 1: Website Analysis
22/04/24 - 29/04/24 / Week 1-Week 2
Brendan Fedya / 0376283
Interactive Design / Bachelor of Design (Hons) in
Creative Media / Taylor's University
Exercises
TABLE OF CONTENTS
I. Instructions
II. Feedbacks
III. Reflections
I. INSTRUCTIONS
➼ Exercise 1: Web Analysis
Task Brief: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 (200 words minimum for each website).
Key Considerations:
Are the purpose and goals clearly communicated to the users?
How about its visual appeal (color, typography, imagery)?
Website functionality and usability (navigation, forms, interactive elements)?
Quality and relevance of the content (accuracy, clarity, organization)?
Performance (load time, responsiveness, compatibility with different devices and browsers)?
‣ Bleibtgleich by Maksym Bleibtgleich
Are the purpose and goals clearly communicated to the users?
Initially I didn't know what the website is about when I first opened it because it doesn't have any important information on top,. But when I scrolled through everything, it became clear where this website is a portfolio showcase of a UI/UX designer, Maksym Bleibtgleich. It perfectly highlights his ability in the UI/UX field, with great creative approaches and complex technical skills.
 |
Figure 1.1: Bleibtgleich; website interface. |
How about its visual appeal (color, typography, imagery)?
He used a reddish color palette along with some distorted glitchy images that contributes to the unsettling vibes for the overall website, maybe this is more towards his personal style. Personally, I don't think I would like this kind of design if I'm a client looking for a UI/UX designer because it's very niche. The eerie atmosphere is probably great for game or entertainment websites, but will be disturbing for commercial or learning purpose websites. As for the type, its like how most UI/UX designs are now, using sans serif font to suggest modern, clean feel.
 |
| Figure 1.2: Bleibtgleich; color, type, and imagery. |
Website functionality and usability (navigation, forms, interactive elements)?
Navigation is seamless, while we scroll downwards, upper information will disappear upwards while new information will appear from downwards with a smooth transition that fits the theme. The transition is very smooth so it doesn't look confusing at all. But on the other hand, the interactive elements are not clear. This is because the texts are usually in red, and the clickable texts are made in grey. It should be the other way around so that people's eyes could easily differentiate between the interactive elements and the normal texts.
Figure 1.3: Bleibtgleich; interactive elements.
Quality and relevance of the content (accuracy, clarity, organization)?
I initially tried opening this website on devices with bigger screens, such as computers and tablets. The website focuses more on the aesthetics, so its organization is slightly compromised in this case. For example, sometimes it would have a major blank space that breaks the flow, making the layout confusing.
Surprisingly, After I tried opening in other devices (mobile phones like Samsung and Apple), some of it appears more organized and well structured, even though there are some flaws that are still the same in other parts. Nevertheless, the content is clear enough, describing about his thoughts and ideals. This helps people to know more about his visions.
| Figure 1.4: Bleibtgleich; comparison across different devices. |
Performance (load time, responsiveness, compatibility with different devices and browsers)?
Nothing is wrong with the performance, everything is responsive and works well. There are also no issues when trying across various devices.
‣ Curaffy by Tomoya Okada
Are the purpose and goals clearly communicated to the users?
When I first opened it, I knew right after that it is a gallery site, because it featured the library of images directly. The creator of this website is a front-end developer from Japan named Tomoya Okada.
 | |
|
How about its visual appeal (color, typography, imagery)?
It uses a monochromatic color palette, makes it appear elegant and classy like how an art gallery should be. The interesting part is, when you open an image it would turn into the colored version, making it stand out. The animation effects are sleek, with liquid effects guiding our cursors. The type used is a standard sans serif font with white color supported by a dark background to appear readable.
 | |
|
Website functionality and usability (navigation, forms, interactive elements)?
| Figure 1.7: Curaffy; interactive elements. |
Quality and relevance of the content (accuracy, clarity, organization)?
 | |
|
Performance (load time, responsiveness, compatibility with different devices and browsers)?
From a tablet it looks almost the same with desktop, but from a mobile phone perspective it gets worse. The information on the home page also disappears while we scroll downwards. In my opinion, the better solution is if the image gallery could be scroll horizontally rather than vertically. Load time and responsiveness are about the same across all devices.
 | |
|
‣ Zaneffi by Zaneffi Bucuresti
Are the purpose and goals clearly communicated to the users?
Yes, the menu at the top of the website clearly reflects the website's aim, which is to provide business consultation services using modern technology. Different variations of the services offered are described in detail on their respective pages.
 |
| Figure 1.10: Zaneffi; website interface. |
How about its visual appeal (color, typography, imagery)?
The visuals are pretty underwhelming compared to the previous websites I reviewed, standard sans-serif font on a plain white background with minimal imagery. I understand that this website intends to focus more on the functionality rather than aesthetics, but I believe if we balance between these two, it will catch the customer's attention even more. One advantage of this website is its logo. Unlike previous sites that used text-only logos which didn't stand out, this one includes an image to accompany the text, hence making it more recognizable to future or existing clients.
 |
| Figure 1.11: Zaneffi; website logo. |
Website functionality and usability (navigation, forms, interactive elements)?
This website functions well without any issue, it's just that the navigation and the interactive elements animations are too minimal hence making it look boring. Function-wise, its good enough with many features that helps potential customers to meet the website's purpose. For example, they created a consultation schedule section to help these customers in contacting the services without much hassle.
 |
| Figure 1.12: Zaneffi; features. |
Quality and relevance of the content (accuracy, clarity, organization)?
Contents are well organized, using text hierarchy to highlight important information. Although the interface is very minimalistic and looks boring because of that, it has one clear advantage: less distractions. Therefore, the viewers could focus and absorb the content quicker.
 |
| Figure 1.13: Zaneffi; content page. |
Performance (load time, responsiveness, compatibility with different devices and browsers)?
The performance across all the devices and browsers are similar, without any issues.
Are the purpose and goals clearly communicated to the users?
This is a website for an art exhibition from Warhol Arts, it is clearly shown in the front page with it's stunning UI. The overall theme also implied a lot of artistic features , which may engage the viewers to dive deeper into the exhibition.
 |
| Figure 1.14: Warhol; front page. |
How about its visual appeal (color, typography, imagery)?
 | |
|
Website functionality and usability (navigation, forms, interactive elements)?
Figure 1.16: Warhol; interactive elements.
Quality and relevance of the content (accuracy, clarity, organization)?
The positive and negative space of the content is considered in the making of the site, it guides the viewers eyes according to it's intentions. It only uses a few supporting short descriptive texts, but with those, it has already conveyed the intended message clearly.
 |
| Figure 1.17: Warhol; content organization. |
Performance (load time, responsiveness, compatibility with different devices and browsers)?
When I use portrait mobile devices, some of the pages are actually re-organized specifically for those devices, hence making it more compatible to their respective devices. The performance across all the devices and browsers are similar, without any issues.
 |
| Figure 1.18: Warhol; content organization. |
‣ 365 - A Year of Cartier by 14islands
Are the purpose and goals clearly communicated to the users?
Yes, the goal of this website is to showcase Cartier's journey throughout the year 2024. It has a lot of chapters that we could click to see the articles within.
 |
| Figure 1.19: 365 - A Year of Cartier; website interface. |
How about its visual appeal (color, typography, imagery)?
The colors are dominantly white and simple, suitable for website with articles because the readers need to be immersed more with the writings and these designs have minimal distractions. The font use is unique to Cartier and this is useful to reflect the brand's character.
Few images are quite big and will shrink or expand as we scroll or click, some of them are also moving videos. If I'm in it for a long time, I become dizzy and couldn't keep up because it's too overwhelming on the eyes.
 |
| Figure 1.20: 365 - A Year of Cartier; color, type, and imagery. |
Website functionality and usability (navigation, forms, interactive elements)?
The website functions well, for every chapter, they have all the articles in it that could be clicked, then we will be moved into those specific articles. The animation for the overall experience is sleek and subtle, it won't interfere when we are reading. We also have sidebars and a back to home button in every article that enhances the reading experience.
Quality and relevance of the content (accuracy, clarity, organization)?
The contents are organized chronologically (chapter 1, chapter 2, etc.), it is expected to be this way for a site with a ton of articles, or else readers will be so confused of what's going on. We can also keep track on where have we been reading until from the sidebars and the headings that shows which article are we in.
 |
| Figure 1.20: 365 - A Year of Cartier; content organization. |
Performance (load time, responsiveness, compatibility with different devices and browsers)?
The initial load time for the images is very slow for devices besides desktop, hence you have to wait for a long time before reading or else you won't know what are you clicking on. I think this is because the web contains too many images to process, well no other problem besides that.
 |
| Figure 1.21: 365 - A Year of Cartier; load time performance. |
II. FEEDBACKS
No feedbacks are given this week.
III. REFLECTIONS
I find it taxing at first when I heard the instructions for doing 5 website analysis on the first week, which means I have to arrange a lot of texts which has to convey our intended meaning effectively. This will definitely require A LOT of writing and thinking. But thinking on the other side, I guess this could also help us to practice our writing skills, because until now our writing skills are minimal except only writing in the e-portfolio blogposts, so it's definitely a skill that we should hone also!
Comments
Post a Comment