Interactive Design- exercise 1
22/9/2025-//2025（week1-week6）
YUAN XIAOYUE,0367988
Bachelor of Design (Honours) in Creative Media
Interactive Design-exercise 1
Table of content
Lectures
Instructions
Feedback
Reflections
Instructions：
Week 1:
Exercise1：Website Analysis:
1. https://www.polecat.agency/404
From：https://www.csswinner.com/winners
Website Purpose and Communication Effect:
Polecat Agency is a company that provides digital product design and development services to startups. Its official website showcases the company's expertise, project cases, and attracts customers.
Visual Design and Layout:
The page uses a simple font and displays "Page Not Found" and "There Was a Problem" in the center of the page. The page is well-designed, but lacks engaging illustrations or animations. The background is minimalist, and the main text has high contrast, making it easy to read. The soft dark blue used for key links and interactive elements adds a touch of visual depth without disrupting the overall simplicity. This restrained color scheme conveys professionalism, but without additional color accents or imagery, it could appear stark and uninviting.
Action buttons are positioned directly below the text in a balanced, symmetrical manner, while navigation links and footer elements are neatly arranged at the bottom, maintaining structural order. This symmetrical and minimal layout enhances clarity and stability, allowing users to quickly understand the message and find the next step without distraction.
Content Quality and Relevance：
The page content is concise and clearly tells users that the page they are visiting does not exist, but there is no further explanation or suggestions, and there is a lack of interaction with users.
Functionality and Usability:
The page provides a navigation menu and social media links at the bottom for users to learn more. However, there is no button to return to the homepage, which may cause users to find a way to return when they encounter an error page.
Performance and Compatibility：
The page loads quickly and performs well on different devices and browsers, ensuring a good user experience.
Summary and suggestions:
Polecat Agency's 404 error page performs well in terms of design functionality and performance, but it lacks in user guidance and content. It is recommended to add a button to return to the homepage and interactive elements to improve the user experience.
2. https://tehtariknation.com/
From：https://www.csswinner.com/winners
Website Purpose and Communication Effect:
Teh Tarik Nation, a beverage brand's official website, aims to showcase its specialty drinks and brand image, fostering a vibrant and enthusiastic user experience. The website has been recognized by international design awards for its dynamic visuals and interactive experience, enhancing brand recognition. However, the current homepage error message undermines its core communication effectiveness.
Visual Design and Layout：
Visual Design and Layout:
Teh Tarik Nation's overall design features vibrant, saturated colors, combined with scrolling interactions, parallax effects, and layered motion, creating a strong sense of immersion that complements the brand's vibrant tone. Bold fonts and richly layered images enhance the visual impact, while dynamic storytelling maintains user engagement.
However, these complex animations can negatively impact the user experience on low-end devices or with limited connectivity, as excessive visuals can lead to slow loading times and lags. Furthermore, information hierarchy can appear fragmented—key messages and calls to action can be obscured by excessive motion and layered visuals, making it difficult for users to quickly grasp the essential content. To optimize the experience, it's important to strike a balance between visual richness and clarity, ensuring greater contrast for improved readability, and considering simplified or reduced motion alternatives for performance-constrained environments.
Content Quality and Relevance：
The copy and visuals are consistent, successfully establishing the brand's personality. However, the lack of detailed product descriptions, purchase processes, and user reviews makes it difficult to support actual consumer conversions.
Functionality and Usability：
The website is highly interactive, but access is limited by homepage error messages. The lack of comprehensive error pages and return navigation makes it easy for users to interrupt their browsing experience.
Performance and Compatibility：
The design and presentation perform well, indicating some optimizations have been made. However, the heavy use of animations and resources may still cause performance problems on some devices.
Summary and Recommendations：
Teh Tarik Nation's website excels in visuals and branding, but lacks stability and user onboarding. We recommend promptly fixing error pages, improving navigation and interaction paths, supplementing product and purchase information, and optimizing performance and accessibility to comprehensively improve user experience and conversion rates.
Grit Pictures, a commercial film and television production company, attracts potential clients by showcasing its portfolio, team, and brand values. Its slogan, "Proper Commercial Filmmaking," conveys its values of balancing professionalism and creativity, creating a distinctive overall style that effectively conveys its brand personality.
Visual Design and Layout：
The website's primary color scheme is black and white, creating a clean, minimalist tone. The torn edges, paper textures, and sticker elements further enhance this tone, creating a handmade scrapbook-like aesthetic. A restrained color scheme ensures that the dynamic graphics and video content stand out clearly, enhancing contrast and effectively directing user attention.
The website's simple single-page scrolling structure facilitates easy navigation and avoids unnecessary clicks. Large headlines and bold text complement ample white space, ensuring good readability even against a richly textured background. The integration of video and animated transitions creates a strong sense of immersion, while the linear flow of content minimizes visual clutter. The combination of minimalist structure and dynamic visuals strikes a balance between clarity and impact, perfectly complementing the brand's creative, handmade style.
Content Quality and Relevance：
The website covers topics such as "Work," "Team," and "Ethos," highlighting creativity and execution. However, it lacks service processes, pricing information, and client case studies, resulting in a weak conversion-oriented experience.
Functionality and Usability：
The website features clear navigation, smooth portfolio display, and video playback support, creating a coherent experience. However, inadequate error pages and user onboarding can cause interruptions.
Performance and Compatibility：
As an award-winning example, it boasts excellent overall performance and cross-device compatibility. However, due to the large number of animations and resources, loading on low-end devices or in weak network conditions may cause performance issues.
Summary and Recommendations：
The Grit Pictures website excels in visual and branding, successfully conveying its creative personality. However, there is room for improvement in user conversion and usability. Recommendations include adding a project consultation portal and service information, optimizing performance and error pages, and introducing more case studies and accessibility support to comprehensively enhance user experience and commercial value.
4. https://axiom-protocol.webflow.io/
From：https://www.awwwards.com/
Website Purpose and Communication Effect：
Axiom's official website is positioned as a concept showcase, emphasizing the forward-thinking and unique nature of its AI platform, with "intuition, prediction, and personalization" as its core selling points. While the copy is poetic and futuristic, it lacks specific functional details, and overall seems more like a brand concept promotion.
Visual Design and Layout：
The website utilizes a full-screen scrolling format with dark tones, fluid animations, and seamless transitions, creating a strong sense of immersion and futuristic appeal. The color scheme is dominated by deep black and gray backgrounds, contrasting with light text and highlights like neon blue or purple, enhancing visual depth while ensuring readability. Content is divided into clear modules, progressively unfolding around themes like "Intuitive Perception" and "Contextual Awareness," supported by consistent typography and structured spacing to maintain clarity. While animation adds dynamism and cohesion, its frequent use can impact performance and user experience on low-end devices or with poor network connections.
Content Quality and Relevance：
The page copy is consistent and distinctive, and the "Curiosities" section addresses potential user questions. However, it lacks specific functionality, application scenarios, or pricing information, failing to meet potential users' expectations for a fully realized product.
Functionality and Usability：
The scrolling-driven content display, with some modules featuring interactive controls, creates a smooth experience. However, the lack of prominent CTAs (such as signup or trial) and the lack of clear guidance leads to a weak conversion path.
Performance and Compatibility：
The website uses GSAP animations, resulting in smooth animations and a clear responsive design. However, it is resource-intensive, and if not optimized, the experience may be limited on mobile devices and weaker networks.
Summary and Recommendations：
The Axiom website excels in visual and branding, generating interest and anticipation. However, user conversion rates are low, and practical information is lacking. Recommendations include adding clear call-to-actions, display interfaces, or case studies, optimizing performance, and strengthening accessibility to enhance actual usage and commercial value.
5. https://nevflynn.com/
From：https://www.awwwards.com/
Website Purpose and Communication Effect：
Nev Flynn's website focuses on his professional image as a product designer, emphasizing his technical field. The website achieves its goals well, conveying his professional skills and personal style to users in a concise and intuitive manner.
Visual Design and Layout:
Nev Flynn's website adopts a minimalist visual style, featuring black text on a white background with subtle accent colors to maintain clarity and focus. Its modular "bento box" layout arranges content into clean, balanced blocks, creating a sense of order and rhythm, while ample white space ensures readability and a sense of openness.
Clear and consistent typography, with clear headlines and appropriate line spacing, makes information easy to grasp at a glance. Interactive elements like drag-and-drop panels and smooth transitions add playfulness and dynamism without sacrificing a clean aesthetic. Overall, the design conveys a clean, professional, and strong personal branding, although excessive animations may pose performance challenges on lower-end devices.
Functionality and Usability:
The website structure is simple and clear, and users can quickly find what they need without any operational obstacles. However, there are no interactive elements, such as FAQs or real-time communication modules.
Content Quality and Relevance:
The content is generally accurate and well-organized, the introduction is concise, and the project presentation is focused. However, the text section is relatively short, and adding more project background or content details will help build personal brand image.
Performance and Compatibility:
The page loads quickly, scrolls smoothly, and is compatible with a variety of browsers and devices, making the user experience smooth.
Summary and suggestions:
It adopts a simple and modern design, with clear navigation and good performance, but the interactivity is insufficient. It can enrich the user interaction experience and further improve the website design.
Comparative Analysis Summary：
These five websites all excel in visual design and branding, each with a distinct style. Polecat's main site is highly creative and interactive, but suffers from performance issues, and its 404 page is simple but lacks navigation. Teh Tarik Nation has a strong atmosphere but lacks product details and a purchase entry. Grit Pictures boasts a consistent aesthetic and excellent portfolio presentation, but falls short on conversion paths. Axiom has a futuristic feel but prioritizes concept over implementation. Nev Flynn's simplicity and intuitiveness make it suitable for portfolios, but its information depth is limited. Overall, these websites share common issues: insufficient conversion entry points, missing landing page information, and need for performance and accessibility optimization. Areas of improvement include adding clearer CTAs, providing more detailed content, and improving performance and inclusiveness.
Reflection:
By studying and analyzing the basic structure of website design, I've gradually mastered how to interpret website functionality from a professional perspective. This knowledge has provided me with more inspiration and direction for subsequent projects, allowing me to create websites that are both practical and expressive.
评论
发表评论