Interactive Design - Exercise 1 : Web Analysis

 

25/9/2025-5/10/2025 / Week1-Week2

Tan Tzu Yu / 0374460

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

Web Analysis

---

LECTURE NOTES

Week 1

This week, we were to asked to choose to download either Adobe Dreamweaver or Visual Studio Cedo. Then, we were given our first exercise which is to prepare 5 reports analyzing websites from different categories.

Focus points in analysis:

• Layout and navigation

• Usability and user experience

• Visual design and branding

• Responsiveness (desktop vs. mobile)

• Accessibility (ease of use for diverse users)

Week 2

[Norman Door]

• Definition: A “Norman Door” is a poorly designed door where the visual cues suggest the opposite of what the user should do.(Eg: A door with a pull handle that actually requires pushing.)

[Discoverability]

• Definition: The ease with which users can identify what actions are possible within a design. If users struggle to understand how to interact, discoverability is poor.

[Feedback]

• Definition: Immediate response from the system to user input (e.g., button changes color when clicked, sound confirms action). It helps users understand what just happened and if it was successful.

[Human-Centered Design]

Fig 1.0 :  Human_Centered Design

• Approach to design that prioritizes users’ needs, abilities, and contexts.

• Involves empathy, observation, prototyping, and testing with real users.

• Goal: create designs that are useful, usable, and desirable.

[Usability: Designing Products for User Satisfaction]

• Definition: Usability refers to how effectively, efficiently, and satisfactorily a user can achieve a goal with a design.

• A good usability allow users to quickly understand and navigate an interface and there is minimal need for instructions or expert knowledge.

• A Bad Usability are those with confusing layouts, hidden functions, unclear navigation.

Principles of Usability

1. Consistency

• Ensures that design elements behave and look the same across the product.

• Types of consistency:

  • Visual (colors, fonts, layouts)

  • Functional (buttons and menus behave the same everywhere)

  • Internal (uniformity within the product) and External (familiarity with other apps or platforms).

• Example: Navigation bars on all pages should be in the same position.

• Benefits: Reduces cognitive load, builds trust, and speeds up learning.

• Examples: Adidas app, Strava app, Airbnb, ZUS Coffee app.

• 
  
  

  

  Fig 1.1: Examples of consistency
  
  

2. Simplicity

• Aim for the most straightforward path to achieve user goals.
• Avoid unnecessary complexity—each step should feel obvious.
• Use familiar symbols, icons, and terminology.
• Benefits: Faster, easier, and more enjoyable interactions.
• Example: Google homepage (clean, single search bar).

Fig 1.2 : Example of Simplicity

3. Visibility

• Features should be clearly visible to users.
• If something is hidden, users may not discover it.
• Important options should stand out (e.g., main navigation, call-to-action buttons).
• Balance is key: too much visibility (clutter) is also bad.

Fig 1.3 : Example of Visibility

4. Feedback

   • The system must “talk back” to users.

   • Examples:

     • A loading bar showing progress.

     • Error message when password is incorrect.

     • Button changes when tapped.

   • Benefits: Reassures users, prevents confusion.

   

   Fig 1.4: Example of Feedbacks
   
   

5. Error Prevention

   • Anticipate and reduce user mistakes.

   • Techniques:

     • Confirmation prompts (e.g., “Are you sure you want to delete this file?”)

     • Input restrictions (e.g., password strength indicators, format check for email).

     • Undo functions to easily recover.

   • Acknowledges human error as natural and designs around it.

   

   Fig 1.6 Example of Error Prevention

   
   

[Common Usability Pitfalls]

• Overly complex interfaces (too many steps, cluttered UI).

• Confusing navigation (users don’t know where to go next).

• Poor or missing feedback (users don’t know if action worked).

• Weak error handling (unclear error messages, no recovery options).

Week 3

[Evolution of Web Access]

• Originally: keyboard, mouse, monitor only

• Now: includes mobile touch devices, voice or audio interfaces (important for accessibility)

[Diversity in Browsers, OS & Screen Sizes]

• Browsers: IE, Firefox, Chrome, Opera, Safari

• Operating Systems: Windows, macOS, Linux

• Screen resolutions: e.g. 640×480 up to 1680×1050+

[Role & Importance of Web Standards]

• Web pages may render differently across devices and browsers

• Standards help ensure content is accessible and consistent

• The W3C defines and maintains standards (HTML, CSS, etc.)

[Benefits]

• Developers can read and maintain code easily

• Less need for browser-specific hacks or rewrites

