Interactive Design | Exercise 1: Web Design Analysis
24/9/25 - 1/10/25 (Week 1 - Week 2)
Kimberly Miaw Jya Nee | 0366836
Bachelor of Design (Honours) in Creative Media | Taylor's University
Interactive Design
Exercise 1: Web Analysis (10%)
[Table of Contents]
1.
Instructions
2.
Exercise
3.
Feedback
4.
Reflection
5.
Quick Links
[Instructions]
[Exercise]
For our first exercise, we were required to analyze 5 existing websites and
identify areas of strengths / weaknesses in terms of:
- Purpose and goals of the website (evaluate whether they are effectively communicated to the user)
- Visual design and layout of the website (use of colour, typography, and imagery)
- Functionality and usability of the website (accuracy, clarity, and interactive elements)
- Quality and relevance of the website's content (accuracy, clarity, and organisation)
- Website's performance (load times, responsiveness, and compatibility with different devices and browsers)
Process Work
1. RAYRAY CREATIVE WEB LAB by RAYRAYlab
Fig. 1. RAYRAYlab Main Page
Purpose & Goal
RAYRAYlab is a one-person creative agency from Korea that specialises in
interaction design, web development, branding, and planning.
Their goal is to help brands express their stories in a
multidimensional way by adding three-dimensional elements to a
two-dimensional space, which creates a sense of depth and futuristic
design. This also enhances how brand values and stories are delivered.
They aim to leave a lasting impression through engaging, impactful, and
distinctive digital experiences.
Visual Design & Layout
Fig. 2. Quick Scroll Through of RAYRAYlab Homepage
Colour: Monochrome palette of black, white, and grey that gives a clean, futuristic, science lab-like feel. Colour only appears in high-quality images of their featured works that is revealed through a scroll-triggered “cover” animation.
Typography: Primarily sans-serif fonts with some digital-style typefaces which reinforces the tech-forward vibe.
Visual Elements: Subtle 3D elements appear in the background, adding depth without distracting from the content.
Layout & Navigation: Clear and intentional structure that guides users through the brand’s mission.
Animation: Smooth, unique transitions and animations enhance the overall experience and storytelling.
Functionality & Usability
The website is easy to navigate, with a single-page layout that
invites users to scroll by using small captions like “please scroll
down” that gently guide the experience. All main buttons are fixed at
the top and remain accessible at all times. The background elements
respond slightly to cursor movement, which adds a subtle interactive
layer without distracting viewers from the content.
Quality & Relevance
The website clearly communicates what services they offer, along with
their purpose and goals. Their expertise is supported by awards and
recognitions displayed on the homepage. The content is well organized
that guides visitors through each stage of their process. Their contact
information is placed at the end but is also easily accessible through
the top menu. However, I did notice one or two minor spelling errors
while browsing the site.
Performance
Fig. 3. Mobile Version of RAYRAYlab Website
The website loads quickly, with high quality images appearing almost
instantly. Buttons respond well, and cursor based movements are smooth
and sensitive. It works across different browsers and devices, but
most of the transitional animations don’t appear on mobile. This makes
the mobile experience feel less immersive compared to the desktop
version.
Strengths & Weaknesses
Strengths:
- Strong and consistent visual identity
- Smooth, unique animations that enhance experience
- Clear structure and easy navigation
- High quality images and responsive elements
- Effectively communicates purpose and services
Weaknesses:
- Minor spelling errors found on the site
- Certain animations don’t appear on mobile, which makes the experience feel less immersive
2. David Whyte Experience by Immersive Garden
Fig. 4 David Whyte Experience Page
Purpose & Goal
David Whyte is a poet, philosopher, and speaker whose work gives
voice to the deep sources of human identity, human striving, and
the possibilities for happiness.
The website showcases his work, offers an online store for his
books, and shares updates on tours and events. It also includes
monthly subscriptions to his latest writings, and a yearly
subscription to an online archive of talks, films, and a
lifetime of work.
The most unique feature is the Experience page, an interactive space where his writings are paired
with immersive, diorama-like visuals that bring the words to
life.
Visual Design & Layout
Fig. 5. Quick Scroll Through of the David Whyte Experience Page
Colour: Neutral, earthy palette that creates a calm and grounded feel.
Typography: Serif fonts add a thoughtful, literary touch that aligns with David Whyte’s brand and identity.
Imagery: Nature scenes and behind-the-scenes photos of David at work contribute to a serene, collected atmosphere while offering visitors a glimpse into his creative process.
Experience Page: Functions like a digital diorama or pop-up book, where interactive watercolour landscapes unfold as visitors scroll. Users can “open” scenes by brushing their cursor across blank watercolour pages.
Layout & Animation: Clear and straightforward structure with simple scrolling, smooth transitions, and subtle animations that keep the experience gentle and focused.
Functionality & Usability
Fig. 6. Top Bar of the David Whyte Website
The website is easy to navigate with a top bar linking to all key
sections, for example the Experience page, Poetry & Prose, Walking
Tours, Speaking, Web store. These are also shown on the homepage as
users scroll, but the menu is helpful for direct access. The store and
subscription pages are simple and easy to use. The Experience page
adds an exciting, interactive touch where users can “reveal” scenes
with their cursor.
Quality & Relevance
The information on the website is accurate and clearly presented,
with each section explained in a concise, easy-to-read way. It’s
well organised, and sections like events, store, and portfolio are
easy to understand at a glance, with no confusing labels or clutter.
The Experience page stands out by making his work more engaging. It
includes small captions that guide visitors to scroll or "open the
landscape," which invites deeper interaction without being
overwhelming.
Performance
The website loads quickly, with high resolution images appearing
seamlessly as visitors scroll. The scrolling transitions smoothly
between sections, so visitors don’t need to align anything. All
buttons are responsive, and while the Experience portal takes a few
seconds to load, it’s understandable given its interactive nature.
Fig. 7. Mobile Version of David Whyte Experience
Page
The website is compatible across different browsers and devices.
However, the mobile version of the Experience portal has more text
space, which limits the visibility of the diorama background
compared to the desktop view. It also does not have the interactive
watercolour feature. Despite this, the smooth scrolling animation
remain intact.
Strengths & Weaknesses
Strengths:
- The website is visually appealing and engaging, with a clean, organised layout that highlights key content
- The interactive elements, especially the Experience page, provide a unique and immersive experience
- Navigation is clear, and the website is responsive across devices, with smooth transitions
Weaknesses:
- The mobile version of the Experience portal limits the full view of the diorama background
- The mobile version of the Experience portal does not include the interactive features available on the desktop version
3. Alec Tear by noko
Fig. 8. Alec Tear's Website Home Page
Purpose & Goal
Alec Tear is a British designer and lettering artist with a
strong background in brand identity and packaging design. He
combines conceptual thinking with a deep love for typography to
create bold, original work for brands worldwide. His website
serves as a portfolio that showcases his creative process,
signature style, and past collaborations. This gives visitors a
clear sense of his design process and expertise.
Visual Design & Layout
Fig. 9. Quick Scroll Through of the Website
Colour: Bold ultramarine blue background contrasted by clean white text. This vivid pairing grabs attention and reflects a confident, energetic tone.
Typography: Extended serif and sans serif typefaces create a playful, distinctive character. All text appears in lowercase, which adds a casual, carefree personality to the site
Imagery & Interaction: Portfolio pieces are displayed creatively, with images shifting on hover to reveal their original colours and finer details.
Overall Experience: The site feels dynamic and interactive that invites visitors to actively engage with the work rather than passively scroll.
Functionality & Usability
The website is simple and intuitive to navigate. Upon landing on
the homepage, visitors are immediately presented with two large,
clear buttons, one leading to the design portfolio and the other
to the lettering section. This direct approach helps users explore
Alec Tear’s work without confusion. The site’s interactive
elements, like hover effects on portfolio pieces, enhance
engagement without overwhelming the browsing experience.
Quality & Relevance
Fig. 10. Information Section of The Website
All information is presented clearly and in an organized manner.
Each section is marked with clear buttons, and the text is neatly
arranged in columns, which makes it easier for visitors to read
and navigate without feeling overwhelmed.
Performance
Fig. 11. Mobile Version of Alec Tear Website
The website loads very quickly and is highly responsive, especially
with its many hover based animations and cursor interactions. It works
well across different browsers. On mobile, while hover effects are
reduced, the layout and information remain clean and accessible.
Strengths & Weaknesses
Strengths:
- Bold colour scheme that grabs attention
- Playful typography with a mix of serif / sans serif and selective lowercase use that adds personality
- Interactive hover effects that make the portfolio feel lively and engaging
- Clear structure with easy navigation between design and lettering sections
Weaknesses:
- Some interactive elements like hover effects don’t work on mobile, which slightly limits the experience
- The project pages could benefit from short descriptions or insights into the creative process, as they currently only show the title, award, client, and credits
4. Alpine Bio by Resn
Fig. 12. Alpine Bio Main Page
Purpose & Goal
Alpine Bio is a biofactory that programs seeds to produce functional
proteins. Using a simple genetic code, each seed becomes part of a
scalable bio-manufacturing system. Their goal is to support
farmers and the agricultural sector by increasing profitability
and promoting sustainable farming through the use of existing
farmland.
Visual Design & Layout
Fig. 13. Quick Scroll Through of Alpine Bio
Website Homepage
Colour: A clean white theme that allows most of the colour to come from high-quality background images.
Typography: A custom font made of tiny circles arranged to resemble molecules. This ties well with their identity as a biofactory.
Imagery: Close-up visuals framed in connected circles emphasising the molecular concept. This creates a unique scroll experience where images “bubble” into view as visitors move through the page.
Interactivity & Visuals: While there aren’t many interactive elements, the site makes up for it with dynamic visuals and well-integrated diagrams that keep the experience engaging.
Functionality & Usability
This website is simple and straightforward to navigate. Visitors
can scroll down to explore the main content, and additional
buttons at the bottom lead to more detailed explanations for each
topic. These sections are also accessible through the menu button
on the top right corner which makes it easy to jump to specific
areas. The buttons include a basic hover effect for visual
feedback.
Quality & Relevance
The website clearly explains each step of the process in simple,
concise language. This makes it accessible for visitors who may
not be familiar with the concept. It also includes dedicated
sections that offer more detailed explanations of their services
that allow users to dive deeper if needed. The content is well organized into bite-sized pieces. This
ensures visitors can easily grasp the concepts without feeling
overwhelmed.
Performance
Fig. 14. Mobile Version of Alpine Bio Website
The website loads within a couple of seconds for most pages, and
the transition animations of the images appearing into view blend
seamlessly with the loading process. All buttons are responsive
with a simple click. The mobile version of the site maintains the
same, consistent design and functionality as the desktop
version.
Strengths & Weaknesses
Strengths:
- The website offers a clean and simple layout that is easy to navigate and understand.
- High quality imagery and smooth transitions enhance user experience.
- Brand identity is reinforced by the molecular theme that is creatively integrated into both typography and visuals.
Weaknesses:
- While the website is informative, it could benefit from including client testimonials to build credibility.
- A dedicated page outlining the full range of services they provide would give visitors a clearer understanding of their services.
5. Faint Film by Tomoya Okada
Purpose & Goal
Faint Film is a photography website that documents the daily life moments
of Tomoya Okada, an engineer who pursues photography in his free time. The
site was created to share and preserve his shots as a personal archive of
images from 2024 to 2025.
Visual Design & Layout
Fig. 16. Quick Scroll Through of Faint Film Website
Colour: Primarily black and white palette, with colour appearing only through the images.
Layout: Split in half and organized with a grid system. The left side features neatly arranged black and white images that are clickable for more details, while the right side displays a standalone coloured image with subtle background animations that change on hover.
Interaction: A slider button at the bottom centre lets visitors switch between grid or slider view that adds variety to the browsing experience.
Typography: Clean sans serif font that supports the minimal aesthetic.
Animation: Smooth fade-in and fade-out transitions when navigating between buttons and pages.
Functionality & Usability
Fig. 17. Coloured Image Appeared in the Background as the B&W
Image is Hovered Over
Overall, the website functions as a straightforward photography
showcase. Its main purpose is for visitors to view the images and read
the simple stories behind them. I find the simplicity appealing, though
websites like this usually result in a shorter user experience since
users can only browse through the photographs. Still, it is intuitive to
use. The buttons are clear, and small captions guide visitors to “scroll
down” for the slider view. The menus are placed on the top left and
right corners of the page, while additional navigation buttons and the
view slider are located at the bottom centre, which makes browsing easy
to follow. Contact details for the photographer are also included. Hover
features add interactivity, as the black and white images reveal
coloured backgrounds when hovered over in the slider view.
Quality & Relevance
Fig. 18. Year Taken + Short Description of Photo
The website follows a minimalist design structured around a grid system.
The menu buttons are placed in the top header which makes them
straightforward and easy to notice. The images are neatly organized and
numbered. This gives the site a clean and consistent look. When clicking
into an image, a short description appears on the left side of the page
along with the year it was taken. Overall, the site is well-maintained
with no spelling errors or broken links, which reflects attention to
detail and supports its credibility.
Performance
Fig. 19. Mobile Version of Faint Film Website
The website loads fairly quickly, with a slight animation as you first
enter the page. All buttons are responsive, and hover animations are
applied to the images. However, when browsing through the gallery, each
image change triggers the same loading animation, which takes about 2–3
seconds. This repeated delay can make the experience feel disconnected as
users move from one photo to the next. A faster transition would help
maintain the visual storyline and keep the viewer’s interest.
The mobile version of the website maintains the clean grid layout.
However, the slider view is less engaging compared to the desktop
version since the hover feature is not available. Instead, clicking on
an image simply opens the regular grid view.
Strengths & Weaknesses
Strengths:
- Clear purpose as a straightforward photography showcase with an archival feel
- Minimalist, consistent design with a clean grid system
- Effective use of black and white with selective colour for emphasis
- Intuitive navigation with well-placed menus and captions
- Smooth animations and responsive buttons enhance usability
Weaknesses:
- Limited interactivity, which can shorten user engagement
- Repeated 2–3 second loading animations disrupt browsing flow
- Mobile version feels less engaging due to the absence of hover features
- Single-purpose design may limit user return visits beyond viewing the photo collection
[Feedback]
Week 1 (24/9/25)
General Feedback:
Module briefing by Mr Shamsul. We begin to search for 5 websites for
Exercise 1.
Specific Feedback:
I have chosen 5 different kinds of website and began the analysis for each
websites.
Week 2 (1/10/25)
General Feedback:
[Submission Week] This week, I finished up the remaining website analysis
and also polished up the blog for submission.
Specific Feedback:
Mr. Shamsul commented to include more evidence (images , page speed insights), and organise the points in more detailed.
[Reflection]
Experience
Overall, this exercise was quite straightforward but also time consuming. I
spent a lot of time analysing each part of the website carefully. It helped
me understand how a website works and what makes it good in terms of design
and user experience. But it was interesting to explore the variety of
websites, and seeing them has been inspiring. Like I always say, it's a
great chance to expand my visual library.
Observation
Small details make a big difference in a website. Things like how fast it
loads, how smooth the transitions are, and how the content is organised all
affect how people feel when using it. If done well, users can find what they
need and enjoy the experience.
Findings
Balance between design and function is key to making a website both
visually and easy to navigate.
[Quick Links]
Interactive Design: Exercise 2
Interactive Design: Project 1
Interactive Design: Project 2
Interactive Design: Final Project
Thank You
Comments
Post a Comment