Interactive Design - Exercise 1
21 April 2025 - 28 March 2025 // Week 1 - Week 2
Racheal Tan Tze Rou // 0381005
Design Principles // Bachelor of Design (Hons) // Creative Media
Exercise 1
LECTURES
Week 2 // Usability: Designing Products for User Satisfaction
INSTRUCTIONS
EXERCISE 1
WEB ANALYSIS
In the first exercise, we are tasked with web analysis. We have to choose five websites from the below link given by Mr. Shamsul:
Then, we will have to analyze them by their design, layout, content, and functionality.
Chosen websites:
- PORTRAIT REPORT from "Awwards"
- MARIO ROUDIL from "Awwards"
- VITRUVIUS BUILT from "CSSWINNER"
- Homerun from "The FWA"
- wemake from "Awwards"
WEB ANALYSIS REPORT
WEBSITE 1 : PORTRAIT REPORT
Website Purpose and Goals
Figure 1.1 ; About page ; Week 1 (21/4/2025)
The main purpose of this website is to promote the name of this brand. Besides that, creating this website can help to drive sales to this brand products because it makes it easy for users to browse and purchase product without the need to present to the physical stores.
Visual Design & Layout
Figure 2.2 ; Shop page ; Week 1 (21/4/2025)
The visual design uses clean sans-serif fonts, mixing bold and regular weights to create a clear hierarchy. A white (#FFFFFF) background and a strong invisible grid layout emphasize spaciousness and balance, with both symmetrical and dynamic asymmetrical compositions. Big titles, smaller subtitles, and body text guide the eye, while soft, natural-light imagery with minimal backgrounds keeps focus on the product.
Functionality and Usability
Figure 2.3 ; Navigation&Sections ; Week 1 (21/4/2025)
The website keeps navigation simple and minimal, with a small top menu linking to sections like "Shop," "Collection," and more. Clicking on them reveals more detailed categories like "New Arrivals," "Bracelets," and "Necklaces." The design focuses heavily on clean product presentation, with sections stacked vertically for easy browsing. Interactive elements are minimal to maintain a distraction-free experience. Users can hover over images to see details, and product options update dynamically. The checkout process is smooth and straightforward, making shopping easy and seamless.
Quality & Performance
The website is compatible with different devices like MacBooks, iPads, and mobile phones. The loading speed is fast, because of the simple use of text and images without heavy animations. One notable point is that while the website provides English descriptions, making it more accessible to international audiences, but it only supports Korean payment methods, which unfortunately narrows its potential market.
WEBSITE 2 : MARIO ROUDIL
Website Purpose and Goals
Figure 2.1 ; About page ; Week 1 (21/4/2025)
This is a digital portfolio showcasing Mario Roudil's production works as a director, cinematographer and editor. The site functions as both a portfolio and a self-promotional platform to attract clients or collaborators. Besides, this website also allow users to know more about Mario Roudil and his excellent productions.
Visual Design & Layout
Figure 2.3 ; MARIO ROUDIL Home Page ; Week 1 (21/4/2025)
Functionality and Usability
Figure 2.4 ; Navigation&Sections ; Week 1 (21/4/2025)
Navigation is kept very small at the top corners It could be slightly confusing for users who prefer clearer menus, but it matches the artistic audience's expectations. The portfolio section has a smooth horizontal slider that’s super interactive and fun to browse. Hovering reveals project details, and clicking plays a full video, making the whole experience really engaging and immersive.
Quality & Performance :
Figure 2.4 ; MARIO ROUDIL on different devices ; Week 1 (22/4/2025)
I tested the website on a MacBook, iPad, and mobile phone. It’s clearly optimized for large screens, everything runs smoothly on desktop, with perfect sliders and video playback. On iPad, the slider becomes unresponsive, the images disappeared after clicking it. On mobile, the layout adjusts okay, but hover effects and videos don’t work properly. One positive feature observed in the mobile version is the multilingual support, offering both English and French versions, which broadens accessibility for a more diverse audience.
WEBSITE 3 : VITRUVIUS BUILT
Website Purpose and Goals :
Figure 3.1 ; Purpose&Goal ; Week 1 (23/4/2025)
The goal of the website is to communicate Vitruvius Construction's core values and company culture, emphasizing their commitment to luxury architecture with a focus on innovation, emotional intelligence, authenticity, and client experience. These goals are clearly articulated and consistently reinforced through concise value statements.
Visual Design & Layout :
Figure 3.2 ; Ethos page ; Week 1 (23/4/2025)
The website features a modern sans-serif typeface like Helvetica Neue, using light weights for body text and bold for headings to create a clean, sophisticated feel. Most text is center-aligned, adding formality. A muted grey (#D1D1D0) paired with subtle gold accents gives off a "quiet luxury" vibe. The single-column, vertical scroll layout feels minimalist and premium, with strong, high-quality imagery focused on architecture and craftsmanship. However, the overuse of centered text and lack of strong section hierarchy slightly reduce clarity and user focus.
Functionality and Usability
Figure 3.3 ; Navigation&Sections ; Week 1 (23/4/2025)
The site uses a simple, minimal top navigation bar that stays the same across pages, keeping things consistent. On the "Ethos" page, there are no quick links to jump between sections like “Innovation” or “Hospitality,” so users have to scroll through everything. Interactive elements are very limited, there is no animations, hover effects, or collapsible text. While this might feel a bit plain, it actually helps keep the experience clean, focused, and aligned with the website’s elegant and professional vibe.
Quality & Performance
The website demonstrates strong quality and performance. It loads quickly due to lightweight assets and optimized imagery, offering smooth, uninterrupted scrolling across devices. The site is fully responsive, adapting well to desktops, iPad, and mobile devices, though large center-aligned text can feel slightly heavy on smaller screens. Compatibility across major browsers like Chrome, and Safari is excellent, maintaining consistent design and functionality. Overall, the page delivers a polished, professional experience, reinforcing the brand’s luxurious and meticulous image through its seamless performance.
WEBSITE 4 : Homerun
Website Purpose and Goals
Figure 4.1 ; About page ; Week 1 (26/4/2025)
Homerun positions itself as a creative consultancy that bridges the gap between consulting and creativity, aiming to make brands culturally relevant. Their emphasis on cultural relevance and breaking away from the traditional agency-client model is well articulated and sets them apart from traditional agencies.
Visual Design & Layout
Figure 4.3 ; Homerun Color Palette ; Week 1 (26/4/2025)
The Homerun website features bold, geometric sans-serif typography, with "HOMERUN" in large all-caps and supporting words like "CREATIVE" and "THINGS" smaller but consistent in style. Soft light pink text on a dark off-black background gives it a fresh, modern feel. The color palette, which is rich green, soft pink, light blue, and bright orange, adds vibrancy while off-white backgrounds on other pages keep the design clean and readable. Generous spacing around text improves readability. On the homepage, a dynamic, tilted video contrasts with the structured typography, creating a playful tension that perfectly captures Homerun’s creative and energetic brand identity.
Functionality and Usability
Figure 4.4 ; Navigation&Sections ; Week 1 (26/4/2025)
The navigation menu sits at the top right and stands out with a bright orange color. Clicking it pops open a green box with white text listing the sections.
Figure 4.5 ; Interactive element ; Week 1 (26/4/2025)
There's also a fun "Change Your Helmet" interactive feature on desktop and iPad, letting users customize a helmet, but it’s missing on mobile for a cleaner experience.
Light hover animations on clickable elements make interactions feel smooth and intuitive, helping guide users and encouraging more exploration across the site.
Quality & Performance
Figure 4.6 ; Homerun on different devices ; Week 1 (26/4/2025)
The website loads quickly and smoothly across all devices and browsers with no noticeable glitches. It's highly responsive, adapting well to desktop, iPad, and mobile. On mobile, the site is clearer and easier to read, whereas on desktop and iPad, the large layout can make text feel small and harder to read. The "Change Your Helmet" feature works only on desktop and iPad, which simplifies the mobile version but slightly limits interactivity on smaller screens.
Visual Design & Layout
Wemake uses a minimalist, modern design featuring clean sans-serif typography, a neutral color palette with subtle accent colors, and professional project imagery. The layout is spacious and easy to navigate, emphasizing clarity and professionalism. Smooth transitions and a structured content flow create a sleek and polished appearance, making the user experience visually appealing without overwhelming visitors.
Wemake uses a minimalist, modern design featuring clean sans-serif typography, a neutral color palette with subtle accent colors, and professional project imagery. The layout is spacious and easy to navigate, emphasizing clarity and professionalism. Smooth transitions and a structured content flow create a sleek and polished appearance, making the user experience visually appealing without overwhelming visitors.
Functionality and Usability
Figure 5.3 ; Navigation&Sections ; Week 1 (26/4/2025)
The site offers a smooth and intuitive experience with interactive elements like scroll animations and swipeable project sections. Navigation is simple, with a top menu linking to key areas and a sticky "Let's Talk" button for easy contact. Sections are logically organized, ensuring visitors can find information quickly, whether they want to learn about wemake’s process, explore projects, or get in touch.
Quality & Performance
Figure 5.4 ; wemake on Mobile ; Week 1 (26/4/2025)
Wemake’s website is highly responsive, performing well across desktops, tablets, and smartphones. It maintains compatibility with all major browsers and optimizes images for fast load times without sacrificing visual quality. The smooth transitions, quick loading speeds, and lightweight design ensure a seamless browsing experience, reinforcing the company’s professional and forward-thinking brand image.
FEEDBACK
Week 2: E-portfolio format is okay but can refine for easier readability.
Comments
Post a Comment