23/04/2025 - 30/04/2025 (Week 1- Week 2)
Gabriella Grace Christyanti / 0371915Interactive Design / Creative Media / School of Design
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Exercises
3.1 Bürocratik
3.2 OH Architecture
3.3 HNTRS Sports Exclusive
3.4 Baci Baci Matera
3.5 Pretty Patty
4. Reflection
1. LECTURES
Week 1:
Module introduction and briefing
2. INSTRUCTIONS
3. EXERCISE 1: Website Analysis
Task Instruction:
We were given links and told to choose five websites. We were told to make a brief report of the website's purpose, design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. The brief report summarizing your findings and recommendations must be more than 200 words for each website.
What To Have in The Analysis:
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Website chosen:
- Website 1 - Bürocratik
- Website 2 - OH Architecture
- Website 3 - HNTRS Sports Exclusive
- Website 4 - Baci Baci Matera
- Website 5 - Pretty Patty
Web Analysis Report on Bürocratik
Purpose & Goal
Visual Design and Layout
Color: The primary color used on the website is a neutral, sophisticated palette, with a lot of black, white, and grey tones. This choice keeps the focus on content while maintaining a clean, professional aesthetic. There are also subtle pops of accent colors that are used sparingly to highlight key elements.
Typography: The typography is simple. They use a combination of modern sans-serif fonts, with clean lines that create an easy-to-read experience.
Imagery: Bürocratik's website uses large images with minimalistic visuals to support their design and branding. Their imagery is often full-screen or uses simple, elegant shots that focus on their work and services. There is a strong emphasis on white space, with images that complement the text rather than distract from it. This minimal approach helps highlight the brand's identity without overwhelming the user, focusing on clarity and refinement.
Layout: The layout is grid-based, with a lot of white space. Sections are clearly defined, making it easy to navigate. The structure is simple and intuitive, allowing users to focus on the content without distractions. The use of large text blocks and full-screen images creates an engaging flow.
Functionality and Usability
Navigation: The navigation on Bürocratik’s site is minimalist. The navigation bar is placed at the bottom so it doesn't cover up the page and only has one button showcasing the page you're on and showing you the other pages when you press it, maintaining the clean aesthetic while still being accessible. It prioritizes storytelling over complexity with clear segmented sections.
Interactive Elements: The interactive elements are hover effects, smooth transitions, and scroll-triggered animations. There is also a custom cursor took a while to get used to as the size is much bigger than a normal mouse. Some of the interactive elements weren't too distracting but some parts like the page where they show all of the Büro they've done, pictures popping out from the cursor was definitely covering the content a bit.
Quality and Relevance
Quality: Overall, Bürocratik’s website is quite a high-quality digital experience. The visuals are polished, the layout is clean, and the messaging is both consistent and well-articulated. Information is presented clearly, and the overall user experience is seamless and professional.
Relevance: The content is highly relevant to branding and digital design. Every section aligns with their purpose of showcasing strategic, creative work for clients. It speaks directly to potential collaborators or clients seeking sharp, authentic brand communication. The site effectively reaches and engages its intended audience.
Performance
Load time: (Using PageSpeed Insights) The load time performance of Bürocratik’s website is negatively affected by several technical issues. The Largest Contentful Paint takes over 8 milliseconds, primarily due to large images and heavy JavaScript. The main thread is blocked for nearly 5 seconds, slowing down interactivity. Additional issues include excessive DOM elements, unused JavaScript, and unoptimized images. These elements increase the overall page size (over 12 MB), resulting in longer load times.
Responsiveness and Compatibility: The site is responsive across various screen sizes. Whether you're on desktop, tablet, or mobile, content adjusts fluidly, maintaining usability though with some minor changes in it's interactive elements as other devices doesn't contain the hover effects that desktop has.
Conclusion
Web Analysis Report on OH Architecture
Purpose & Goal
OH Architecture is an Australian design studio that focuses on creating timeless residential and commercial spaces. Their purpose is to deliver thoughtful, functional, and personal architectural solutions that reflect the client’s wants, lifestyle and vision. The site strongly emphasizes their human-centered approach, designing with “people at heart," which really shows their commitment to understanding how their costumers interact with space, causing each project to feel unique and intentional.
Visual Design and Layout
Color: The site uses a soft color palette, and without the photography, the website's color is mostly whites and light greys, allowing the soft color from the photography and design projects to stand out. This neutral scheme creates a calm tone.
Typography: The typography is clean, with modern sans-serif fonts that complement the minimalist aesthetic. Headings are bold, while body text is simple and readable.
Imagery: High-resolution, full-width imagery is central to the site, with a strong focus on architectural details and interiors. Project photos are carefully curated to tell a visual story, supporting the studio’s ethos of design clarity and personal connection.
Layout: The website features a grid-based layout with clear spacing and flow. Pages are sectioned logically, and there’s a natural progression from homepage to portfolio, process, and contact. White space is generously used, which adds to the site’s overall elegance and digestibility.
Functionality and Usability
Navigation: Navigation is straightforward with a sticky hamburger menu that reveals key pages like “Works,” “Studio,” “Process,” and “Gallery.” It’s minimalist but functional, allowing users to focus on the content without visual clutter.
Interactive Elements: Interactive features in the websites featured smooth transitions, scrolling effects, and hover animations. Used to enhance the experience. It wasn't distracting and made the website more interesting to look around on.
Quality and Relevance
Quality: The website is clearly of high quality, both in design execution, visuals and content delivery. It communicates OH Architecture’s aesthetic values nicely.
Relevance: All content is highly relevant to prospective clients. The portfolio showcases a diverse range of architectural work, and the “Process” section transparently outlines what clients can expect. The form-based enquiry system shows clearly their client-centered approach.
Performance
Load Time: The website performs well overall, with smooth transitions and quick content rendering. However, the use of large images can slightly delay initial load times, particularly on slower connections. Optimizing image formats and lazy loading could improve performance further.
Responsiveness and Compatibility: The site is fully responsive across all devices—desktop, tablet, and mobile. Content scales well, and navigation adapts intuitively. Interactive effects are more minimal on mobile but still feel cohesive. There were no major compatibility issues across modern browsers.
Conclusion
Strengths: The OH Architecture website shows a noticeable difference in performance between mobile and desktop. On mobile, it has moderate performance with a score of 60, slowed down by a Largest Contentful Paint of 7.0 seconds and a Speed Index of 8.1 seconds, largely due to heavy image assets. Desktop performance is much stronger, scoring 82, with faster load times (Largest Contentful Paint of 1.4 seconds). While the site feels smooth on desktop, optimizing images and addressing mobile speed issues could significantly enhance the mobile experience.
Weaknesses: While performance is generally strong, load times could be improved with better image optimization. Interactive elements are elegant but somewhat conservative—there may be room for slightly more dynamic features to enhance engagement, especially for portfolio viewing.
Web Analysis Report on HNTRS Sports Exclusive
Purpose & Goal
HNTRS Sports Exclusive (by GraphicHunters) positions itself as a creative design studio exclusively focused on the sports industry. Their main goal is to elevate sports brands through top-tier design, motion, and storytelling. Their purpose is clearly communicated: to blend high-end creativity with the energy of the sports world, offering branding, campaigns, content, and product design tailored to athletic audiences.
Visual Design and Layout
Color: HNTRS uses a minimalistic palette dominated by white, black, and green. This design choice keeps the site feeling modern and professional while allowing their colorful sports work to stand out sharply against the clean background.
Typography: Typography is bold and clean. Modern sans-serif fonts are used throughout the site, creating a dynamic yet highly readable experience that matches the energetic vibe of sports branding.
Imagery: The website is filled with large, high-resolution visuals. Full-bleed images that showcase major projects with teams and brands like EA Sports, Eredivisie, and Topps.
Layout: The layout is grid-based and highly modular, featuring plenty of white space. Sections are logically broken down by service types and case studies, guiding the user naturally through their offerings without feeling cluttered or overwhelming.
Functionality and Usability
Navigation: Navigation is minimal and fixed at the top. It only highlights the most essential sections: Home, Work, News, and Contact. The smooth, understated transition effects maintain the site's clean aesthetic while keeping the user oriented.
Interactive Elements: Scroll animations and hover states are generally smooth and well-integrated into the design. However, some parallax effects can feel a bit heavy on slower devices, occasionally impacting responsiveness. Additionally, the custom cursor introduces slight lag, which can disrupt the otherwise fluid user experience and may benefit from optimization for performance.
Quality and Relevance
Quality: HNTRS’ website feels highly polished. Visual quality is excellent it reflects a consistent theme of innovative design. Messaging is simple and straight to the point too, making it easy to digest the information and know what to expect.
Relevance: Every aspect of the site is tailored to the sports industry. The case studies, language, visuals, and services are highly relevant for brands seeking elevated creative services in the world of sports and entertainment.
Performance
Load time: (Analyzed using PageSpeed Insights) The site loads decently fast but could still improve. Some large image and video assets slow down the Largest Contentful Paint (around 4-5 seconds). There’s minor JavaScript blocking and potential for image optimization, but overall, performance is acceptable for such a visual-heavy site.
Responsiveness and Compatibility: The site is highly responsive. It adapts well to desktop, tablet, and mobile devices, maintaining design consistency across all platforms. Animations adjust intelligently, although mobile versions drop some hover effects for a smoother touch experience.
Conclusion
Strengths: HNTRS Sports Exclusive has a visually stunning and highly specialized website. Its clean design, powerful imagery, clear navigation, and strong brand storytelling make it an excellent platform for showcasing their sports design expertise. Responsiveness and usability are solid across devices.
Weaknesses: While generally strong, the heavy use of large images and animations could be better optimized for faster load times. Some scroll effects may feel slightly heavy on lower-end devices. Accessibility could also be improved with more alt text for images and enhanced keyboard navigation options.
Web Analysis Report on Baci Baci Matera
Purpose & Goal
Baci Baci Matera is the online platform of a social enterprise under the Fratello Sole Cooperative in Matera, Italy. Their mission combines cosmetic and personal hygiene product sales with social impact. The site showcases products made with donkey milk, created not only for skincare benefits but also to support individuals recovering from addiction and mental health challenges.
The goal is twofold: promote natural, therapeutic cosmetics while sustaining rehabilitation efforts. Through "onotherapy" (donkey-assisted therapy), the cooperative fosters emotional healing and social reintegration — a message clearly embedded throughout the site’s visuals and content.
Visual Design and Layout
Color: The website features a pastel-focused color palette using soft hues like orange, green, light blue, and purple blue. These tones evoke calmness and purity, aligning well with the skincare theme and reinforcing the therapeutic and gentle nature of the brand. The color choices also maintain brand consistency and create a clean look.
Typography: Baci Baci uses a mix of script and sans-serif fonts. The script font, often used in headlines, adds a playful, personal touch, while sans-serif fonts in the body ensure clarity and readability. This typographic hierarchy helps communicate both the warmth of the brand and its professionalism.
Imagery: High-resolution imagery is a strong suit. The site uses full-screen visuals and split layouts combining photography of models, donkeys, and the products. Minimal graphics are used strategically to enhance content without clutter. Imagery consistently supports the narrative of natural care and therapeutic grounding.
Layout: The design adopts a minimalist grid system with generous white space, giving content room to breathe. Key information is typically on the right, balanced with visuals on the left. The structure has an simple to follow flow, making it easy to digest information while maintaining visual engagement.
Functionality and Usability
Navigation: Navigation is initially visible and intuitive but disappears when scrolling, which could hinder quick access to other pages. A sticky navigation bar would improve usability. Page sections are well-organized, and jump links work efficiently, guiding users through product lines, backstory, and contact details.
Interactive Elements: Subtle animations and cursor effects add interestingness. Icons and photos sometimes respond to hover movement, adding engagement. However, these interactions are limited and may confuse users when visual elements don’t function as clickable items. Product sliders and scrolling elements are more effective, especially on desktop.
Quality and Relevance
Quality: The website is aesthetically polished and professionally executed. Visuals are consistent, messaging is coherent, and navigation is mostly seamless. Text formatting (headlines, bold fonts, subheaders) enhances readability.
Relevance: Content is aligned with the brand’s identity, combining wellness, social reintegration, and nature. It speaks to audiences who value natural skincare, ethical production, and social impact, making the site meaningful and authentic.
Performance
Load Time: On desktop, the site loads quickly with minimal lag. On mobile devices, load times are slightly slower, especially for image-heavy pages. However, this doesn’t significantly detract from the user experience.
Responsiveness and Compatibility: The site is generally responsive across devices, including tablets. Still, there are issues: only one product appears on mobile where four are shown on desktop. On iPads, products appear too small or improperly scaled, affecting usability. Optimization for smaller screens could be improved.
Conclusion
Strengths: The website’s strengths lie in its visually appealing and playful yet minimal design, which creates a welcoming user experience. It demonstrates a strong brand identity by effectively balancing a sense of fun with the therapeutic mission of the company. High-quality imagery and well-structured content enhance both the aesthetic and informational value of the site. Moreover, the website clearly communicates its unique social impact purpose, and the use of subtle animations brings charm without distracting from the content.
Weaknesses: There are notable weaknesses. The navigation bar disappears upon scrolling, which reduces ease of access and user control. On mobile devices, inconsistent responsiveness—such as product display issues—compromises usability. Additionally, some visual elements appear to be interactive but aren’t, which may lead to user confusion. Finally, the website lacks critical accessibility features like sufficient contrast and screen reader support, which can hinder inclusive access for users with disabilities.
Web Analysis Report on Pretty Patty
Purpose & Goal
Pretty Patty is a Swiss burger joint that emphasizes local, fresh, and flavorful offerings. Their website reflects this ethos with bold slogans like "YOUR FRIENDLY, NEIGHBORHOOD BURGER JOINT" and "LOCAL, FRESH, DAMN TASTY," highlighting their commitment to quality and community. The site aims to inform visitors about their menu, locations, and brand story, fostering a connection with potential customers.
Visual Design and Layout
Color: The website utilizes a bright and fun color palette, predominantly featuring a cream colored background with blue text. The cream and blue color palette helps their burgers stand out, capturing the viewer's attention.
Typography: Bold, sans-serif fonts are used throughout the site, conveying a modern and approachable feel. The typography is consistent and legible, enhancing the user experience.
Imagery: High-quality images of their burgers are prominently displayed, showcasing the freshness and appeal of their offerings. The visuals are appetizing and effectively support the brand's message of quality and taste.
Layout: The website features a straightforward, scroll-based layout. Sections such as the menu, locations, and contact information are clearly delineated, making navigation intuitive. The design is responsive, adapting well to various screen sizes.
Functionality and Usability
Navigation: The main navigation menu is accessible and straightforward, with links to essential sections like the menu, locations, and ordering platform. The user journey is linear and uncomplicated, facilitating easy access to information.
Interactive Elements: Interactive features are minimal, focusing on functionality. The "Order Now" button redirects users to an external ordering platform, and contact forms are available for feedback and inquiries. The simplicity ensures that users can accomplish their goals without unnecessary distractions.
Quality and Relevance
Quality: The website is well-crafted, with high-resolution images and consistent design elements. The content is concise and effectively communicates the brand's identity and offerings.
Relevance: All content is pertinent to the brand's objectives, providing visitors with essential information about the menu, locations, and ordering options. The site successfully caters to its target audience, individuals seeking quality burgers in a friendly setting.
Performance
Load Time: Pretty Patty’s website performs strongly on desktop with a high score of 97, loading quickly and smoothly with no layout shifts. On mobile, the performance score drops to 82 due to a slower Largest Contentful Paint (4.5s), although overall responsiveness and stability remain solid. The site delivers a fast, polished experience but could benefit from mobile-specific optimizations to improve load times.
Responsiveness and Compatibility: The site is fully responsive, maintaining functionality and aesthetics across desktops, tablets, and smartphones. It is compatible with major browsers, ensuring a consistent user experience.
Conclusion
Strengths: Pretty Patty's website excels in delivering a clear and engaging user experience. Its minimalist design, high-quality imagery, and straightforward navigation effectively communicate the brand's values and offerings. The site's responsiveness and performance further enhance its accessibility and usability.
Weaknesses: While the website is functional and visually appealing, it lacks advanced interactive features that could further engage users. Incorporating elements such as customer testimonials, a blog, or interactive menu filters could enrich the user experience and provide additional value.
Comments
Post a Comment