Interactive Design | Exercise 1: Web Analysis

23/04/25 - 28/04/25 [ Week 1 - Week 2 ]

Nicco Chew Jin Xun (0366563)

Interactive Design | Bachelor of Design (Hons) In Creative Media | Taylor's University

Tutor: Mr. Shamsul

---

Table of contents

Exercise 1 : Web Analysis (10%)

1. Instructions
2. Exercise
3. Feedback
4. Reflection

---

Instructions

---

Exercise 1

Website #1: 

[ Yaza Voku ] by Cuchillo

https://www.yzavoku.com/

Purpose and Goals

The primary goal of the YZA Voku website appears to be showcasing an artistic portfolio by an AI Visual Artist and director based in Madrid, Spain. It mainly consisting of experimental visual media such as photographs, archive, film, images, and video loops. The minimalist and avant-garde design hints that the target audience is people interested in contemporary art, film, and creative media.

Visual Design and Layout

I love how the home page uses a dark theme with a black background and high-contrast imagery mainly red, black, and white, creating a moody, dramatic atmosphere. It features a circular arrangementof thumbnails that react subtly to the cursor, encouraging interaction. The fonts are simple, modern, and all-caps, which complements the futuristic feel. Then, when it comes to the archive page, it features a white background, creating a stark contrast compared to the black landing page. This shift immediately draws full attention to the visual content. The layout is a simple, evenly spaced grid, with three rows of six images each (18 thumbnails total). Each image is numbered below in small, minimalist black text. The use of negative space (white space) is very strong here because it keeps the page clean, uncluttered, and allows each artwork to breathe individually. There is no distracting background or frames around the images, making the visuals the sole focus.

Functionality and Usability

Navigation is minimal, with options like “Archive” and “Info & Contact.”  Clicking on a thumbnail opens the artwork. While the interaction is smooth, there is little guidance or labeling for users who are expected to explore intuitively. This style suits an art portfolio but might frustrate users seeking structured information. 

Content Quality and Organization

Content consists purely of images and short clips without much explanation. While the visuals are high-quality and artistically compelling, the lack of text descriptions limits accessibility, especially for new visitors or potential clients trying to understand the work's context.

Performance

The overall performance of the archive page is fairly decent, but there are noticeable areas for improvement. Occasionally, users may experience slight lag when navigating through the site, particularly during initial loading or when interacting with thumbnails. Some images load slower than expected, which can disrupt the otherwise smooth visual experience. This slight delay could potentially impact user satisfaction, especially for visitors who expect fast and seamless browsing on a modern portfolio site. Optimizing the images for web (reducing file sizes without losing quality) or implementing progressive loading techniques could greatly enhance the site's performance and user experience.

Strengths

• Unique, memorable design that fits the artist’s branding.
• Focused, minimalist layout highlighting the art pieces.
• Smooth, responsive user interaction.

Weaknesses

• The navigation options are tiny and easy to miss.
• Very little textual explanation about the work.
• The purpose could be a little confusing for first-time visitors, as there is very minimal explanatory text.

Website #2: 

[ bleibtgleich ] by Maksym Bleibtgleich

Purpose and Goals

The primary purpose of this website seems to be to offer an immersive, interactive art and design experience. It combines strong visuals, micro-interactions, and animation to captivate users and showcase creativity in a highly experiential manner. Rather than simply presenting information, the website seeks to emotionally engage its audience through motion, texture, and responsive design. The target audience likely includes design enthusiasts, creative industry professionals, and users who appreciate experimental web experiences.

https://www.bleibtgleich.com/

Visual Design and Layout

The site features a dark, atmospheric background with carefully curated, high-contrast visuals. Red tones are used effectively to draw the eye, especially on interactive elements like small buttons. The layout flows organically especially those images and text emerge one by one with smooth, effortless transitions, making navigation feel almost cinematic. Besides, typography plays a dual role: foreground text is clean and modern, while background text appears blurred but meaningful, adding a conceptual depth to the visual storytelling. Hovering over words triggers dynamic flip animations, offering a playful yet sophisticated touch. Overall, the layout feels minimalist but deeply considered, allowing each design detail to stand out without overwhelming the user.

