Interactive Design / Exercise 1 - Web Analysis
Interactive Design / Exercise 1 - Web Analysis
September 23, 2025
24.09.2025 - 2025 / Week 1 - Week 4
GeXianjing / 0377636
Interactive Media /Bachelor of Interactive Spatial Design (Honours)
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.
Week 2 Practice | Website Analysis Report
For this week’s exercise, my task was to select five websites and conduct a systematic analysis of each. By examining their design, layout, content, and functionality, I aimed to understand the strengths and weaknesses of different websites from a user experience (UX) perspective.
During the analysis, I mainly focused on the following questions:
-
What is the purpose of the website? Does it communicate this clearly to its users?
-
In terms of visual design: Are the colors, fonts, and images consistent and aligned with the brand identity?
-
Is the layout and navigation clear enough for users to quickly find the information they need?
-
Are the functions and interactions smooth—for example, are the search bar, forms, and buttons easy to use?
-
Is the content accurate, relevant, and well-structured?
-
Performance and compatibility: How fast does the site load? Is it responsive across different devices?
Through this series of evaluations, I hope to sharpen my observational skills in web design and, at the same time, propose practical suggestions for improvement. The final report is not only the outcome of a classroom assignment but also a personal record of my growth in design thinking.
-
Molazone — https://mola-zone.com/
-
Meet Your Legend — https://meetyourlegend.com/
-
Glitch Productions — https://www.glitchprod.com/
-
Distrategy (by Plastic Design) — https://distrategy.plastic.design/
-
Amanation Official — https://www.amanation-official.com/company/
🌐 Website 1: Molazone（https://mola-zone.com/）
1. Purpose and Goals
Molazone is the official website of French music artist Yamê, designed to present his musical works, music videos, and the creative world behind his album ÉBĒM through immersive visuals and interactive experiences.
 |
| Molazone |
The website serves several key purposes:
-
Provide direct access to music videos and listening platforms such as YouTube and Apple Music.
-
Promote Yamê’s tour events and merchandise (vinyls, T-shirts, etc.).
-
Create an engaging “Molazone Universe” that merges sound, motion, and visual storytelling.
Rather than simply letting users listen to music, Molazone invites them to step inside the artist’s world. The branding is clear and confident, targeting young audiences interested in France’s vibrant pop and independent music scene.
2. Visual Design and Layout
a) Color
The website features a black background contrasted with warm yellow and white typography, resembling a stage illuminated by spotlight. This bold color combination effectively mirrors the energetic and mysterious tone of Yamê’s music.
It also uses a panoramic animated environment, filled with visual details that make the user feel like they’re traveling through a cinematic landscape.
 |
| warm yellow |
 |
| black background |
b) Typography
Molazone adopts a minimalist sans-serif typeface with strong hierarchy and good contrast.
-
Titles are bold and expressive, giving the site a confident character.
-
Body text remains clean and easy to read.
-
The bilingual (English/French) layout maintains consistent font style across both languages.
 |
| Titles |
 |
| Body text 1 |
 |
| Body text 2 |
The simplicity of the typography ensures that the user’s attention remains focused on the music and visuals rather than on decorative text.
c) Imagery and Video
Upon entering the site, users are instantly immersed in music and visuals. The main experience is built around dynamic video backgrounds, moving images, and subtle animation transitions.
It feels as if the visitor is riding a motorcycle through a digital landscape, where every scroll or mouse movement unlocks a new visual scene or piece of content.
 |
| Main screen |
 |
| Click on the node, and a music playlist will appear |
 |
| video |
However, while this mechanic adds a strong sense of motion and excitement, it also introduces a few usability challenges—controlling the motorcycle path and locating specific information can feel a bit tricky at first, especially for new users.
3. Functionality and Usability
a) Navigation
Navigation is intentionally minimal, containing only essential links such as TOUR 2025, SHOP, and ÉBĒM.
 | ||
| TOUR 2025 |
 |