• Better experience and reliability for users

[How the Web Works]

1. User connects via ISP

2. User types a domain name into browser

3. Browser queries DNS to find the server’s IP address

4. Browser contacts the web server using that IP

5. Web server sends back the web pages to the browser

Structure of a Web Page (via HTML)

[Why Structure Matters]

• Helps users navigate and absorb content

• Mirrors structure in printed media (headings, sections, etc.)

[Key HTML Concepts]

• HTML (HyperText Markup Language) is used to define web page structure

• Tags / Elements: enclosed in < >, e.g. <p>Hello</p>

• Attributes: extra info inside opening tags, e.g. <p lang="en">

[Main Sections of an HTML Document]

• <head>: holds metadata, title, etc.

• <body>: contains the visible content

[Headings & Paragraphs]

• Headings: <h1> through <h6>

• Paragraphs: <p>Some text here.</p>

[Text Styling]

• Bold: <b>bold text</b>

• Italic: <i>italic text</i>

Lists

[Ordered list (<ol>)]

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

[Unordered list (<ul>)]

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

[Nested list]

<ul>
  <li>Main item
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

[Links]

• Use an anchor tag <a> with href attribute

• Example: <a href="http://www.example.com">Visit Example</a>

• Links can point externally, internally (same site), or to sections in the same page

---

Exercise 1 – Web Analysis

Task Overview

In this exercise, we are required to select five (5) websites from the provided link and conduct a detailed review of each website. The analysis focuses on the website’s design, layout, content, and functionality, with an aim to identify both strengths and weaknesses and understand their impact on the overall user experience. The findings must be compiled into a structured report that has a clear formatting with headings and subheadings for readability and then be uploaded to our e-portfolio. Each review should have the minimum of 200 words and each review must summarize the findings and include  some recommendations for improvement. Additionally, we should also provide screenshots of the key pages or sections in order to illustrate our points.

Key Areas of Analysis

1. Purpose and Goals

   Each site was examined to see if its main intention was clear. A well-designed website should quickly show what it offers and why it exists.

2. Visual Design & Layout

   The website’s design is evaluated by looking at its use of color, typography, and imagery, as well as how these elements work together to create balance, readability, and overall aesthetic appeal.

3. Functionality & Usability

   This step involved testing how smooth it was to move around the site. I looked at menus, links, and interactive features to see if they made the experience intuitive or frustrating.

4. Quality & Relevance

   We need to evaluate whether the information was accurate, well-organized, and relevant to its audience. Clarity and tone played a big role in how the message came across.

5. Website's Performance 

   Technical aspects such as loading speed, mobile compatibility, and browser performance were also considered , which all directly influence user satisfaction. They are all measured across all kinds of devices and browsers.

I chose 5 different websites each representing different category including fashion, portfolios,events,food and drinks and music. All of these sites are award-winning examples featured on CSS Winner, which made them especially interesting to study. Each website gives out different kinds of style and aesthetics , reflecting the distinct identity of its category, and it made me want to know more about it.

Website 1 : The Etiquette by Moon-Moon (Fashion)

Fig 1.0 : The Etiquette

• Purpose and Goals :

The Ethiquette is an ethical couture fashion house that combines high-end couture design with strong environmental and sustainable values. The website invites users to fully immerse themselves in the brand's creative world through an editorial approach inspired by fashion magazines. It offers span ready-to-couture women’s apparel such as dresses, skirts, bustiers, and sets, as well as jewelry, accessories, and customization services. The site also highlights a curated lookbook, artistic collaborations, and an exclusive membership club called The Ethiclub, which connects customers to sustainability causes and private events. The Ethiquette conveys a distinct identity based on exclusivity, craftsmanship, and fashion as an art form through this fusion of luxury, responsibility, and artistry.

• Visual Design & Layout :

[ Colour ]

The website primarily uses a black and white color scheme, creating a clean and elegant foundation. Most pages feature a white background with black text, which ensures readability and maintains a minimalistic feel. The subtle addition of khaki as a sub-color adds warmth and sophistication, reinforcing a sense of understated luxury. This palette allows the rich colors in product photography to stand out vividly, drawing attention to the fashion pieces themselves. Generous use of white space further enhances this effect, letting the imagery take center stage and reinforcing the brand’s refined, minimalistic yet luxurious aesthetic.

Fig 1.0 : Colour palette of "The Etiquette" website

[ Typography ]

This website uses 2 fonts, EditorialNew and Helvetica Neue.

