Interactive Design - Exercises

22.04.2024 - 01.05.2024 / Week 1 - Week 2

Teo Mei Hui / 0358315

Interactive Design / Bachelors of Design (Honors) in Creative Media / Taylor's University

Exercises

---

CONTENTS

1. Lectures

2. Instructions

3. Exercise 1

4. Exercise 2

5. Reflection

6. Further Reading

---

LECTURES

Figure 1.1 Lecture 1

Usability

• Usability refers to how effectively, efficiently, and successfully a particular user can utilize a product or design in a certain situation.
• An interface with high usability guides users through its easiest route to achieve its goal.

Key Principle of Usability

1. Consistency
   - consistency is key for these patterns to be recognized and learned by users. If similar-looking things do not produce a similar output, the user is bound to become frustrated.
2. Simplicity
   - incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
3. Visibility
   - users should know, just by looking at an interface, what their options are and how to access them.
4. Feedback
   - communicates the results of any interaction, making it both visible and understandable
   - give the user a signal that they (or the product) have succeeded or failed at performing a task.
5. Error Prevention
   - involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake.

Figure 1.2 Lecture 2

Understanding Website Structure

The Three Key Elements

• Header
  -Top section
  -Contains logo, navigation menu, contact info
• Body 
  -Main content area
  -Contain text, images, videos
• Footer
  -Bottom of the webpage
  -Includes copyright information, links to important pages, contact details.

Organizing Content

• Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
• Logical grouping of content and clear labeling of sections improve user experience.

Navigation Menus

• Help users move around the website.
• Use clear and concise labels for menu items.

---

INSTRUCTIONS

Figure 1.2 Module Information Booklet

---

TASK

Exercise 1: Web Analysis

Choose two websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarizing your findings and recommendations.

Website #1 - https://www.goldenchild.media/

Golden Child

Purpose and Goals

This website is created by a multidisciplinary creative studio that thrives at the intersection of art, entertainment and culture. The purpose of the website is to advertise their expertise in directing and film-making by showcasing their works. The banner of the website shows multiple of their works playing in the background, which easily explains what their brand is about. Their goal of the website is to raise brand awareness and attract more potential clients into working with their studio. 

Figure 2.1 Golden Child banner

Visual Design & Layout

The color tone for the website complements the name of the studio, only using three main colors which are gold and white for texts and black as the background. The simple color palette ensures that the website design does not outshine their content, so that users are able to focus more on their displayed artworks. The typography is clean and comfortable to read, the placement and choice of font is great as well, it matches the overall theme. The layout for the website is structured, neat and not cluttered, there is a good balance between the contents and white space. The imageries are all carefully-selected thumbnails of their artwork or preview videos. Some of the imageries only show up when the cursor is moved towards the button, which helps maintain the cleanliness of the layout, but still makes sure that users are able to see the intended imageries. There is animations applied to all of the buttons. Overall, the design is aesthetically pleasing.

Figure 2.2 Golden Child selected works layout

Figure 2.3 Golden Child works layout

Functionality & Usability

The functionality of the website is good, it is easy to navigate the website. The main index page shows the banner, the selected artworks, the list of directors and a brief introduction to their studio. The menu buttons leads to the individual pages for each of the categories. When u point at the any buttons there is always animation, which gives feedback to user. The call to action button appears when you scroll downwards and point your cursor to the thumbnail of their artworks. When the cursor is on the thumbnail, the thumbnail changes into the preview video. The same feature applies to their directors list, where two small boxes of preview videos appear at the side or at the background. It is a very interactive and engaging website. The elements are consistent, where the contents are mainly in rectangle shapes and the buttons are all in circle shape. The website is fun and easy to maneuver, which ensures that users do not feel like exiting the website easily.

Figure 2.4 Golden Child button feedback

Figure 2.5 Golden Child button feedback

Figure 2.6 Golden Child button feedback

Quality & Relevance