| ÉBĒM. |
The desktop menu is centered at the top, while the mobile version uses a hamburger-style menu.
Transitions between pages are smooth, supported by gentle animations that make browsing feel cinematic.
It's like a game of walking on a journey to different destinations and playing music that matches the journey, very artistic. But the downside is that it's a bit time-consuming and cannot directly browse the music catalog
Surprisingly, it has set day and night modes with different visual contrasts
b) Interactivity
Molazone integrates multiple interactive layers — video playback, scroll-triggered motion, and clickable music elements.
The “Rejoins la Molazone” (Join Molazone) section allows visitors to interact directly and become part of the fan community.
These responsive, well-timed animations make the whole site feel alive and intentional.
That said, on smaller screens, some buttons sit too close to the edge, which can lead to mis-taps or missed interactions.
4. Content Quality and Relevance
All content directly relates to Yamê’s creative output — albums, videos, tour schedules, and behind-the-scenes moments. The bilingual text (French and English) keeps the tone authentic while broadening international accessibility.
Every section feels consistent and well-curated. The tone is genuine and passionate, reflecting the artist’s personality without unnecessary marketing language.
 |
| ins |
5. Performance and Compatibility
The site performs smoothly on desktop but takes slightly longer to load due to the heavy use of video materials (roughly 3–5 seconds on first visit).
Animations and transitions remain fluid on most browsers (Chrome, Safari, Edge).
Mobile optimization is fair, but the layout performs best in horizontal orientation due to video scaling.
The bilingual toggle between English and French works seamlessly and enhances accessibility.
 |
| load |
 |
| Web version |
 |
| The mobile version is very laggy |
 |
| mobile version |
6. Strengths and Weaknesses
Strengths
-
Visually powerful and emotionally immersive.
-
Strong brand consistency between music, visuals, and identity.
-
Smooth transitions and dynamic animations enhance interactivity.
-
Excellent bilingual structure that reaches global audiences.
Weaknesses
-
Long initial load time due to high-resolution videos.
-
Minimal navigation can be confusing for first-time users.
-
Limited optimization for small screens.
-
Lack of written storytelling about the artist’s journey for new visitors.
✳ Reflection & Suggestions
Molazone beautifully merges music, art, and interaction into one cohesive digital experience. Its dark stage-like aesthetic, cinematic transitions, and subtle details make it feel less like a website and more like a living, breathing part of Yamê’s artistic identity.
However, the site could benefit from several thoughtful refinements:
-
Improve loading performance by implementing lazy loading or lighter video previews.
-
Add an “About Yamê” section that introduces the artist’s story and musical inspiration to new users.
-
Enhance the mobile experience with better spacing, larger buttons, and adaptive video scaling.
-
Expand user interaction by integrating a fan message wall or playlist-sharing feature.
Overall, Molazone is a powerful example of immersive digital storytelling — where music is not only heard but experienced. It successfully turns a musician’s world into an interactive journey, proving that strong visual direction and thoughtful motion design can transform a simple artist page into an unforgettable encounter.
Keywords: immersive experience · brand consistency · music visualization · fluid interactivity
🌐 Website 2: Meet Your Legend（https://meetyourlegend.com/）
1. Purpose and Goals
Meet Your Legend is a professional mentorship and networking platform for the creative industry, focusing on VFX, animation, and gaming.
Its main goal is to connect emerging creatives with experienced mentors, while also helping studios and schools find qualified professionals.
The website offers personalized one-on-one mentorships, a Talent Pool for job seekers, and partnership opportunities for creative companies and educational institutions.
It’s not just a learning space — it’s a platform about growth, empowerment, and creative connection.
 |
2. Visual Design and Layout
a) Color
The website uses a dark brown background with creamy yellow text, creating a strong and eye-catching contrast.
This color palette gives the site a stylish yet professional look — warm, confident, and visually striking.
The large “FREE ONLINE CONFERENCES” banner in these tones immediately draws attention and reinforces the brand’s energetic and creative identity.
1.1
1.2
Scroll down and the previous section will turn dark, while the current section will be highlighted with a light color
This color palette gives the site a stylish yet professional look — warm, confident, and visually striking.
The large “FREE ONLINE CONFERENCES” banner in these tones immediately draws attention and reinforces the brand’s energetic and creative identity.
 |
| 1.1 |
 |
