Interactive Design - Exercise 1

on

22.04.2025 - 29.04.2025 / Week 1 - Week 2

Brenda Wynn / 0372128

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

Exercise 1


JUMP LINKS

INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1i8Nqn3mcDaXXhlbcjumAXGjUUs0nOjvR/preview" width="640" height="480" allow="autoplay"></iframe>

EXERCISE 1 : WEBSITE ANALYSIS

We were assigned to analyze 5 different websites of our choice, including the weakness, strengths, users experience, and so on.

1. MATTER OF MIND


Figure 1.1 MOM website main page (27/04/25, week 1)

When I first entered the website (Figure 1.1), I noticed that every time I move my cursor. There will be unfolding images, which seems to be a compilation of their works. The logo is located at the top left corner and the name is at the top right corner. The big headings showed their purpose effectively and after scrolling down a bit they described their purpose which is to help brands be much more prominent compared to other brands and helps them improve from the minimum standards.

Figure 1.2 MOM website difference (27/04/25, week 1)

Personally I liked their visuals and layout, it is very minimalistic and modern. Their color palettes are a compilation of the colors I am fond of, so I liked it. I also noticed that the color of the heading changes every time I opened the website (Figure 1.2). Though I don't completely understand the purpose of using all those different colors when clicking their images that unveils the details to each of their achievements, because it does not match with the different colors they applied on the main page. The typefaces they used were easy to read and simple, which I appreciate. The way they display their imagery was very creative, in my opinion. However, I felt more of a homey vibe from the website's imagery. It doesn't give a modern vibe I felt when browsing.

Figure 1.3 MOM website interactive elements (27/04/25, week 1)

For the functionality of the website(Figure 1.3), I think that it is very simple and straight-forward. Though it does take a bit of time to load when opening their achievements details, which I found to be a bit difficult to identify because of the intricate choice of words. I also think that it is inefficient that every time I finished browsing an achievement and wanted to browse some more on other achievements, it leads me to the home page again. Making the users having to scroll down again. For the navigation, they only provided one button that immediately directs us to the contacts. Which I think is a bit inefficient, considering that there are several sections that can use an easier access to navigate too.

Figure 1.4 MOM website on smartphone (27/04/25, week 1)

The content that they included in the website was in connection with what they are branding. But, I realized that there were very limited interactive features in the website that can help users navigate through the website. I also checked the website using a smartphone (Figure 1.4) and the features were not out of place.

2. BACIBACI


Figure 1.5 BACIBACI website main page (27/04/25, week 1)

I was greeted with several unfolding donkey drawings when I first opened the website with some images of the products on the sides (Figure 1.5). The brand's name was displayed clearly in the middle of the menu bar. To fully understand their purpose, I had to read through the second and third page descriptions. From my perspective, the site is promoting and selling their beauty products that are made from donkey milk.

Figure 1.6 BACIBACI website pages (27/04/25, week 1)

The visuals the website implemented are very eye-catching, though not all the elements and images on all the pages works well together (Figure 1.6). The color palette feels very inconsistent, which is shown by the different colors and contrast differences on each page. The typeface choice they used are easy to read and matches their overall vibe. Their website gives of a bright and fun feel, which I think fits their website style and product.

Figure 1.7 BACIBACI website interactive elements (27/04/25, week 1)

The functionality of their website in terms of navigation is well designed, making it easy for the users to navigate through the website. They also have a lot of interactive elements that works well and helps convey the different kinds of information clearly (Figure 1.7). I also liked the way they lead the users through the website, the different types of tabs on the website is creative and invites the users to browse more. I also liked that they added feedbacks from customers on their website.

Figure 1.8 BACIBACI website on smartphone (27/04/25, week 1)

The content they compiled in the website is mostly relevant to the product, though there are some pictures that I don't think is needed or relevant to the products. I am also amazed on how well the website is responding through the interactive elements, it is very smooth. Lastly, I tried browsing the website on a smartphone (Figure 1.8). It works well, though it takes longer to load compared to the laptop.

3. THINK CREATIVE AGENCY


Figure 1.9 THINK CREATIVE AGENCY website main page (27/04/25, week 1)

My first impression of the website was a bit confusing (Figure 1.9), the main page was filled with different kinds of elements, making it hard for me to know where to start. Both the logo and name is located at the top left corner. The purpose of the website is allocated on the center of the home page, making it easy for users to understand. Their purpose in my perspective is solely focused on helping people with creative marketing and getting engagement.

Figure 1.10 THINK CREATIVE AGENCY website visuals (27/04/25, week 1)

The visual choices on this website in terms of the color choices is consistent and generally pleasing in the eye (Figure 1.10). However, the color palette crashes in contrast with the colors of the images used. This results on the unpleasant look in the eye. On the other hand, the typeface choices are great and easy to read. From my perspective, their imagery matches their purpose of helping people gain engagement and marketing.