For the font family, EditorialNew-Extra Light and Helvetica Neue-Medium and Light are used.EditorialNew is applied for general headings , while the Helvetica Neue are used for both headings and body text.

The heading size is approximately 119-140px, and the body text size is 16-22px.

Fig 1.2 : Fonts used in website 

[ Imagery ]

High-quality product photos are used for clothes and accessories; artistic shots evident in lookbook, collaborations etc. These images are visually rich and play into the couture/haute couture feel.Also includes images for location, handmade process, shop fronts (e.g. “Handmade in Paris”), lifestyle images. These contribute to brand story.

 

Fig 1.3 : High quality images used in website

[ Layout ]

The layout of this website feels an editorial that is in nature as sections flow like pages of a fashion magazine. You begin with hero visuals, then slide into product showcases, brand story, customization options, and editorial content. The layout supports narrative pacing, giving spaces and guiding attention

Fig 1.4 : Flow of layout of website

• Functionality & Usability :

[ Navigation ]

Navigation is clean and intuitive. The top menu offers direct access to major areas like “Shop,” “Customization,” “The House,” “Diary,” and “FAQ.”

Fig 1.5 : Navigation_laptop view

[ Interactive Elements ]

Although subtle, interactive features work well. Scroll reveals, hover states, and seamless transitions improve the experience without coming across as gimmicky. A thing that increases brand engagement is the customization section, which asks users to envision custom pieces made to their specifications.

Fig 1.6 : Interactive elements

• Quality & Relevance :

 [ Quality ]

Overall, I can see that the website’s visuals, photography, and layout are high-caliber and it is reflecting the prestige of a couture brand. All of the product descriptions, brand philosophy, and donation statements are purposeful and consistent, while the overall voice feels refined, ethical, and luxurious.

[ Relevance ]

In my opinion, the content of this website speaks to a niche kind of audience of luxury consumers who value sustainability, customization, and artisan quality. Jewelry, couture clothing, custom services, and storytelling give a full picture of the brand, while messaging like “Handmade in Paris,” “1% donation,” and “Ethiclub” reinforces appeal to users who care about both style and social impact.

• Website's Performance :

[ Load Time ]

I test the performance of the websites using PageSpeed Insights.

This website loads quickly for first content (FCP) and is visually stable (CLS), but the largest contentful paint and total blocking time pulls down the performance score.
 

Fig 1.7 : Performance score_Mobile

Fig 1.8 : Performance score_Desktop

[ Responsiveness & Compatibility ]

The design adapts well across devices. Whether on desktop or mobile, the layout scales gracefully, and the couture look remains intact. Even on smaller screens, the navigation and key content stay clear and usable.

Conclusion :

[Strengths]

Hungry Tiger impresses with its brand storytelling and experiential design. The visuals are rich and appetizing, the layout is well-paced, and the interactive elements make the site feel alive. It does more than sell sauce—it invites you into a world.

[Weaknesses]

On weaker devices or connections, though, the intense visuals and interactions may cause performance issues. Additionally, someone who only wants product information or fast purchase options without the narrative buildup may find the brand-forward approach less approachable. Its challenge is to strike a balance between lean usability and immersive flair.

Website 2 :  Lydia Amaruch's Portfolio by Lydia Amaruch (Portfolio)

Fig 2.0 : Lydia Amaruch's Portfolio

• Purpose and Goals :

Lydia Amaruch is the portfolio of a Berlin-based UI/UX and branding designer. Its main purpose is to present her design expertise across disciplines, using a combination of bold visuals, storytelling, and playful motion to highlight her creative process.The site is aimed at potential clients, employers, and collaborators who want to understand not only her finished work but also the ideas and narratives behind it.

• Visual Design & Layout :

[ Colour ]

This website embraces a minimalist and modern aesthetics, using white and black to create contrast and also ensures clarity.This allows her bold design work and case study visuals to take center stages.

Fig 2.1 : Colour palette of website

[ Typography ]

Fonts used in this website are mostly custom made by the website creator herself but still there are still some fonts that can be identify. They are 2 fonts, Apple system and Dm Sans.

For the font family, Apple system-Normal and Dm Sans-Normal are used.Both of the text that were able to identify are mostly used in the body text and most of the headings used custom made font.

There are many headings so the sizes differs, they goes from 240px to 340px, and the body text size is around 24-28px.

Fig 2.2 : Fonts used in website

[ Imagery ]

The portfolio makes strong use of vivid project imagery paired with playful motion effects. Subtle animations and transitions add energy and character without overwhelming the work. This aligns with her aim to merge storytelling and interactivity.

