Interactive Design / EXERCISES 1: Website Analysis
.gif)
Daphne Lai Yu Cheng / 0366380
GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
EXERCISES / Website Analysis, Web Replication & HTML, CSS Document Development
EXERCISE 2: https://daphnedesigns05.blogspot.com/2025/04/interactive-design-exercise-2-web.html
(Both separated after submission)
- Lectures
- Instructions
- EXERCISES: Website Analysis, Web Replication & HTML, CSS Document Development
- Feedback
- Reflection
LECTURES
Week 1 (22/4/2025):
- Project briefings and expected outcomes.
- Sign up for Figma and Netlify.
- Download Adobe Dreamweaver
- Assigned to analyse 5 websites and write a report, not lesser than 200 words per website.
Week 2 (29/4/2025):
For lecture, Mr Shamsul showed us a video about human centered design, design thinking process and talked about "Usability: Designing Products for User Satisfaction".
Figure 1.1 It's Not You. Bad doors are everywhere. by Vox
Design Thinking Process
- Observation/Empathise
- Define
- Ideate
- Prototype
- Test
- Refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
- An interface with high usability guides users through its easiest route to achieve its goal.
1. Consistency: Makes sure the website looks coherent and works harmoniously across different elements such as headers, footers, sidebars and navigation bars.
2. Simplicity: Interface should be "simple" for users. Minimal number of steps involved in a process to help users achieve their goals faster with good user experience.
3. Visibility: The more visible the element is, the more likely users will know about and how to use them.
4. Feedback: The results of any interaction to make it both visible and understand. To give users a signal that they/product have succeeded or failed at performing a task.
5. Error Prevention: Alerting users when they are making a mistake to make sure they don't make a mistake on whatever they are doing. Example: While deleting something, a pop up with "Are you sure you want to delete?" will alert users to make sure if they want to continue performing that action.
We started off by researching about way finding applications like Waze, Google Maps, Taylor's App (specifically Campus Guide > Floor Plan) and asked ChatGPT on what are the expected features in a wayfinding application. Then, we divided parts and started sketching them.
Figure 1.2 Wayfinding Application Design (29/4/2025)
We ended up with 13 pages for the wayfinding application. Overall, as someone who is taking UI/UX specialisation, it was a fun activity because we applied design thinking process and principles of usability in the paper prototype on how to create a user friendly application design.
EXERCISES 1: Website Analysis (22/4/2025)
Web Analysis (Week 2 - 10 Marks)
- 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 colour, 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 organisation.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Write a brief report summarizing in not less than 200 words for each website analysis. 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 (heading/subheadings)
Website 1: Kultiveret
Figure 2.1 Kultiveret https://www.kultiveret.com/
Purpose, Goals & Effective Communication
Kultiveret serves as a digital gateway to a Copenhagen based cultural travel atelier that offers immersive and curated experiences by specialising in private tours, tailored itineraries and workshops that connect travelers with Denmark’s rich cultural landscape. The website reflects the brand's commitment to promote meaningful connections through cultural exploration and communicate the purpose through its curated imagery and text.
Figure 2.2 Screenshot of Visual Design & Layout
Visual Design & Layout
The website's design is clean and minimalist by using muted colours with high resolution images and videos that showcase Denmark's cultural and natural beauty. The layout is well organised with strong visual hierarchy to guide users through the brand identity and offered services without overwhelming users with information. However, the margins are quite narrow and the typefaces used are simple, but the leading of the texts on mobile are noticeably cramped together. Creatively, there is an option for users to turn on 'The Sounds of Copenhagen' (background sound) to immerse users into the cultural experiences.
Functionality & Usability
The website has clear service offerings summary such as private tours, tailored itineraries and workshops that allow visitors to understand the services without confusion. While the website is aesthetically pleasing, its functionality is limited. There are no "back to top" buttons, the headline could serve as the alternative "back to top" button but it refreshes the page which is slightly inconvenient. The website lacks interactive elements such as booking and payment forms which would affect the user engagement. On the other hand, it provides a form, 'design my visit', for first time visitors to Copenhagen by customising their trip.
Figure 2.4 Screenshot of Content Quality & Relevance
Content Quality & Relevance
The contents in Kultiveret effectively communicates its mission to form connections through cultural experiences. The founder's background in linguistics, fine art photography, and tourism adds depth to the brand story which enhances credibility and personal connection. In my opinion, expanding the content to include more detailed service descriptions, client reviews and blog posts about Danish culture could enhance the site's value to visitors.
Figure 2.5 Screen Record of Performance, Responsiveness & Compatibility
Performance, Responsiveness & Compatibility
The website performs well across various devices and screen sizes. Animations of images and texts are smooth and sufficient for a 'travelling workshop' website. Optimising image sizes could improve loading times especially for users with slower internet connections.
Website 2: SMILE
Figure 2.6 SMILE https://thesmile.tv/
Purpose, Goals & Effective Communication
The Smile is an innovative production company based in Spain, dedicated to nurturing talent and pushing the boundaries of creativity by collaborating with talented directors worldwide. Their purpose and goal is evident throughout the website to effectively communicate their core values and objectives.
Figure 2.7 Screenshot & Record of Visual Design & Layout
Visual Design & Layout
The website's design is a simple layout with contrasting colours and bold typography. The texts uses vibrant colours which are easy for users to see clearly while the media are playing in the background. Although the colours can get a little too vibrant and overwhelming, this approach showcases their portfolio and allows the work to speak for itself without unnecessary distractions effectively. Some sections are difficult to read due to the animations and narrow leading on the texts which made the texts look cramped. I like the typographic effect where when the cursor hovers over the text, the letters temporarily transform into random symbols, then gradually reassemble themselves back into the original readable text.
Figure 2.8 Screenshot of Functionality & Usability
Functionality & Usability
The website lacks of interactive features and detailed navigation particularly for those seeking specific information or projects which may hinder the user experience. Navigations are slightly confusing as there are no arrows showed to scroll up, down, left and right.
.jpg)
Figure 2.9 Content Quality & Relevance
Content Quality & Relevance
While the visual presentation is strong, the website has minimal textual information about individual projects. Providing more context or background could enhance user engagement and understanding. The website also highlights collaborations with various directors and projects which demonstrates versatility and a broad range of creative capabilities.
Figure 2.10 Screen Record of Performance, Responsiveness & Compatibility
Performance, Responsiveness & Compatibility
The website performs smoothly across both desktop and mobile sizes, maintaining its visual integrity. However, high resolution images may impact load times on slower internet connections. I noticed that the text animations on the home page where the website lists their works a slightly delayed, sluggish or visually lagging while scrolling, which was to probably resemble a camera's long exposure or a slow shutter speed.
Website 3: MONOLITH
Figure 2.11 MONOLITH https://monolith.nyc/
Purpose, Goals & Effective Communication
Monolith NYC website serves as a digital gallery for a design studio specialising in collectible furniture and sculptural objects. Monolith collaborates with skilled craftsmen in Mexico to create works that blend brutalist aesthetics with natural materials like volcanic stone and wood. Monolith NYC aims to present its furniture pieces as both functional items and collectible art. The website communicates this purpose through its design and content to emphasise the artistry and craftsmanship involved in each piece.
Figure 2.12 Screenshot of Visual Design & Layout
Visual Design & Layout
The site's minimalistic aesthetic aligns with Monolith's brand identity. It uses a monochromatic colour scheme and high resolution images to highlight the texture and uniqueness of each piece. The clean and uncluttered layout creates an immersive visual experience. The products are emphasised through clean layouts and white space which allow the products to stand out.
Figure 2.13 Screenshot of Functionality & Usability
Functionality & Usability
The website's navigation is minimal, which may hinder user experience. Users might find it challenging to locate specific information or take desired actions, such as detailed product specifications or purchasing options. There is no apparent option for online purchasing, which could be a barrier for potential customers who are interested in purchasing pieces directly through the website.
Figure 2.14 Screenshot of Content Quality & Relevance
Content Quality & Relevance
The content primarily focuses on showcasing the products through images with brief descriptions. While this approach emphasises the visual appearance of the pieces, additional content such as detailed descriptions, material information and design process could provide more context and enhance the user's understanding and appreciation of the work. Information about collaborations with architects and designers worldwide, as well as partnerships with Mexican craftsmen adds relevance to the brand's narrative and highlights its commitment to craftsmanship.
Figure 2.15 Screen Record of Performance, Responsiveness & Compatibility
Performance, Responsiveness & Compatibility
The website performs well in various devices by maintaining its visual presentation. High resolution images might impact load times on slower internet connections. I noticed that the cursor responds a little late but the overall website runs smoothly.
Website 4: DGREES
Figure 2.16 DGREES https://dgrees.studio/
Purpose, Goals & Effective Communication
Dgrees Studio showcases the work of an award winning design and innovation studio based in Spain. This website aims to create emotionally intelligent designs that connect brands with culture and people. This mission is effectively communicated through their project showcases and the detailed "Manifesto" section, which provides insight into their approach and values.
.jpg)
Figure 2.17 Screenshot of Visual Design & Layout
Visual Design & Layout
The website's aesthetic is clean and modern, bold typography and engaging visuals such as animations, creative fun illustrations and motion graphics to capture user's attention. I find their loading screen into another section interesting, they used a pixelated transition to load into another section and I like how they also add in pixelated illustrations in some of their information and the "Expertise" section, where pixelated illustration related to the industry appears when the cursor hovers over the text. The design aligns with the studio's focus on innovation and creativity.
Figure 2.18 Screen Record of Functionality & Usability
Functionality & Usability
The site's navigation relies heavily on scrolling and lacks "back to top" buttons which are not user friendly. Enhancing the navigational elements and ensuring intuitive user pathways would improve the overall experience.
Figure 2.19 Screenshot of Content Quality & Relevance
Content Quality & Relevance
The content is well curated with detailed project descriptions that highlight the studio's purpose and goals. The inclusion of industry specific projects demonstrates their versatility and relevance across different sectors. It presents a diverse range of projects across industries such as technology, hospitality, and finance which highlights the studio's roles in strategy, design and development to demonstrate their comprehensive capabilities. The "Manifesto" section outlines the studio's principles to emphasise honesty, innovation and the integration of design and technology.
Figure 2.20 Screen Record of Performance, Responsiveness & Compatibility
Performance, Responsiveness & Compatibility
The website is responsive and performs well on different devices. Animations and decorative interactive elements are mostly reduced on mobile version compared to desktop. The use of high resolution videos and animations may impact load times, particularly on slower internet connections or less powerful devices.
Website 5: Learning By Design
Figure 2.21 Learning By Design https://iamlearningbydesign.sg/
Purpose, Goals & Effective Communication
Learning By Design is an initiative by the DesignSingapore Council, aiming to nurture creative confidence and design thinking in Singapore’s youth. This website serves as a resource hub for educators, parents and industry partners who are interested in collaborating and fostering innovation through design led education. The website's goal is to integrate design thinking into education, fostering creativity and problem solving skills among students. It communicates this effectively through its mission statements, program descriptions, shared insights and stories.
Figure 2.22 Screenshot of Visual Design & Layout
Visual Design & Layout
The website used a modern and colourful design that resonates with its educational and creative focus which suits their goals. Colours used are contrasting and vibrant such as the overall appearance of the site and when the cursor moves anywhere, it shows the contrasting colours through the cursor. There are interactive elements and thematic visuals that evokes a playful, childlike and colourful concept which improves the user experience (UX). The typefaces used are also suitable and clear to users. Layout used visual hierarchy and is well organised. Additionally, I noticed there is a flashcard concept on the home page at the introduction part which further enhance the website's design.
Figure 2.23 Screenshot of Functionality & Usability
Functionality & Usability
The website is generally functional with interactive elements and resources accessible to users. This website also has a "back to top" button and call to action buttons such as ''contact us" and "subscribe" at the end of every section. The navigations are clear and simple, has sufficient amount of interactive elements. Although navigations are clear and simple, it could be more intuitive. Some users might find it difficult to locate specific information due to some interactive elements using only shapes, lacking clear labels for navigation.
Figure 2.24 Screenshot of Content Quality & Relevance
Content Quality & Relevance
Contents are well curated, rich and diverse on each page which conveniently offer resources for educators, parents and industry partners who are interested in collaborating. The inclusion of case studies, real world applications and incorporating feedback from educators, parents and partners add more information and relevance to the content.
Performance, Responsiveness & Compatibility
The website performs effectively and compatible across different devices. However, the performance and responsiveness on mobile takes a little time to load the homepage as there were interactive elements. Decorative interactive elements and animations on the home page load smoothly on desktop and mobile but are not available to interact with in mobile. Some interactive elements are reduced to just scrolling and swiping right to left on mobile to optimise loading time.
Throughout exercise 1 and the practical class activity, I have learned a lot about the importance of website usability and how a website affects user experience by analysing issues such as narrow margins, inconsistencies in layout, etc. Analysing the websites helped me understand and identify the strengths and weaknesses of a website and how to improve them.
My favourites were definitely the wayfinding application paper prototype which was done in class. I think these activities will be helpful for me in pursuing UI/UX. These exercises were interesting, and I will definitely utilise the knowledge I have acquired in the upcoming tasks in interactive design.
Comments
Post a Comment