Interactive Design: Exercise 1 - Web Analysis

23/04/2025 - 30/04/2025 / Week 1 - Week 2

Ye YingYing / 0364398

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Exercise 1 / Web Analysis (10%) - Week 2

---

TABLE OF CONTENTS

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

---

INSTRUCTION

---

Exercise 1

- Web Analysis -

Websites Overview

1. Mitchell Eaton Image Making by Mitchell Eaton
2. YZA Voku: AI Visual Artist and Director by YZA Voku
3. ISHIDAYA ESHIKOTO Store by FunTech Inc.
4. Telephatic Instruments by love+money & digitec IT
5. SEASONED by Koto Studio

- Website Study 1 -

Mitchell Eaton Image Making by Mitchell Eaton

| Purpose & Communication Goals |

This website is a personal work portfolio of Mitchell Eaton, a creative director based in Melbourne, Australia, specialising in purposeful motion design. His goal is to empower client brands and captivate their audiences through impactful works. The website’s minimalist homepage and project showcase effectively show his brand identity and professional focus. The clean layout with high-quality work samples also helps build trust and credibility with potential clients or collaborators.

| Visual Design & Layout |

The homepage immediately captures attention with an interesting interactive motion, which as the user scrolls, the designer’s name slowly appears, creating a dynamic and memorable first impression.

The overall visual style is minimalist and modern, effectively highlighting the content without any distraction. The black, white, and gray color scheme creates a harmonious and professional visual tone, enhancing the clean and modern aesthetic, and also brings attention to the showcased projects. 

There is also effective interaction in the project showcase section, when users move their mouse over the project image, it transitions from black-and-white to full color. This simple interaction adds visual interest and guides users to explore the projects more easily.

The layout of this website is well-structured with great white space, making the content easy to read and visually pleasing. The visual hierarchy is clear, all the typography and grid elements flow with a good sense, guiding the user’s attention naturally from section to section.

| Functionality & Usability |

Navigation is straightforward and simple, as the website uses a vertical scroll to guide users through the content. But there is no visible menu bar or navigation buttons, which users have to scroll up and down to find specific information, even though the website is short, this could still be slightly inconvenient.

Some clickable elements, such as 'Info' or 'Contact', look very similar to the regular text, which may confuse users.

| Content Quality & Relevance |

The content on the website is highly relevant, and the structure is clean and easy to follow. The list of featured brands, agencies, and the services offered is clearly presented, directly showcasing Mitchell Eaton’s professional expertise. 

It’s currently unclear whether the site is up to date. All listed project dates are marked as "2024-07-09."

| Performance & Responsineness |

Laptop View

The website runs smoothly overall. The scrolling flew well, and the interactive elements work well too.

Mobile View

The performance is not as smooth. Images take longer to load, and some motion parts feel laggy, affecting the overall responsiveness.

However, when clicking into individual projects, the new page takes a moment to fully load, and the images appear slightly slowly, which may affect the user experience.

| Strengths |

• Minimalist design: The clean layout and color scheme.
• Relevant & organized content: Services, brands, and samples are clearly presented.
• User flow: The website flows well from intro to portfolio.
• Information architecture: All sections are placed in a clear vertical structure, and each section is well organised, with clean typography.

| Weaknesses |

• Affordance: Important links blend in with regular text. 
• Navigation: No menu bar, navigation relies on scrolling only.
• Responsiveness: Motion parts are not as smooth on mobile devices, and take a longer loading time.
  

- Website Study 2 -

YZA Voku: AI Visual Artist and Director by YZA Voku

| Purpose & Communication Goals |

This website is a personal work portfolio of YZA Voku, an AI visual artist and director based in Madrid, Spain. His goal is to fuse generated AI with traditional methods to develop stories and a new way of expression with a different approach. The website showcases his multidisciplinary projects, inviting visitors into a space of creation and experimentation.

| Visual Design & Layout |

The most unique feature of this website is its innovative layout. The homepage showcases a dynamic circular navigation system that resembles a clock face, where each project is placed like an hour mark. As the user scrolls, the outer ring rotates smoothly, and the background images transition horizontally in sync, creating a great interactive browsing experience.

