Interactive Design / Exercise 1 - Web Analysis

Chooses Site

Web Analysis Site 01 -https://www.wilkinson-rivera.com/

Web Analysis Site 02 -https://monolithstudio.com/

Wilkinson & River 

Website Analysis 01 - https://www.wilkinson-rivera.com/

1.0 Introduction

Wilkinson & Rivera is a design studio specializing in handcrafted, collectible furniture. Their website showcases these products, targeting design enthusiasts, collectors, and homeowners.

Figure 1.1 Home page / Landing page 

2.0 Purpose and Goals

The website effectively communicates its purpose of showcasing unique furniture pieces, it have further emphasize the studio’s craftsmanship and design philosophy to better distinguish Wilkinson & Rivera from competitors and enhance emotional engagement. 

3.0 Visual Design and Layout

The color palette, primarily Alabaster (#F0ECE6) with accents of light pastel green and blue, creates a warm, calming atmosphere. While this is visually appealing, adding more contrast in key areas would improve readability. The "Didot" typography adds a sense of luxury, but inconsistent font usage can hinder readability. Simplifying the font styles would enhance cohesion. High-quality images display various product angles, giving users a clear understanding of the furniture. The website layout is minimalist and well-designed, contributing to an elegant user experience.

Figure 3.1 Main color the website uses (Alabaster (#F0ECE6))

Figure 3.2 Type of font uses

Figure 3.3 Type of font uses

4.0 Functionality and Usability

Navigation is intuitive, with clear product categories in the header and detailed links in the footer. However, mobile responsiveness presents issues, especially with images overlapping text on the homepage. Addressing this would improve usability. Interactive elements such as buttons and forms function well and add a layer of interactivity, making the website more engaging and enjoyable to browse.

Figure 4.1 Header after expending

Figure 4.2 Header before expanding

Figure 4.3 Product page with header that shows clear navigation

Figure 4.4 Website footer a more detail category than the header (If the header not expended)

Figure 4.5 Type of product sell (with interaction) when the mouse go near the one that user wanted the image/icon will change 

Figure 4.6 How is the product show in home page 

Figure 4.7 Mobile view with overlapping (Example 01)

Figure 4.8 Mobile view with overlapping (Example 02)

5.0 Content Quality and Performance  

The content is well-organized and informative, offering functions such as purchasing and trading also shows their past project for privet customers . For the trading feature, detailed product descriptions (including size, materials, and price) are provided below each item. With storytelling around the craftsmanship and design process it have further elevate the brand's appeal. Even though the website loads quickly, but further optimizing position of icon could ensure consistent performance across devices. Additionally, mobile performance, particularly regarding text-image overlap on Mobile phone, requires some improvement (Figure 4.7 and 4.8) .

Figure 5.1 Description of product

Figure 5.2 Showing detail of material uses and price of the product

Figure 5.3 Showcase detail of product (Size and sideview/front view of product)

Figure 5.4 Storyline (about them)

Figure 5.5 Showcase of past project for privet customers

6.0 Recommendations

Improving mobile optimization and simplifying typography might enhance user engagement and create a more cohesive, enjoyable experience overall.

Monolith Studio Website Analysis

Website Analysis 02 - https://monolithstudio.com/

1.0 Introduction
This is a contemporary tattoo studio (Monolith Studio)  website that connects users with tattoo artists, allowing them to explore profiles of artiest and book appointments for experience. Tailored for tattoo enthusiasts, it offers a user-friendly platform to browse artist portfolios and make informed decisions, streamlining the process of finding the right artist and scheduling tattoo experiences.

Figure 1.1 Home Page / Landing Page of the website

2.0 Purpose and Goals
The goal of this website is to provide an easy-to-navigate platform for searching and selecting tattoo artists while facilitating the booking process for contemporary tattoo studio . By offering comprehensive information about each artist, including detailed portfolios and examples of previous work, the site ensures users can make well-informed choices. Its effectiveness is evident in its straightforward navigation, which quickly leads users to artist profiles and booking options.

Figure 2.1 Booking Experience Page

3.0 Visual Design and Layout

The website features a dark color scheme, using black and grey tones have created a sense of mystery and artistic to the user. Complemented by a clean sans-serif font, the design aligns with the site's vibe. High-quality black-and-white imagery, with occasional color accents, showcases artists' work. for the interactive features, the website have involved things such as 3D models that rotate as users scroll, enhance engagement and contribute to a modern, immersive experience

Figure 3.1 Home page rotate as users scroll (interactive)

Figure 3.2 Studio landing page rotate as users scroll (interactive)

Figure 3.3 Layout for artist page

Figure 3.4 Layout for artist page (Home Page) - Darker version

Figure 3.5 Layout for artist description - example

Figure 3.6 List of collectors (Studio page) -interactive

4.0 Functionality and Usability
The site’s navigation system is intuitive and user-friendly, guiding users to essential sections effortlessly. A prominent header links to artist blogs and booking options, while the footer provides resources like tattoo styles and contact information. When viewing artist profiles, users can easily press a button on a bar below the screen to choose the section they want to explore, simplifying the search process. The content is informative, well-structured, and clear, that can effectively building user trust and enhancing their overall experience.

Figure 4.1 Header

Figure 4.2 Footer

Figure 4.3 Artist page navigation tool

5.0 Website Performance
The site generally offers quick load times, but there are issues with image display in split-screen mode on desktops, which could affect user experience and also in mobile website the 3D turning interaction is replace by image making the mobile website not that attractive as the desktop website.

OVERALL REFLECTION FOR EXERCISE 01

In this first exercise, I have learned to identify what is happening on a website while also having the opportunity to observe its structure. However, while doing this exercise, I faced some problems, such as not knowing what I could include and being unable to find appropriate words to describe the website. Despite these difficulties, this exercise has helped me evaluate and explore different types of websites and understand their basic structures.

Direct to Jump Link