| 1.2 |
b) Typography
-
Bold titles convey confidence and structure.
-
Body text spacing is comfortable, avoiding visual clutter.
-
Clear hierarchy between headings and paragraphs improves scan-ability on long pages.
c) Imagery
Images feature mentor portraits and cinematic visuals from creative works (e.g., Guardians of the Galaxy Vol. 3).
This choice builds trust and credibility while keeping the aesthetic elegant.
Scroll animations are subtle, giving motion to the page without distraction.
 |
| mentor |
3. Functionality and Usability
a) Navigation
Navigation is straightforward, located at the top with core categories such as Legends, Talent Pool, Conferences, Online Courses, and Contact.
A “Scroll” indicator on the homepage encourages visitors to explore further.
All transitions are smooth and intuitive.
 |
| search keywords |
 |
| categories |
b) Interactivity
Interactive elements prioritize clarity — hover animations, highlighted buttons, and mentor cards respond fluidly.
Key CTAs like “Join Talent Pool” and “Discover Our Offers” are clearly visible and responsive.
4. Content Quality and Relevance
The website’s content is strong and highly relevant.
Every section is carefully written to speak to a specific audience: job seekers, companies, or creative schools.
Headlines such as “Guided by Creative Experts” add a motivational tone while maintaining professionalism.
Information about mentorships and collaboration opportunities is well-structured and easy to understand.
 |
| Content1 |
5. Performance and Compatibility
The site performs smoothly on both desktop and mobile devices.
Images and animations load quickly, and the layout remains fully responsive across browsers (Chrome, Safari, Edge).
he website loads fast and runs smoothly on both desktop and mobile.
Transitions are fluid, and all animations perform without lag.
It’s fully responsive across major browsers, though older phones may show minor scroll delay.
 |
| computer Performance |
Mobile users enjoy a clean and organized interface, with all sections adapting seamlessly to smaller screens.
 |
| mobile version |
 |
| Web version |
6. Strengths
-
Clear structure and intuitive navigation — pages are logically organized and easy to explore.
-
Strong professional identity — the layout, typography, and visuals reflect a credible, established brand.
-
High-quality content — mentor details and program descriptions build user trust.
-
Multi-audience targeting — each type of visitor (student, company, or school) can quickly find relevant sections.
-
Excellent performance — fast loading and solid responsiveness across all devices.
7. Weaknesses
-
Text-heavy layout — long paragraphs in some areas make reading slightly tiring.
-
Limited visual variation — repetitive portrait photography reduces visual rhythm.
-
Lack of emotional storytelling — missing mentor or student success stories makes the site feel slightly impersonal.
-
Moderate CTA visibility — some key action buttons could stand out more through color contrast or placement.
Reflection and Suggestions
Meet Your Legend delivers a polished, professional, and inspiring user experience.
Its minimalist design and structured information reflect trustworthiness and focus — essential qualities for an education-oriented platform.
To enhance the emotional and visual appeal, the site could:
-
Add mentor or student success stories to strengthen emotional connection.
-
Introduce more varied imagery or creative visuals to balance text-heavy layouts.
-
Increase color contrast or emphasis on CTAs for better engagement.
Overall, this website is a strong example of how simplicity, organization, and authenticity can elevate a digital platform.
It doesn’t rely on flashy visuals — instead, it communicates confidence through clarity, purpose, and inspiration.
Keywords: mentorship · creative career · minimalist design · user trust · professional growth
🌐 Website 3: Glitch Productions（https://www.glitchprod.com/）
1. Purpose and Goals
Glitch Productions is an Australian animation studio best known for The Amazing Digital Circus, Murder Drones, and Meta Runner.
The website’s main purpose is to showcase its original animated series, share updates, attract new talent, and connect fans to its YouTube channels and online shop.
It serves as both a creative portfolio and a brand identity hub — representing a young, humorous, and imaginative studio culture.
 |
| Glitch Productions |
2. Visual Design and Layout
a) Color
The site uses a dark background with vivid neon tones and colorful artwork, creating a lively and cinematic atmosphere.
The high contrast draws attention to the animation visuals and enhances the overall energy of the page.
This palette reflects Glitch’s vibrant and creative brand style.
 |
| dark background |
 |
| colorful |
 |
| artwork1 |
 |