The overall visual style shows a dark, minimalist aesthetic with a black-and-white color scheme in contrast with a bold red colour. This colour combination draws attention to key elements with a strong visual impact.

Typography is modern and clean, supporting the content without any distractions. Although the text size is relatively small, it remains clearly readable. The overall layout is well-balanced, making good use of white space, and focuses on the visual part. Interactive features such as the infinite slider and the rotating circular interface reflect the artist’s futuristic and experimental design approach.

All the subpage interfaces maintain consistency, with a clean and stylish design.

| Functionality & Usability |

Navigation is simple and stays at the visual center of the screen, making it easy to find at all times. The central menu changes along with the page as needed. It’s slightly disappointing that the hour-mark image elements are not clickable, as they visually feel like interactive buttons.

| Content Quality & Relevance |

The content is highly relevant, showcasing YZA's projects. Each project includes technical detail information, creation dates, and descriptions, providing insight into the artist's process and expertise.

 

| Performance & Responsineness |

laptop View

The website performs smoothly overall. The scrolling flew well, the interactive elements work well too, and the response is good.

Mobile View

The website runs relatively smoothly on mobile, with fluid scrolling and responsive interactive elements. 

However, on the archive page, the animated images take a bit longer to load, causing a slight delay.

| Strengths |

• Strong Visual Identity: The clean color scheme with unique navigation and innovative layout is memorable and visually appealing.
• Consistent Design: All subpages maintain a coherent visual style and structure, reflecting a polished, professional feel.
• Clear Content Structure: Information about projects is detailed and relevant, content is well organised

| Weaknesses |

• User Flow: The hour-mark looks image on the homepage appear interactive but it is not, and this might disrupt the natural user flow. 
• Typography: While readable, some relatively small font sizes may cause minor discomfort for some users.
• Responsiveness: Animated figures in the archive section load slightly slower.

- Website Study 3 -

ISHIDAYA ESHIKOTO Store by FunTech Inc.

| Purpose & Communication Goals |

This website is the official online store of ESHIKOTO, which is a sake brand founded in 2020 by Nizaemon Ishidaya, owner of the historic Kokuryu Sake Brewery in Fukui, Japan. They aim to blend tradition with innovation, reimagining the future of sake while honoring its rich cultural roots. The website effectively communicates its vision by combining visuals and storytelling, allowing users to explore the story behind the brand. Not only product promotions, the website also shares the cultural depth and developing identity of the brand.

| Visual Design & Layout |

The website's overall visual style is minimalist and clean, using a neutral color palette (Muted earth tones), emphasizing the visual content. 

High quality images of sake products are nicely integrated with nature visuals. Each product is cropped out and layered over the natural images, showing a harmonious connection between the product details and the surrounding visuals, which also creates an immersive connection between information and imagery. 

The layout is well structured, with great white space and a clear visual hierarchy that guides users through the content effortlessly.

However, in comparison, the mobile version is still clean and functional, but lacks some of the visually surprising elements. The layout feels slightly more compact, with tighter spacing.

| Section Highlights |

News Section
The News section is actively maintained, with frequent updates that keep users informed. Each update is clearly labeled and categorized, such as "Event" or "Product", making it easy to navigate and understand the content.

About Section
The About section directly introduces the brand’s philosophy, very impactful and delivers a strong sense of the brand's identity and purpose. The layout effectively balances text and images, which the visual elements do not overwhelm the text. 

Product Section
High-quality images are carefully selected to align with the product descriptions, creating a cohesive and engaging experience. Each product is presented clearly, with detailed information about the brewing method, ingredients, and other relevant facts. The section is clean, well-structured, and user-friendly, helping users make informed decisions.

Visit Section
This section is also regularly updated, especially the monthly calendar, which is clearly designed and easy to read. Available dates are displayed with clarity, and essential information such as business hours and schedules is provided in a straightforward way. A map and a direct Google Maps link are included, making it highly convenient for visitors to plan their trips.

Contact Section
The contact page is minimalistic and easy to use. The form is clear and simple, ensuring users can reach out without confusion or clutter.