The quality of the website is great. All the elements and sections are well organized and there are no errors detected. The video words all plays well. The details are great and it feels like a lot of work was put into creating this website. The relevance of the the content are good as well, it is straightforward as they mainly want to showcase their artworks. However, the clarity could be improved as they never stated clearly about what their studio mainly does, the text they use are very minimal, users have to figure it out by going through the website and viewing their works.

Figure 2.7 Golden Child clarity

Figure 2.8 Golden Child quality

Performance

The performance of the website is great. The load time is around 1-2 seconds which is quite fast, while loading the screen shows the brand name and 2 elements at the side. There is no lag in any of the animations so responsiveness is good as well. When using different browsers (such as Microsoft Bing) the performance is maintained and there are no differences as when using Google. While using a different device (mobile phone), the animations of the buttons were reduced due to not having a cursor function on phones, but otherwise it is still as engaging and interactive. 

Figure 2.9 Golden Child loading page

Figure 2.10 Golden Child on phone

Recommendation

• Need to improve the content clarity. The amount of texts and introductions are too minimal, may cause some clients to be confused or not have enough information.
• The layout should be more interesting. The sections with a lot of white space should add more elements, it looks a bit bland, may look boring after awhile.

Website #2 - https://www.yulia.world/

YULIA

Purpose and Goals

This is the official website for the fashion brand YULIA atelier, which creates made-to-order pieces of fashion art by the designer Yulia Voytenko. The main purpose of the website is to advertise their fashion pieces, the 'If I Were a Flower' collection. The purpose of the website is easily communicate when opening the home page. The goal is to promote their brand as well as attract clients into pre-ordering and purchasing their designs.

Figure 12.11 YULIA banner

Visual Design & Layout

The color tone mainly consists of off white as the base color and pastel pink for the texts. The color palette also includes vibrant colors from their fashion collections, which are white, pink, yellow, green and blue. The off white ensures that it doesn't cause a strain to user's eyes and doesn't take attention away from the content, and the pastel pink complements the fashion collection well. The layout of the website is less structured and more collage feel, but does not look messy, it looks more interesting this way and does not get boring easily. The typography arrangement of the website could be improved for some parts as it is a little hard to read. However, the choice of font is great as it matches the aesthetics of their floral and ethereal fashion collection. The imageries are all pictures of their fashion collection, and there are minor animations (it zooms and rotates slightly) when you scroll through the website. The balance between the white space and content is quite balanced as well. When the page is loading, flower elements shows up which is very cute. Overall, it is an appealing design. 

Figure 2.12 YULIA layout

Figure 2.13 YULIA layout

Figure 2.14 YULIA typography

Functionality & Usability

The functionality of the website is great, it is easy to maneuver the website. The main page shows the brand banner, the introduction to the collections, the pieces in the collections, the background of the brand. The menu buttons leads to the individual pages for each of the categories. When the cursor pans across each letters in the brand name, an imagery for the pieces in the collection appears in the background, which clearly explains the purpose of the website. When u point at the any buttons there is always animation, which gives feedback to user. Some of the imageries in the website also moves along when scrolling. However, the imageries only move a little with each scroll, which may give the false impression that it is lagging. The call to action button is the preorder button beneath each pieces of their collection, which brings them to the details of the specific fashion piece, and a section to submit personal details. The menu bar consists of home, about, collection and preorder, as well as their Instagram page and contacts, so it is not hard for clients to achieve their objective. The collection and preorder page is also straightforward and provides enough imageries to ease client's navigation. Overall, it is very user-friendly.

Figure 2.15 YULIA collection page

Figure 2.16 YULIA preorder

Quality & Relevance

The quality of the website is good. All the elements and sections are well organized and there are no errors detected. There is also calming background music when browsing the page. The relevance of the the content are good as well, it is straightforward as they mainly want to showcase the fashion pieces in their collection. The clarity is also great, the website clearly introduces their brand as well as provides enough details for their fashion pieces.

Figure 2.17 YULIA preorder page

Performance

