INTERACTIVE DESIGN EXERCISE 1: WEBSITE ANALYSIS
Week 1 (25/09/2025)
Felice Lee (0381272)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercise 1: WEBSITE ANALYSIS
Website preview
Typeface Display (2)
Navigation quite small and hidden
PP Neue Montreal Typeface
Felice Lee (0381272)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercise 1: WEBSITE ANALYSIS
EXERCISE 1
Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)
We were asked to choose 5 websites with different content to be analyze.
Things that need to be analyze in the website:
- Purpose & Goal
- Visual design & Layout
- Usability
- Quality & relevance
- Website's Performance
Website 1: No Laughing Matter created by Terekhova Nika
No Laughing Matter
- Purpose & Goal
This website is a social project, exposing the cruelty and the sad truth behind animal-based circus. Their main purpose is to raise public awareness about the suffer the animals have been through. This website also aims to encourage people to stop supporting this circuses, also encouraging them to change to better alternatives by promoting human-only performances.
- Visual Design & Layout
a) Color
In this website the color mainly used is black, light grey and white with red as the sub color. After going through the website, I realized they use red to highlight important information or crucial things that need to be shown to us, basically catching our attention on the first glance since the red color strike the most among the other color. The usage color of black, light grey, and white created emotional impact on how sad the real life of the circus animals. Overall, the color scheme suits the topic of circus animal cruelty.
Website color palette
b) Typography
This website only use 2 sans-serif Typeface which is "JetBrains Mono" & "Bebas Neue"
Bebas Neue typeface is used for headlines, and JetBrains Mono for the information.
Typeface Display (1)
c) Imagery
Some of the images on this website move as we scroll down & interactive when we move our mouse & click on them. This effects makes the website more alive and help guide the viewer's attention from one part to another. It also make the information more interesting, like they are slowly uncovering the truth slowly. Combined with the muted, black and white images, and a highlight of red, it creates emotional depth for the viewer. Overall, I feel the red color makes a good contrast making the visual more interesting.
Images of animals with black and white color
Information show up on some images when we drag our mouse to it
d) Layout
The website layout is clean and well organized. From my observation, it seems like they use a grid system that helps balance between texts and images. The content is arranged vertically, which makes the viewer easy to read just by scrolling down. In this layout, I also realize that the main texts and images are mainly placed in the center of the screen, makes it easy to read and highlight important messages. Some were paired with text and images side by side, sometimes the information is on the left, and the images on the right so it looks balance and readable.
Information & picture placed in the center of screen
Information & elements placed side by side yet still look balanced
- Usability
a) Navigation
The website uses a simple and minimalist navigation system. It is located on the top of the website, we can see it once we enter the website. With white texts & arranged horizontally, with a single click, it will seamlessly bring us to the topics we click without the page reloading or delaying. Overall, it's good and easy to spot.
Website Navigation
b) Interactive Elements
The website got some interactive elements such as, images that scroll or move while we scroll down, balloons that pop & show information when we click on them, information that pops up when we move our cursor to specific elements.
The animal was sent to cage when we scroll down the web
Information pops up when we click the balloon
Information shows up when we move our cursor to the images
- Quality & relevance
a) Quality
The website shows high visual and technical quality. The images are HD, website didn't feel laggy. The color palette as well made the website looks professional. Overall, user friendly, professionally designed, and interesting.
b) Relevance
The content is highly relevant to its purpose and message. The visual, color, and designs all match the topics.
- Website's Performance
a) Load Time
I try to close and reopen the website, surprisingly its very fast. It just take a few seconds to load, no delaying and with high visuals. Overall, fast loading.
b) Responsive & Compatibility
The website performs very good and well in my laptop. The layout appears centered, images are HD and not distorted. Scrolling feel smooth, Interactive stuff didn't delay, all running smoothly.
- Conclusion
Overall, this website provides strong visual, design, and technical quality. Consistent layout and style, and relevance information. I think they can improve on the Interactive elements, sometimes the pictures got cut there's images that can move by scrolling down, which it didn't show the full pic of the animals.
Image got cut off a little during interactive activity (scrolling)
Website 2: DICH created by Serhii Polyvanyi
DICH
- Purpose & Goal
This website is to promote a futuristic, innovative and something new to the fashion world. It's made to draw attention to new fashions, to attract audience that's interested in something wild and different.
- Visual Design & Layout
a) Color
There are two type of fashion we can discover in this website ORGANIKS & ANTURAX. Both use different color. For ORGANIKS, it's more dreamy vibes with mainly soft pink, yellow, vibrant orange, white, and black as sub color.
ORGANIKS
While for ANTURAX, it's into dark vibes, with the color mainly on blcak and red, with light orange as the sub color
ANTURAX
The color orange in ORGANKS create a nice contrast, not to flashy and too soft, suitable for dreamy vibes. Also for ANTURAX, the red and black color really bring the vibes of a villains, suitable for the dark vibes fashion, red contrast the black color so well. Overall, the color suits each fashion and it's so eye catching visually.
b) Typography
This website uses 4 Typefaces which is "FK Raster Grostesk", "NB Architekt", "T-012" & "Space Grotesk"
FK Raster Grostesk Typeface
NB Architekt Typeface
T-012 Typeface
Space Grotesk Typeface
c) Imagery
The Image on the website is highly striking and eye catching, strong visual quality, fashion photography, and cool elements. Some are animated, can even be moved if we move our cursor or can be interact when we click, some of them will pop up information when we drag our cursor towards some elements. The visual is full of storytelling, with futuristic vibes.
Website's Imagery
d) Layout
The layout is super super futuristic and modern. Bold use of space, most sections are stack vertically, oversize headings, and asymmetrical alignment.
- Usability
a) Navigation
Navigation is sleek and little. It's quite hidden, not always displayed, keeping the screen clean so viewer could focus on the cool futuristic visuals. I think it's quite hidden because it's supposed to be designed for viewer's who want to do more exploration on the website.
b) Interactive Elements
Some elements can even be moved if we move our cursor or can be interact when we click, some of them will pop up information when we drag our cursor towards some elements.
Information shows up when we move our cursor to the circle thing
- Quality & relevance
a) Quality
Visually appealing, Interesting websites since it has many things you can explore and interact too, & HD visual & elements.
b) Relevance
All elements and visual are very relevant to the brand's promotion: futuristic, fashion, and innovative.
- Website's Performance
a) Load Time
Quite okay, quite fast, but during the loading, the visual somehow feels a bit lag, it pauses a bit before continue to load everything, which made me realized a noticeable lag while trying to load the website, it's not long, just a few seconds.
b) Responsive & Compatibility
On my device, its responsive, everything is okay, scrolling down feels smooth, navigation is working, it's just maybe it might need a little longer time for me to load the website since it has so many interactive elements in it.
- Conclusion
Overall, It's a very good websites, it just sometimes might feel a bit laggy for those with lower specs devices.
Website 3: Daiki Fujita - Portfolio created by Daiki Fujita
Daiki Fujita - Portfolio
- Purpose & Goal
This website is a person digital gallery who's name is Daiki Fujita, it serves as digital portfolio. It's main goal is to showcase and communicate his identity, and attract viewer's or clients to collaborate or appreciate his designs.
- Visual Design & Layout
a) Color
In this website the color used are only black and white. After going through the website, I realized he use this color to create that void aesthetics for his portfolio. The usage color of white for texts is a good contrast, also white on the soft dots looks like stars scattering in the voids.
Color Palette
b) Typography
This website mainly uses the Typeface of "Satoshi". For the headline, I cant really find the typeface he use in headline, I can't inspect it too since it's like a video.
Headline
Satoshi Typeface
c) Imagery
Artworks plays a big role in this site. High quality photographs, conceptual illustrations, and digital artworks fill out most of the content in the website, creating a strong first impression. The imagery feels atmospheric related to the website theme which is void aesthetic. Visuals also got subtle movements or layering which add depths to the visual.
one of the artworks
d) Layout
The content is arranged for scroll based structure (vertical) that made the story and information flows from top to bottom. The sections are well organized with not intentional negative space, makes our eyes not tired easily and visually appealing.
- Usability
a) Navigation
Navigation is minimalist and quite hidden. Many of others won't notice it if they didn't explore further. There's a Navigation that will show up if we click on the white bar below. Although in the edges there are also the same navigation, its not complete and quite small.
b) Interactive Elements
The website background's can create a motion movement when we drag our mouse, it might slightly shift the images. Some elements will automatically invert our cursor color so we can read what's under the cursor.
Cursor color inverted
Background trace our cursor movement
- Quality & relevance
a) Quality
The quality of this website is high, high quality visuals, professional designs, and wonderful artworks. Image resolution is also HD, screen animation is smooth, but might took a bit time to load the artwork since is has too much assets.
b) Relevance
Quite relevance, The website theme suits the creator's artwork vibes, showing the creator's true identity and his characteristics.
- Website's Performance
a) Load Time
The load time of the website is quite fast, but the problem is, the artworks need some time to load. It's not that slow, it just it won't instantly load or show after we enter the websites, so after scrolling down we need to wait a bit for the artwork to load.
b) Responsive & Compatibility
The website design is so far performing well in my device, however it might effect those who have lower specs devices since I also need time to load their artworks after entering the website.
- Conclusion
Overall, it's a very modern portfolio websites, communicates the creator's characteristics and professional. But I think It needs improvement on the background color since the artwork also have a dark background color, It tend to blend together, that viewer might not see clearly which is which.
artwork & background together
Website 4: DOLSTEN & CO. created by DOLSTEN & CO.
DOLSTEN & CO.
- Purpose & Goal
Is the first creative studio that is positioned by AI, together with human intuition and artificial intelligence. Its purpose is to showcase their capability, attract clients, attract people to collaborate, and to promote a new way, high level of design, blending technology and human storytelling.
- Visual Design & Layout
a) Color
This site mainly focuses on minimal pastel color palette. They color they use is called lavender and champagne pink, which are soft muted colors.
Color Palette
b) Typography
This website only use 2 sans-serif Typeface which is "IBM Plex Mono" & "PP Neue Montreal"
PP Neue Montreal is used for subheadings, and IBM Plex Mono for the information.
IBM Plex Mono Typeface
c) Imagery
This site mostly uses flower as their elements which made the site look calm and fresh together with the soft muted color combination. Followed by some videos, and high quality visuals.
d) Layout
This website might use modular system in arranging elements, videos, and the content, where the section is visually stack vertically and large. The design seems seamless, clean and very refreshing, good way to introduce new things to viewer's and possible collaborators.
- Usability
a) Navigation
Navigation is sleek and minimalist. The navigation is quite hidden, it's design like that so it won't block or interrupt viewer's focus.
b) Interactive Elements
Some picture will show up when we move our cursor to the achievements row, also the flower from top of the website will rotate from our scroll slowly following our scroll speed. Information can be accessed by scrolling down using our scroll cursor as usual, and clicking the videos. Overall, smooth nothing laggy.
Trophy pic appears when we aim our cursor to the achievement sections
- Quality & relevance
a) Quality
This website is made with high quality and very professional. Even though the design is very minimalist with palette color, it looks so elegant and fresh, which is visually very appealing.
b) Relevance
Every content and design feels aligned, The muted palette and immersive visuals really represents the meaning of combination between ai and art.
- Website's Performance
a) Load Time
Surprisingly, this website load very fast, even though it has heavy visuals and videos, my device handled this website so good, there's nothing lag, everything is smooth.
b) Responsive & Compatibility
Very responsive, but it might be a problem to those with lower specs since it could need some time to load the website and might be lagging since it has quite heavy content and visuals
- Conclusion
Overall, this websites really suits the theme of combination between the human arts and ai, it's color, visual, layout, and even interactive stuff all works very well.
BESMOKE
- Purpose & Goal
It aims to showcase their flavor, solutions, and their technologies in smoke and grill flavor food industry.
- Visual Design & Layout
a) Color
This website mainly uses this pinkish color named Pale Dogwood, which is natural tones suitable for stuff like spices and food.
Pale Dogwood
b) Typography
For this website, they mainly used this font called "Proxima Nova"
Proxima Nova Typeface
c) Imagery
This website have high quality products and ingredient photography together with abstract and shapes elements helps viewer understand or feel the nature feel on their business.
d) Layout
Layout is so far balanced, clear sections, consistent spacing, images and texts are balanced, makes viewer easier to read and absorb the information.
- Usability
a) Navigation
Navigation is quite straight forward, clear, and well structured. We can immediately see them in the top of the menu.
Navigation
b) Interactive Elements
Not likely much, besides navigation on the top, information of flavors that can be explored by clicking, and just subtle fade in and out during scrolling down and up
Interactive information
- Quality & relevance
a) Quality
The visual and technical quality is very good. Nice photographs, consistent layout, professional, and nice aesthetics. Information is clear and readable.
b) Relevance
This website is very relevant to Besmoke's Identity (nature, clean, modern, clear)
- Website's Performance
a) Load Time
Fast, nothing wrong or lag during the process of website loading
b) Responsive & Compatibility
Very responsive in my device, no lag, everything runs smoothly, I think it wont effect other's with lower device, since it doesn't have complex and heavy stuff.
- Conclusion
Overall, this website is so strong, modern, clear, and visually appealing. Aligns with the brand's mission.
Comments
Post a Comment