| Functionality & Usability |

Navigation is straightforward and clearly structured, with a fixed top menu that provides easy access to every key section. Each section and every clickable item and icon is purposefully labeled, making it easy for users to understand where they are and what action to take. 

Language options are available for both Japanese and English, enhancing accessibility for a wider audience. 

The overall user flow is smooth and intuitive. Whether the visitor is browsing products, planning a visit, or wanting to reach out to the team, the website clearly guides them toward each purpose efficiently, without confusion or unnecessary steps.

| Content Quality & Relevance |

The website delivers highly relevant and informative content, offering clear and detailed information on each section with no unnecessary information, only what the user needs. Each section presents very clearly, with high content quality and strong relevance.

| Performance & Responsineness |

Laptop View

The website runs very smoothly, with fast loading times and highly responsive interactive elements.

Mobile View

The website maintains a consistent and clean layout, with good responsiveness and clear navigation. But some animated images may load with slight delays or appear a bit choppy.

| Strengths |

• Brand Communication: The website successfully conveys ESHIKOTO’s brand concept through strong storytelling and refined visuals.
• Content Quality: All sections provide relevant, informative, and well structured content without unnecessary details.
• Functionality & Usability: Very smooth user flow with high usability, and clear instructions. 
• Regular Updates: Sections like 'News' and 'Visit' are consistently updated, keeping content fresh and helpful for users.

| Weaknesses |

• Performance & Responsiveness: The mobile version feels less visually refined than the laptop version, and the animated images are a bit laggy.

- Website Study 4 -

Telephatic Instruments by love+money & digitec IT

| Purpose & Communication Goals |

This website is the official online platform of Telepathic Instruments for their product, the Orchid synthesizer. It mainly introduces the product, offering detailed information about its features, design philosophy, and unique capabilities. It also provides users with an option to learn more about the product's innovative approach to music production. The website also includes purchase availability, making it easy for users to buy the product directly through this website.

| Visual Design & Layout |

The website has a minimalist design, with a strong use of white space and simple typography. The design prioritizes visual content, using high-quality images and video to showcase the product. This reflects the professional vibe the brand is going for.

The warm tones scheme (beige, brown, orange) creates a cozy, welcoming atmosphere and shows the product’s unique, organic design. And also enhancing the overall aesthetic appeal of the site. The typography is modern and clean, but the typefaces feel a bit mixed at times. Simplifying to just two complementary styles would have better clarity and create a more cohesive visual identity.

The consistency parts could have more improvement. For example, the homepage’s warm, welcoming color palette shifts to a stark black-and-white scheme with pixel elements till the end, which feels a bit disconnected. Also, in the 'Orchid' section, the background color keeps changing from beige to white and back to beige. While the two colors are quite similar, maintaining consistency would create a smoother flow across each part. And the 'Shop All' section as well would be better to follow the homepage background colour.

However, the layout is strong, well balance between text and images, is clear, and the overall structure is visually pleasing.

| Functionality & Usability |

The site navigation is straightforward and user friendly, there is a  top centered menu bar that stays still while scrolling, providing easy access to all sections. And the "Explore Orchid" page section from the homepage engages users with tutorial-like interactions that demonstrate how to use the product, allowing users to learn while exploring.

| Content Quality & Relevance |

The content focuses clearly on the product, its features, unique design, and how it supports the creative process. It offers detailed explanations that help users understand the product’s value and capabilities. But the repeated "Learn More" buttons on the homepage all lead to the same page with the same content, which feels unnecessary. It gives people an expectation of something new or expanded information, but it is not, even the page design is the same.

| Performance & Responsineness |

Laptop view

The website performs smoothly with short loading times. High-quality images and videos load without issues, and interactive features also work well.

Mobile view

The experience remains equally smooth. The website is responsive, loads quickly, and maintains functionality across different screen sizes.

| Strengths |

• Navigation: The website has a straightforward, simple structure, with a fixed menu bar that provides easy access to all sections.
• Performance: The website performs smoothly on both laptop and mobile devices, with fast load times and responsive interactions.

| Weaknesses |