| artwork2 |
 |
| artwork3 |
The content introduction is mainly based on white background and black text, with colorful artistic fonts for the title
 |
| Black on White |
b) Typography
Typography is modern, bold, and simple, emphasizing titles like Our Shows and Careers.
The clean layout with balanced spacing keeps the text easy to read and lets the visuals take center stage.
c) Imagery
Images are the heart of the website — show posters, character art, and still frames appear throughout.
Each visual section highlights the studio’s storytelling style and artistic range, allowing users to instantly connect with its animation aesthetic.
 |
| Page animation information 1 |
 |
| Page animation information 2 |
 |
| Page animation information 3 |
3. Functionality and Usability
Navigation is clear and direct, including Home, About, Our Shows, Careers, Shop, and Contact.
Each page loads smoothly, and key buttons like “Watch Now” lead users directly to YouTube or other streaming platforms.
The browsing experience feels natural and enjoyable for both fans and potential job applicants.
Navigation
YouTube
|
| Navigation |
4. Content Quality and Relevance
The site’s copywriting is short, witty, and full of personality.
On the About page, the team humorously describes themselves as:
“So what do we do? Disappoint our parents, mostly.”
This informal tone makes the brand relatable and memorable.
Every show has a short, well-written description with links to watch — simple, clear, and on-brand.
- Mainly using scrolling animation effects and text block enlargement to pop up
 |
| Collaborators use landscape scrolling mode |
- Clicking the button will cause a color change
 |
| button |
- Animated characters will jump
5. Performance and Compatibility
The animation introducing the actor is in scrolling mode, and when the mouse touches the actor's picture, the movies he has appeared in will automatically appear
mobile version1
mobile version2
Mobile Response: Excellent adaptation; scrolling is smooth and text alignment remains consistent.
Network Dependency: Loads quickly, performs well even on 4G networks.
Memory Usage: Lightweight (about 200–300 MB).
Compatibility: Works well on Chrome, Safari, and Edge without major issues.
 |
| mobile version1 |
 |
| mobile version2 |
Images load quickly, and scrolling stays smooth even on animation-heavy pages.
It’s responsive on mobile and compatible with Chrome, Safari, and Edge.
6. Strengths
- Visually engaging — the colorful artwork instantly grabs attention.
- Strong brand identity — funny, youthful, and creative.
- Easy navigation — logical structure and smooth browsing.
- Fast performance — images are well-optimized despite their size.
Weaknesses
-
Limited interactivity — lacks dynamic previews or behind-the-scenes content.
-
Brief show descriptions — fans may want more story or production details.
-
No update section — missing a news or blog area for ongoing announcements.
✳ Reflection and Suggestions
The Glitch Productions website is clean, energetic, and perfectly matches the studio’s creative spirit.
It effectively blends humor and professionalism, letting the animations speak for themselves.
To make it even stronger, the site could:
-
Add interactive previews or short animation loops.
-
Create a news or update section for new releases.
-
Include more behind-the-scenes content for fans who love the production process.
Overall, this website is a great example of how bold visuals and personality-driven writing can express a creative brand’s identity.
Keywords: animation · creativity · humor · brand personality · visual storytelling
🌐 Website 4: Distrategy (by Plastic Design)
https://distrategy.plastic.design/
 |
| Distrategy |
1. Purpose and Goals
Distrategy is an event-based website created by Plastic Design to promote a business and innovation conference in London.
Its main goal is to inform attendees about the event’s concept, share the agenda, and convey the conference’s philosophy — centered on collaboration, transformation, and creative strategy.
Unlike a typical corporate site, it feels more like a digital manifesto — a space that blends design thinking with storytelling to inspire participation and connection.
2. Visual Design and Layout
a) Color
The site uses a minimalist light-beige and black palette, with soft shadows and high-contrast typography.
This neutral scheme creates a professional yet artistic look, allowing the text and structure to speak for themselves.
Large white spaces and minimal lines give it a sophisticated editorial feel, suitable for a design-oriented audience.
 |
| color |
 |
| 1.1 |
 |
| 1.2 |
 |
| 1.3 |
 |