Functionality and Usability

The website is rich in micro-interactions. Clicking on the small red buttons causes them to fade or change color with subtle animations, creating immediate feedback for users. Moving the mouse across different areas triggers movement in elements, such as shifting images or text distortions, giving the whole site a feeling of being "alive" and reactive. Navigation is intentionally minimalistic, relying heavily on visual cues rather than explicit menu items. While this can enhance the artistic effect, it might require new visitors to explore intuitively rather than being guided step-by-step.

Content Quality and Organization

Content is presented primarily through images, animated sequences, and minimalistic text. Each visual element feels intentional and high-quality, fitting into an overarching theme of motion, discovery, and hidden meaning. However, textual content is extremely limited — visitors who seek more in-depth explanations or context might find the site somewhat opaque. The blurred background words add another layer of meaning, but without direct explanation, their significance may be missed by casual users.

Performance

Performance is generally impressive, especially considering the number of animations and interactive elements in play. Loading is smooth, and transitions between sections are seamless on most modern browsers and devices. However, because of the heavy use of animation and image sequences, there could occasionally be a slight delay during the first load. 

Strengths

• Stunning, immersive interactive design that feels alive.
• Smooth, professional animations that guide the user’s attention.
• Smart use of background text for layered storytelling.
• Engages users emotionally through visual and kinetic experiences.

Weaknesses

• Lack of clear navigation structure may confuse first-time visitors.
• Very minimal explanatory text causing users must interpret the meaning themselves.
• Potential minor performance issues on slower connections or devices.

Website #3: 

[ Atoll Digital ] by the in-house team of Atoll Digital

Purpose and Goals

The primary purpose of Atoll Digital's website is to present their skills of creating websites capabilities to potential clients in a dynamic and engaging way. They focus on showcasing their past projects and communicating their expertise in crafting unique, high-quality digital experiences. The design immediately positions them as a modern, innovative, and professional creative studio which delivering powerful, tailor-made websites that have helped brands anchor their authority. The site’s goal is not just to inform, but also to impress and captivate visitors, inspiring confidence in their creative skills.

Visual Design and Layout

The visual design is sleek, modern, and minimalistic, featuring a mostly neutral color palette with dynamic elements to create interest. On landing, the most striking feature is the 3D box/object that follows the mouse movements across the screen. This interaction immediately grabs attention and sets an immersive tone for the user experience. As users scroll down, the layout remains clean and structured, offering clear sections where past projects are displayed. Each project preview is neatly organized, with ample negative space, allowing users to focus without feeling overwhelmed. Typography is simple, bold, and contemporary, supporting the high-end feel of the brand.

Functionality and Usability

Functionality is a strong point for this website. Mouse movement is tracked and directly influences on-screen elements, offering an engaging first impression without being distracting. Scrolling down is smooth and natural, with intuitive content sections revealing projects without complicated navigation. Clicking into projects or sections feels effortless, with short, non-disruptive loading animations. The site overall emphasizes simplicity and fluidity, ensuring that users can navigate intuitively. Additionally, the site provides a very simple and seamless language switch so users can toggle between English and French with a single click on the top-right “EN/FR” button. This feature is elegantly implemented without needing to reload the entire page, which greatly improves accessibility for a bilingual audience.

Content Quality and Organization

Content is clearly curated and highly professional. Each project has its dedicated presentation, with short but impactful descriptions that explain the project’s context and significance. The balance between text and visuals is handled carefully. The visuals are dominate, but text is available where necessary to provide understanding without overwhelming the page. Information is easy to find, and each project page follows a consistent structure, helping users know what to expect as they browse.

Performance

Pages load quickly, despite the presence of 3D and animated elements. The initial 3D object interaction does not cause noticeable lag, even on mid-range devices. Scrolling is fluid, and responsive design ensures that the website looks and feels good across different devices and screen sizes. All animations are optimized, maintaining smooth frame rates during interaction and navigation.

Strengths