• Consistency: The mix of typefaces and slight inconsistency in design across different sections could be simplified for better clarity and cohesion.
• Content Quality: Multiple same buttons lead to the same pages, which feels unnecessary. 

- Website Study 5 -

SEASONED by Koto Studio

| Purpose & Communication Goals |

This website is designed by Koto Studio and aims to offer insightful resources and step-by-step guidance on strategic planning for design, helping visitors achieve their ideal final design, much like following a recipe. The primary goal is to educate visitors about the importance of strategy in achieving business success, showcasing the studio's expertise. The communication goal is to take Koto Studio as a leader, and then provide the visitors with a strategy in the design process, clear advice, and valuable insights in this field.

| Visual Design & Layout |

The visual design is unique, featuring a horizontal slide layout that adds a dynamic and interactive element to the website. The overall theme has a vintage feel, giving an advertisement for cookbooks. The website design is captivating, with vibrant, bold colors and various color schemes that bring a sense of energy and playfulness. 

The use of food-related graphics adds a fun and engaging touch, while the information is cleverly packaged using folders and books, further supporting the theme. The design is innovative, fun, and visually appealing, making the website both interesting and memorable. All the interactive elements are special and eye-catching.

The typography and layout are fascinating, very creative and stylish, matching the short and impactful content perfectly. This balance makes the text easy to read while still feeling visually engaging, helping users absorb the message and remember it more clearly.

| Functionality & Usability |

The website places a strong emphasis and focus on visual storytelling, so when it comes to the navigation part, many of the navigation icons are blended into the design as graphics, making them less noticeable and harder to identify. Also, there is no fixed menu bar, which visitors may find it inconvenient to switch between sections or locate specific content, which slightly affects the overall usability.

| Content Quality & Relevance |

The content is well composed and effectively conveys the artist's intentions. Each section delivers powerful messages using short but impactful language that perfectly shows the theme of strategic planning for design. The content is highly relevant and helps guide visitors by offering a better sense of direction and purpose.

| Performance & Responsineness |

Laptop View

The website performs smoothly even with many animated and interactive elements, offering a pleasant and seamless experience. All the visual effects work nicely.

Mobile View

The layout adapts well from horizontal to vertical scrolling. While the animations are less elaborate than on the laptop, but overall the performance remains strong and visually appealing.

| Strengths |

• Visual Design: The vintage cookbook theme is creative, engaging, and memorable. The use of bright, vibrant colors and snack/food related graphics makes the website visually fun and eye-catching. Also, the combination of visuals with text is well-balanced, enhancing the overall storytelling and user experience.
• Content Quality: The content is short, relevant, and clearly communicates strategic design ideas.
• Performance: The website loads smoothly and performs well on both a laptop and a mobile.

| Weaknesses |

• Navigation: Heavy visual design makes it hard to locate icons or understand navigation, and no fixed menu bar adds to the confusion.

---

FEEDBACK

- WEEK 1 -
General Feedback :

Mr. Shamsul went through the module booklet and assignments briefing with us, then asked us to start finding the 5 good websites and one "bad" website for the upcoming task.
Specific Feedback : 

I showed Mr. Shamsul 4 good websites that I found, and he approved. For the 'bad' website, he suggested me to look for local corporate websites.

- WEEK 2 -
General Feedback :
For the website analysis, we must include the 5 basic analysis sections. We can do extra, like strengths and weaknesses, but not less than those 5.
Specific Feedback : 

I showed Mr. Shamsul the 'bad' website that I found, and he approved. And he suggested me improve some of the visual elements in that website, and add more information.

---

REFLECTION

Experience:

I thoroughly enjoyed exploring the good websites, as it gave me a deeper understanding of how to do website analysis and what to look for when browsing a good website. Analyzing their visual aspects was both insightful and fun, allowing me to appreciate the careful thought behind each design choice. 

Observation:

Breaking down each site helped me learn a lot about what makes a website effective and how every design choice works, from layout to color schemes and typography. 

Finding:

I also realized that when you really focus on a website, you can uncover both strengths and areas for improvement. This exercise taught me that there’s always something valuable to learn from both the good and bad aspects of a website.