The performance of the website is above average. However, the load time is a little slow, which takes around 5 seconds. There responsiveness is good as well. When using different browsers (such as Microsoft Bing) the performance is maintained and there are no differences as when using Google. While using a different device (mobile phone), the animations of the buttons were reduced due to not having a cursor function on phones, but otherwise it is still as engaging and interactive. On mobile phones, the typography are all left aligned, which is more readable.

Figure 2.18 YULIA on phone

Recommendation

• Simplicity needs to be improved, it takes awhile to scroll and get to the call to action button. 
• Loading time is a little slow.
• The animation moves a little with each scroll, which gives the false impression that it's lagging.
• Typography could be improved, readability isn't optimum as the alignment is messy.

Exercise 2: Web Replication

Replicate two existing main pages of the websites given in the link below to gain a better understanding of their structure. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style.

Website #1 - https://banditrunning.com/

Figure 3.1 Bandit website replication process

Figure 3.2 Replicating elements

Figure 3.3 Replicating logo

Figure 3.4 Outline view of web replication

Figure 3.5 Comparison to original website

Figure 3.6 Final web replication #1

Figure 3.7 Final website replication #1 (pdf)

Website #2 - https://www.oceanhealthindex.org/?authuser=0

Figure 3.8 Web replication process

Figure 3.9 Replicating elements

Figure 3.10 Outline view of website replication

Figure 3.11 Comparison to original website

Figure 3.12 Final website replication #2

Figure 3.13 Final website replication #2 (pdf)

Exercise 3: Create a Recipe Card

In this exercise, you 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. 

Process

First, I chose the recipe that i wanted to make, which was penne alla vodka, since it looked delicious.

Original recipe page - https://www.101cookbooks.com/penne-alla-vodka/

Figure 4.1 Setting up html, style and choosing font

Figure 4.2 Class attribute to wrap text to side of image

Figure 4.3 Class attribute to wrap text to side of image

First, I created the html file and css style sheet for the recipe card. Then, I chose the fonts that I liked on Google fonts and embedded them. After inserting all the necessary information and images for the recipe, I started to style them. I used class attributes to let the header and text wrap to the side of the image, it was a little tricky and confusing.

Figure 4.4 Class attribute to add background color to section

Initially, I repeated the same class attributes in the ingredients and instruction sections, but after doing that, I was unable to change the section's background color even after adding one more <div> attribute. After changing the class attribute, I was finally able to change the background color. Looking back now, maybe I should have used id attributes for some of the elements.

Figure 4.5 Table CSS

Figure 4.6 Form CSS

Then, I created a table and form, and styled them to match the recipe card. This part was less tricky because we were taught by Mr. Shamsul in class.

Final Recipe Card 

Netlify Link - https://meihui-penneallavodka-recipe.netlify.app/

---

REFLECTIONS

Experience

From exercise 1, I looked through many award-winning websites, it was really fun and interesting as the websites were all really cool. They made me feel more excited and assured for my choice of specialization, UIUX. Through exercise 2, I was able to have a good understanding about the basic structures of a website, I also got to improve me Adobe Illustrators skills. In exercise 3, we learned how to use HTML and CSS to create and design basic webpages, it is confusing but interesting.

Observations

I was able to observe what is needed to make a good website, which are the purpose, visual design, functionality, quality and performance. Furthermore, I was able to see how a well-structured website should look like. Additionally, I got to know about how HTML and CSS builds up a website through various codes.

Findings

There are many details that we have to focus on to create a good and appealing website that is user-friendly. We must ensure optimum usability. Additionally, making sure the contents are organized clearly is also important. Not only that, being meticulous and paying great attention to detail is extremely important, even more so when creating HTML and CSS.

---

FURTHER READING

The Anatomy of a Webpage - https://blog.tubikstudio.com/anatomy-of-web-page/

• Header
• Call-to-action (CTA) button
• Hero section
• Footer
• Slider
• Search
• Menu
• Breadcrumbs
• Form
• Cards
• Video
• Progress indicator
• Favicon
• Tags