Exercises: Website Analysis
23/04/2025 – 30/04/2025 (Week 1 – Week 2)
Valerius Ethan Wirawan / 0372774
Interactive Design / Creative Media / School of Design
Exercise: Website Analysis
TABLE OF CONTENT
1. Lectures
2. Instructions
3. Exercise
4. Feedback
5. Reflection
1. LECTURES
Week 1
The lecturer gave us a module brief and instructed us to search for five websites as part of the exercise. We were also asked to choose a website to redesign and recreate.
Week 2
Week 2
The lecture covers usability in UX design, which focuses on how effectively and efficiently users can interact with a product. A usable interface should be intuitive and help users achieve their goals without expert knowledge. Five key usability principles are discussed: consistency (uniform design and functionality), simplicity (clear, minimal steps), visibility (easy-to-find options), feedback (responses to user actions), and error prevention (avoiding mistakes). Common usability issues include complex interfaces, poor navigation, and inadequate feedback.
2. INSTRUCTION
Fig. 2.1. Module Information Booklet (MIB)
3. EXERCISE
Interactive Design - Exercises: Web Analysis
Lusion.co (Digital Production Studio)
Goal
Lusion.co serves as a live showcase of the studio’s creative and technical expertise through an immersive audiovisual and interactive digital experience. The website demonstrates their capabilities in motion design, 3D rendering, and digital storytelling, positioning Lusion as a premium, visionary digital studio. With the tagline “Beyond visions within reach,” the site is clearly designed to attract high-end clients across various industries. Its minimal interface, captivating visuals, and smooth transitions combine to deliver a unique experience that balances functionality with artistic expression.
Design
The design of Lusion.co is bold and immersive, reflecting modern interactive web aesthetics enhanced by advanced technology. The site predominantly features a dark theme accented with vibrant neon colors, creating a futuristic and visually dynamic atmosphere. Minimalist typography supports readability, while motion design takes center stage. The use of real-time 3D rendering and responsive interactions engages users through scroll-based animations, ripple effects, and cinematic transitions. The design effectively applies principles like contrast, emphasis, and unity, making the experience both visually impressive and highly functional.
Layout
The layout is clean and straightforward, with a minimal navigation menu that keeps the user’s attention focused on the content. Familiar UI elements, such as the three-dot icon for the menu, enhance usability. The menu links to six key sections: Home, About Us, Projects, Contact, and two additional content pages, providing structured access to all essential areas of the site.
Content
Throughout the website, immersive spatial design demonstrates Lusion’s expertise in crafting highly interactive digital experiences. The site itself functions as a portfolio, showcasing the studio’s work across a wide range of industry sectors. The homepage features a compelling introductory statement: “We help brands create digital experiences that connect with their audience”, immediately setting the tone for Lusion’s creative approach and client-focused mission.
Functionality
Lusion.co features a clean, minimalist user interface that prioritizes visual storytelling and smooth interaction. Navigation is intuitive, with a simple top menu and scroll-based transitions that guide users naturally through the experience. Interactive elements respond fluidly to hover and scroll actions, enhancing user engagement without distraction. Despite the site’s complex visuals and animations, performance remains fast and seamless, delivering a sophisticated and immersive digital experience.without overwhelming the user. Despite its complex visuals and animations, the site remains fast and functional, delivering a seamless and immersive user experience.
In-cognita-corp.com (Education Provider Group)
Goal
The In-Cognita website presents itself as the official digital presence of a global network of private schools under the Cognita group. Its primary objective is to establish credibility, showcase the network’s international reach, and provide accessible points of contact for families, educators, and partners. The site focuses on reflecting the group’s commitment to educational excellence and well-being through a clean and professional interface. With multilingual support and country specific navigation, the website is designed to serve a diverse global audience while maintaining a consistent brand identity.
Design
The overall design of the contact page is clean, minimal, and practical. Purposely avoiding unnecessary visual noise to center the user experience on utility. The color palette is subdued, favoring neutral tones that project professionalism and composure. A significant amount of white space allows each section to breathe, while legible typography ensures content remains easy to understand. The interface avoids decorative excess, showing professionalism. It’s a design that reinforces the seriousness of the services offered.
Layout
The layout of the page is structured to minimize overload information and guide the user efficiently from inquiry to action. Upon arrival, users are immediately presented with essential contact information (phone, email, and an option to request a callback). The form for requesting
a callback is placed in the center. Each section is well-differentiated, ensuring users can locate each button easily.
Content
The site highlights Cognita’s focus on delivering quality education, student well-being, and global learning. It favors clear messaging and structured content over elaborate visuals, showcasing the group’s values and leadership. However, the website lacks concise explanations about its core identity as an education provider. The brand name “In-Cognita” and mentions of figures like GIGN members may confuse first-time visitors, potentially giving the impression of a private security firm rather than a school group. This disconnect can make the user experience unclear at times.
Functionality
Functionally, the contact page delivers a seamless and responsive experience. It is designed to operate across various devices, ensuring accessibility whether accessed from a mobile phone, tablet, or desktop. The form fields are interactive and intuitive, guiding users through the necessary inputs. The site performs efficiently, loading quickly and providing stable interactions. Even with elements such as a cookie consent banner, the experience remains smooth.
Visual Business (Creative Studio Website)
Goal
VisualBusiness positions itself as a creative studio, aiming to showcase its portfolio and attract potential clients through a visually engaging online presence. The website serves as a digital portfolio, highlighting the studio's work and models, and providing contact information for inquiries. The inclusion of temporary images indicates an ongoing development process, suggesting that the site is a work in progress, with plans for future content updates.
Design
The website adopts a minimalist grid design, focusing on simplicity and clarity. The use of whitespace and a monochromatic color palette directs attention to the visual content, allowing the showcased work to stand out. Typography is clean and modern, contributing to the overall aesthetic appeal. The design choices reflect a contemporary style, aligning with current web design trends and appealing to a modern audience.
Layout
The layout is straightforward and user-friendly, featuring a top navigation menu with links to key sections: Home, Work, Models, and Contact. This simple structure facilitates easy navigation, enabling visitors to access information quickly. The content is organized in a linear fashion, with each section clearly delineated, enhancing the user experience.
Content
Content on the site is currently minimal, with placeholders indicating areas for future development. The 'Work' and 'Models' sections are intended to display the studio's portfolio and talent, respectively, while the 'Contact' section provides a means for visitors to reach out.
Functionality
Functionally, the website performs efficiently, with fast load times and responsive design across various devices. Interactive elements are minimal, in line with the site's current focus on visual content. The straightforward navigation and clean layout contribute to a seamless user experience, allowing visitors to explore the site without distraction.
OH Architecture (Architecture Portfolio)
Goal
OH Architecture’s website functions as a refined digital extension of the studio’s visions designing spaces that are personal and quietly transformative. Based in Brisbane, the firm specializes in residential and commercial architecture, with a particular emphasis on renovations and extensions that are based on the character of existing structures while introducing contemporary elements. The site positions OH Architecture as a practice that values thoughtful collaboration and design integrity, appealing to clients seeking solutions that reflect their lifestyles and aspirations.
Design
The design of the website is understated yet sophisticated, mirroring the studio’s architectural approach. A neutral color palette, ample white space, and clean typography create an atmosphere of calm and clarity, allowing the featured projects to take center stage. Subtle animations and transitions enhance the user experience without distracting from the content. The visual language is consistent throughout, reinforcing the brand’s identity and commitment to quality.
Layout
The website’s layout is intuitive and user-friendly, guiding visitors through the studio’s offerings with ease. A fixed navigation menu provides access to key sections: Works, Studio, Process, and Gallery. The homepage introduces the firm’s ethos and showcases selected projects, inviting users to explore further. Project pages are thoughtfully structured, presenting images and narratives that convey the essence of each design. The inclusion of a detailed enquiry form facilitates initial client engagement, reflecting the studio’s organized and client-centric approach.
Content
Content across the site is concise and purposeful, articulating the studio’s values and design process with clarity. Project descriptions highlight the unique challenges and solutions inherent in each commission, demonstrating the firm’s adaptability and attention to detail. The ‘Studio’ section offers insight into the team’s philosophy, emphasizing a collaborative and empathetic design approach. The ‘Process’ page outlines the stages of engagement, providing transparency and setting expectations for prospective clients.
Functionality
Functionally, the website performs seamlessly across devices, ensuring accessibility for a diverse audience. Interactive elements, such as the project enquiry form, are responsive and straightforward, enhancing user engagement. The site’s performance is optimized, with quick load times and smooth navigation contributing to a positive user experience. Compliance features, including privacy policies and terms of service, are readily accessible, underscoring the studio’s professionalism.
Vaonis.com (Astrophotography Telescopes)
Goal
Vaonis.com serves as the digital embodiment of Vaonis's mission to democratize astronomy through innovation. The website introduces visitors to a new astronomy experience, where advanced technology meets user-friendly design. By showcasing their range of smart telescopes: Stellina, Vespera, and Hestia. Vaonis positions itself as a pioneer in making astrophotography accessible to enthusiasts.
Design
The design of Vaonis.com is sleek and modern, reflecting the sophistication of the products it features. A color blend of dark and light themes creates a visually appealing contrast that draws attention to key elements (product). Background images of celestial galaxies and the telescopes themselves captivate the viewer, while subtle animations enhance the interactive experience without overwhelming the user. Typography is clean and legible, supporting the site's overall aesthetic of elegance and innovation.
Layout
Navigating Vaonis.com is an intuitive and well-structured layout that guides users through the brand's offerings. The main menu provides clear pathways to product pages, comparisons, accessories, and company information. Each section is thoughtfully organized, allowing visitors to easily access detailed specifications, user guides, and purchasing options. The responsive design ensures a seamless experience across various devices for a diverse audience of astronomy enthusiasts.
Content
Content on Vaonis.com is informative and engaging, effectively communicating the unique features and benefits of each product. Descriptions emphasize the ease of use, portability, and advanced technology integrated into the telescopes. Supplementary materials, such as user testimonials, blog posts, and FAQ sections, provide additional insights. The site also highlights the brand's commitment to education and exploration.
Functionality
Functionally, Vaonis.com performs efficiently, with fast load times and smooth transitions enhancing the user experience. Interactive elements, such as product comparison tools and embedded videos. The integration of e-commerce capabilities allows for web purchasing, while customer support features, including live chat and detailed contact information, ensure users can easily seek assistance.
4. FEEDBACK
Week 1 I initially chose the Berkshire Hathaway website to be redesigned, but it turned out to be too simple in terms of content.5. REFLECTION
Experience
The Website Analysis challenge in Weeks 1 and 2 led me to the basics of interactive design - usability in web interfaces. During the first week, I was assigned to choose and analyse five websites, which made me to think beyond mere aesthetics and especially concentrate on layout, goals and user experience. I choose the Berkshire Hathaway site to start off with, but quickly found that with so less content it was painful to analyze it. This has taught me the need of selecting a site that has decent amount of depth in both design and functionality for a proper evaluation.
Observation
There's quite a range of design approaches that I've seen across the websites I selected. Lusion. co with their animiated overlay-rich, futuristic interface, In-Cognita focused on making a design readable for an extremely wide audience of teachers. The difference among creative studios like Visual Business and practical companies like Vaonis. com demonstrated the ways various businesses adjust their design methods to suit the needs of their user base. I became aware of the power of layout, typography, color, and how to set up useful and intuitive feedback in the UI.
Findings
Even at this early analytic stage, I started to recognize these as usability principles like consistency, simplicity, visibility, and error prevention are enacted in a different manner relative to what a site was looking to accomplish. One important lesson is the notion that good web design does not only have to be pretty; it has to be usable, accessible, and effectively communicate a brand. It vision helped train my eye further and be more critical about design not just in what i see but what i experience.
Having completed the first two weeks I feel that I’m prepared to begin the redesign project with a well rounded knowledge of interactive design, including the way I look critically and observe the world.
Comments
Post a Comment