• Stunning interactive landing experience with the moving object following the cursor.
• Clean, minimalistic design that highlights the portfolio effectively.
• Smooth navigation and strong performance across devices.
• Professional, well-organized project showcases with just enough textual context.

Weaknesses

• The highly interactive design may slightly intimidate less tech-savvy users at first.
• Some users might wish for quicker, more direct access to project details without needing to explore via scrolling.

Website #4: 

[ Baci Baci ] by EGO55

Purpose and Goals

The Baci Baci website's primary purpose is to promote and sell their skincare products, emphasizing natural and nourishing ingredients, especially donkey milk-based formulas. The visual theme of the site suggests a playful, lighthearted, and approachable brand image, aimed at consumers who are looking for gentle, natural self-care products. The site encourages browsing of products, understanding the brand's philosophy, and subscribing for updates.

https://bacibacimatera.com/en/

Visual Design and Layout

The overall design is bright, cheerful, and product-focused. The homepage features floating product images that follow the cursor movement, immediately creating a playful and interactive feel. As users scroll down, products animate into view smoothly from the right, adding dynamic energy to the browsing experience. However, the typography feels overly generic. The basic fonts without much character, which slightly weakens the premium, playful brand image they seem to aim for. Additionally, the text hierarchy is not always clear, making some parts feel less organized and polished than expected for a commercial website.

Functionality and Usability

The basic navigation (Home, Products, About Us, Contacts) is straightforward and user-friendly. The language switch between Italian (IT) and English (EN) is available at the top-right corner, allowing users to browse in their preferred language. However, there is an important flaw: even after switching to English, the Cookie consent popup remains in Italian, which could confuse non-Italian-speaking users and affect trust. In the newsletter subscription section, there is a noticeable layout bug where the "Subscribe" button overlaps with the email input placeholder text ("Your email address"), creating an unprofessional look and potentially affecting usability. Despite these issues, general scrolling, clicking, and product browsing are smooth without noticeable technical glitches.

Content Quality and Organization

The content is clear but relatively basic. Product descriptions are short and easy to understand, and the brand’s playful tone is reflected well in the imagery. However, there is a lack of in-depth information (e.g., detailed ingredients, benefits, certifications), which some more careful shoppers might want to see. The organization is simple for users to access the product catalog and brand information quickly, but the minimal amount of written content slightly limits deeper engagement with the brand story.

Performance

Performance is solid overall. Pages load quickly, animations (such as floating and sliding products) are smooth, and the site is mobile-responsive. There are no obvious lags or crashes during interaction, even with animations enabled.

Strengths

• Playful and dynamic user experience with floating and animated product visuals.
• Clean, simple structure making navigation easy.
• Quick load times even with interactive elements.
• Multilingual interface available (even though not perfectly implemented).

Weaknesses

• Typography is too plain and does not match the fun, premium vibe of the brand.
• Cookie consent popup does not translate to English after switching the language.
• Minor layout issues (email subscription section) affect the visual professionalism.
• Limited depth in product and brand storytelling content.

Website #5: 

[ Charles Leclerc ] by Apart, Yazo, and Uprising

Purpose and Goals

The Charles Leclerc website is designed primarily to promote the personal brand of Formula 1 driver Charles Leclerc. The goals include showcasing his professional achievements, personal lifestyle, merchandising (via his LECLERC Collection), and strengthening his connection with fans globally. The website projects a polished, aspirational image aligned with luxury, speed, and sophistication all of which match the world of Formula 1 racing.

https://charlesleclerc.com/en/

Visual Design and Layout

The visual design is very high-end and professional. A sleek black, white, and red colour palette immediately conveys elegance and performance. The homepage features full-screen, high-quality hero images and dynamic text animations that set a bold, premium tone. As users scroll, sections such as "About", "News", and "Merch" slide in cleanly with subtle parallax effects that make the experience smooth but not overwhelming. The typography is modern, clear, and well-balanced, with effective use of bold headings and lighter body text, enhancing readability and visual hierarchy. The minimalistic navigation bar keeps the focus on the visuals and storytelling without distraction. There is also a very smart use of white space throughout the site, allowing content to breathe and maintaining a clean, uncluttered feeling.

