23.9.2024 - .10.24 ( Week 1 - Week 6 )
Lam Hui Zhen / 0374770
Interactive Design / Bachelor of Design (Honors) in Creative Media / Taylors University
Task 1: Exercise
Table of Contents
- LECTURES
- INSTRUCTIONS
- TASKS
- FEEDBACK
- REFLECTIONS
- FURTHER READING
LECTURES
Week 1
We are asked to sign up Netlify account
Week 2
Usability: Designing Products for User Satisfaction
Usability is a part of User Experience (UX). Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
INSTRUCTIONS
Fig 1.0 Module Information . pdf
Exercise 1
We are asked to write two website analysis based on the link (website) are provided.
1) Magda Butrym
https://www.magdabutrym.com/my-en
Fig 2.0 Main Page
Magda Butrym, this is a e-commerce website that focus on women fashion. This website collaborates with independent artisans from all over Poland, enriching the highest quality fabrics with hand-knitted pieces, plaited leather and hand-embroidered ornaments. This website is go in a simple modern style. To emphasize the simple modern design concept, the website use a black as their primary hue. The design and typography make it more intuitive for the user to browse the website.
Fig 2.1 Search Bar
Fig 2.2 Collection Book
In this website the designer use a lot picture as their background. Maybe the designer wanted to bring out the theme of this website but it looks a bit too much when it comes to the categories section. The letter is not clear in this page. When I browsing the collection book section I feel surprise cause the picture go from right to left when I scroll down the webpage.
Additionally, when users hover over clothing items, the word "shop" appears, guiding them to the shopping page. This feature is beneficial, allowing buyers to view a display diagram before making a purchase. However, the font size is quite small, making it difficult to read and less obvious while browsing the website.
The usefulness of this website is very strong. Besides that the consistency of this website also quite strong by using the same family of type font and same typography. The consistency of the thumbnail size is very clear and it help to improve the experience while browsing the website. But this website is lack of interactive elements. It is not clear which part can be browed or clicked.
Fig 2.3 Thumbnail
2) Balans Kitchen
https://www.balanskitchen.pl/
Fig 2.5 Design of the pointer
Balans Kitchen, this is the online website about healthy food. This website use a beige and others low chroma color as the color scheme. This colors scheme can make the viewers feel comfortable and heal. The overall layout exhibits a strong sense of unity, with each element working harmoniously to enhance the user experience. Navigation is intuitive, making it easy for first-time users to explore. Clear interactive features help users easily identify where to point their mouse while browsing. One standout feature is the unique loading page, which informs viewers about the website’s loading progress. This transparency keeps users engaged during the wait. Besides that, the picture that use in the website is fit the usability of this website. The words and picture will appear while the viewer point at the words. This is very attractive.
Fig 2.5 Design of the pointer
Fig 2.6 Words and Picture appear when the pointer is pointing the bar
Fig 2.7 Food's Details
The usefulness of this website is strong. It include the kcal of each food. It help the viewer/buyer to filter the food the picture also do so. Furthermore, the consistency in typography and design elements contributes to a clean, organized appearance, allowing visitors to focus on the content without distraction.
Fig 2.8 Purchase page
Exercise 2
We are asked to replicate the webpage by using Illustrator/Photoshop. Picture can be replaced with others similar.
Fig 2.9 Process in Illustrator
Fig 2.10 Final Outcome ( 1st webpage)
Fig 2.11 Final Outcome ( 2nd webpage)