Interactive Design | Exercise 1: Web Analysis
Interactive Design | Exercise 1: Web Analysis
- April 23, 2025
21/4/25 - 28/5/25 (Week 1 - Week 3)
Hu Yao Ping | 0376768
Bachelor of Design (Honours) in Creative Media | Taylor's University
Exercises 1
Exercise 1: Web Analysis (10%)
[Instruction]
[Exercises]
Require：
In Exercise 1, we need to select five websites and analyze their strengths and weaknesses from the perspective of user experience (no less than 200 words)
Analyze content：
1. purpose and goals of the website (evaluate whether they are effectively communicated to the user)
2. visual design and layout of the website (use of colour, typography, and imagery)
3.functionality and usability of the website (navigation, forms, and interactive elements)
4.quality and relevance of the website's content (accuracy, clarity, and organization)
5. website's performance (load times, responsiveness, and compatibility with different devices and browsers)
Process work:
[Website Link]
1.Purpose and Goals:
Bleibtgleich is the personal portfolio of a UX/UI designer based in Kyiv. Its primary goal is to showcase the designer’s visual style, user-centered design philosophy, and professional versatility. It aims to attract clients, collaborators, and employers by presenting selected projects that reflect both creativity and usability. The site emphasizes clarity, professionalism, and aesthetic precision. Through clean layouts and minimalistic choices, the designer builds a trustworthy and focused image. It also serves as a branding tool, reflecting a personal voice that values thoughtful design and user experience over flashy visuals. The goal is not only to exhibit work but to create a lasting impression through well-curated storytelling and intuitive navigation.
2.Visual Design and Layout:
a. Colour
The color scheme is minimalist—mostly black and white, with limited accent colors like soft blue or gray. This approach ensures readability and sophistication while keeping attention on the designer’s portfolio work. The subtle use of color for call-to-action elements enhances usability without overwhelming the viewer.
b. Typography
Clean, modern sans-serif fonts dominate the site. Large headings contrast with lighter body text, creating visual hierarchy and improving readability. The font choices are consistent and align well with the contemporary, minimal aesthetic, supporting smooth
c. Imagery
High-quality images of design projects are central to the site. They are presented in a clean, grid-style layout, with each image acting as a visual entry point to deeper project details. Hover effects provide additional context, enhancing interaction without cluttering the layout.
3.Functionality and Usability:
a. Navigation
The site employs a single-page structure with anchored navigation, making it intuitive to explore. Visitors can easily scroll or jump to sections like “About,” “Projects,” or “Contact.” The layout is responsive and logically ordered, helping users find what they need quickly.
b. Forms
A simple contact form is included, requesting just the necessary information—name, email, and message. It’s user-friendly and visually consistent with the rest of the site. Alternative contact methods, like direct email and social links, are also clearly available.
c. Interactive Elements
Subtle hover effects and smooth transitions make interactions feel seamless. When users hover over images or text links, they receive visual feedback that encourages deeper engagement. These elements feel polished and professional, enhancing overall usability.
4.Quality and Relevance:
a. Accuracy
Each project shown is authentic and clearly documented. The designer explains the objective, process, and result, giving potential clients real insight into their workflow.
b. Clarity
Information is concise and easy to follow. The tone is professional but accessible, with no overly technical jargon.
c. Organization
Content is well-structured and flows logically. Projects are prioritized visually, and the interface leads users smoothly through the narrative.
5.Website Performance:
a. Load Times
The website has excellent load times. Despite featuring rich images and interactive elements, the pages load quickly, ensuring a smooth experience for the user. The fast loading speed is important because it helps prevent users from leaving the site due to frustration. Additionally, the website uses optimized image sizes and asynchronous loading of certain assets to maintain speed across various devices.
b. Responsiveness
The Bleibtgleich website is fully responsive, meaning it adapts seamlessly to different screen sizes and devices. Whether accessed on a desktop, tablet, or mobile phone, the website maintains its usability and aesthetic integrity. The navigation elements are appropriately adjusted for mobile devices, ensuring that users can still easily interact with the site even on smaller screens. The content also adjusts fluidly, ensuring that images and text scale correctly on all devices.
c. Compatibility
The website is compatible with a range of browsers, including Chrome, Firefox, Safari, and Edge. This broad compatibility ensures that users can access the website without encountering issues, regardless of their preferred browser. Additionally, the site’s consistent performance across different devices and operating systems helps create a smooth, user-friendly experience.
6.Strengths and Weaknesses:
a. Strengths:
The website has a visually appealing and minimalist design that effectively showcases the designer’s work. Its fast load times, smooth navigation, and clear layout make it easy for users to explore the site. The interactive elements provide an engaging user experience without detracting from the content. The website’s clear communication of the designer’s philosophy and approach, combined with concise project descriptions, enhances its relevance and effectiveness.
b. Weaknesses:
While the minimalist design is a strength in many ways, it could benefit from additional interactive features or animations to further engage users. For example, adding video content or animations that explain the design process in more depth could further enhance the user experience. Additionally, there could be more personal elements, such as a blog or design insights, to create a stronger connection with visitors.
1.Purpose and Goals:
Burocratik is a Portugal-based creative studio specializing in branding, strategy, and digital design. The website’s primary purpose is to showcase the studio’s work, highlight their expertise, and attract high-profile clients who value bold, conceptual creativity. It presents itself as more than just a portfolio—it’s a brand experience in itself. The goal is to express the studio’s personality: experimental, detail-oriented, and confident. Through dynamic presentation, custom visuals, and witty copywriting, Burocratik positions itself as a studio that delivers not only visuals but strategy-driven design solutions. The site appeals to creative clients looking for original thinking, showing that Burocratik doesn’t shy away from pushing boundaries.
2.Visual Design and Layout:
a. Colour
The site uses a bold and highly saturated color palette. Bright backgrounds, contrasting text, and experimental overlays reflect Burocratik’s playful and provocative style. These visual decisions draw attention and help differentiate projects, while maintaining strong brand cohesion.
b. Typography
Custom, oversized, and often animated typography is a standout feature. Text is treated as a design element rather than just a content carrier. While sometimes dense or unconventional, the fonts reflect the studio’s cutting-edge identity. Despite the bold presentation, text remains readable due to strategic spacing and layout.
c. Imagery
High-resolution project imagery dominates the site. Screenshots, mockups, and branding visuals are integrated into scrolling sequences, telling the story of each project dynamically. The studio uses animation and transitions to enhance how images are perceived, creating a cinematic feel.
3.Functionality and Usability:
a. Navigation
The site offers a fixed, minimal navigation menu, keeping it always accessible even during scroll. Navigation transitions are smooth but visually rich, sometimes using creative transitions or background effects. While this fits the brand’s style, users unfamiliar with experimental interfaces may find it slightly less intuitive at first.
b. Forms
The contact page is straightforward, offering a clean form and additional contact details. There are no unnecessary fields, keeping the communication process easy and efficient. The page also subtly reinforces brand tone through its conversational wording.
c. Interactive Elements
Animations, hover effects, and transitions are prominent throughout. Each project thumbnail responds to cursor movement, encouraging exploration. The homepage includes scroll-triggered animations that reveal projects or text with personality, making the experience highly immersive.
4.Quality and Relevance:
a. Accuracy
The content effectively communicates the studio’s mission and body of work. Each project has a dedicated page or section explaining the client, concept, and final execution, reinforcing the studio’s attention to both strategy and aesthetics.
b. Clarity
Despite the heavy visual style, content remains understandable. The voice is playful but clear, using minimal text to support a visually dominant experience.
c. Organization
Projects are arranged in a scrollable feed, with additional sorting possible via the menu. Content hierarchy is respected, though some users may initially find the experimental flow unfamiliar.
5.Website Performance:
a. Load Times
The site loads quickly given its heavy media content. Smart loading techniques and optimization help maintain performance.
b. Responsiveness
It adapts well to different devices, though some visual elements are slightly toned down on mobile.
c. Compatibility
The site works across major browsers, though the best experience is on newer versions due to some advanced animation techniques.
6.Strengths and Weaknesses:
Strengths :
Include a powerful visual identity, unique user experience, and memorable project presentation.
weakness:
It could be that the heavy use of animation and unconventional layouts might hinder accessibility or usability for more traditional users.
1.Purpose and Goals:
The Sui Overflow 2025 Hackathon website serves as a comprehensive platform for promoting and managing a global virtual hackathon organized by the Sui Foundation. Its primary goals are to inform developers about the event, encourage participation, and provide essential resources to support collaboration and innovation on the Sui blockchain. It is not just an event page but a gateway into the Sui developer ecosystem. The website seeks to attract a wide range of developers—from seasoned blockchain engineers to newcomers—by clearly communicating the event’s structure, benefits, prizes, and tools. The tone is energetic and inclusive, aiming to build momentum and community engagement around the Sui platform. With an emphasis on accessibility and clarity, the site enables users to quickly find relevant information, join specific tracks, and submit projects with confidence.
2.Visual Design and Layout:
a. Colour
The color palette is modern and vibrant, using blues, purples, and whites to reflect the futuristic and innovative feel of a blockchain-focused hackathon. Key areas like buttons, headers, and prize sections are accented with bright tones to guide the eye and draw attention. The colors evoke a tech-savvy atmosphere and maintain strong brand consistency with Sui’s identity.
b. Typography
Clean sans-serif fonts dominate the site, offering great readability across devices. The typography is used strategically to differentiate sections—large, bold titles for impact, medium-sized subheadings for guidance, and lighter body text for clarity. The text layout is easy to scan, and spacing is well-balanced.
c. Imagery
Graphics, logos, and icons are used rather than photos. These elements add character and help visually represent abstract ideas like “tracks,” “rewards,” or “resources.” Custom illustrations and infographics, including timelines and flowcharts, help simplify complex event structures and blockchain concepts.
3.Functionality and Usability:
a. Navigation
The navigation bar is fixed and intuitive, with labeled links to core sections such as Overview, Tracks, Prizes, FAQs, and Resources. Sections are also accessible via anchor links, allowing quick scrolling to the desired content. This setup makes the site feel more like an interactive guide than a static page.
b. Forms
Registration and submission forms are embedded or clearly linked, ensuring that users can easily sign up or enter their projects. The forms are clean, responsive, and optimized for both mobile and desktop use. Error handling and field validation enhance the user experience.
c. Interactive Elements
Elements such as the schedule, prize list, and FAQs use collapsible tabs, hover animations, and smooth scrolling. These subtle interactions make browsing more engaging while maintaining usability. Users are encouraged to interact with the site rather than just read passively.
4.Quality and Relevance:
a. Accuracy
All event information appears accurate, up-to-date, and aligned with the Sui Foundation’s branding and mission. Each section provides clear, reliable details on how to participate and what to expect.
b. Clarity
Language is simple and inclusive, suitable even for non-native English speakers. Instructions are step-by-step, and key actions like “Register” or “Join a track” are emphasized with visual cues.
c. Organization
The structure follows a logical progression—from general overview to participation details, then FAQs and resources. This makes the website ideal for both first-time visitors and returning users.
5.Website Performance:
a. Load Times
Pages load efficiently, ensuring a smooth user experience. Despite using dynamic content, the website loads quickly, with minimal delays or lag.
b. Responsiveness
The site is optimized for various devices, maintaining functionality across screen sizes. The layout adapts perfectly across mobile, tablet, and desktop views, without breaking content or design.
c. Compatibility
Cross-browser compatibility is effectively implemented, providing consistent performance. It works well across all modern browsers, including Chrome, Safari, Firefox, and Edge.
6.Strengths and Weaknesses:
Strengths:
It include excellent structure, strong branding, and clear functionality that make it easy to navigate.
weakness :
It could be that some users may want more visual variety or storytelling elements to boost emotional engagement.
1.Purpose and Goals:
AMANATION is a Tokyo-based creator management company focused on discovering, representing, and promoting creative talents. The website acts as the central hub for showcasing the company’s mission, featured creators, past and ongoing projects, and contact opportunities. Its primary purpose is twofold: to attract potential collaborators, brands, and clients who might want to work with the creators under AMANATION’s management, and to establish the agency’s credibility in the competitive Japanese and international creative markets. The site presents AMANATION not just as a management firm, but as a cultural platform that nurtures creativity across disciplines like music, art, fashion, and digital media. It also reflects a deeper goal of fostering cross-cultural and cross-media collaborations, often working with global brands.
2.Visual Design and Layout:
a. Colour
AMANATION uses a refined and subtle color palette dominated by black, white, and soft beige tones, evoking a sense of minimalism and professionalism. This neutral scheme creates a clean canvas that allows the vibrant images and videos of the creators’ work to stand out. There are no flashy or distracting color choices, aligning with a more mature, art-driven aesthetic.
b. Typography
The typography is elegant and modern, using a combination of clean sans-serif fonts and thinner serif styles for headers or emphasis. This mix of fonts adds a sense of sophistication while maintaining clarity. Text size, weight, and spacing are well-calibrated, ensuring that headlines are bold and eye-catching, while the body content remains easy to read.
c. Imagery
High-resolution photography and embedded video are the primary visual tools used to communicate the talent and creativity of AMANATION’s roster. Each creator’s profile or campaign page is presented with a strong visual narrative, often combining portraiture, project stills, and behind-the-scenes content. The visuals are curated with an editorial feel, reinforcing the brand’s elevated, contemporary tone.
3.Functionality and Usability:
a. Navigation
The navigation system is simple and effective, with a top-level menu that includes options like “About,” “Creators,” “Projects,” and “Contact.” Hover states are subtle but responsive, and the site uses both vertical scrolling and internal links to help users move easily between sections. Navigation remains intuitive whether accessed on a desktop or mobile device.
b. Forms
The contact form is straightforward, offering fields for name, email, message, and purpose of inquiry. It’s not overly detailed, which lowers the barrier for potential partners or collaborators to reach out. The form layout matches the site’s clean aesthetic and is supported by an easily accessible email link as well.
c. Interactive Elements
Interactive features are minimal but intentional. For example, hovering over a creator’s image may reveal their name or a brief description. Some project sections include embedded video clips or scroll-activated transitions that enhance storytelling. These subtle interactions keep users engaged without overwhelming them.
4.Quality and Relevance:
a. Accuracy
The content is well-maintained and accurate, with up-to-date information about each creator and recent projects. It reflects a professional standard of curation.
b. Clarity
Text content is concise and to the point, clearly describing AMANATION’s services, values, and the scope of work. There is a strong editorial voice throughout, suitable for a creative industry audience.
c. Organization
The site follows a logical structure, with each section clearly labeled and easy to access. There’s a consistent rhythm between visuals and text, offering a balanced browsing experience.
5.Website Performance:
a. Load Times
The site maintains fast load times, even with multimedia content. Despite the large use of visuals, pages load quickly, indicating optimized image compression and effective hosting.
b. Responsiveness
The design adapts seamlessly to various devices, ensuring usability across platforms. The layout adjusts seamlessly across mobile and desktop devices. Text remains readable, and visuals scale appropriately.
c. Compatibility
The website functions consistently across different browsers and operating systems. The site is stable and functional across major browsers and platforms, with no noticeable bugs or broken elements.
6.Strengths and Weaknesses:
Strengths:
It include a sleek, well-curated design, strong content structure, and a high-end feel that matches the creative industry’s expectations.
Weakness:
A possible weakness is that the minimalism may make the site feel slightly cold or impersonal to more casual visitors unfamiliar with the brand.
1.Purpose and Goals:
Seasoned is a digital learning platform created by Koto Studio, aimed at helping emerging creatives understand branding through a fun, interactive, and visually rich experience. The core purpose of the website is educational: to guide users—especially young designers, students, or entrepreneurs—through the process of building a brand from scratch. By offering approachable branding concepts, case studies, and tips from real-life projects, Seasoned seeks to bridge the gap between professional branding studios and aspiring creatives. The site presents branding not as a dry corporate topic but as an exciting, flavorful process—hence the cooking metaphor. Its goal is also to reflect Koto Studio’s creative values: clarity, bold design, and cultural relevance. Ultimately, Seasoned is both a branding showcase and a marketing tool for Koto, reinforcing their status as an industry thought leader.
2.Visual Design and Layout:
a. Colour
Inspired by retro cookbooks and food packaging, Seasoned uses a bold, nostalgic color palette—featuring reds, mustard yellows, deep greens, and off-whites. These tones create warmth and familiarity, evoking the creativity of 1970s kitchen aesthetics while still feeling fresh and modern. The colors are playful yet cohesive, creating a strong visual identity that sets the tone for the site’s branding-as-cooking metaphor.
b. Typography
Typography plays a key role in the site’s personality. The fonts used are chunky, characterful, and full of vintage charm, resembling handwritten recipe headings or retro packaging. Despite the strong stylistic presence, all text remains readable and well-structured. Hierarchical font sizing and weight ensure that headings, subheadings, and body copy are easily distinguished. This careful balance makes the learning content feel informal but clear.
c. Imagery
The site relies heavily on illustrations, icons, and minimal photography. Illustrations are used to reinforce the cooking theme—pots, pans, ingredients, and utensils—while also guiding users through branding steps like “prep,” “mix,” and “taste.” This cohesive visual metaphor helps demystify complex branding concepts. The graphics are quirky but polished, and they’re used not just for decoration, but to reinforce the educational structure.
3.Functionality and Usability:
a. Navigation
Navigation is intuitive and engaging. The menu is fixed at the top and clearly labeled, allowing users to move between guides, case studies, and resources. Scroll-triggered navigation allows users to explore content step-by-step, making it feel like a story or recipe being revealed gradually.
b. Forms
While the site does not focus heavily on forms, any interactive features—like tooltips or pop-ups that suggest next steps—are well-placed and user-friendly. Users are gently nudged to explore more without feeling overwhelmed or required to sign up.
c. Interactive Elements
Seasoned is full of delightful micro-interactions. Hover effects, clickable steps, and animated elements turn static content into a dynamic journey. Interactive timelines and checklists encourage active learning, and responsive feedback makes the educational flow feel more hands-on.
4.Quality and Relevance:
a. Accuracy
The branding advice provided is based on real-world experience from Koto’s own practice, making it highly relevant and grounded in professional knowledge.
b. Clarity
Despite the fun design, the language used is straightforward and informative. Each step or guide is broken down into small, digestible pieces.
c. Organization
The site is structured like a cookbook—guides come in “chapters,” and branding steps are broken into bite-sized actions. This thematic structure makes navigation both fun and educational.
5.Website Performance:
a. Load Times
Pages load promptly, ensuring a smooth user experience. The site loads smoothly, even with numerous animated and illustrated assets.
b. Responsiveness
The design is fully responsive, providing optimal viewing across devices. The layout is responsive, maintaining both usability and visual charm across mobile, tablet, and desktop devices.
c. Compatibility
The website performs reliably across various browsers and platforms. It runs without issue across modern browsers, with consistent visuals and interactions.
6.Strengths and Weaknesses:
Strengths:
Seasoned's biggest strength lies in its memorable, themed approach to education, which makes branding accessible and fun.
Weakness:
A minor weakness could be that advanced users may find the content a bit basic, as it’s clearly aimed at beginners or early-stage creatives.
[Reflection]
Experience
In this exercise, I analyzed five creatively designed websites: Bleibtgleich, Burocratik, Sui Overflow 2025 Hackathon, AMANATION, and Seasoned by Koto Studio. I examined each site’s layout, color scheme, typography, motion design, and overall user experience. I documented my observations using screenshots and annotations. This task pushed me to evaluate websites not just by their aesthetic appeal, but by how effectively they communicate, guide, and engage the user.
Observation
I noticed that while each website had a distinct style, they all shared a strong focus on visual impact and storytelling. Bleibtgleich used bold typography and asymmetrical layouts to create tension. Burocratik combined brutalist design with a clean content structure. Sui Overflow had a futuristic, visually rich interface, though some navigation elements were less intuitive. AMANATION stood out with smooth transitions and immersive scrolling effects, while Seasoned used color and animation to showcase branding. This made me realize how important it is to balance creativity with clarity and usability.
Findings
From this analysis, I learned that effective web design requires more than just creativity—it also demands clear structure and user-centered thinking. Animation and interactivity can greatly enhance engagement, but only when used with purpose. This exercise deepened my understanding of how design choices influence user perception, and it encouraged me to explore bolder visual ideas in my own work while still prioritizing function and accessibility.
Comments
Post a Comment