Interactive Design - Exercise 1: Website Analysis
25/9/2025 - 2/10/2025 (Week 1 - Week 2)
Te Li Wen (0367811)
Design Principles - Bachelor of Design in Creative Media - Taylors
University
Exercise 1: Website Analysis
Table Of Contents
- Lecture
- Exercise 1
- Reflection
Lecture
Week 1
We were given a briefing of what Interactive Design was about so we could
get an understanding of what we would be doing for our assignments.
Week 2
Our lecturer was unwell and instead he provided us a video and slides
lecture for us.
Figure 1.0 Bad Doors YouTube Video
<iframe
src="https://docs.google.com/presentation/d/e/2PACX-1vRt8bk8RSiDWqd95xCdZQXQnOAhhbkZrfDSZC5-LpEnNym5HeA3e_MD-0-HbT8k-hk4iJ_gxbH5qMG6/pubembed?start=false&loop=false&delayms=3000"
frameborder="0" width="960" height="569" allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"></iframe>
Figure 1.1 Week 2 Lecture Slides
Exercise 1
For our first exercise we had to find and choose 5 websites of different
categories and have it approved by our lecturer before we proceed to analyze
each of them.
These are the websites that were chosen:
Website 1 - The Story Of Babushka by Catherine Flores
Figure 1.2 The Story Of Babushka
1. Purpose & Goal
This website is an interactive website that showcases "The Story Of Babushka", a myth which is told in western storybooks. The babushka doll, also known as a matryoshka or Russian nesting doll, is a traditional Russian toy first made over 100 years ago.
The babushka doll has 5 bodies each have their own special personality. The outermost body was Antonia, known for her stunning beauty that everyone admired. Inside her was Loretta, who was richly dressed in gold and sparkling gems. Beneath Loretta was Paula, full of talent and success in everything she did. Deeper still was Viola, the wise one, smart and full of clever ideas. At the very core was Mary, the smallest and most loving, with a kind heart that could heal sadness and bring comfort to others. One day Babushka decides she wants to find out the meaning of life, so she sends her bodies out of the forest and into the world to search for answers.
The website introduces the babushka dolls and their characters. They included the storybook which can be bought from their shop on their website.
2. Visual Design & Layout
a) Color
Figure 1.3 Home And About Page
This website uses bright colors which includes green, yellow, brown, pink, blue and red. The colors are usually associated with children's storybooks which fits what they made it to be.
b) Typography
Figure 1.4 Characters Page - Loretta
c) Imagery
Figure 1.5 Home And Characters - Mary Page
Since it is about a storybook, the home page is filled with Matryoshka dolls having a picnic interacting and eating with each other on a small hill and in the background are houses and buildings. On the characters page, there are a few illustration of the characters to show their design and personality.
d) Layout
Figure 1.6 Blog And Shop Page
The layout is plain and simple which makes it easy to look at. The website does not have much interesting layouts which made it less interesting than when you first enter the home page.
3. Functionality and usability
a) Navigation
Figure 1.7 Top Home Page
The navigation bar is pretty straight forward since it is on the top of the website making it simple and easy to navigate around the website.
b) Interactive elements
Figure 1.8 Interacting The Home Page
The home page has the most interactive elements which is a fun element for those who visit the website. The picnic blankets are interactable and changes the food around it and after clicking multiple times the plates would end up being empty. The user is able to click on the bushes which shakes or makes them disappear, clicking on the trees would cause them to go up and down, the big stones also shakes, some of the houses lights up while the ones on the top right changes colors, and the buildings on the top left becomes longer.
Figure 1.9 Interacting The Characters Page
On the characters page, the user may click the play button to listen to each of characters speaking.
4. Quality & Relevance
a) Quality
The information that was provided in the about page was easy to comprehend, informative, and interesting. As a children's book, the interactive element made the website fun and interesting.
b) Relevance
The site describes "The Story of Babushka", a tale about five layers of a doll named Babushka which isn't well known to many and the dolls each represents different qualities such as Antonia symbolizes beauty, Loretta represents wealth, Paula embodies talent, Viola stands for wisdom, and Mary represents love. If the viewer has an interest in fairytale like stories, this website would help introduce them to an old yet interesting story.
5. Performance
a) Load Time
Figure 2.0 The Story Of Babushka - Performance
The website has a slight delay when the user clicks on a different content above which is a downside since it is an interactive website. On mobile, it slightly delays when loading the graphics as well.
b) Responsiveness & Compatibility
On mobile, there are far fewer interactive elements, with only the picnic area and a few houses and trees you can interact with. Even so, it takes a moment for the interactions to show.
Website 2 - Deluxbury Sea Farm | Premium Duxbury Bay Oysters by Mark and Anna
Figure 2.1 Deluxbury Sea Farm | Premium Duxbury Bay Oysters
1. Purpose & Goal
The purpose of Deluxbury Sea Farm is to grow and produce high-quality oysters in a sustainable and environmentally friendly way. The farm is built to bring everything together in one place, including oyster farming, processing, and living spaces, which makes their work more efficient and connected to the environment.
The goal of the website is to share the story and values of the farm while showing how they combine tradition with modern design and sustainability. It aims to attract people who are interested in seafood, local farming, and creative approaches to aquaculture, while also highlighting their passion for quality and care for the environment.
2. Visual Design & Layout
a) Color
Figure 2.2 Colors Of Deluxbury Sea Farm
The color palette of the website is mostly an earthy green with some blue accents and white. They used orange for the typography color giving it a pop. The colors may seem slightly dull but the layout and pictures makes it stand out.
b) Typography
Figure 2.3 Who Buys From Us Page
Although there are many different fonts, the information is still comprehensible and not cramped up together.
c) Imagery
Figure 2.4 Oyster Images
The images are all clear and aesthetically pleasing to the eye which is usually what people would look for when they review business websites. They have many images showcasing their journey, experience and what they provide.
Figure 2.5 The Farm And Oyster Farm Tour Page
The images are simple yet it feels like a nostalgic part of life.
d) Layout
Figure 2.6 Video Of Scrolling
The layout is basically one long scroll with slight movements of the images and elements which make it feel less stiff.
3. Functionality and usability
a) Navigation
Figure 2.7 Navigation Bar
b) Interactive elements
The website does not have any interactive elements other than the navigation bar changing into a graphic icon when hovered over it.
4. Quality & Relevance
a) Quality
The quality of this website is high with all the clear images and aesthetic graphic placements.
b) Relevance
Oysters are often consumed by many people, some may want to know where they came from. Customers who are looking for oysters to buy would find this website very useful. However, as someone who doesn't eat oysters let alone look for oysters to buy, this website would not be relevant to those who does not associate with oysters.
5. Performance
a) Load Time
Figure 2.8 Deluxbury Sea Farm | Premium Duxbury Bay Oysters - Performance
The website is quite smooth since there isn't much elements that requires loading. On mobile, the loading time is fine.
b) Responsiveness & Compatibility
There’s a small lag when scrolling to find information, but the mobile layout is neat and well-organized, so it doesn’t feel crowded.
Website 3 - Bruno Simon by Bruno Simon
Figure 2.9 Bruno Simon
1. Purpose & Goal
Figure 3.0 Information Area
This website serves as the portfolio of Bruno Simon. He began his career as a freelancer in 2011 and, two years later, became a teacher specializing in web development. From 2016 to 2019, he worked as the Lead Developer at UZIK before moving on to hold the same position at Immersive Garden.
The game-like aspect of the website makes it enjoyable to explore, allowing users to drive freely across the map. Despite its simple and minimalistic design, it effectively captures attention by evoking a sense of curiosity and mystery about what might be discovered while navigating the website.
2. Visual Design & Layout
a) Color
Figure 3.1 Spawn Area Color
The color the developer chose is orange which I find it a pretty striking color since it isn't too bold like red but also isn't bright like yellow which may hurt the eyes.
b) Typography
Figure 3.2 Projects Area - CHARTOGNE TAILLET
The typography is simple and easy to read which is good. The words are not cramped up instead it is rather spread out.
c) Imagery
Figure 3.3 Projects Area - LUNI.APP
d) Layout
Figure 3.4 Navigation Area - Layout
3. Functionality and usability
a) Navigation
Figure 3.5 Navigation Area
The navigation area is designed in an engaging way, resembling directional signboards that guide users toward their chosen destinations.
b) Interactive elements
Figure 3.6 Playground Area - Interacting Video
The user can drive into different objects, making the experience more fun and interactive. In the playground area, they can knock down bowling pins or try doing car tricks on the ramp found at the bottom left.
4. Quality & Relevance
a) Quality
The information provided is brief yet clear, allowing users to understand the content without reading lengthy text. It presents details in an engaging way, as users can interact with various objects by driving over them. The website is of high quality and delivers a game-like experience without relying on storytelling or repetitive tasks.
b) Relevance
The website is designed to appeal to individuals with an interest in gaming, as well as professionals seeking to view Bruno Simon’s portfolio and potentially collaborate with him.
5. Performance
a) Load Time
Figure 3.7 Bruno Simon - Performance
The loading time on mobile devices is noticeably slower compared to the desktop version. Additionally, controlling the car is more challenging, as the joystick replaces the WASD keys and includes gas pedals. To reset the car, the user must reload the entire website.
b) Responsiveness & Compatibility
Since it's a game, there isn't too much for the responsiveness as the whole website is a map. However, on mobile the responsiveness is slightly delayed and the vehicle may glitch and drive off unable to stop.
Website 4 - Black Dog by Suji Choi and Chanwoo Hwang
Figure 3.8 Black Dog - Beginning
1. Purpose & Goal
Figure 3.9 A Black Dog
The purpose of Black Dog (검은 개) is to create an interactive storytelling experience using web technologies like WebGL. Made by Suji Choi and Chanwoo Hwang, the website turns a simple picture book into something more engaging and dynamic. Instead of just reading, users get to explore the story through movement, animation, and visuals that react as they scroll or interact with the page. This makes the story feel more alive and immersive.
The goal of the website is to show the creators’ creativity and skills while experimenting with a new way of telling stories online. By combining illustration, design, and interactivity, Black Dog gives a fresh take on digital storytelling. It’s also made in both Korean and English, allowing it to reach more people and connect with audiences from different backgrounds through its visuals and emotions.
2. Visual Design & Layout
a) Color
Figure 4.0 Black Dog - Color
b) Typography
Figure 4.1 Black Dog - Typography
The typography is clean and minimal, with text presented in both Korean and English to make the content accessible to a wider audience.
c) Imagery
Figure 4.2 Black Dog - Imagery
The imagery in Black Dog is simple but very striking. It mainly uses black and white colors, which gives the website a mysterious and slightly eerie feeling. Because of this limited color palette, every shape and shadow stands out more, making the visuals feel clean and meaningful. The use of contrast helps set the mood and draws the viewer’s attention to what’s happening on the screen.
The movement of the visuals also plays an important role in the storytelling. The shapes and forms move smoothly, guiding the viewer’s eyes from one part to another without feeling too busy. Each animation feels intentional and adds to the overall experience. The combination of minimal design, soft motion, and strong contrast makes the story feel immersive and emotional, encouraging viewers to keep exploring what comes next.
d) Layout
Figure 4.2 Black Dog - Layout
The layout has a modern and minimalistic style, using basic 2D and 3D shapes that move smoothly throughout the storytelling.
3. Functionality and usability
a) Navigation
There is no visible navigation bar except for the button on the top left, which takes the viewer back to the beginning of the story. The ‘About’ section on the top right provides information about the developers of Black Dog and allows viewers to explore other projects created by them.
b) Interactive elements
Figure 4.3 Black Dog - Interacting Video
The viewer moves to the next part of the story by clicking a small circle, which helps direct their focus. It’s an engaging and clever way to add interactivity to the experience.
4. Quality & Relevance
a) Quality
The words are simple and easy to understand since it is a storytelling website. The pacing of when the words would appear is good for people who are slow readers.
b) Relevance
I believe the storytelling reflects what the developers wanted to express and serves as a way for them to experiment with their creativity.
5. Performance
a) Load Time
Figure 4.4 Black Dog - Performance
The loading time for Black Dog is a bit slow, especially at the beginning before the visuals appear. This is likely because the website uses a lot of animations and interactive graphics, which take longer to load fully.
b) Responsiveness & Compatibility
The website works well on mobile devices. However, the visuals look a bit different since the story is displayed vertically rather than horizontally.
Website 5 - Haus | Maker of Things for Screens
Figure 4.5 Black Dog - Interacting Video
1. Purpose & Goal
Made In Haus is an agency that creates high-impact digital experiences and production work for screens. They combine design, strategy, and technology to produce projects that stand out. The purpose of the website is to showcase their creativity and push beyond ordinary digital content by presenting bold and innovative work. It reflects their goal to offer clients unique, visually striking experiences that highlight their expertise in digital design and storytelling.
Their goal is to build strong connections between brands and audiences through meaningful and effective creative work. Over the years, they have worked with many well-known companies, showing their commitment to quality, creativity, and reliability. The website aims to position them as a leading creative production agency that continues to innovate while maintaining professionalism and a strong visual identity.
2. Visual Design & Layout
a) Color
Figure 4.6 Haus | Maker of Things for Screens - Colors
b) Typography
Figure 4.7 Haus | Maker of Things for Screens - Typography
I find the typography a bit unappealing. The placement of the text feels uneven, especially with the subtitle ‘Capabilities’ on the left without any text below it, while the right side is filled with words, making the layout look off and unbalanced.
c) Imagery
Figure 4.8 Haus | Maker of Things for Screens - Video Of Home Page
The images are very clear and high quality, and the variety of graphics makes the website feel fun, lighthearted, and enjoyable.
d) Layout
Figure 4.9 Haus | Maker of Things for Screens - Layout
The layout feels somewhat messy, though it still manages to function in its own way. However, in my opinion, it lacks visual appeal and doesn’t fully capture my interest.
3. Functionality and usability
a) Navigation
Figure 5.0 Haus | Maker of Things for Screens - Navigation Bar
The navigation bar is simple but has a nice touch of creativity, with colors that change dynamically when the viewer hovers the mouse over each topic.
b) Interactive elements
Figure 5.1 Haus | Maker of Things for Screens - Video Main And Contacts Page
When you move the cursor around the main screen, different images pop up, which is a fun and interesting way to catch the viewer’s attention. The contact page looks visually nice too, with an endless scrolling effect that adds a playful touch.
4. Quality & Relevance
a) Quality
The quality of the Made In Haus website is very impressive. The visuals look clean and polished, and every page feels carefully designed. The animations and transitions run smoothly, making the whole experience feel professional and modern. However, the typography looks a bit messy and unorganized at times, which slightly affects the overall neatness of the design even though the rest of the site feels intentional and well done.
b) Relevance
This site is relevant because the “About” page explains what Made In Haus does and what they are good at. It shows how they mix design, strategy, and technology to create strong and creative digital experiences. They handle many things like branding, animation, and development, which makes them stand out as a full creative team instead of just a design studio.
It is also relevant because it shows their experience and credibility through the clients they have worked with and the projects they have done. The page helps viewers understand their skills and what kind of work they offer, making it useful for anyone who wants to know more about their creative and professional work.
5. Performance
a) Load Time
Figure 5.2 Haus | Maker of Things for Screens - Performance
The loading time on mobile is slightly slow since it has a lot of elements.
b) Responsiveness & Compatibility
The mobile version feels a bit laggy, and some background graphics don’t move like they do on desktop. However, the About page layout looks better on mobile since it’s been changed to fit the screen more nicely.
Reflection
For the first exercise, we just had to find 5 genres of websites to analyse. It was pretty simple, I followed a senior's blog to know what to add in first when analysing. I had fun exploring each websites even though it took quite some time to properly go through most of them. Each of the websites were unique in their own way especially Bruno Simon's portfolio where I was able to drive around and explore the map and even play around with the playground provided.
Comments
Post a Comment