| 1.4 |
b) Typography
Typography plays a central role — the font is elegant, thin, and clean, emphasizing readability and modern design taste.
Large headlines like “Thinking outside the box” or “Building together” stand out as visual statements rather than just text.
The consistent alignment and scale hierarchy reflect careful grid-based layout planning.
c) Imagery
The imagery is minimal, consisting mainly of abstract visuals and large text compositions.
The focus is clearly on content and message rather than decoration.
Occasional symbolic images, like architectural textures or workshop photos, complement the professional tone.
 |
| visual 1 |
 |
| visual 2 |
3. Functionality and Usability
The website structure is simple: Overview, Agenda, and Info.
 |
| structure |
Each section scrolls smoothly with clear transitions, and the sticky navigation helps users jump quickly between topics.
The event agenda is presented in a timeline format, making it easy to follow the schedule at a glance.
All contact information, location, and resources (like “Download attendee contact guide”) are neatly placed at the bottom.
4. Content Quality and Relevance
The textual content is the strongest part of this site.
It combines inspirational statements — such as
“Turn vision into motion. Challenge, refine, evolve.”
with practical event information, creating a balance between emotion and clarity.
The Manifesto section effectively expresses the event’s creative values, while the Agenda and Info sections provide structure and usability.
The tone is formal yet motivational, appealing to professionals in design, business, and innovation.
5. Performance and Compatibility
 |
| website Performance |
 |
| Mobile Response |
6. Strengths
-
Strong concept-driven storytelling — the entire site feels like part of a brand narrative.
-
Minimalist elegance — excellent use of typography, layout, and negative space.
-
Clear navigation — simple structure makes it effortless to browse.
-
Professional tone — combines creativity with credibility.
Weaknesses
-
Limited interactivity — mostly static content, lacking dynamic animations or media.
-
No video or visual storytelling — relies heavily on text, which may feel too static for some users.
-
Subtle contrast issues — beige and light-gray tones may reduce readability on smaller screens.
-
Niche appeal — the abstract design language might be too conceptual for non-design audiences.
✳ Reflection and Suggestions
Distrategy stands out as a beautifully designed event microsite — minimalist, conceptual, and emotionally engaging.
It successfully conveys professionalism and inspiration, encouraging collaboration through its language and tone.
To make the experience even richer, the site could:
-
Add short background videos or interactive transitions to strengthen immersion.
-
Include speaker introductions or company profiles for more context.
-
Use slightly stronger contrast or motion to balance elegance with energy.
Overall, it’s a fine example of how strong typography and storytelling can define an entire event identity through web design.
Keywords: minimalist design · event website · storytelling · typography · creative strategy
🌐 Website 5: Amanation Official https://www.amanation-official.com/company/
1. Purpose and Goals
Amanation is a Tokyo-based creator management company that focuses on supporting, promoting, and connecting Japanese artists, illustrators, and talents.
The main goal of the website is to introduce the company, showcase its creators and projects, and attract potential clients or collaborators in the entertainment and creative industries.
It serves both as a corporate introduction page and a creative portfolio hub, presenting the brand as professional, artistic, and trustworthy.
2. Visual Design and Layout
a) Color
The website primarily uses a black background with white typography, creating a clean, minimalist Japanese design style.
Occasional soft gray tones and full-screen images of creators or projects add warmth and visual rhythm without cluttering the interface.
This restrained palette highlights the content and aligns with the company’s creative yet corporate image.
 |
| picture color |
b) Typography
Typography is modern and readable, using thin sans-serif fonts common in Japanese minimalist design.
Titles and section headers are bolded, while Japanese and English texts are clearly separated, making navigation intuitive even for international users.
The balanced use of kanji, katakana, and English type enhances the bilingual professionalism of the site.
c) Imagery
Images of creators, events, and collaborations dominate the layout.
Each image is crisp and arranged in a grid, giving users a clear overview of Amanation’s projects.
The aesthetic is consistent — polished, bright, and art-focused — reflecting the company’s respect for creative professionals.
3. Functionality and Usability
Navigation is smooth and intuitive, with a fixed top menu offering five main sections: Top, Creator, Topics, Company, and Contact.
Scrolling is fluid, and internal links transition without delays.
Each service category (Management, Casting, Creative, Event) is clearly labeled with a brief description.
 |
