Interactive Design Exercise 1

Eric Chang (0378298)

Bachelor Of Design in Creative Media

Interactive Design

---

Instruction:

---

Lecture:

No Lecture

---

Task 1 Goal:

For task 1, We are told to choose 5 websites, and then we need to analyze those websites, Evaluate the website’s purpose, goals, and effective communication to users. Assess its visual design, including color, typography, and imagery. Consider its functionality, usability, navigation, forms, and interactive elements. Evaluate its content quality, relevance, accuracy, clarity, and organization. Lastly, assess its performance, including load times, responsiveness, and compatibility with devices and browsers.

Website 1: National Geographic Into the Amazon; Link

Click Here for a summary of this website

Fig 1.1, Loading Screen

The first website is National Geographic into the amazon, this website is a story telling website, according to the website they wanted to create a story telling website that has fact-based storytelling with cutting edge visuals and offers a powerful engaging narrative for everyone.

When I opened this website, I thought it was going to be good (because it’s National Geographic). However, there was a major performance flaw upon opening the website, and that is the slow-loading screen. 

This is a problem since not everyone has a fast internet connection (especially if the user is using a mobile connection and not using Wifi), the first time I opened this website was when I was in a cafe, and it took almost 30 seconds to open the website. However when I opened the website for the second time the loading time became shorter.

Fig 1.2: Website opened from Mac Vs iPhone

Upon reaching this point, at first glance i thought that there was some bug or something, because we can see that the mountain is not very detailed, however after opening this website from multiple devices, i realized that it is not a bug or a performance issue.

And after playing around with the website more, I think the website is good, however the website contains a lot of media and elements (mountains, and a lot of pictures), and it takes a lot of memory (RAM). 

Fig 1.3: Website Memory consumption

This is not good, especially with older devices that have limited amount of memory. and I think that it is useless to have a good website if some people cannot enjoy or even view every elements that's on the website. Next let's talk about the positive things that I found when playing around with the website.

Fig 1.4: The Little details

The first thing that I liked about this website is the little details that they put, First we can see that there is a depth effect that they put between the title and the mountain (yellow circle), and we can also see that there is a progress bar of the website (blue arrow) which makes navigation easier and not confusing. 

Fig 1.5: The different theme

Also, every part of the website has their own theme, typography, color palette. giving it a nice overall look and separation for each topic. also by giving each topic a different theme it helps the viewer to stay attracted to the website. Overall national geographic; into the amazon is a great storytelling website with a little bit a room for improvement.

Summary: 

😁 (Positive things):

• The designer of the website focuses on the small details which improves the overall designs.
• The website has different theme to help the viewer stay focused when viewing the website.
• The website contains a lot of picture, while this increase the memory consumption it helps the viewer understand the context better.
• The website successfully fulfills the purpose and goal, which is fact based storytelling with cutting edge visuals

😡 (Negative things):

• The website consumed a lot of memory, which may limit the number of audience that could enjoy the website.
• The mountains has no details at all, making 1 or 2 part of the website feels a bit off (because the other part has a lot of details).

Website 2: BBVA Open Innovation; Link 

Fig 2.1: Landing Page

The second website is BBVA's Open Innovation platform which is designed to foster collaboration between the bank and the fintech and startup ecosystems, Developed by the Spanish digital studio Dgrees, the platform serves as a central hub for BBVA's innovation initiatives, events, and partnerships.​

Upon opening the website, unlike the national geographic the website loading time is very fast and we are welcomed with a nice calming color palette which is blue, and blue is often associated with a feeling of peace. The website defaults to Spanish when we first opened it, however we can change the language from the top right corner. Unfortunately this is where I found the first flaw of the website.

Fig 2.2: First flaw

From the picture we can see that, there's part of the website which didn't get translated into English (yellow circle) , and at first I thought it was just a bug, but I tried it on my other devices and the results is still the same, Other than that I have found no other issue from this website.

Fig 2.3: Animation towards the end

There is a little bit of animation when we reach the end of the website (rounded corner), and I found that these little details improve the overall design of the website. Next I tried the contact page and about us page. 

Fig 2.4: Unbalanced Design

Here we can see that the design of this page is not balanced, because the font is too small, while on the right side there's a big blank tiles, the font that they used is also too skinny, from afar it looks like the font blends into the background. i think for the "About us" page they should've put the small description in the middle of the page, choosing a bigger font, and remove the blank tiles.

Fig 2.5: Memory usage

Next lets analyze the overall performance of the website. The website takes less than 200mb of memory, which is a major improvement over National Geographic website. The benefits? a faster loading time, less data is consumed to open the website and performance consistency across devices, even on older devices. lastly, scrolling through the website feels snappy without any stuttering. Overall I think that this website is a good website with a big call to action button that makes it easier to navigate

Summary:

😁 Positive Things:

• The website loading time is very fast
• The website takes less than 200Mb of memory making it feels light and snappy
• The website has a nice color palette

😡 Negative Things:

• Although the website can be changed into English there are some part of the website that didn't get translated
• Some part of the website has unnecessary elements such as blank tiles.
• Some part of the website has a small font which makes it harder to read, reducing the clarity of message that they are trying to tell their audience.

