Interactive Design | Exercises

22/04/2024 - 10/06/2024 (Week 1 - Week 8)
Yong Xiao Tong / 0368290
Interactive Design / Bachelor of Design (Honours) in Creative Media
Exercises


Exercise 1: Web Analysis

In this exercise, we have to choose two websites from the given link. Then, we review the selected websites, taking note of their design, layout, content, and functionality. We need to identify the strengths and weaknesses of each website and consider how they impact the user experience. Finally, we write a brief report summarising our findings and recommendations.

Website 1 : Longines Spirit Flyback - https://www.longines.com/en-my/spirit-flyback/

Fig 1.1 Website 1

Website 2 : Hoboken Yogi - https://hobokenyogi.com/

Fig 1.2 Website 2

Purpose and Goals:
The purpose of the Longines Spirit Flyback website is to showcase and promote the Longines Spirit collection of watches. Thus, the goal is to attract potential customers and enthusiasts interested in high-quality watches. Meanwhile, Hoboken Yogi is a yoga website aimed at promoting private yoga classes and wellness services within the Hoboken area. The goal is to attract local Hoboken residents to book a class for yoga and holistic health practices.

Visual Design and Layout:
The Longines website features an elegant design in line with the high-end brand image of Longines. The layout is clean and organised, with a focus on showcasing the watches with detailed images and the story behind the collection series. As for the Yoga website, it has a warm and inviting design with earthy tones, featuring portraits of the program founder and images of her performing yoga poses, reflecting her passion for yoga and wellness. The layout is clean and organised, with clear sections for class schedules.

Functionality and Usability:
The Longines website functions smoothly with a straightforward hierarchy, starting with the background story of each watch series followed by detailed information about each watch. Users can easily explore different models of the collection and access additional information about each watch. The Yoga website has clearly stated menu options, making it easy for users to navigate and find information about the types of yoga offered and their schedules. The website also features a booking system that allows users to sign up for private yoga classes.

Content Quality:
The content on the Longines website is very informative, providing background stories and detailed descriptions of each watch model, including specifications and features. The images are clear, allowing users to examine the watches closely. Similarly, the content on the Yoga website is also informative, providing details about the benefits of different types of yoga, the classes offered, and the backgrounds of the instructors.

Performance:
Both websites perform well overall. The Longines website performs well in terms of load times and responsiveness, with pages loading quickly. However, the Yoga website has a slight flaw as it is a bit laggy, especially on the desktop version, but the mobile site runs smoothly.

Strengths and Weaknesses of the Longines Website:
For the strengths, the web design is elegant, aligning with the brand image. The layout is user-friendly, and the website features high-quality images of the watches along with detailed descriptions. As for the weaknesses, the website's content may come across as overly promotional.

Strengths and Weaknesses of the Yoga Website:
For the strengths, the web design has clear navigation and easy access to class schedules and booking. Additionally, the content is very informative. The only weakness is that the website's performance is a bit laggy.

Recommendations:
The Longines website can enhance user engagement by incorporating interactive elements such as virtual try-ons. The Yoga website can improve site performance by optimising images and streamlining content for faster load times.


Exercise 2: Web Replication

This task involves replicating two main pages from the given websites to understand their structure. We need to match their exact dimensions, focusing on layout, type style, and color style, using software like Photoshop or Adobe Illustrator. We can use similar stock images and find fonts on Google Fonts.

Website 1: Morgan Stanley

Fig 2.1 Process


Fig 2.2 Screen grab (left) & replica (right) 

Website 2: Ocean Health Index

Fig 2.3 Process 

Fig 2.4 Screen grab (left) & replica (right) 


Exercise 3: Creating a Recipe Card

In this exercise, we will choose one recipe from this link https://www.101cookbooks.com/?authuser=2 and 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.  


I first design a layout in Figma

Fig 3.1 Layout design

Continue working in Dream Weaver

Fig 3.2 Creating html


Fig 3.2 Screenshot of recipe card 








Comments

Post a Comment

Popular posts from this blog

Experiential Design | Task 1 : Trending Experience

Image
23/09/2024 - 14/10/2024 (Week 1 - Week 4) Yong Xiao Tong / 0368290 Experiential Design / Bachelor of Design (Honours) in Creative Media  Task 1: Trending Experience LIST Instructions Exercises • W eek 1 • W eek 2 • Week 3 • Week 4 Proposal  Ideas Reflections INSTRUCTIONS WEEK 1 Task 1 Identify what type of XR experience is AR or MR? Describe why? I think XR experience is an AR experience because it shows digital information on top of the real world without interacting with real objects. XR includes MR, but it’s broader because it also covers AR and VR. So, XR is not the same as MR, but MR is a part of XR. Activity 1 launch google.com on phone browser, search for dinosaur or dog, cat, tiger. View in 3D/ View in AR (Life Size) ...
Read more

Game Development | Task 2 : Art Asset Development

Image
22/05/2025 - 08/06/2025 (Week 5 - Week 7) Yong Xiao Tong / 0368290 Game Development / Bachelor of Design (Honours) in Creative Media  Task 2: Art Asset Development In this task, we need to create the art assets for our game.  This includes designing characters, environments, items, props, obstacles, power-ups, and the HUD. Characters Our game features 4 characters: 1 protagonist and 3 unique enemies. Aura (Protagonist) idle walking jump boost Human patrol (Enemy) human patrol Dog (Enemy) idle attack Owl (Enemy) idle attack NPC Firefly firefly Effect boosting UI Elements buttons Props & Obstacles home grass direction signboard box ladder moon spike Backgrounds & Tileset For our game, we designed four unique levels, each with its own distinct background to reflect the environment and mood of the stage.  Background design process in Adobe Illustrator The backgrounds are as follows: BG#1: City street scene, filled with urban elements and modern structure...
Read more

Application Design 1 | Project 1 : Mobile Application Proposal

Image
23/09/2024 - 14/10/2024 (Week 1 - Week 4) Yong Xiao Tong / 0368290 Application Design 1 / Bachelor of Design (Honours) in Creative Media  Project 1: Mobile Application Proposal Instructions Project 1: Mobile Application Proposal For this project, we need to create a proposal documentation to redesign an existing app that we find unsatisfactory in terms of user experience or interface design.  We have to find 3 app options first, and then decide on the final one from these three. The 3 app options I chose are: 1. myCuaca 2. Coinbase 3. Secret Recipe MY First Draft Proposal Slide (with 3 applications) First Application Proposal (3 apps) Before proceeding to the final proposal, I consulted with Mr. Zeon and received approval to choose myCuaca as my final app option. Final Proposed Idea Category: Weather Application: myCuaca The home screen is blank at first, so I thought this was the design. However, when I allow locati...
Read more