[ Layout ]

The site has a simple, straightforward design, with sections like About, Portfolio, Services, and Contact leading from a landing introduction (hero area). The content doesn't feel cluttered thanks to the deliberate arrangement, breathing room, and modular presentation. Visitors are guided through her story and capabilities by the structure and consistent navigation.

• Functionality & Usability :

[ Navigation ]

Navigation of this website is intuitive with clear menu leading to different sections like contact, about and projects.Projects are displayed through thumbnails that are clickable that open into a page of deeper case studies .

Fig ? : Navigation_laptop view

Fig 2.3 : Navigation_laptop view (projects)

[ Interactive Elements ]

There are hover effects on project thumbnails, subtle transitions between pages, and animated reveals help bring the experience to life without overwhelming. While not overly flashy, these interactions add polish and enhance the user’s engagement with her portfolio and make it much more interesting.

• Quality & Relevance :

[ Quality ]

The portfolio feels polished and professional, with visuals and writing that meet the high standards expected in design. A consistent style, tone, and layout hold everything together, while the use of storytelling and playful motion adds personality and makes the experience feel more engaging.

[ Relevance ]

The content speaks directly to clients, studios, and employers in the design industry. By showcasing both UI/UX and branding projects, the site demonstrates versatility across creative disciplines. The emphasis on bold visuals, narrative, and interaction positions the designer as adaptable yet distinctive in approach.

• Website's Performance :

[ Load Time ]

This website is weak in both mobile and desktop. It not only loads slow for first content (FCP) and it also has problem in large contentful paint, high total blocking time, and high speed index, and all of these causes the performance score to be very low.

Fig 2.4 : Performance score_Mobile

Fig 2.5 : Performance score_Desktop

[ Responsiveness & Compatibility ]

Conclusion :

[Strengths]

The Ethiquette’s greatest strength is its coherence: brand, design, and message all work together. The site feels like stepping into a couture house’s editorial spread—luxurious, meaningful, and unique. The customization and storytelling elements add depth beyond just a shop.

[Weaknesses]

High resolution images may slow down the performance for some users. Additionally, the motion effects may distract users away from the content if it is overused on mobile.

Website 3 : PEOPLE INSPIRED* by Alex Redetzke (Events)

Fig 3.0 : People Inspired*

• Purpose and Goals :

People Inspired* is the Senior Graphic Design & Interactive Media showcase for the Fall 2024 class at UW-Stout. The site’s goal is to exhibit student works and communicate themes around human connection, culture, and identity—how design is shaped by people and vice versa.

It aims to present the graduating class’s collective creativity, offering a platform to share their work with broader audiences (faculty, peers, public).

• Visual Design & Layout :

[ Colour ]

The website makes use of a restrained palette consisting mostly of white backgrounds with black text. However, colors like pink,blue,green,red and yellow are used as decoration of the website. This simple scheme not only aligns with the school’s branding but also provides consistent contrast that supports readability and clarity.

Fig 3.1 : Colour palette of "People Inspired*" website

[ Typography ]

This website uses 3 fonts, Times, my_avenirRoman and my_avenirLightOB.

For the font family, Times-Normal, my_avenirRoman-Normal and my_avenirLightOB-Normal are used.All 3 fonts are used both in headings and body text of the website.

The heading size is approximately 150-200px, and the body text size is 16-29px.

Fig 3.2 : Fonts used in website

[ Imagery ]

Imagery plays a central role, as each student is represented through a thumbnail image. These visuals lead to detailed project pages and serve as the entry points into each portfolio.

The images are consistent in quality and framing, which helps maintain a curated, gallery-like atmosphere. This consistency makes the browsing experience feel polished and intentional.

Fig 3.3 : Student thumbnails

[ Layout ]

For the layout of this website, each student has the same-sized thumbnail, where it seems to be aligned into neat rows and columns, but actually it has different placement, it just looks like they are because they are places left and right simultaneously. 

• Functionality & Usability :

[ Navigation ]

Navigation is straightforward and requires little effort from the user, for example,scrolling down to find specific thumbnail. Each student thumbnail is clickable, leading directly to more information. The simplicity makes the experience intuitive even for first-time visitors.

Fig ? : Website navigation

[ Interactive Elements ]

Despite having few interactive elements, the website effectively utilizes hover states to offer nuanced feedback when interacting with a project. A detailed view of the work is displayed upon clicking, occasionally providing a link to the student's individual portfolio. Page transitions are seamless, preventing interruptions and maintaining attention on the projects at hand.

