Interactive Design - Exercise 1

on
03/10/24 - 00/00/24 (Week 1 - Week )
Andrea Choo Qin Hui (0366959)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercise 1

INSTRUCTIONS


EXERCISES

Exercise 1: (Web Analysis)

             For our first exercise, we were tasked to choose two (2) websites from the given links. 
             1. Site of the Day Awards
             2. Website Awards
             3. The Webby Awards

             We are to give our opinions on the chosen websites in a brief report summarising our 
             findings and recommendations. 

             #1 Website
             The first website I chose is Yves Saint Laurent's Revolution from Site of the Day 
             Awards. 

             - Visual Design (The use of Colour, Typography & Imagery) 
             This website presents a visually appealing design, with the use of black, white and red 
             for it's colour palette. The fonts used in the website is clean, classy and easy to read, 
             which emphasises YSL's classiness. The imagery used in the website are all taken by 
             YSL throughout the years, showcasing YSL's iconic designs and models. 

             - Layout
             This website has around 5 sections, the landing page, introduction, tuxedo (part 1), 
             innovations (part 2) and finally epilogue (part 3). The layout of the website is 
             minimalist, using a long scroll format that shows the animation of the images 
             perfectly. 
Figure 1.2 Landing Page

Figure 1.3 Introduction

Figure 1.4 Part 1

Figure 1.5 Part 2

Figure 1.6 Part 3

             - Content
             Just like the name of the website, it contains Yves Saint Laurent's revolutionary impact 
             in the fashion world, particularly how he challenged gender norms for women.                                   
             - Website Navigation
             The navigation of the website is straightforward and simple, with narrative like 
             animations and smooth transitions. 

             - Interactions

Figure 1.7 Interactions of the Website pt1

Figure 1.8 Interactions of the Website pt2

Figure 1.9 Interactions of the Website pt3

             The first interaction brings you to CSS Design Awards and the second and third brings 
             you to awwwards. Despite the first and second having animations, the third doesn't. 
             The sidebar brings the user to the different sections of the website. 

             - Overall Website Performance 

Figure 1.10 GIF of Website on Desktop

Figure 1.11 GIF of Website on Mobile

             Both the desktop and mobile websites are smooth, it has fast loading time, smooth 
             scrolling and also responsive design animation across devices while also maintaining 
             its sleek and aesthetic appearance. (Both GIFs are sped up)             

             - Strengths and Weaknesses 
             One of the strength this website provides is definitely it's animations. With each scroll 
             through the website, you are provided with a creative animation that could catch the 
             user's attention. Another one would be having the contents of this website in another 
             language. 

             Despite the creative animations being one of the strengths, it could also be seen as a 
             weakness, the animations might be too distracting for some users, making them lose 
             focus on the contents of the website. Another would be the 'glow' the cursor makes 
             when you use this website on desktop. This effect may cause users to get headaches, 
             especially when the cursor is moved too quickly. 
Figure 1.12 Weird 'Glow' on Cursor

             - Evaluating Purpose Effectiveness
             This website absolutely effective in fulfilling its purpose, which is to showcase the 
             legacy of YSL as a revolutionary force in the fashion industry. When users read the 
             contents of the website, they will leave with newfound knowledge of how YSL 
             challenged the gender norms for women and even suggested women to wear men's 
             clothings. 

             #2 Website
             The second website I chose is Don't Board Me from Site of The Day Awards. 

             - Visual Design (The use of Colour, Typography & Imagery) 
             This website has a clean design with friendly and more approachable and warm colour 
             scheme which soft tones that can evoke trust in the users. The fonts used in the websites 
             are playful and readable which definitely reflects the website's dog care theme. The 
             the imagery used in the website are all illustrations related to dogs being happy and 
             relaxed which again reinforces the pet care theme the website has. 

             - Layout
             The layout is straightforward and easy for users to navigate. It includes around 7 
             sections,  a landing page, home page, pricing page, an about us page, services page, blog 
             page and finally a contact page. These sections ensure that users can quickly find the 
             information they seek throughout this site. 

Figure 2.1 Landing Page

Figure 2.2 Home Page

Figure 2.3 Pricing Page

Figure 2.4 About Us Page

Figure 2.5 Services Page

Figure 2.6 Blog Page

Figure 2.7 Contact Page

             - Content
             The website contains content about their in-home pet care services, emphasising a 
             personalised in-home care for a user's dog. The site also includes testimonials from 
             satisfied dog owners, clear description of the services the site provides and also an easy
             to understand booking system with their number listed if users have enquiries. 

             - Website Navigation
             The navigation for this site is straightforward as everything is labelled, making it easy for
             users to navigate through different sections of the website. 

             - Interactions

Figure 2.8 Landing Page Interaction GIF

Figure 2.9 Book Now Interaction

Figure 2.10 Social Medias Interactions

Figure 2.11 Services Interactions

Figure 2.12 Testimonials Interactions

Figure 2.13 Other Interactions

             There are many interactions for this website, which makes it easier for users to 
             navigate through the website. These interactions include, links to their social medias, 
             booking services they provide, testimonials, a blog and options to contact the dog 
             careers.
             - Overall Website Performance

Figure 2.14 GIF of Website on Desktop

Figure 2.15 GIF of Website on Mobile

             Both desktop and mobile versions are smooth, it has fast loading time, the animations 
             are responsive and it has a smooth navigation across both devices.  

             - Strengths and Weaknesses 
             One of the strength this website provides is the many interactions it has on the website,
             making it easy for users to navigate and find useful information they need to proceed.
             Another strength of their website is that they included testimonials of previous 
             customers which will make them seem trustworthy and encouraging more people to 
             book their services. Finally the last strength they have is that they included helpful tips 
             on dog care, training and also dog facts. 
             Despite the website having these many interactions, it lacks an option to return to the 
             site's home page when you click on the other sections. 

             - Evaluating Purpose Effectiveness
             This website is effective in fulfilling its purpose, which is to promote their services of 
             dog care to others. The simple yet cute illustrations that are all over the website will 
             attract users to want to find out more about it and by also including testimonials, this 
             website have successfully conveyed reliability and trust.

Comments

Post a Comment