Interactive Design - Exercises 1 & 2
3/10/2024 - / Week 2
Tay Yue Chern / 0373215
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercises
TABLE OF CONTENTS
1. LECTURES
2. INSTRUCTIONS
3. EXERCISES
- EXERCISE 2 / WEB REPLICATION
1. LECTURES
Week 7 lecture documented in Interactive Design - Exercise 3
Week 9 - Week 11 lectures documented in Interactive Design - Project 2
Week 2 - Usability: Designing Products for User Satisfaction
Fig 1.1 Week 2 Slides
Week 3 - Understanding Website Structure
Fig 1.2 Week 3 Slides
Week 4 - HTML & CSS
This week we did a simple practice using TextEdit to create a simple web document.
 |
| Fig 1.3 Web Document created using TextEdit |
Fig 1.4 Week 4 Slides
Week 5 - HTML & CSS
This week we were practicing on HTML and CSS. Below is the class exercise which we did a web document about ourselves using Adobe Dreamweaver.
 |
| Fig 1.5 Web Document created using Adobe Dreamweaver |
Week 6 - Deepavali Holiday
2. INSTRUCTIONS
3. EXERCISES
Exercise 1 - Web Analysis
Choose TWO (2) 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 summarising your findings and recommendations.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organisation. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)
We were given the following links to choose the websites to analyse:
https://www.csswinner.com/winnershttps://www.awwwards.com/
https://www.webbyawards.com/
Chosen websites
Web Analysis report on Orken
 |
| Fig 3.1.1 Homepage of Orken |
Purpose and Goals
 |
| Fig 3.1.2 Orken's 'About' Page |
This website offers a new take on fantasy stories, presenting stories from different perspectives. Its purpose is to introduce and provide immersive experiences through both written content and artwork. The goal is to deliver modern fantasy storytelling with a visually rich, engaging experience. However, Orken’s purpose isn’t clearly conveyed, as the ‘About’ page only includes a brief introduction and product photos, making it difficult for viewers to grasp the key ideas at first glance.
Visual Design and Layout
 |
| Fig 3.1.3 Orken's 'Newsletter' Page |
This website features a bright orange colour tone balanced with black and white, creating an immersive atmosphere for exploring fantasy stories. The typography for headlines, subheadings and body text differs yet looks harmonious and consistent. The images align with the orange colour scheme, complemented by a little part of contrasting blue to soften the intensity (Refer to Fig 3.1.3).
Functionality and Usability
 |
| Fig 3.1.4 Examples of colour feedbacks in Orken |
The homepage design is clean and features limited elements, with the logo icon at the top centre serving as the menu access point. Users can also navigate through different sections by scrolling down. For interactive elements, feedback is clear and straightforward, indicated by the colour changes between black and orange. One interesting part is that the 2D animated artworks will move as you scroll down or hover, (e.g. the layered artworks on the newsletter page, the character’s arm following the cursor on the homepage). These subtle movements create a smooth and engaging experience.
Quality and Performance
 |
| Fig 3.1.5 Orken's Screen Display on Mobile |
Orken’s site is compatible with mobile screens, showing minimal difference compared to laptop views, despite slight animated artworks movements. The transitions between sections in the menu are smooth, however, both web and mobile screens may occasionally experience lag when users skip more than two sections, such as jumping from the first section to the fourth section.
 |
| Fig 3.1.6 Homepage of Frost |
Purpose and Goals
 |
| Fig 3.1.7 Frost's 'About' Page |
The Frost website focuses on promoting snowboarding gear that emphasises performance and sustainability. It aims to engage snowboarders with innovative technology and stylish designs for enhanced comfort on the slopes. The website connects with snowboarders who value quality and eco-friendliness in their outdoor activities. The straightforward slogan on the ‘About’ page conveys the basic idea of this website.
Visual Design and Layout
 |
| Fig 3.1.8 Frost's Last Two Pages |
The website features a green and black colour scheme with a futuristic and cyberpunk design that contrasts with its focus on snowboarding gear. Users can’t actually grasp the correct idea while first looking at the website. While the typography is acceptable, the homepage images do not emphasise snowboarding, instead, the later pages (Fig 3.1.8) align better with the theme and match the taglines, “live wild, ride mineral.” and “where will your next ride take you?”. Overall, the design leans more toward urban exploration than outdoor adventure, which may detract from its goal of showcasing snowboarding products.
Functionality and Usability
 |
| Fig 3.1.9 Colour Feedbacks |
The Frost website features an interesting circular cursor and a simple, clear homepage design (Fig 3.1.6). However, the menu button is positioned at the bottom centre, making it hard to notice initially, and it disappears when scrolling. The site is well-structured and organised with interactive elements, like an animated background, and the clear colour feedback. However, the 3D interactive element on the ‘About’ page is poorly placed as it covers some text in the web screen, detracting from usability (Fig 3.1.7).
Quality and Performance
 |
| Fig 3.1.10 Frost's Screen Display on Mobile |
The website is overall quite smooth but transitions between pages can be slow, affecting both desktop and mobile experiences. Loading times can be occasionally longer on mobile screens. However, the mobile design is cleaner and clearer, and the introduction text on the ‘About’ page isn’t blocked, which improves readability.
Exercise 2 - Web Replication
Our task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. 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. You can use any image from stock image or free stock icon. 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. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.
Links
Free image
Google Fonts link
Website #1 - Morgan Stanley
 |
| Fig 3.2.1 Morgan Stanley Screengrab |
 |
| Fig 3.2.2 Images used |
 |
| Fig 3.2.3 Working process in Illustrator |
Fonts mainly used: Adobe Clean, Arial, Arial Narrow, Avenir.
These were the closest fonts that I found for the heading, subheadings, and the body text of the website, and it matches the overall theme.
 |
| Fig 3.2.4 Side by side comparison (left-original, right-replicate) |
Fig 3.2.5 Morgan Stanley replicate (PDF)
 |
| Fig 3.2.6 Bandit Running Screengrab |
 |
| Fig 3.2.7 Images used |
 |
| Fig 3.2.8 Working process in Illustrator |
 |
| Fig 3.2.9 Logo simplified |
I simplified the logo design using only the outer line shape of it.
 |
| Fig 3.2.10 Title Typography Design Replication |
I used shape tool, pen tool and shape builder to replicate the title design.
 |
| Fig 3.2.10 Replicating 'Membership' Typography |
 |
| Fig 3.2.4 Side by side comparison (left-original, right-replicate) |
Comments
Post a Comment