Fig ? : Interactive elements

• Quality & Relevance :

 [ Quality ]

Overall, I feel that this website is clean and professional, as it comes with bold headlines that set the tone right away. The layout is very purposeful, keeping the spotlight on the students’ work and presenting it in a clear, engaging way.

[ Relevance ]

The content speaks directly to its intended audience which are the employers, peers, faculty, and the wider design community all around the world. It ties neatly into showing theme of culture, identity, and human stories, with curated projects that reflect those ideas meaningfully.

• Website's Performance :

[ Load Time ]

This website has great performance score for both mobile and desktop but there are still some problems like average loading of the first content (FCP) and average speed index.

Fig ? : Performance score_Mobile

Fig ? : Performance score_Desktop

[ Responsiveness & Compatibility ]

• Conclusion :

[Strengths]

The professionalism and ease of use of the website are its strongest points. Its grid-based layout and typography help to focus attention on the students, and its navigation is easy to use. The showcase feels polished and academic thanks to the design's restraint.

[Weaknesses]

A limitation of the site is its static nature—it lacks more dynamic or interactive storytelling that could make the student showcase more engaging for external audiences.Slow connections may also be a problem due to the heavy reliance on images. Lastly, despite being neat, the design may come across as a little too "academic" and may pass up chances to motivate audiences outside of the school.

Website 4 : Hungry Tiger by Artemii Lebedev (Food-Drink)

• Purpose and Goals :

Hungry Tiger is a brand site for a bold Indian sauce company. It aims to sell sauces (e.g. Tikka Masala) and communicate the brand’s philosophy: “nothing to hide — just real ingredients, bold spices, and a little creamy magic.” 

• Visual Design & Layout :

[ Colour ]

The design uses colors like brown and yellow which are from the same colour palette but also creates contrast if its put together.Brown and yellow are often associated with appetite and energy at the same time it is also matches the colour of the product and its packaging. Accent highlights guide users toward calls-to-action like “Order Now,” making the palette not only visually strong but also functional.

Fig ? : Colour palette of "Hungry Tiger*" website

[ Typography ]

This website uses only 1 font, Salmond.

For the font family, Salmon_Bold and Salmond_Medium are used. The heading size is approximately  59-217px and the body text size is 11-16px.

Fig ? : fonts used in website 

[ Imagery ]

The food and sauce visuals dominate, acting as powerful “first impressions.” It highlights the flavor and texture by showing glossy jars, rich sauces, and styled plates. These high-quality images make the product feel premium and desirable. Sometimes, the imagery becomes immersive, blending into interactive sections or transitions, which gives the site a dynamic feel.

Fig ? : Website imagery (recipes)

Fig ? : Website imagery (glossy jars)

Fig ? : Website imagery ( 3D jars)

[ Layout ]

The layout follows a conventional restaurant website structure, with a large image followed by navigation and distinct sections for menu, ordering, and story. The recipes itself is presented in a grid style, making it easy to scan quickly.

Fig ? : Recipes arranged in grid style

• Functionality & Usability :

[ Navigation ]

The menu, locations, order, and contact are all easily accessible through the simple and straightforward navigation. The navigation on mobile devices condenses into a small format, guaranteeing a seamless browsing experience on all devices.

Fig ? : Website Navigation & Website in mobile layout

[ Interactive Elements ]

One standout is a mini-game: visitors can catch sauce jars as part of a playful interaction. This adds a fun surprise and encourages users to stay longer. Also, recipe pages allow users to see how the sauces are used in real life

Fig ? : Interactive elements

• Quality & Relevance :

 [ Quality ]

This website builds trust by being transparent — it clearly shares ingredient details, nutrition facts, and highlights the absence of artificial additives. The visuals are polished and professional, while the copy reflects the brand’s personality in a way that feels natural and consistent.

[ Relevance ]

The content speaks directly to people who enjoy cooking and care about authentic flavors. Recipes show practical ways to use the products, helping customers see real value in them, while the storytelling emphasizes the brand’s promise of bold flavors made with real ingredients.

• Website's Performance :

[ Load Time ]

This website has an average performance score but the performance score of desktop is higher than in mobile.In mobile, the performance score is pulled down due to the first content (FCP) being slow in loading , the high contentful paint and speed index pulls down the performance score.For the desktop, it has all first contentful paint, largest contentful paint, total blocking time and speed index in an average score.

Fig ? : Performance score_Mobile