Functionality and Usability

Functionality is very intuitive and smooth. Navigation links are always accessible at the top, and clicking transitions between pages are seamless with no jarring page reloads. The only minor issue is that some mobile adaptations could be even more optimized. For instance, certain images in mobile view might appear slightly cropped depending on the screen ratio, but it does not seriously affect the experience. Besides, language selection is very basic but effective: EN / FR options are cleanly placed in the navigation, and the switch happens quickly without full reloads.

Content Quality and Organization

The content is well-curated and impactful. Each section delivers just the right amount of information without overwhelming the user. One highlight is the “Know the Man” and “Know the Driver” sections on the homepage, which separately introduce Charles Leclerc's personal and professional sides. This thoughtful split helps build a deeper connection with visitors, allowing them to appreciate both his human story and his achievements as an athlete. It adds emotional depth and gives the website more character beyond just being a celebrity page. Races and upcoming races in the calendar are concise and laid out professionally, reinforcing his active public image and keeping fans engaged.
There is a very good balance between text and visuals. For instance, images are prioritized (which fits the modern, lifestyle-driven brand image), while short, sharp text blocks help anchor the visuals and add necessary context without crowding the page.

Performance

Performance is excellent. Pages load very quickly despite the use of large, high-quality images. The site is responsive and looks equally premium on desktop and mobile devices. There were no visible glitches during scrolling, clicking, or switching sections.

Strengths

• The overall aesthetic is very clean, modern, and luxurious, fitting Charles Leclerc’s personal brand as a top athlete. 
• Splitting his identity into personal and professional aspects helps users connect on a deeper level.
• The use of high-quality photography, sleek fonts, and muted color palettes instantly gives a sense of professionalism and exclusivity.

Weaknesses

• While the simplicity is elegant, first-time visitors who are not familiar with Charles Leclerc might find it lacking in background details or milestones in his career.
• The site lacks features like newsletters, event signups, or fan interactions (e.g., social media feed integrations, live updates). For an athlete with an active and loyal fanbase, this is a missed opportunity to boost engagement and drive return visits.

---

Feedback

- Week 1 [ 23/04/25 ]

General Feedback: 

Project Briefing during class.

Specific Feedback: 

No specific Feedback.

- Week 2 [ 28/04/25 ]

General Feedback: 

We having Week 2 Lecture which is Usability

Specific Feedback: 

The arrangement is good (don't be fancy), take note that some title should be in bold together.

---

Reflection

Experience

Working on this website analysis assignment was a very insightful experience. It challenged me to look beyond just the surface design of a website and instead focus deeply on how every small detail such as layout, typography, transitions, and user interactions that affects the overall user experience. I realized that a well-designed website is not just about "looking good," but about communicating a message clearly, functioning smoothly, and creating an emotional connection with the user. Each site had a different style and purpose, and it pushed me to adapt my evaluation approach based on what the site was trying to achieve.

Observation

Through this project, I observed that the most successful websites combined strong visual identity with intuitive usability. Small interactive elements, such as cursor effects, smooth page transitions, language toggles, and hover animations, can make a site feel much more dynamic and engaging. I also noticed that even beautifully designed websites sometimes had small weaknesses such as poor mobile optimization, missing multilingual support, or lack of depth in their content that could slightly reduce the overall user satisfaction. Paying attention to both strengths and small flaws really made me appreciate the complexity behind building a truly good website.

Findings

My key finding is that balance is the most critical element: between visuals and text, creativity and functionality, simplicity and information richness. A website can be visually stunning, but if navigation is confusing or content lacks depth, the experience becomes frustrating. On the other hand, a site with clear structure but no visual appeal can feel cold or boring. I also found that user-centered design that thinking about how a visitor will feel, react, and interact is what separates good websites from truly great ones. Finally, I learned that performance issues (like slow image loading or minor layout glitches) might seem small, but they can leave a surprisingly strong negative impression if not handled carefully.