Interactive Design - Exercise 1

Exercise 1 - Web Analysis

Introduction

This exercise requires us to analyze highly rated websites from various aspects, such as design, layout, content, functionality, and more. For this task, I have chosen Gelato La Boca and the Unanswered website, which belong to completely different genres and serve distinct purposes.

Gelato La Boca (https://gelatolaboca.com/)

Figure 1.1 Gelato La Boca's Hero section

Design

• Colour

By the first glance of the hero section, this website is very direct, focusing on promoting its product—gelato. Since gelato is meant to be fun and enjoyable, like having a cold treat on a hot summer day by the beach, the website uses bright yellow as its main colour, representing energy and happiness. To create contrast, blue is used as a complementary colour, adding a sense of calm and balance. The images and media on the site are also colorful and vibrant, matching the different gelato flavors. This makes the gelato look more fun and appealing, encouraging visitors to enjoy it.

• Typography

Since the website promotes a fun and energetic gelato experience, it uses playful, bold, and thick Sans Serif fonts. These fonts give the website a friendly and approachable feel, while the boldness adds to the sense of excitement and energy, making it easy to read and visually appealing.

Figure 1.2 Gelato La Boca's Menu section

Functionality

• Navigation

As a website focused on showcasing and selling gelato, the navigation is very straightforward when customers first enter. In the hero section, the call-to-action is clear and simple, prompting customers to 'Order Now,' with a background image highlighting their gelato products.

When clicking on the menu, the options are concise and relevant to the product, with the largest button labeled 'Flavors', which is what customers usually browse before placing an order. Other options include 'About', providing information about their shop and gelato, 'Location', which tells customers where the shop is, as well as 'Contact' and 'Events'. The varying button sizes and vibrant colors create a clear visual hierarchy, guiding customers on what to do next and making the navigation easier to follow.

• Responsiveness

Although this website is filled with various media and animations, its responsiveness is impressive, with minimal loading time. The images are optimized for fast loading while maintaining high resolution. Additionally, the website functions smoothly on all devices, including tablets and phones, providing customers with easy access to browse and place orders from any platform.

Unanswered (https://letterstoevan.com/)

Figure 1.3 Unanswered's Hero section

Design

• Colour

This website tells the story of Evan Gershkovich, a WSJ reporter detained in Russia, serving as a platform for expression and storytelling that resonates with the audience. The design employs a greyscale colour scheme, creating a minimalist look compared to Gelato La Boca. While using black, grey, and white, the colour choices establish hierarchy, with faded and bright squares highlighting key elements. This approach draws visitors' attention to the impactful words and stories presented on the site.

• Layout

This website features a simple and minimalist layout focused on telling Evan's story. It consists of only three pages: the main page that prompts visitors to start the narrative, the story page itself, and an additional page with information about the main character. During the storytelling, the text is large and arranged for easy reading from top to bottom, accompanied by fade-in animations that guide users to read the story word by word. Images of Evan is placed alongside the text to evoke compassion.

Figure 1.4 Unanswered's Story telling

This minimalist design is effective because it reduces distractions, allowing visitors to fully engage with the story. The clear layout and animations help maintain focus and enhance the emotional impact of the narrative.

Functionality

• Responsiveness

The storytelling is supported by an audio narrative that reads along with the text. The audio and fade-in animations of the words are well synchronized, providing a quick and smooth experience for users. This combination of audio and visual elements helps users follow the story more easily, making it more engaging and immersive.

Furthermore, this website is responsive across all devices. On mobile phones, the layout in the hero section is vertical, and the interaction method is slightly different. In the storytelling part, users can preview upcoming sections before the narrative due to the vertical format. In contrast, on horizontal devices like desktops and tablets, the content is displayed paragraph by paragraph.

Figure 1.5 Hero section layout in mobile phone

Figure 1.6 Story telling in mobile phone

Conclusion

In conclusion, many aspects must be considered when building a website, including design, content, and functionality. The websites I chose align closely with my aesthetic preferences, particularly in their effective use of color hierarchy and well-fitted animations. Analyzing the strengths of these sites has provided valuable insights and motivated me to continue learning from these professionals.