Interactive Design/ Exercises

22nd Apr 2024 - 2024 (Week 1 - Week 14)
Natalie Chu Jing Xuan, 0354589
Interactive Design, Bachelor of Design (Honours) in Creative Media

Exercises

Table of Contents

Module Information Booklet (MIB)

Exercise 1: Web Analysis

In this exercise, I will choose two websites from the links provided in Google Classroom and write a web analysis report.

Website #1 Don't Board Me [link]

Fig.1.1 "Don't Board Me" Main page

Purpose and Goals

Don't Board Me is an in-home pet care services that specialises in offering are trustworthy, kind, and individualised. They provide services such as dog walking, pet visits and overnight care. They guarantee the happiness and well-being of dogs, establish long-lasting relationships with pet owners by earning their trust and confidence, and satiate each dog's particular needs.

User Effectiveness

Whether they are new or returning customers, I believe this website is very effective for users. On the main page, the menu bar can be seen clearly in the top centre. Additionally, it features a booking button in the upper right corner for clients who wish to make service reservations. In addition, they made it easy for customers to find and get in touch with them by including direct links to their social media accounts on Facebook, Instagram, and TikTok in the bottom left corner.

Visual Design and Layout

Fig 1.2 Visual Design and layout

The main colours of pink, red, blue, and light beige contribute to a harmonious and cute visual effect, adding to the overall appeal of the website. This colour palette likely enhances the website's friendliness and attractiveness to visitors. The use of illustrations featuring dogs brings adorable and fun elements to the website, which can make people feel happy, particularly dog owners.

Fig 1.3 About Us

However, the image of the dog blocking a sentence in the website description (as shown in Fig 1.3) may make it difficult for visitors to read and understand.

Fig 1.4 Service Page

While the service titles use appropriate font and colour choices, the use of all capital letters and minimal spacing between lines in the descriptions may result in a cramped and overwhelming appearance (as shown in Fig 1.4). This design choice may deter users from further engaging with the content.

Functionality and Usability

Fig 1.5 Intro page

The website's interactive introduction page, which invites users to "bounce a ball to get to the site," is a visually appealing and engaging feature. This interactive element not only piques interest, but it also fits in with the website's theme, which is especially appealing to dog owners. As a new user and dog owner, the interactive intro likely enhanced your initial experience by creating a playful and memorable entry point to the site.

Other than that, the clarity of navigation, with menu bars located at the top of the page, contributes to the website's usability by providing intuitive access to different sections or pages. Information is presented clearly throughout the website, making it easy for users to find relevant content and navigate through various sections.

Content Quality and Relevance

Fig 1.6 Menu bar

The clarity of the website's content is impressive, as there were no misunderstandings or confusion while browsing. Each piece of content is well-organised and divided into appropriate sections, allowing for easy navigation and access to relevant information. This organisational structure improves the user experience by allowing visitors to easily find what they are looking for.

The content not only informs but also engages the audience, promoting positive interaction with the website and encouraging future exploration. Overall, the website's content quality and relevance contribute significantly to a positive user experience, improving visitors' comprehension, engagement, and satisfaction levels.

Performance

Fig 1.7 Performance of Main Page with Safari

On Google Chrome, the website loads quickly and smoothly, but Safari takes longer to load the dog illustration.

Fig 1.8 Performance of Service Page & About Us with iPhone

When viewed on an iPhone, the service and about us pages appear messy due to oversized fonts, resulting in layout issues where text overlaps with other elements.

Website #2 Fiteg2 [link]

Fig 1.9 Fiteg2 website main page

Purpose and Goals

The Fiteg2 website appears to be aimed at promoting their smoothie product, emphasising its unique qualities such as being made with cage-free eggs, having a high protein concentration, and being free of sugar, fat, lactose, gluten, and soybeans. The goal appears to be to position Fiteg2 as a healthy and convenient choice for consumers looking for a nutritious beverage. They also highlights the benefits of their products which are displaying flavour options, emphasising key features like natural ingredients and eco-friendly packagin

g, and making usage recommendations.

User Effectiveness

