Interactive Design - Exercise 1 : Website Analysis
Interactive Design - Exercise 1 : Website Analysis
23/04/2025 - 30/4/2025 / Week 1 – Week 2
Valenz Jycee Primadi / 0373407
Interactive Design / Creative Media / School of design
Exercises 1
We need to examine the website we've chosen thoroughly, observing its design, layout, content, and functionality. Identify the website's strengths and limitations, and analyze how these affect the user experience.
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, including its load times, responsiveness, and compatibility with different devices and browsers.
- Color
On the M-Sport website, to provide a modern and readable look, a minimalist color is used. In keeping with Ford's uniqueness, this website also makes use of brilliant red, which serves as a stunning accent to highlight key content, and dark metallic blue, which is a strong foundation color that is typical of Ford. A vivid nuance with an inventive racing vehicle image is produced by the combination of these colors.
- Typography
- Imagery
The M-Sport website uses high-quality images that show the Ford Raptor T1+ in extreme conditions and racing. The images serve as supporting visuals and are also an important part of the overall user experience. The photos use a documentary and cinematic style with dramatic lighting and backgrounds that maximize the impression of simplicity but give a sense of speed. The images reinforce the brand message and create a professional impression.
- Layout
The layout is arranged in a modern, minimalist, and responsive style; the website emphasizes large visuals and clear navigation. It can be seen from the top of the website that it displays a full-screen image.The content is arranged in vertical blocks with lots of white space, creating a clean appearance. Overall, the layout supports intuitive users.
- Navigation
- Interactive Element
- Quality
Overall, the website has a high aesthetic quality. The grid design with contrasting typography and a consistent color palette makes it easy to read. The layout is simple and modern. In terms of performance, the image and video assets displayed on the website are high resolution. The information contained on the website is also clearly written; overall, the website has a professional quality.
- Relevance
This website is relevant for motorsport enthusiasts and professionals, as it features technical content, engines, Raptor T1+ cars, and is well explained. In addition, the content also features the story of the team, Dakar, and Drivers, complete with full spec and download buttons for quick access to data as well as overlay navigation and anchor links.
Perfomance
- Load Time ( https://tools.pingdom.com/)
The M-Sport Raptor T1+ website has issues with its load time, as seen in HAR data showing DOMContentLoaded completed in 527 ms, load event at 7,028 ms, and the status is fully loaded at 7,509 ms. It can be seen that the distance of about 6.5 seconds between the DOMContentLoaded and load events indicates a heavy script and media load. This requires defer/async optimization for non-critical JavaScript, lazy-loading images or videos, and code splitting and CDN so that time can be reduced.
- Responsiveness and Compatibility
It is responsive to all screen sizes, including desktop, tablet, PC, and mobile phones, and adapts nicely while opening the website. Featuring a full-screen overlay menu, anchor links, and touch-friendly horizontal swipe movements. While on mobile, compatible browsers (Chrome, Safari, Firefox, Edge, etc.) can be utilized; however, the animation is limited, making it a little slow, but the main content is still accessible.
Strenght & Weakeness
- Strenght
Overall, the website has an attractive and easy-to-read design with a grid layout and contrasting colors that attract motorsport fans, fast navigation, smooth scrolling and anchor links, smooth animations such as fade-ins, and hover effects that make interactions feel alive. Buttons such as "Full Spec" and "Downloads" are also easy to access. The website is also responsive on desktop, tablet PCs, and mobile.
- Weakeness
This website not only has advantages, but there are also some disadvantages, such as the initial loading being quite long (around 8 seconds), so that users are impatient. This happens because of high-resolution media assets. Some accessibility needs to be fixed, such as there are images that do not have alt-text and keyboard navigation is not perfect. In addition, animations may not run in browsers without polyfills, so the user experience on older devices can be disrupted.
- Color
The main colors used on the SPYLT Milk website are light beige and dark brown, creating a clean, warm, and inviting look. In addition, accent colors such as black-brown, red-brown, and yellow are used to highlight interactive and promotional elements, giving the impression of an energetic and playful nature.
- Typography
The SPYLT website uses a clean and bold modern sans-serif style font, giving it a contemporary and easy-to-read feel. If you look closer the main font used is Neue Haas Grotesk, which is popular for its minimalist look and strong branding.
- Imagery
The SPYLT website displays high-quality, aesthetic images with lots of character. The visuals on the products are photographed with minimalist backgrounds so that they highlight the packaging with bold colors so that it attracts the attention of consumers. The images are also often combined with large typography with dynamic layouts.
- Layout
- Navigation
- Interactive Element
- Quality
- Relevance
The content is highly relevant to a milk brand. The aesthetics, fonts, colors, and design style are in line with the product’s true identity, which is strong, memorable, and fun. The user experience is engaging and comprehensive, as it resonates with a younger target market; however, the content is a bit lacking, as it focuses more on user-centric research than pragmatic or functional information (e.g., nutritional information/product benefits).
Perfomance
- Load Time ( https://tools.pingdom.com/)
- Responsiveness and Compatibility
The website is fully responsive and functions on any device, such as a computer, tablet, or phone. Grids realign based on the size of the screen, images remain crisp whether shrunk or expanded, and navigation remains available across all platforms. The menu transitions to a hamburger menu on mobile for simplicity. This type of responsive design means that no matter which device one is using, the experience is the same and just as fruitful.
Strenght & Weakeness
- Strenght
- Weakeness
There are also weaknesses of the SPYLT website, including the location of the information aspect being limited and some of the product details, such as composition or health benefits, not being explained so much. Some of its animations may also make users feel less efficient, such as on the page showing the product; when using a desktop, it takes quite a long time to scroll to the next page. Some interactive features can also be heavy when using a low-spec device.
Website: 3 Thick Pickle By Studio Reka
The ThickPickle website is not actually a website to promote a product but rather a conceptual project website by studiodesain study. This website was created with the aim of exploring a brand and measuring market interest in interesting "pickle" products in a smart way, to attract the attention of consumers about pickle products, and to increase awareness of the studio.
The function of this website is as an exhibition space for creative product designs and interactive media to generate interest through email registration, and indirectly this website is a promotion of the creativity of the Study Hall design studio.
Visual Design and Layout
- Color
The ThickPickle website deploys a bold color palette to exemplify the playful, bold, and outlandish side of the brand's identity. The use of bright, primary colors, such as bright neon green, makes it clear the pickles being featured are fresh and bold in character. It also uses blackish green for the background so it's not too dark and the neon color can pop more. The use of black and white creates a visual balance. All of these colors work together to engage a visitor’s attention and evoke the feeling of creativity and experimentation related to it, all while creating an unexpected and fun way to view visual content.
- Typography
The typography on the ThickPickle website uses a bold and 'bold sans-serif' font style. It certainly matches the brand's bold, casual, and entertaining character identities. The typography is more than readable; it supports a bold and experimental visual impression of the brand's casual and unconventional page design.
- Imagery
The imagery on the website is produced in a characteristic and fun, perhaps even a tad bit crazy, image style that reflects the brand’s challenging and experimental soul. The close-up exhibition of giant pickles combining crisp lighting and strong colors creates a striking and funny image. Visuals capture viewers' attention and convey the brand's personality and concept.
- Layout
- Navigation
- Interactive Element
The interactive elements on the website are simply structured to effectively enhance user experience. The animations that trigger during scrolling and the hover-activated changes, along with the email signup forms, offer a responsive and aesthetically pleasing experience that does not interfere with the design. These captivating features enhance user interaction, fortifying the perception of the brand as modern, creative, and curious in the eyes of visitors.
- Quality
Overall, ThickPickle provides great website quality with a modern look and simple graphics. It provides a smooth and flawless user experience through unobstructed site navigation, interactivity of websites, and fast loading speeds of websites to make it an epitome of modern web design.
- Relevance
- Loadtime ( https://tools.pingdom.com/)
- Responsiveness and Compatibility
ThickPickle’s responsiveness and compatibility are absolutely exceptional across mobile phones, tablets, and desktops. The formatting and visual considerations maintain the clean, structured, and easy-to-navigate look for all devices as the website adjusts for varying screen sizes. The text is still readable, images are still clear, and actions like buttons and forms still work without bugs indicating the website is developed in a mobile-first design or, at least, is fully responsive and providing a consistent and comfortable user experience across platforms.
Strenght & Weakeness
- Strenght
The ThickPickle website's strengths are seen in a creative and unique design, great visual and typographic use to strengthen the brand message, and simple and easily usable navigation. What's more, the website is highly accessible from any device, and its interactive features are flawlessly developed to offer the user an engaging experience without being bombarded with resources.
- Weakeness
The Zentry website's purpose is to seek to build a metagame that brings together gaming, AI, and blockchain to transform digital activity into rewarding experiences and build a game-based economy. The goals of this website are gamifying everyday life, leveraging AI and blockchain for personalization and security, building a token-based participatory economy, and providing a social platform that is community-based.
- Color
Zentry's website utilizes black and light gray as the base color, which creates a futuristic, modern, and exclusive impression overall. The usage of bright blue and neon purple accents also contributes to a sense of advanced technology, dynamic energy, and the digital world as a whole. The addition of neon yellow contributes to bringing an interactive and vibrant impression. This color combination reinforces Zentry's corporate identity as an innovative platform in the areas of AI, blockchain, and gaming.
- Typography
The typography on the Zentry website uses a modern, minimalist, and clean design with predominantly sans-serif fonts. The font looks simple, bold, and legible, reflecting the futuristic and tech-oriented brand image. The headings are displayed large and bold to be eye-catching, and the body is lighter and neater to maintain reading ease.
- Imagery
The imagery of the website is taken over by high-tech, digital, and futuristic imagery. They use a great deal of 3D drawings, virtual world graphics, and visual styles such as digital networks and neon-effect avatars. Dark tones are accompanied by a splash of bright highlights to offer an immersive, modern atmosphere. Overall, the use of the above images complements Zentry's theme of innovation, the metagame world, and the future's digital world.
- Layout
Zentry's website has a modern, clean, and structured layout with a clear visual hierarchy. The design uses vertically scrolling sections that are navigated smoothly, gives prominence to the headline and CTA at the center of the screen, and is supported with ample white space. The layout also works well on many platforms, making it a pleasurable experience to browse from any device.
Functionality and usability
- Navigation
Navigation is simple and intuitive within the Zentry website. The main menu is at the top of the page, horizontally laid out, with links to vital pages such as features, community, and documentation.
This navigation is always available while the user scrolls down the page (sticky menu), and therefore it becomes easy to access other sections of the page without necessarily going to the top again. The minimalist yet functional design allows for a seamless and content-focused user experience.
- Interactive Element
There are many interactive features on the Zentry website that are not obvious at first, but they are very influential. Interesting animations show up when the users scroll or hold the mouse pointer over certain buttons and icons. This "flight of animations" is gentle and not pervasive. Transition effects, rollover effects, and micro-interactions are implemented in different page segments to increase the visual appeal of the website. Such parts of the content are responsible for giving the appearance of a very modern and updated website regardless of the theme of the futuristic design only.
Quality and Relevance
- Quality
The Zentry website is really a high-quality one with a very professional visual design, smooth animations, neat typography, and interactive elements that respond very well. The site is easy for users to get around, the content is in order, and the performance of the site does not change even when you change the device. Consequently, they do not want to have this website portrayed as if it were a leading technology brand.
- Relevance
Zentry's website is directly relevance to the digital economy, notably the virtual world and Web3 features. Zentry's well-integrated use of blockchain and tokens provides users with a new way to engage in economic activities. Explorers will be able to earn incentives, acquire digital properties, and participate in platform governance. Thus, Zentry is an excellent example of a company that is promoting the expansion of the participative and decentralized global digital economy.
Perfomance
- Loadtime ( https://tools.pingdom.com/)
According to the accumulated statistics, Zentry is a website with an extraordinarily fast load time, with the figures indicating that it takes the site approximately 402 ms to display the main page and 517 ms to fully load. That is an impressive pace, over four times faster than the optimum norm for a modern website, which is often less than two seconds to load. This demonstrates Zentry's exceptional efficiency and user-friendliness, as well as its ability to maximize the user experience across several devices.
- Responsiveness and Compatibility
Strenght & Weakeness
- Strenght
The Zentry website features numerous benefits, it can be integrated into Web2 and Web3 right now for a seamless gaming ecosystem in every sense. Blockchain en masse: The players use an incremental digital identity as well as control over data and digital property. The platform uses adaptive AI agents to optimize the gaming experience. Zentry provides many types of apps, such as Nexus and Radiant, which mix gaming with social networking and banking. Making users' lives more interactive and rewarding online, blockchain is designed for openness and security at the core of Zentry's software.
- Weakeness
Zentry's weakness stem from a number of factors, the most complicated of which is challenging for a non-Web3, blockchain, and AI ideas user. Furthermore, blockchain as the backbone can get in the way if there is a network outage or high transaction costs. There is also some incomplete work in its ecosystem, which means that not all aspects are fully developed or incorporated. However, because Web3 is still in its early stages of development, widespread adoption is doubtful, as not all games/platforms implement the interoperability promised by Zentry.
Website: 5 raymond-weil By Raymond Weil
Fig 5.1 Website Choosen 5 PDF, Week 2 (28/04/2025).PDF
Purpose & Goal
The Raymond Weil Basquiat website is used to promote the limited-edition watches produced by Raymond Weil and Jean-Michel Basquiat, with interactive designs that link art, watchmaking, and detailed product information.
The goal and mission of Raymond Weil's co-creation with Jean-Michel Basquiat in the Freelancer Basquiat Special Edition is to pay tribute to the imaginative soul and the courage in contemporary art.
- Color
The Raymond Weil Basquiat website color palette is established through the prevalence of deep colors such as black and gray, and these create a sophisticated, elitist atmosphere in line with luxury global horology. The glow of usual light colors present in Jean-Michel Basquiat's painting—separate colors such as red, yellow, and primary blue—can be perceived as visual elements whose contrasts bring energy to the view, representing the expressive nature of Basquiat's pieces of art. In general, it establishes an artistic, modern, luxurious look
- Typography
The website's font is current, clean, and professional. The basic font is sans-serif, with powerful, simple lettering that complements Raymond Weil's elegance and professional image. Titles and headings are written in stronger, larger type, but the body material is straightforward and easy to read. This type treatment strikes a balance between modern aesthetics and intelligibility while allowing Basquiat's art material to take center stage visually.
- Imagery
Website imagery is artistic and curatorial, with Jean-Michel Basquiat's work shown in forms Like paintings, crown imagery, and the comics Basquiat is known for. The images are shown in high-quality HD with lighting from an art gallery to imitate the way an art gallery looks. The watches are shown in contrast against studio or museum environments that add to their exclusivity and context. In conclusion, the imagery present on the website not only keeps a product for itself but also tells the story and advent of the art-horology partnership.
- Layout
Raymond Weil's website layout has a clean, methodical, and not-so-subtle design in its website architecture. Layout is white space heavy to draw attention to the big images and content. With elements scrolling down smoothly, visually the narrative and info about the product are shown one after another. It is also responsive and works great on all the devices as well; the text, image, and button elements are equally aligned to a tight grid to provide a modern, accessible, and exclusive look.
Functionality and usability
- Navigation
The navigation on the website is intuitive and simple to use, with a top menu that is instantly accessible to the reader. The main menu adds categories like Collection, About, and Contact with a dropdown to the subcategories for easy navigation. If the navigation also includes big buttons to purchase products or get more info, navigation will be easy and user-friendly. In addition, the responsive design ensures that users can move around easily on their mobiles, getting the same level of access and user experience across all platforms.
- Interactive Element
Quality and Relevance
- Quality
The Raymond Weil website is high quality, looks professional, and is neatly done with an easy-to-use user interface. The website has beautiful, high-resolution images, few issues with responsiveness and navigation solutions, and interactive parts running seamlessly. Loading times are also impeccable, and being decked out in premium Raymond Weil brand style makes it feel exclusive and good.
- Relevance
The website is very relevant to consumers who love art, horology, and luxury design. There is nothing really wrong with this one. Jean-Michel Basquiat's partnership caters to art lovers and collectors in addition to the more tasteful, refined, and exclusive designs of watches that align with consumer buyers willing to pay a premium. The site serves as an additional and visual way for the audience to emotionally connect to its brand while being both relevant to contemporary watches and of great quality too.
Perfomance
- Loadtime ( https://tools.pingdom.com/)
Based on website load time data analysis, the Raymond Weil Basquiat Edition website page has a good load time performance. Website content (DOM content loaded) is achieved in 274 ms, while the entire website webpage is fully loaded in 453 ms. The website load performance is fast, which gives a great user experience on desktop and mobile devices. Low load time is also good for SEO and visitor comfort.
- Responsiveness and Compatibility
Raymond Weil is designed to be responsive and work with different devices (mobiles, tablets, and desktops). The layout changes automatically to the device screen size; it should be organized in such a way that there is a consistent and best user experience for all platforms. Images of products, text, and navigation are designed to be proportionally easy to use in portrait and landscape. The responsive design enables the users to have hassle-free access to the site while keeping visual quality and usability, so it is ideal for audiences within a range of proximate devices.
Strenght & Weakeness
- Strenght
The Raymond Weil website possesses or highlights numerous definite strengths. Here you have the artistic, immersive design and easy navigation, which make browsing a pleasure. The site is also mobile responsive and works on all devices, providing a good experience for desktops, tablets, and mobile devices. Moreover, as product information is extensive and elaborate, there is no ambiguity in offering the precise description of watch specifications. High visual fidelity and design integrity define the brand, with interactive components providing interest and a degree of intuitiveness to the site.
- Weakeness
The website of Raymond Weil has some weakness. Artistic design is fun but a bit distracting from the basic product information. Certain interactive features may be subpar on lower-end or slower internet devices. The site might be less instructive for any enthusiast wanting to read up on the how and why of a collaboration timeline, design process, etc. Yet, some users would like to have a more in-depth experience in an immersive or interactive way (for example, a virtual tour or watchmaking process video that is not available now on site).
Experience
During the first week of the Interactive Design module, we were introduced to the overall structure of the course by Sir Shamsul. He explained the MIB (Module Information Booklet), the learning outcomes, and the types of tasks and exercises we would be doing throughout the semester. One of the first activities was to choose five websites from a list provided in Microsoft Teams. At first, I found it a bit difficult to pick just five because many of the websites were interesting and visually unique. I spent quite a bit of time browsing through all the options before finally making my selection. Once I started analyzing the websites, however, the process became much easier. I enjoyed evaluating the design elements and understanding what made each site stand out. Overall, it was a fun and insightful start to the module.
Findings
From this exercise, I found that a good website is not just about looking nice it’s about functionality, layout, and user experience too. I noticed that strong websites often have intuitive navigation, a consistent visual style, and content that is easy to read and access. Some sites used animation or interactive features effectively, while others relied on minimal, clean design. I also learned that small details like font choice, button placement, and spacing can have a big impact on how users experience the site. This made me realize that design decisions need to be intentional and user-focused.
Observation
While observing and analyzing each site, I became more aware of the different design strategies used to attract and retain users. I saw how color theory, typography, and layout contribute to the overall mood and clarity of a website. I also observed that many modern websites are built responsively, meaning they adjust well on different screen sizes. Another key observation was how the tone of a website’s visuals and language can influence how trustworthy or professional it feels. This exercise helped sharpen my critical thinking and made me more mindful of how design communicates messages to users.
Comments
Post a Comment