| Navigation |
On desktop, the experience is effortless — all content is accessible within two clicks.
However, on mobile, some image-heavy sections take slightly longer to load, though the layout remains intact and responsive.
 |
| category |
 |
| category 2 |
4. Content Quality and Relevance
Content is concise and well-structured. The About/Company section clearly communicates the company’s mission:
“To deliver the infinite potential of creators to the world.”
The text effectively balances corporate professionalism with creative passion, while the Topics section provides regular updates about exhibitions, collaborations, and projects.
Each post includes a title, description, and date, ensuring transparency and credibility.
 |
Content 1 |
 |
Content2 |
 |
| When sliding down to view categories, the image should be viewed with a slight method |
5. Performance and Compatibility
- Loading speed: Generally fast on desktop, with a short delay on image-heavy pages such as the Creator gallery
- Responsiveness: Fully responsive — the website adapts well to different screen sizes, preserving text readability and image quality.
- Compatibility: Tested to work smoothly on Chrome, Safari, and Edge.
- Mobile experience: Excellent layout retention; however, image scrolling may feel slightly slower on older devices due to large file sizes.
- Accessibility: The text contrast and font size meet usability standards, though English translations could be larger for better readability.
 |
| Web version |
6. Strengths
-
Elegant and minimal visual design — reflects Japanese aesthetics of simplicity and balance.
-
Clear structure and bilingual presentation — makes the content accessible to both local and global visitors.
-
Smooth navigation and clean user interface.
-
Frequent updates — the Topics section adds credibility and keeps the website active.
-
Strong visual representation of creators and projects.
7. Weaknesses
-
Limited interactivity — no animations, hover effects, or dynamic transitions.
-
Longer loading times on mobile — due to high-resolution creator images.
-
No search function or filtering in the Creator section, making it harder to find specific artists.
-
Minimal storytelling — lacks personal introductions or interviews with creators, which could strengthen emotional connection.
✳ Reflection and Suggestions
Amanation’s website successfully embodies professionalism and creative refinement.
Its minimalist structure and bilingual clarity make it an effective introduction to the company’s mission and team.
To further improve user experience, it could:
-
Add interactive features like artist filters or hover previews;
-
Include creator stories or behind-the-scenes content for deeper engagement;
-
Optimize image loading on mobile using compressed formats;
-
Expand English-language sections for international users.
Overall, Amanation’s site exemplifies how thoughtful simplicity, strong structure, and subtle design can express a brand’s integrity and artistic spirit.
Keywords: creator management · minimalism · bilingual design · responsive layout · professional branding
Learning Summary
Through the analysis of these five websites, I gained a deeper understanding of the core elements of web design, including visual aesthetics, information structure, user interaction, content organization, and technical performance.
First, I realized that “design and function must serve purpose.” Whether it’s Molazone’s immersive music experience or Amanation’s minimalist corporate presentation, the best websites help users understand the brand and its core values instantly. Visual design, tone of language, and interaction style all play a vital role in communicating brand identity.
Second, I learned that color and typography directly influence emotional perception. For example, Molazone uses dark tones and dynamic imagery to create immersion, while Meet Your Legend uses a light palette with blue tones to convey professionalism and trust. I now understand how to evaluate whether a color scheme matches a brand’s tone and provides clarity and hierarchy for users.
Third, I found that functionality and usability determine the smoothness of the user experience. Clear navigation bars, responsive layouts, and fluid scrolling are crucial for engagement and user satisfaction. From Glitch Productions and Distrategy, I realized that while striking visuals capture attention, a lack of interactivity or content updates can make a site feel static.
Finally, performance optimization and compatibility testing are essential. Amanation’s large, high-resolution images load more slowly on mobile devices, which showed me how performance can significantly affect overall experience. A great website is not only beautiful — it must also be fast and reliable.
Overall, this exercise taught me to evaluate websites from both a designer’s and a user’s perspective. I learned that web design is not just about appearance but about balancing creativity and logic to communicate effectively. In my future projects, I will focus on aligning aesthetics with usability — ensuring every page is truly “designed for people.”
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
Comments
Post a Comment