INTERACTIVE DESIGN - Exercises 1
22/04/24 - 26/05/24 / Week 1-Week 6
Muhammad Baihaqi Desya / 0377271
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises
Table Of Content
I. Instruction
II. Feedbacks
III. Reflection
I. INSTRUCTION
Exercise 1: Web Analysis
On the first week, we were given to pick 5 website from the link that Mr Samsul give to us and this is choosen website.
TO TAKE YOU TO THE LINK PLS CLICK THE TITLE
1. BEYOND SPEED
Introduction :
I chose Charles Leclerc’s official website because it offers a complete look into the life and career of one of Formula 1’s most talented drivers. The site highlights his journey from karting in Monaco to racing for Scuderia Ferrari, showcasing his passion, determination, and achievements. It also gives fans access to personal insights, racing updates, and exclusive content, making it a great source for anyone interested in motorsport. The clean design and easy navigation make the site engaging and informative. Overall, it’s a strong representation of who Charles Leclerc is, both on and off the track.
Analysis :
Visual =
Charles Leclerc's official website is visually presented as contemporary, powerful, and representative of his persona as a Formula 1 driver. Red, black, and white coloration prevail on the website, reflecting his identification with Scuderia Ferrari and evoking a sense of speed and dynamism. The site is minimalist in design and straightforward to use, with clean sections such as "The Driver," "The Man," and "Shop" that guide people through both his life as a professional and as a private individual. Responsive design, high-image quality, and minimal text give the site a clean-cut look on all devices, allowing for an interactive experience for visitors and fans.
Functionality =
The official website of Charles Leclerc performs in a responsive, user-friendly, and organized manner to provide a seamless browsing experience. The main navigation menu is correctly structured so that visitors can find their way through different sections like his biography, racing statistics, latest news, and official merchandise easily. The site is quick to load and responsive across all devices, delivering the same steady performance on mobile as well as desktop. Interactive elements such as embedded videos, social media links, and the online store all work seamlessly, optimizing engagement. The website overall is designed not just to inform but also to interact with fans through user-friendly features and regularly updated content.
Performance =
The official website of Charles Leclerc is optimized and fast in performance. Pages are loaded quickly, with smooth transitions from one page to another, giving a smooth and responsive user experience. The site does not delay or lag when utilizing high-resolution multimedia and images, meaning that the backend optimization is top-notch. The site also performs consistently well across browsers and screen sizes, without any compromise on design quality and functionality. Additionally, the mobile site is fully translated without any loss in content or function. Overall, the site maintains good technical quality to match its look and user-friendliness, enabling visitors to access information easily and readily.
Introduction :
This website called "Orchid" but when i see at "awwwards website" it was telepathic instuments so i dont know what is the exactly the title is but im gonna go with orchid. overall this design is very straight forward and simple as well.
Analysis :
Visual :
The site has a subdued look, a deep, old-fashioned color palette that appeals to the Orchid's physical appearance. High-definition images and condensed typography guide shoppers through the product's functionality, creating a dense and engaging shopping experience.
Functionality :
The usability of the Orchid site is minimalistic, modern, and user-friendly. The site has simple-to-use navigation with menu items simply titled as "Orchid," "Shop All," and "Support" to facilitate fast access to critical information. Interactive features, such as the "Explore Orchid" section, allow users to engage with product information dynamically, fostering a deeper understanding of the synthesizer functions. The shopping online functionality is flawless, with cataloging of products being easy, availability, and checkout experience simple. The website is also responsive on devices and loads properly, making navigation a breeze on desktop or mobile. It's very informative and accessible overall.
Performance :
The Orchid website's performance is resilient and reliable. It loads fast despite having good-quality graphics and interactive elements, which is an indication of accurate technical optimization. The site is responsive, with no issues at all when accessed using a range of browsers and devices like mobile and tablet devices. The transitions and animations are smooth without slowing web surfing. Shopping is seamless with no delays or errors when navigating or checking out. Overall, the Orchid site is clean and interactive, a reflection of professionalism and style that went into the instrument itself.
Introduction :
This website title is "OH Architecture" and was made by Huy Nguyen, I chose the OH Architecture website as it reflects a thoughtful, human-centered approach to design. The studio's emphasis on designing timeless, functional spaces that are attentive to the ways in which people live and interact is both inspiring and practical. Their projects achieve a fine balance between strong architectural form and restrained elegance, with natural materials and simplicity of line. The website showcases a portfolio of beautiful residential and commercial projects, providing clear insight into their design philosophy. The website is visually appealing, easy to navigate, and successfully communicates the values of the studio. The website stands out due to its creativity, professionalism, and genuine dedication to human-centered architecture.
Analysis :
Visual :
The visual design of the OH Architecture website is minimalist, elegant, and in keeping with the studio's architectural ethos. It has an understated color palette—mostly whites, greys, and earth tones—that resonates with the calm and timeless essence of their work. Their projects are showcased in big, full-width high-quality images, with the visuals taking centre stage without unnecessary frills. The design is grid-based and minimal, with neatly structured content that is legible and visually balanced. Clean, modern sans-serif typography supports the minimalism and increases readability. In general, the visual design of the site successfully conveys sophistication, professionalism, and the studio's emphasis on elegant, human-scale architecture.
Functionality :
The website performance of OH Architecture is smooth, rational, and intuitive. Menu navigation is neatly structured, and visitors can easily find their way through main sections such as Studio, Projects, and Contact. Page loading is quick, and interactive elements such as project image galleries and scrolling transitions are smooth, augmenting the browsing experience without being intrusive. The website is responsively designed, scaling well to different screen sizes and devices. Contact information and social media links are easily accessible, making it easy for users to interact. Overall, the website does a good job, offering a clean and professional website for users to learn about the studio and its work.
Performance :
The performance of OH Architecture's website is solid and best-optimized. The pages are fast-loading even with the implementation of high-resolution images, which points to efficient compression and backend processing. The site remains responsive across a range of browsers and devices with visual coherence and seamless functionality. Transitions and animations are unobtrusive and don't compromise responsiveness, resulting in a generally refined user experience. In addition, mobile performance is excellent, with responsive layouts and rapid loads that make the site a joy to navigate on small screens. All in all, the site is fast, stable, and responsive, which complements its clean and contemporary appearance.
4. ICEBERG
Introduction :
I chose the Iceberg website because it has a compelling and optimistic vision for the climate crisis. The project, led by activist and documentarian Amanda de Luis, unearths human potential lying dormant to solve world problems through a transmedia strategy that includes film, podcasts, collaborative projects, and crowdfunding. Through highlighting grassroots activism and innovative solutions that have been overlooked, Iceberg shatters the story of powerlessness and invites audiences to imagine a sustainable future. The website is a hub for these stories, with information and calls to action for individuals to get involved and create positive change.
Analysis :
Visual :
Iceberg's site adheres to a modern, minimalistic, and visually stunning aesthetic, with bold typography and impactful imagery that conveys the urgency of climate action. The limited color palette utilizes blacks, whites, and blues, symbolizing clarity, trust, and urgency. The homepage features a dramatic visual that sets the tone for the rest of the site, with imagery representing the global scale of the environmental issues addressed by the project. Strong imagery and videos complement the text content, highlighting the narrative-driven emphasis of the platform, while maintaining an aesthetic of sobriety and simplicity.
Functionality :
The website offers a clear and clean layout, easy to browse through main sections such as The Project, Watch, Join, and Support. Interactive features such as embedded videos and podcasts add dynamic content, which increases engagement for users. The navigation menu is sticky, meaning it always shows itself while one scrolls down, in an effort to render other parts of the site readily accessible. Additionally, the site calls for interactivity with appropriate calls-to-action, inviting the guests to engage themselves through donations, volunteer work, or sharing information. Generally speaking, the functionality is good and takes the users smoothly through the content.
Performance :
The performance of the Iceberg website is optimized for smooth user experience. Pages load quickly, even with heavy media content in the form of images and videos. Interactive components, such as video playback, function smoothly without causing any lag. The site is responsive too, neatly being accommodated in various screen sizes, from the desktop monitor to mobile devices. This makes it easy for people to consume the content, regardless of what the device may be. Overall, the website does a fantastic job, with good page loads, simple navigation, and a seamless experience on each platform.
Introduction :
I selected the M-Sport Raptor T1+ site because it showcases the ultimate marriage of revolutionary engineering, peerless motorsport prowess, and dynamic digital storytelling. M-Sport and Ford Performance collaborated to build the Raptor T1+ that will dominate the most brutal 2025 Dakar Rally, featuring industry-leading technologies including a heavy-duty V8 powerplant, Fox suspension technology, and aerodynamics tailored to traverse harsh terrains. The website offers an engaging experience with interactive images, detailed specs, and description of how the team is gearing up for one of the world's toughest tests of endurance. It doesn't only assert the capability of the car but also the passion and ingenuity driving the endeavor.
Analysis :
Visual :
The M-Sport Raptor site uses a striking, high-impact visual design that reflects the power and energy of the Dakar Rally vehicle. Black backgrounds with hard, contrasting text and high-definition photography give a tough, high-tech feel. Full-screen graphics, action photographs, and movie-style video clips overwhelm the homepage, immersing users in high-performance rally racing. The color palette—black, white, and blue—is in keeping with the M-Sport and Ford brand. Simple typography and streamlined layout help to communicate key information without taking away from the Raptor T1+ itself.
Functinality :
The site offers smooth and intuitive navigation, with a fixed menu and clearly defined sections such as Tech Specs, Gallery, and Team. Interactive features, like hover animations and video playback, are responsive and engaging without overwhelming the user. The scrolling experience is fluid, and buttons are easy to locate and interact with. The website also integrates well with social media and press resources, making it easy for fans and media professionals to follow updates or share content. The structure supports both casual visitors and technical enthusiasts looking for in-depth vehicle information.
Performance :
Performance is also good across both desktop and mobile platforms. The website loads quickly despite its media-rich content through well-optimized image and video compression. Transitions and animations are smooth, with no delays or glitches in navigating the website. The website is fully responsive, with a good adaptation to screen sizes and orientations. Mobile users receive the same visual depth and interactivity as desktop users, with a solid and accessible experience.
.png)
Comments
Post a Comment