Fig ? : Performance score_Desktop

[ Responsiveness & Compatibility ]

• Conclusion :

[Strengths]

Hungry Tiger impresses with its brand storytelling and experiential design. The visuals are rich and appetizing, the layout is well-paced, and the interactive elements make the site feel alive. It does more than sell sauce—it invites you into a world.

[Weaknesses]

On weaker devices or connections, though, the intense visuals and interactions may cause performance issues. Additionally, someone who only wants product information or fast purchase options without the narrative buildup may find the brand-forward approach less approachable. Its challenge is to strike a balance between lean usability and immersive flair.

Website 5 : HiKeys-1997 by ++hellohello (Music)

• Purpose and Goals :

HiKeys 1977 is a site for a synthesizer / keyboard product brand. The purpose is to present this electronic musical instrument—its features, design, specs—and attract buyers, musicians, and tech-savvy users. It blends product marketing with narrative about sound, craftsmanship, and design.

• Visual Design & Layout :

[ Colour ]

The website relies on a neutral palette which only contains black, white and grey. It uses only black, white, and the shades of gray in between to create variations of a single colour. The palette matches the product and it creates some kind of metallic and futuristic vibes.

Fig ? : Colour palette of "Hikeys-1997*" website

[ Typography ]

This website uses 3 fonts, Sans-serif and Monument Grotesk Regular and Monument Grotesk Semi-Mono.

For the font family, Sans-serif_Normal, Monument Grotesk Regular_Normal and Monument Grotesk Semi-Mono_Normal. are used. Most of the headings of this website uses Sans_serif but for the body text, all 3 fonts listed were used.

The heading size is approximately 57-410 px, and the body text size is 12-14px.

Fig ? : fonts used in website

[ Imagery ]

All the imagery of this website is mostly in the form of 3D models, interactive renderings, and animation rather than static photos. You’ll see the product in motion, lighting shifts, and responsive visuals that react to cursors or scroll. These visuals convey more than appearance—they show behavior, form, and materiality in a dynamic way.

Fig ? : Website imagery (3D models)

[ Layout ]

The layout is structured into distinct sections—Home, Music, Merch, Events, and Contact—which are easy to navigate. The products section is particularly well-organized and easy to look for the specific item. The hierarchy ensures that the brand and its commercial offerings take center stage, which is consistent with the band’s promotional goals.

Fig ? : Product section of website

• Functionality & Usability :

[ Navigation ]

The navigation is smooth and it provides clear information we needed, it also provides "Let us Know" icon to let people who wants to know more about the product have someone to contact for details.

Fig ? : Navigation button ("Let us know" icon)

[ Interactive Elements ]

The HiKeys 1977 site is built around interactivity. You can explore the keyboard in a 3D demo, almost like handling it in real life. As you scroll, the page comes alive with smooth animations, making specs and features feel more engaging.

Fig? : Interactive elements 

• Quality & Relevance :

 [ Quality ]

The design, images, and copy of this website overall present a high-end, premium product.Not only the technical detail is precise but the presentation of this website also conveys reliability and craftsmanship.

[ Relevance ]

The website is clearly designed for musicians, gear enthusiasts, and tech-savvy users. It connects with this audience by offering detailed product specifications, design stories, and striking visuals, making the content both informative and engaging for those who are genuinely interested in the craft behind the products.

• Website's Performance :

[ Load Time ]

This website has a very low performance score on mobile but an average score on desktop. For mobile, the first contentful paint is in average, but others like largest contentful paint, total blocking time, cumulative layout shift and speed index pulls down the performance score. However,for desktop it is the high total blocking time and speed index affects the performance score.

Fig ? : Performance score_Mobile

Fig ? : Performance score_Desktop

[ Responsiveness & Compatibility ]

• Conclusion :

[Strengths]

HiKeys 1977 is ambitious and beautiful. It elevates product presentation into an immersive narrative, uses visual and interactive techniques as storytelling tools, and retains sophistication and clarity. The mixture of form, function, and storytelling is compelling.

[Weaknesses]

However, there is a risk associated with its complexity: slow connections, device limitations, or performance bottlenecks can reduce immersion. Additionally, the narrative approach may seem like extra steps before you get what you're looking for if you're a visitor who wants quick facts or specs. It's always difficult to strike a balance between effective usability and engaging storytelling, and HiKeys stands on that frontier.

---

Reflections

After going through the process of investigating and doing deep research on these websites, I have learned lots of informations but it also made me realized that this course will not be as easy as I thought.