INTERACTIVE DESIGN - EXERCISE 1
21/04/2025 - 28/04/2025 (Week 1)
Bachelor of Design in Creative Media
Interactive Design
Exercise 1 : Website Analysis
Table of Content
1. Lectures
2. Instruction
3. Exercise
4. Feedback
5. Reflection
1. Lectures
Week 1 (21/04/2025)
In this week Mr. Shamsul gave us a brief explanation about the module. We were also told to download an adobe dreamweaver before next class. Mr. Shamsul told us to prepare a Netlify account, a server to put our work in.
2. Instruction
Document 1.1: Module Information Book for Interactive Design.
3. Exercise
Exercise 1 : Web Analysis
Analyzing the website we've chosen from its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Link given:
Chosen website
3.1 Web Analysis Report on Micro
Fig 3.1.1: Homepage of Micro, Week 1 (22/04/2025).
Purpose and Goals:
Fig 3.1.2: Introduction page, Week 1 (22/04/2025).
Micro is all-in-one tool for email, CRM, project management and more that automatically organizes itself. In their homepage there's a word "Organized" means that their main focus is to be organized so we don't have to be. In their introduction page, Micro purpose and goal is for us to focus on work not productivity by creating a platform that have everything in one place. Furthermore, their purpose is conveyed to the user through its organized looking website and the experience every time we scroll the page down.
Visual Design and layout:
On the first page, the background image made us think "why there is a nature background on the first page?", the minimalist layout with "organized" word as the emphasis attracts user to find out more about this website.
Fig 3.1.3: Transition to each page, Week 1 (22/04/2025).
Fig 3.1.4: Color use in the website, Week 1 (22/04/2025).
The transition between each page makes the visual design more interesting and eye-pleasing. To keep the simple and organized looks, they use 2 main colors, black and cream, with black shade at the start and cream towards the end of the page.
The visual images used on the website mostly showcase their application page, how it works, the benefits of using the app, and how easy it is to use. The use of sans serif typefaces adds a consistency for their minimal and organized looks. Each page also features its own emphasis, creates a strong visual hierarchy. However, some of the fonts are quite small and hard to read.
Functionality and Usability:
The overall usability for this website is straightforward, there are not many things to interact with. However, It is quite confusing because there's no arrow or navigation that shows how to go to the next page. In the homepage (refer to figure 3.1.1), there are two 'join the waitlist' buttons that I think are unnecessary because some people only see the top bar rather than the bottom.
Quality and Relevance:
The quality of the website is great, even though the design has a minimalist concept, it contains many different elements and transitions which makes the website look more interesting to look at. The elements are clear and relevant to the website's explanation. Although the first and the end image is not quite relevant but the overall website's appearance is good.
Performance:
Fig 3.1.5: Micro's screen display on mobile device, Week 1 (22/04/2025).
The Micro's site is compatible for mobile screen viewing. The site works smoothly on mobile device, but is quite lagging on desktop since the amount of elements used made the website heavy. However, the site works quite smooth on Google Chrome than on Safari. On the transition aspect, the site on mobile screen does not work the same like on desktop, some of the transition are gone. The interactive elements on mobile device are more limited than desktop, because they already shown the elements so we don't have to interact with it.
3.2 Web Analysis Report on Dayglow
Fig 3.2.1: Homepage of Dayglow, Week 1 (23/04/2025).
Purpose and Goals:
Fig 3.2.2: Dayglow's About Us, Week 1 (23/04/2025).
Dayglow is a leading consumer brands platform, including brands like Tovolo®, Spectrum®, and Rooted®. Their purpose is to help houseware brands struggle and create products that people actually want to buy. They are partners, builders, and operators for houseware brands to solve real problems and drive growth. The bright color background represent their quotes 'make life glow', creating a warm and welcoming atmosphere.
Visual Design and Layout:
Fig 3.2.3: Brands Introduction page, Week 1 (23/04/2025).
The website design layout is minimalistic, simple and there's not too much going on. The background color change for each brands introduction create a unique and different touch. The transition on the homepage (refer to figure 3.2.1), from website name to the website logo is brilliant. They mainly use simple and plain color for the website but use a vibrant color to highlight important information. The typographic elements position are well placed, it shows a strong hierarchy.
Functionality and Usability:
The usability of this website is straightforward and easy to use. The menu bar is easy to interact with and the animations help users identify which menu they choose when it is selected. There are many interactive elements, even the logo at the top of the website is interactive.
Quality and Relevance:
The elements used are simple, creating a comfortable user experience. The images used to represent each brands are relevant and easy to recognize the different. However, the quality of some images is slightly blurry.
Performance:
Fig 3.2.4: Dayglow's screen display on mobile device, Week 1 (23/04/2025).
The websites' performance on mobile devices is still compatible and functions without any issues. Since there are no significant interactive elements, the website's animation on mobile remain the same as on desktop. Both chrome and safari browsers run the website smoothly.
3.3 Web Analysis Report on Domfolio
Fig 3.3.1: Domfolio's homepage, Week 1 (23/04/2025).
Purpose and Goals:
Fig 3.3.2: Domfolio's Info and About page, Week 1 (23/04/2025).
Domfolio is a portfolio website of Dom, He uses it to showcase his work. Dom has built his carreer over 8 years in digital design, focusing on product and UX/UI. He is currently immersed in developing his home network, detaching his data from large corporations. With a background in photography, design, and coding, he consistently find ways to create multi sensory experiences, it is shown on his website through the many interactive elements that offer users unique and engaging experiences.
Visual Design and Layout:
The layout is very simple but unique. The use of black and white color creates a spacious and minimalistic concept. The fonts and background used are similar to 'minecraft', he bringing the game's aesthetic into the website. The site doesn't include many images or explanations.
Functionality and Usability:
The usability of the website is quite simple. However, the site has no navigation, which makes it a bit confusing to switch pages. The menu bar is hard to interact with and not easy to locate. Although users can see the difference when it's selected, the visual effect is somewhat dizzying. There are many interactive elements and users can zoom in and out.
Quality and Relevance:
There isn't much visual variety on the website, but the simplicity and minimalism are intentional and serve as the site's main qualities.
Performance:
Fig 3.3.3: Domfolio's screen display on mobile device, Week 1 (23/04/2025).
The site lags on mobile devices, but some interactive elements still work smoothly. The buttons respond slowly and take time to change. On desktop, the site has a lot of negative space, so the display on mobile has no big differences. The website works well in Chrome but is quite laggy in Safari, where the interactive elements respond more slowly than in Chrome.
3.4 Web Analysis Report on Pretty Patty
Fig 3.4.1: The homepage of Pretty Patty, Week 1 (23/04/2025).
Purpose and Goals:
Fig 3.4.2: Pretty Patty's About us, Week 1 (23/04/2025).
Pretty Patty was born out of the friendship between the owners. Their childhood memories of eating burgers are among their fondest. Their purpose is to provide a sense of escape that a burger can offer, along with the warmth and attentiveness of the staff. Their goal is to serve soul-warming smashburgers with a smile and to make a world a better place through food. Their website gives off the sense of happiness and welcome with its bright colors.
Visual Design and Layout:
The design of the website is easy to interact with, and the layout is very organized and simple. The elements used are not repetitive and always offer a fresh way to showcase their products. The color choices match their concept of being happy, warm, and welcoming. The sans-serif typography makes the website easier to read. The images used are all relevant to the accompanying explanations.
Functionality and Usability:
The overall functionality of this website is straightforward and user-friendly. It runs smoothly, with clear navigation that makes it easy for users to explore different sections. The interactive elements are placed in each submenus and within the product showcase. The transition between each pages are smooth and visually pleasing, providing a comfortable browsing experience.
Quality and Relevance:
The quality of the site is visually impressive and very clear. All of the content, particularly the imagery, is a high quality and professionally taken photographs. The visuals of the website enhance the overall aesthetic of the website. The consistent imagery use clearly reflects a professional appearance website.
Performance:
Fig 3.4.3: Pretty Patty's screen display on mobile device, Week 1 (23/04/2025).
The overall performance of the website is good, and it is fully compatible with mobile devices. It adapts well to smaller screens without disrupting the functionality or design. There are no noticeable issues when accessing the site through either Chrome and Safari. All interactive elements, including buttons, forms, and animations are running well.
3.5 Web Analysis Report on Pixel Loom
Fig 3.5.1: The homepage of Pixel Loom, Week 1 (23/04/2025).
Purpose and Goals:
Fig 3.5.2: Pixel Loom's About us, Week 1 (23/04/2025).
Pixel Loom is a web agency specializing in website creation. They combine their expertise in development, design, and marketing to create exceptional websites that not only look great but also performs well, aligning with their goals. Their website's design clearly reflects their field of expertise and the purpose of the agency.
Visual Design and Layout:
Fig 3.5.3: The transition on one page, Week 1 (24/04/2025).
The first page of the website immediately captures the user's attention to explore more about this website. This is achieved through their engaging animation on the brand name, which adds a good impression from the start. The layout is clean and simple, creates a minimalistic approach, yet it features smooth transitions that keep the browsing experience visually interesting. They use a very minimal color palette and easy-to-read typography, with no imagery included.
Functionality and Usability:
The usability of this website is straightforward—users can simply scroll down, and the transitions guide the experience. The interactive elements function well, even though there isn't much to interact with. When one of the menu bar is selected, the visual change makes it easy to differentiate the selected option.
Quality and Relevance:
This website offers a high-quality and simple platform to showcase their agency strength. By keeping the interface simple, it highlights their design and technical skill of creating an impactful user experience.
Performance:
Fig 3.5.4: Pixel Loom's screen display on mobile device, Week 1 (24/04/2025).
The overall performance of the website on mobile device is compatible. While it offers a slightly adjusted layout to fit the smaller screens better, but the structure of the design remain consistent with the desktop version. The website run smoothly on both browsers, no lagging and all the transition is good.
Feedback
During class, Mr. Shamsul gave us a brief explanation of how the module will be. He mentioned that it is actually one of the hardest modules due to the amount of coding involved. He also gave us an easy-to- understand explanation about HTML, CSS, and JavaScript to give us a heads-up on what we will be learning in this module.
Reflection
Experience
It was a fun experience to analyze websites. Even though along the way I struggle to find the strength or weaknesses of each website, but after I analyze one and two website, it becomes more easy for me to analyze the rest.
Observations
I've noticed that after doing this exercise, I become more interested to know how websites work and how it is effectively gain the user experience.
Findings
I gained a deeper understanding about how websites work and how effective design, functionality, and performance contribute to the overall user experience. The choose for color, layout, and typography also important to bring out the website identity and purpose.
Comments
Post a Comment