The website effectively communicates its purpose through clear product descriptions, allowing users to quickly understand the product's key selling points, which may appeal to health-conscious individuals seeking a convenient and nutritious beverage option.

Visual Design and Layout

Fig 1.10 Visual design and layout

The website uses a clean and minimalist design approach to effectively highlight the product's key features. Its visual elements, such as colours, typography, and imagery, contribute to a modern and stylish look.

The website's palette is dominated by vibrant colours such as yellow, green, orange, white, and black, creating an energetic atmosphere that reflects the product's essence as an egg protein beverage. Furthermore, these colours complement the appealing imagery of natural fruits, emphasising the brand's reliance on natural ingredients. The layout is well-organised, with clearly defined sections, ensuring a smooth browsing experience for visitors.

Functionality and Usability

Fig 1.11 Intro page

The introduction page provides an engaging explanation for the product's name, "Fiteg2," which is derived from "fitegg," which represents a fit egg, and doubling the "g" to represent "g square." This creative explanation enhances the user experience by providing a better understanding of the brand's identity.

Fig 1.12 Main page

The main page prominently displays the slogan "cage-free egg protein smoothie for everyone" along with a play button. Hovering over this button reveals the target audience, which includes young people, health enthusiasts, endurance athletes, gym-goers, wellness advocates, and healthy seniors. This interactive feature effectively communicates the product's inclusivity and appeal to a wide range of people, increasing user engagement and understanding of the brand's target demographics.

Content Quality and Relevance

The website's content is well-organised, with each piece of information placed in the appropriate section to ensure visitors' clarity and understanding. Smooth navigation from page to page improves the user experience by allowing for seamless movement across the website. This ensures that users can easily access relevant information, with no interruptions or confusion.Visitors can easily navigate different sections of the website, gaining a thorough understanding of the product offerings, benefits, and usage suggestions.

Overall, the website's content quality and organisation help to create a positive user experience by fostering trust and credibility while effectively communicating the brand's message and value proposition.

Performance

Fig 1.13 Performance of pages using iPhone

Safari on iPhone provided an exceptionally smooth browsing experience. The layout appeared to be clear and clean, with each piece of information clearly stated and displayed, with nothing blocking the content. This positive performance experience indicates that the website is mobile-optimised, resulting in a seamless user experience for visitors using Safari on iPhones.

[Table of Content]

Exercise 2 - Web Replication

This task is to replicate TWO (2) existing main pages of the websites of the link below to gain a better understanding of their structure. We will follow the dimensions of the existing website from the width and height. This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.

I choose to replicate Morgan Stanley and Ocean Health Index' website. I started with screengrab the entire website main pages, and open them in Adobe Illustrator to start replicating them. I uses the website given by Mr.Shamsul in Google Classroom, which is the Pexels, to find similar images to replace with, and uses Google font to download the similar typeface.

Morgan Stanley:

I uses several fonts, such as Reddit Sans Condensed (Medium), Karla (Bold/Semibold), Public Sans (Bold), Khula (Regular/Semibold/Bold), Helvetica (Regular/Bold), and Source Sans Variable (Light/Semibold). For icons like Linkedin, Instagram, Twitter, Facebook and YouTube, I use AdobeStock to find the image source and then use Photoshop's Quick Selection tools to copy the icons into Illustrator.

Fig 2.1 Morgan Stanley's web replication progression 1

Fig 2.2 Morgan Stanley's web replication progression 2

Final Outcome:

Fig 2.3 Morgan Stanley's web replication final outcome

Ocean Health Index:

I uses Helvetica font (Regular/Bold) for all the wordings.

Fig 2.4 Ocean Health Index's web replication progression

Final Outcome:

Fig 2.5 Ocean Health Index's web replication final outcome

[Table of Content]

Exercise 3: Creating a Recipe Card

In this exercise, we will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. We need to choose ONE recipe from https://www.101cookbooks.com/

1. Create an HTML file named "index.html." Create a section that displays the following information:

Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions

2. Create an external CSS file named "style.css."

Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

I chose this Buttermilk Berry Muffins recipe from https://www.101cookbooks.com/buttermilk-berry-muffin-recipe/. I then created the basic HTML structure for the recipe card, which included the title, ingredients list, and instructions.