Figure 1.11 THINK CREATIVE AGENCY website navigation and on smartphone (27/04/25, week 1)

In this website, the navigation is clear and complete. Considering the amount of interactive elements, I feel like it is a bit on the over side and it tends to load pretty slowly (Figure 1.11). The website is filled with the much-needed information for users and the content is relevant to what it is promoting. When the website is opened in a smartphone, it contains less images. But it is still a bit too much, considering the amount of time needed to scroll through the entire website. Neither the less, the website works completely fine in a smartphone and it fits the frame perfectly.

4. PROLIFIC DIGITAL


Figure 1.12 PROLIFIC DIGITAL website main page (27/04/25, week 1)

As soon as I opened the link, I noticed that the website left some space from both the right and left side (Figure 1.12). Leaving the rest of the space for the content. The placement of their brand name is at the top left corner. On the top part of the home page, when I move my cursor there will be unfolding images of their works. Though it is rather distracting, because it makes the users unable to focus on reading the content of that page. The purpose the website has can be found on the description on the home page, which is to help create experience-focused websites.

Figure 1.13 PROLIFIC DIGITAL website visuals (27/04/25, week 1)

The visual of the website is mostly pleasant in the eye, though there are some colors and elements that clashes with the rest of the atmosphere (Figure 1.13). The typeface option seems to be mostly the same as the two typefaces the website uses for their brand name. But, the choices for the typefaces are solid and easy to read. The overall vibe of the website is rather aesthetic and warm-toned.

Figure 1.14 PROLIFIC DIGITAL website navigation and on smartphone (27/04/25, week 1)

The navigation that is used in this website is very straight-forward, making it easier for users to access and understand (Figure 1.14). The different interactive elements are very well organized and easy to access. The amount of the interactive elements are moderate enough. The content heavily emphasizes their work and services, which helps promotes their services. However, compared to the other websites slow loading pace. This website is rather faster in both the navigation and interactive elements. When the website is opened using a smartphone, it works well and looks organized.

5. ANDREA DIEGO


Figure 1.15 ANDREA DIEGO website main page (27/04/25, week 1)

The website immediately gives off a feel that they work in the interior design industry, based on the website's main page (Figure 1.15). The brand name is placed in the center of the page, which will then move to the top left corner as you scroll through the other pages. How they made the transition from the full name to the logo, in my opinion is very impressive. The website also included their purpose on the lower left corner effectively.

Figure 1.16 ANDREA DIEGO website visuals (27/04/25, week 1)

As I scroll down to the second page, there is a compilation of videos that gives a sense of our own space (Figure 1.16). Which I interpreted as making their clients interior as close to the clients comfortable space. After the compilation of videos, I was greeted with the website's work principle. Which is followed by their projects and an image that best convey each of the project's outcome or vibe. The color choices for all the pages were well chosen, though some of their choices for the typeface makes it a bit hard to read. The way they showed their imagery was very creative and straight-forward.

Figure 1.17 ANDREA DIEGO website navigation and on smartphone (27/04/25, week 1)

The website also included well-made navigations, with easy access and responsive interactive elements (Figure 1.17). There is one part of the website, which I think distracts the overall visuals of that page. That is because I think that the small image to browse the other images was not needed. The content they included was very relevant to their purpose and work, showing the users what they put into their work and a short description about it. Out of all the website I browsed on, this website had the best responsive interactive elements and a good amount as well. As how the website looks on a smartphone, I do personally think the visuals looks much better and clearer. But, it takes a bit more time to load compared to a laptop. The type looks much better and readable to when opened on a smartphone. It fits nicely onto the screen, while still providing the same feel as it did on the laptop screen, 

REFLECTION

In this assignment, we were told to analyze 5 different websites based on their functionality, visuals, etc. Before this assignment, I was not aware of the different components that needs to be in a website for it to be easy to access for the users. I was actually quite shocked to know the little details that matters to the users experience when they browse a website. But even though I was a bit stunned, I did find this exercise to be quite eye-opening, interesting, and quite fun.

Starting the exercise was rather confusing at first. But once I got into the flow, I got a better understanding of it. I also noticed that I took a long time to start this exercise due to the fear of not being able to do the exercise properly. However, I am now trying to try and do things out of my comfort zone more. When I started this exercise, I noticed that there is a good amount of elements that increases the users experience. Because some of the websites I browsed on made it quite inefficient for me to browse.

After finishing this exercises, I now have a better understanding on the different components that I might need to look out for when I start doing the other projects in this module. Though after finishing this exercise, I noticed that I finished it in a good time manner. It was not too slow and not too fast either, and it was quite fun analyzing all the different components on each website. But if I could turn back time, I would encourage myself more to start this exercise sooner. Because I actually find it quite interesting and it made me want to learn about it more. For now, I will start by making myself more comfortable outside of my comfort zone first.

Comments

Post a Comment