Website 3: Graphic Hunters; Link 

Fig 3.1: Opening animation

After analysing the first 2 website, I think that overall this is the best website, the loading screen when you open the website is entertaining and makes the loading time feels short. Also I noticed that we website designer put some small details, and that is a little crosshair on our cursor.

Now this website is a design studio, and after playing the website. there is no performance issue at all from this website, the scrolling feels smooth and the overall visual looks great with no major flaws. i think that the font size and style fits the theme.

Fig 3.2: Member introduction

Although everything about the website is great, I still found that this part (member introduction) part weird, that is because the member card also moves when we scroll, making it impossible to view all the members at the same time. I also noticed that there are a lot of small text which people (might) not read at all.

And I noticed that in this website there's a lot of moving elements, and while this is a good thing for some people. i found it to be uncomfortable, and might make you feel dizzy if you scroll too much on the website. Next, let's analyze the performance side of this website. The overall website takes less than 150 MB of memory, which is surprising considering that it has many elements. 

Fig 3.3: Memory Usage

Overall graphic hunters website is a good website, that's designed to promote a design studio. The typography, color palette, and the overall size of every elements looks nice and readable. the navigation is also simple because there's not that many button.

Summary:

😁 (Positive things):

• The font and typography selection looks nice the color also fits the theme.
• Every part of the website looks consistent
• The memory usage of the website is low, making it feels snappy without any lag.
• Navigation is easy and not confusing

😐(Things that could be improved):

• There are a lot of moving elements that may cause dizziness if you scroll too much
• During the member introduction part it's impossible to view all the members all at once.

Website 4: Dayglow

Fig 4.1: Dayglow Website

Dayglow is a U.S.-based consumer brands platform established in 1985. The company focuses on creating everyday products that stand out through bold design and unwavering quality. Now upon opening the website I loved the fact that they used some depth effect.

However upon playing around the website, I realized that even though the font that they picked for the website is nice, the images that they used are mid to low quality 

Fig 4.2: Product page

For example in this part of the website, we can see that the images are slightly low quality, although I think that this is nice (because the loading time will be fast) I still think that they should've used a higher quality images especially on the part that people are going to see the most (main page).

Next on the same image we can also see that the background that they chose are also weird. it's a little bit distracting (because the background is not a still image, rather a moving image), I think that they should've used a gradient color background to increase readability. 

Next, let's move on to the performance of the website, This website takes about 120 MB of memory, which is fine, considering that the website itself is very simple, with few moving elements. I tried opening the website on my phone and the loading time is also fast.

Fig 4.3 Dayglow memory usage

Overall, dayglow.com is a good website, although the font choice is more simple compared to the previous 3 website, but as long as the readability is still there and the navigation is easy as well, I can't say much.

Summary: 

😁 Positive things:

• The memory usage is not high, making the loading time faster
• Not a lot of moving elements 
• The navigation is easy and simple

😑 Things that could be improved:

• The images that they used are not high quality, they should've used a higher quality ones
• They should've used other fonts, to further increase their website quality

Website 5: Elimar by Vincent Van Gogh

Fig 5.1: Elimar by Vincent Van Gogh

This is the last website for this Task, Which is Elimar by vincent van Gogh, the purpose of this website is to tell the story of Vincent Van Gogh. So who is Vincent Van Gogh?,  He is a painter from Dutch born in 1853, and he became popular because of his style of painting which uses vibrant colors and expressive emotional style. one of his most popular painting is the "Starry Night", Sadly he struggled with mental health and financial difficulties and he died on 1890.

Now let's get back to analyzing the website, upon opening the website we are welcomed with the title of the website, which uses a big font making it easy to read. scrolling down a little bit will explain the purpose of the website and bring us to the story. 

Fig 5.2: Storytelling

What I love from this website is the fact that they always use a big font, which improves readability. I noticed that they also tried to explain his story in a short paragraph which is nice (because they can increase the font size).

Fig 5.2: Jumplinks

Another thing that I love from this website, is the fact that they put jumplinks on the left side of the website, this is pretty useful considering that this website is very long. and leaving or re-opening the website would bring you back to the opening screen. 

Lastly, I love the fact that this website uses dots for visual representation, this is quite creative, However, I found out that using dots to represent visuals means that there is lack of details. and even worse is that It consumed a lot of processing power.

We can see that the overall website takes about 430 MB of memory, however we can see that for the CPU it consumed 158% (On Activity Monitor). meaning this website consumed the most processing power out of the 5 website, even higher than National Geographic. Which means that this website is not friendly on older laptop. On the mobile version they removed the dots design and removed a lot of moving visuals

Overall this website is a really cool website, with a good choice of font style, size, and placement. This website also has a good feature (jumplinks), and a simple choice of colour. Sadly this website consumed a lot of processing power especially if the website is opened from a laptop.

😁 Positive things:

• The Concept is nice and it feels fresh, making the website looks nice
• The font and typography selection is nice and very readable
• The navigation is easy because there is a "jumplink"

😑 Things that could be improved:

• Although the concept is nice, the website consumed a lot of memory, which makes the loading time slower

Overall this was a good exercise, to give out the bigger picture of what we're going to do during this subject.