Interactive Design | Exercise 1
24/9/2025 - 1/10/2025
Meerabella Charles , 0368295
Bachelor's of Design (Honours) in Creative Media
Interactive Design
Exercise 1 : Web Analysis
TABLE OF CONTENTS
1. Lecture
2. Instructions
3. Exercise
4. Feedback
5. Reflection
1. Lecture
Week 1 ( 24 / 09 / 2025 )
A general summary of entire module, learning outcome in 14 weeks. Also how all tasks are linked to each other like any other modules . We downloaded Dreamweaver and got introduced to multiple links to get more information on the tasks we are going to do.
2. Instruction
3. Exercise
Exercise 1 : Web analysis
Website Analysis 1 : The poetic imagination of David Whyte
By : Immersive Garden
Source of website : csswinner
Purpose and Goal :
The purpose of this website is to introduce viewer's to David Whyte's poetry, philosophy and his own experience he had like his talks, events and workshops that he held before. The goal is to inspire website visitors through the works he produced and offer emotional and thoughtful space for users while they explore his works.
Visual Design and Layout of the website:
Color :
This website has a very calm and earthy tones , coming from this artworks too. The colour palette chosen is very catchy and reflects the whole purpose of David's peaceful nature of his works.
Typography :
The fonts used are very simple and consistent also easy to read. The Sans - Serif font balances and keep the whole experience clean and readable.
Imagery :
As for the imagery, there is good usage of calming landscape in the background, a very minimalism vibe shown with minimalistic images that doesn't bring too much to the eye.
Layout :
Overall layout makes the whole user experience good as we can focus on the words and messages or information given rather than feeling overwhelmed / suffocating.
Functionality and Usability :
Navigation :
For the navigation , it doesn't have much , just simple bar on top of the page. I was able to find the navigations without feeling confused.
Interactive element :
Not much interactions in the home and event page except the Companion Portal where you can view David's watercolor landscape. As you scroll , there is water effects that darkens the artwork and poems as you scroll. Very smooth scrolling throughout the exploring the website journey. I could easily get to the other page without much confusion
example of the interactive watercolor landscape artworks
Content Quality and Relevance:
Quality :
Contents are quite poetic which may hold the attention of people who are into poems and artworks, yet understandable. Some pages have too many words which is difficult to read as we scroll.
Relevance :
Organization of this website is very neat, content is straightforward which led me into confusion because there was no any introduction or explanation of each content.
Performance and Technical :
Load time :
The load time doesn't take much time because all contents are small and nothing takes long time to load.
Responsiveness and Compatibility :
Unfortunately, background takes a little longer to load as it contains high resolution images.
Website Analysis 2 : Abstract Intelligence
By : Mallard and Claret
Source of website : Nominees from Awwwards
Purpose and Goal :
This website gives their thought and facts on how AI has impacted the arts and culture, also highlighting some ethical concerns. This is a very hot topic for gen-z as they are very dependent on the usage of AI and many artist have been loosing their authenticity as AI copy their work without giving credits. Lastly. the goal of this website is to communicate their thoughts through exhibition, quotes and case study the did on AI in creativity.
Visual Design and Layout of the website:
Color :
Color used are mostly calm colour like light brown, black. white and green which helped me focus on the content more than the graphics.
Typography :
As for the typography it was easy to read as the headlines were bold and huge followed by subtext which was balanced perfectly, all words were highly contrasted against the background.
Imagery :
Even though this website is about thoughts on AI generated images, all graphics here is generated by AI to show the comparison of real and generated artwork (difference)
Layout:
Layout is full screen size. The full-screen photo layout maximizes the use of visuals, allowing images to cover the entire screen, creating an immersive and bold presentation. This layout draws attention to the imagery, making it the central focus of the user experience.
Functionality and Usability :
Navigation :
All contents can be read by scrolling through. The downside is there was no indication to scroll down so that is a little confusing for users that are unfamiliar with navigation with no words.
Interactive element:
Not much interactive elements except some images zoom in as we scroll and as we move our mouse, the background response as pixelated changes. The page just 1 and very long so when we hit the rock bottom we have scroll up back so a "get back to top' button would work.
Content Quality and Relevance:
Quality :
Contents are all based on real life problem , whole website is well designed without overpowering the information they want to give out.
Relevance :
Clear organization of information delivery. using exhibition design, correct images to help the narrative structure.
Performance and Technical :
Load time :
The load time doesn't take much time because all contents are small and nothing takes long time to load.
Responsiveness and Compatibility :
No usage of high resolution picture or heavy assets that slows down the performance / experience. Good browser.
Website Analysis 3 : Elimar by Vincent van Gogh
By : LMI
Source of website : Nominees from CCS
Purpose and Goal :
Van Gogh’s story of lost art, fractured identity, regret & redemption.
Elinor gives us the experience to gain new insight into the life of one of the most important artists of the modern era.
Elinor gives us the experience to gain new insight into the life of one of the most important artists of the modern era.
Visual Design and Layout of the website:
Color :
Visually, the website adopts a dark-themed, museum-like design that feels premium and immersive. It uses dark tones such as black, deep blue, and muted earth colors to support a classic and contemplative atmosphere.
Typography :
The typography is consistent and supports the overall tone of the site, with bold and prominent headings that stand out clearly from the body text.
Imagery :
Imagery is carefully selected, featuring Van Gogh’s own paintings, letters, and photographs.
Layout :
These visuals evoke a strong emotional response and convey historical depth, while remaining clear and informative.
Functionality and Usability :
Navigation :
Functionally, the site employs smooth, scroll-based storytelling, guiding users through five narrative chapters following an introduction.
Interactive element :
While navigation is mostly intuitive, the jump buttons located at the bottom left may pose slight accessibility challenges. However, the interactive elements , such as animations, parallax effects, and seamless background transitions , enhance the storytelling without distracting from the content.
Content Quality and Relevance:
Quality :
The content is emotionally resonant and easy to follow, offering impactful and concise messages that are engaging even for users unfamiliar with art history. The information is generally presented in a simple manner, allowing users to grasp the core ideas and themes quickly.
Relevance :
The narrative is well-organized, following a clear chronological structure from Van Gogh’s early life to the discovery of the fictional "Elinor" element.
Performance and Technical :
Load time :
In terms of performance, the website loads quickly despite its rich animations and imagery.
Responsiveness and Compatibility :
It is well-optimized for various devices, offering a responsive user experience. However, one drawback is the absence of contact information, which might limit follow-up engagement.
Website Analysis 4 : SEASONED
By : -
Source of website : Nominees from Awwwards
Purpose and Goal :
Seasoned is a website designed to educate and inspire viewers about strong concepts in branding. It goes beyond design aesthetics to emphasize clarity of ideas, informative content, and effective problem-solving techniques. The site's purpose is to communicate with viewers on a deeper level, combining philosophical reflections with practical branding insights.
Visual Design and Layout of the website:
Color :
The color scheme features muted gradient backgrounds complemented by soft, calming tones, which contribute to a warm and homely atmosphere.
Typography:
The typography uses large, modern sans-serif fonts that enhance readability and accessibility.
Imagery:
The images used are very aesthetically pleasing in a way of complementing the theme and aesthetic of a cooking book.
Layout:
The visual layout is clean, vibrant, and gives off the feeling of a well-crafted digital book. This creates a premium and accessible experience that is both professional and creative. Adequate spacing between text elements makes the content feel generous and not overwhelming, while headings are bold and well-balanced.
Functionality and Usability :
Navigation :
Functionality-wise, the website uses a single vertical scroll format where all content is broken into manageable sections. Despite the absence of traditional navigation tools like top menus or page anchors, users can easily navigate the site without confusion.
Interactive element:
The site includes subtle interactive features, such as smooth scrolling animations and hover effects that highlight user feedback areas, enriching the browsing experience without overwhelming the viewer.
Content Quality and Relevance:
Quality :
The content is emotionally resonant and easy to follow, offering impactful and concise messages that are engaging even for users unfamiliar with art history.
Relevance :
The information is generally presented in a simple manner, allowing users to grasp the core ideas and themes quickly. The narrative is well-organized, following a clear chronological structure from Van Gogh’s early life to the discovery of the fictional "Elinor" element. 
Performance and Technical :
Load time :
The tone of the content is calm, warm, and motivational. It blends creativity with valuable information, making it suitable for both design professionals and newcomers.
Responsiveness and Compatibility :
The content is logically organized and easy to access, with ideas presented in a clean, readable way.
Website Analysis 4 : The Blue Dessert
By : -
Source of website : Nominees from Awwwards
Purpose and Goal :
The Blue Desert showcases a visionary development project in Saudi Arabia, emphasizing nature, innovation, and futuristic architecture. This website stands out for its cinematic storytelling and luxurious visual design. The purpose is clearly communicated through immersive visuals and a compelling narrative that captures viewers’ attention, highlighting the cultural, sustainable, and aspirational goals of the project.
Visual Design and Layout of the website:
Color :
The color palette features cool tones, including deep blues, golds, and earthy hues, creating a sense of natural elegance.
Typography :
Very minimalistic font used but in a less quantity since this website focus more on the visual storytelling audio.
Imagery :
Most of the visual used was landscape drawing for visual storytelling.
Layout :
Overall layout is following a balanced layout which is not cluttered but there is no fixed layout since the website focuses on more video / interactive type of elements.
Functionality and Usability :
Navigation :
The website delivers a smooth and cinematic scrolling experience, with intuitive navigation that guides users seamlessly through the story.
Interactive elements:
While traditional menus are minimal or absent, the immersive flow makes the site easy to use and visually engaging.
Content Quality and Relevance:
Quality :
Content on The Blue Desert is minimal yet powerful, using concise text and voice narration to evoke emotion rather than overload with information.
Relevance :
It aligns well with the project's goal of inspiring innovation and luxury, appealing to viewers through tone and mood.
Performance and Technical :
Load time :
Despite the high-resolution visuals and animations, the site performs efficiently with quick loading times.
Responsiveness and Compatibility :
It is responsive across devices, maintaining its visual quality and interactivity whether viewed on desktop or mobile.
4. FEEDBACK
WEEK 1 : Mr. Shamsul briefed us on the module and expected outcomes, also introducing us to the works we'll be doing like CSS, Javascript, HTML and relevant websites we can visit and learn from to gain experience and gain more knowledge. Besides that , after briefing we delved into exercise 1 , where we have to analyze 5 websites from the 3 links given by Mr. Shamsul. Overall class was chill since its just the first day.
WEEK 2 : Mr . Shamsul advised me to follow the format that was done by the seniors and once I have completed that, I am good to submit it.
5. REFLECTION
I now have a better knowledge of how functionality, design, and content combine to produce meaningful digital experiences thanks to this activity. Examining other websites taught me to see past appearances and assess how well a website attracts users, conveys its content, and functions properly. I also become more critical of visual design decisions like layout, color, font, and imagery as a result of it. I was able to think more deeply about each component after putting my findings in paragraph form, and I now feel more comfortable explaining why a design worksn or doesn't. All things considered, this was a worthwhile educational experience that improved my communication and analytical abilities as a student of creative media.
Comments
Post a Comment