Interactive Design | Exercise 1
21.04.2025 - 30.04.2025 ( Week 1 )
Taylor's University
Shubashini a/p Subramaniam / 0367697 / Bachelor of Design (Hons) in Creative Media
Interactive Design (GCD60904)
Table of Content :
1 - Lecture
2 - Exercise 1
2.1 - Casa Corpo
2.2 - Praxis Leander Isler
2.3 - Flower of The Universe
2.4 - Day Glow
2.5 - Taiki Sato
3 - Feedback
4 - Reflection
Lecture
Week 1: Brief of our module
Week 2 : Usability : Designing Products for User's Satisfaction
Common Usability Pitfalls and How to Avoid Them
Complex interfaces
- Confusing navigation
Poor feedback
Inadequate error handling
Exercise 1 : 5 Web Analysis
We were told to choose 5 websites from the link given, then to review the selected websites carefully, taking note of it's design, layout, content, and functionality. We have to identify the strengths and weaknesses and consider how they impact the user experience. Write a brief report summarising your findings and reccomendations.
What is Needed in the Analysis :
- Purpose & Goal of Website ( Evaluate if it is communicated effectively to the user. )
- Visual Design ( Colour, Typography & Imagery )
- Layout
- Functionality & Usability ( Navigation, Forms, & Interactive )
- Performance ( Load Time, Responsiveness & Compatability with different Devices. )
Results :
1.Casa Corpo -https://casacorpo.com/
Functionality & Usability
Navigation: The site's navigation is minimalistic, with limited menu options. While this simplicity can be appealing, it may also restrict users from easily accessing desired information.
Forms: There is a contact form available; however, it lacks clear labels and instructions, which may confuse users.
Interactivity: Interactive elements are minimal. The site could benefit from features such as hover effects, interactive galleries, or testimonials to engage users more effectively.
Performance
Load Time: The website loads relatively quickly on desktop devices. However, some images are large and could be optimized to improve load times further.
Responsiveness: The site is responsive and adapts to various screen sizes. Nonetheless, some elements, such as text and buttons, may appear too small on mobile devices, affecting usability.
Device Compatibility: The website functions across major browsers and devices. However, testing on older browser versions may reveal compatibility issues.
Strenghts :
Purpose & Goal of Website
Casa Corpo appears to be a wellness retreat or holistic lifestyle brand. The homepage features serene imagery and minimalist design, suggesting a dedication to relaxation and well-being.
Visual Design
Color Palette: The website employs a muted, earthy colour scheme, primarily featuring tones like soft blues, warm browns, gentle greens, and off-whites. These colours work harmoniously to create a sense of calm and peace ,which aligns exceptionally well with the site's focus on wellness, mindfulness, and retreat. The palette helps to foster an inviting and serene atmosphere that encourages users to slow down and engage with the content at a comfortable pace.
Typography: The website uses a clean, modern sans-serif font that is consistent across pages, which enhances readability and lends a sleek, professional look.
Imagery : The visual storytelling of the website is one of its strongest points. High-resolution images of natural landscapes, such as forests, hills, oceans, and rustic interiors are prominently featured throughout the site. The imagery is thoughtfully chosen and strategically placed, often used as immersive background elements or large hero images, giving users an immediate emotional connection to the retreat experience being offered. Together with the colour palette, the imagery helps build a cohesive and inviting aesthetic that appeals to the senses and emotions of visitors.
Layout
The website utilizes a minimalist layout with ample white space, which contributes to a clean and uncluttered appearance.
Weaknesess :
Purpose & Goal of Website
The website does not, however, feature a clear, concise articulation of the mission or services. Visitors to the site may have trouble instantly understanding the site's purpose without clicking through a number of pages.
Though there is a short description on the founder of this website and company, there is no picture or proof of education there for viewer's to feel more trusting towards it.
Visual Design
Color Palette: The Colour Palette is not consistent through out the website leaving some pages look like it doesn't belong there.
Typography: However, one notable drawback is the lack of a strong typographic hierarchy. Headings, subheadings, and body text often appear similar in size and weight, which can make it challenging for users to quickly differentiate between different sections or levels of content. Introducing more contrast in font sizes, weights, or styles. Maybe having a bit of a hierachy pattern with the typography make it less structered and boring.
Imagery : However there are some places where I think having a bit of contrast and escape from the muted colour palette would help the website stand out more.
Layout
However, the navigation menu is not immediately visible, and some content sections lack clear headings or structure, potentially hindering user experience.
Functionality & Usability
Navigation: The website features a clear and straightforward
navigation bar at the top of the page, guiding users
to essential sections such as Services, Blog, About,
and Contact. The structure is intuitive, and
scrolling is smooth, enhancing the user journey.
Forms: A simple contact form is available under the
“Contact” section. It includes the necessary fields
(name, email, message) and functions properly,
though a confirmation message upon successful
submission could improve the user experience.
Interactivity: Interactivity is minimal, which suits the site’s
calm tone. Hover effects on buttons and subtle
animations enhance engagement without overwhelming
the user. However, additional interactive element
such as a booking calendar, could enrich usability.
Performance
Load Time: The site loads relatively quickly despite using
large, high-quality images. Optimizations like lazy
loading are likely in place to maintain performance.
Lazy loading is a technique when a website is only
loaded when they are actually needed, rather than
loading everything at once.
Responsiveness: The design is responsive, adapting well to
different screen sizes. Text, images, and layout
rearrange cleanly on tablets and mobile devices.
Device Compatibility: Tested across multiple devices and browsers, the
website performs consistently without noticeable
glitches or layout issues.
Strenghts :
Purpose & Goal of Website
The website clearly communicates its goal: to present Leandra Isler’s holistic health services. The homepage message is welcoming, and each service has its own page with detailed information.
Visual Design
Colour Palette: The website has soft, earthy palette with beige, off-white, and natural greens conveys peace, wellness, and trust. It’s well-suited for a holistic health practice. These colors align perfectly with themes of nature, wellness, and holistic healing. The consistency in palette across all pages helps reinforce brand identity and provides visual cohesion.
Typography: A clean sans-serif font ensures readability. Font choice feels modern and professional. The typography is uncluttered, with good line spacing and legible font size, particularly on desktop. The neutral font choice avoids visual noise, keeping the experience calm and focused.
Imagery : Calming, nature-focused imagery supports the site’s themes of serenity and healing. Photos are high resolution and appropriately placed. The images are well-integrated into the layout and complement the colour palette rather than clashing with it.
Layout
The layout is clean and uncluttered, with well-spaced sections that guide the reader smoothly through content. Ample white space enhances clarity.
Weaknesess :
Purpose & Goal of Website
Visual Design
Colour Palette: The colour palette may be little too neutral in places, it lacking contrast, which can make certain sections feel flat or passive. Calls-to-action (like buttons or links) don’t stand out enough, possibly reducing user engagement or conversions. There’s minimal use of dynamic or accent colours, which could be used to draw attention to key areas like “Book Now” or “Contact.”
Typography: There’s a lack of typographic hierarchy. Users may struggle to visually separate different content levels, especially when scanning the page. The same font style and weight are used throughout, making the overall reading experience somewhat monotonous.
Imagery : While the images are beautiful, they’re heavily focused on landscapes and abstract representations of peace. There’s little to no human presence, which can make the site feel distant or impersonal excluding the photo of the owner.
Layout
Though elegant, the layout lacks dynamic elements that could help draw attention to key actions (like booking an appointment or subscribing to updates).
Functionality & Usability
Navigation: This website has a very minimalistic
navigation system, it makes the viewers attention
go on the visuals and overall storytelling. The
floating menu is not there went scrolling down
long content.
Forms: The Contact form matches the websites overall
theme, however there is no confirmation after
submitting the form
Interactivity: The transition one page to another is smooth
and the hovering images create a magical experience.
The animation heavy sections however might cause a
delay on weaker and older devices. Moreover,
interactive button could have had better
visuals.
Performance
Load Time: Once it fully loads to 100%, the website
navigates smoothly without interruptions. My
experience with the loading on my Macbook was fast,
though with my old Samsung Phone it was more slow
due to the heavy graphics, videos, and
animations.
Responsiveness: The website adapts well to
different screen size, both desktop and mobile.
Though in a mobile setting the text appear to be
quite small and some elements overlap over each
other.
Device Compatibility: It works on both mobile and desktop though
older version of appliances experience animation lag
or occasional freezing.
Strenghts :
Purpose & Goal of Website
There is a strong and unique storytelling element with theme, "The Flower of the Universe". The website showcase's products from fashion, fragrance, gifts as if they are artifacts from the "Flower of the Universe" story. To put it flatly, it's showcasing products from their store.
Visual Design
Colour Palette: It's colour palette include deep blacks, cosmic purples, striking blues and turqoises, and luminous white. This gives it a mysterious, luxurious and magical atmosphere that matches th ebrand perfectly.
Typography: Typography in this website has a sleek, modern san-serif font that enhances it's magical vibe. Consistent font choices across the site create a cohoerent brand identity.
Imagery : It has stunning high-resolution visualy that include space themes, dreamy illustrations, and artistic shots. It successfully builds a new magical word.
Layout
The website has a story like layout, users get to scroll down and experience the catalog. It has a good use of large visuals and negative space, making the website seem less crowded.
Weaknesess :
Purpose & Goal of Website
Visual Design
Colour Palette: The background include some dark and light colour combined to make up a galaxy, which often blends with the white font used and makes the text hard to read.
Typography: Though the font chosen does suit the overall theme of the website, there is no
Imagery : Heavy imagery and motion graphics, while beautiful, cause slow loading and may distract users from key actions like "Shop Now" or "Contact." Some picture added does not have any relation with the service written in the description.
Layout
The entry "Click to Start" is not intuitive, first-time users may hesitate and wonder if the site is working. Calls to action like "Explore Products" or "Contact Us" are not visually emphasized enough.
Functionality & Usability
Navigation: The top navigation bar is straightforward, featuring
clear sections: "Brands," "About," "News," and
"Contact."Each section leads to concise, informative pages,
facilitating easy access to information. However,
the navigation lacks a search function, which could
hinder users seeking specific information or
products.The "Brands" section could benefit from subcategories
or filters to enhance user experience.
Forms: The contact form is simple and user-friendly,
allowing for quick inquiries.There's no immediate confirmation message upon
form submission, which might leave users uncertain
about the success of their inquiry.
Interactivity: Interactive elements, such as hover effects on
product images, enhance user
engagement. Limited interactive features, incorporating more
dynamic elements could improve user
engagement.
Performance
Load Time: The website loads efficiently on both desktop and
mobile devices, ensuring a smooth user
experience. High-resolution images may slightly delay load times on
slower internet connections.
Responsiveness: The site is fully responsive, adapting seamlessly to
various screen sizes and devices. Some images and text may not scale optimally on smaller
screens, potentially affecting readability.
Device Compatibility: The website functions well across major browsers and
modern devices.Performance on older devices or browsers hasn't been
specified and may require testing.
Strenghts :
Purpose & Goal of Website
Dayglow aims to be a leading consumer brands platform, focusing on home and kitchen products that combine innovation, design, and quality.
Visual Design
Colour Palette: The website employs a
clean, modern color scheme, predominantly featuring white
backgrounds with vibrant product images, creating a fresh
and inviting aesthetic.
Typography: Utilizes clear, sans-serif fonts that enhance readability
and align with the modern design ethos.
Imagery : High-quality images showcase
products effectively, providing visual appeal and context.
Layout
The layout is well-structured, with sections clearly
delineated, facilitating easy navigation and
information discovery.
Weaknesess :
Purpose & Goal of Website
While the website's mission is clear, it could
do with further elaborationon it's unique value
proposition and what sets it apart from
competitors.
Visual Design
Colour Palette: The minimalistic colour scheme, while clean, might
benefit from additional accent colours to
highlight calls-to-action or important
information.
Typography: Limited variation in font sizes and weights may
affect the visual hierarchy, making it harder
for users to distinguish between headings and
body text.
Imagery : Some product images lack contextual backgrounds,
which could help users envision the products in
real-life settings.
Layout
The homepage could incorporate more
interactive elements or featured sections to
immediately capture user interest. While the site's mission is clear, it could
further elaborate on its unique value
proposition and what sets it apart from
competitors.
While the website's mission is clear, it could do with further elaborationon it's unique value proposition and what sets it apart from competitors.
Visual Design
Colour Palette: The minimalistic colour scheme, while clean, might benefit from additional accent colours to highlight calls-to-action or important information.
Typography: Limited variation in font sizes and weights may affect the visual hierarchy, making it harder for users to distinguish between headings and body text.
Imagery : Some product images lack contextual backgrounds, which could help users envision the products in real-life settings.
Layout
The homepage could incorporate more interactive elements or featured sections to immediately capture user interest. While the site's mission is clear, it could further elaborate on its unique value proposition and what sets it apart from competitors.
Functionality & Usability
Navigation: The navigation menu is straightforward, with clearly
labeled sections.
However, the absence of a sticky header means users
must scroll back to the top to access the menu, which
could affect usability on longer pages. A sticky header
is a menu header that doesn't disappear but follow the
viewer through out exploring the website.
Forms: The contact form is simple and aligns with the site's
aesthetic.
However, providing immediate confirmation
message, would enhance user experience by confirming
that the message was successfully sent.
Interactivity: The website includes basic interactive elements, such
as hover effects on project images.
Performance
Load Time: The website loads efficiently
Responsiveness: The design is responsive, adapting well to various
screen sizes, including tablets and
smartphones.
This ensures accessibility across a range of
devices.
Device Compatibility: The site functions correctly across major browsers
and operating systems, maintaining consistent
performance and appearance.
Strenghts :
Purpose & Goal of Website
The website has a very clear personality branding as it effectively establishes Taiki Sato as a professional visual designer. It communicates his identity, style, and creative focus right from the landing page.It shows off his design work, which is the purpose of said website. Each project is given space to breathe, emphasizing quality over quantity. The website's visual tone matches the designer’s aesthetic, minimalist, elegant, and professional which reinforces the brand and makes a strong impression on creative clients or collaborators.
Visual Design
Colour Palette: The site employs a minimalist color scheme with a dominant use of black and beige tones. This choice creates a sophisticated and elegant atmosphere, allowing the showcased works to stand out without distraction.
Typography: Clean and modern sans-serif fonts are used consistently throughout the site, enhancing readability and aligning with contemporary design trends. The typography complements the overall minimalist aesthetic.
Imagery : High-quality images of Taiki Sato's projects are prominently displayed, providing visitors with clear examples of his work. The use of imagery is effective in conveying the scope and style of his design projects.
Layout
The website features a well-structured layout with clear sections: Home, About, Works, and Contact. This organization facilitates easy navigation and ensures that visitors can find information efficiently.
Weaknesess :
Purpose & Goal of Website
Colour Palette: While the minimalist color scheme is elegant, the lack of accent colors may lead to a monotonous visual experience.
Typography: While the minimalist color scheme is elegant, the lack of accent colors may lead to a monotonous visual experience.
Imagery : Some project images lack contextual information or descriptions, which might leave visitors wanting more details about the project's objectives, challenges, and outcomes.
Layout
The site's layout, while clean, could benefit from interactive elements or animations to engage users more dynamically. Incorporating subtle animations or hover effects might enhance user interaction without compromising the minimalist design.
Feedback :
Reflection :
The first exercise was engaging, as we analyzed five different websites with varying features, designs, layouts, and organization. It showed me how crucial design is in digital media for effectively communicating with an audience. By identifying each site's strengths and weaknesses, I learned what to apply in my future website projects.
I also realized the importance of interactive features, they make websites more attractive and user-friendly. Understanding user interaction helps improve navigation, usability, and overall user experience.
Comments
Post a Comment