Interactive Design | Exercise 1: Website Analysis

 21.04.2025 - 30.04.2025 (Week 1-2)

FEILYCIA JOY KURNIAWAN / 0373400 

Interactive Design / Bachelor of Design (Honors) in Creative Media 

Task 1 : Exercise  

---

TABLE OF CONTENTS

1. Lectures

2. Instruction

3. Exercise 1

4. Feedbacks

5. Reflection

---

LECTURES

---

INSTRUCTION

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

---

TASK 1

Exercise 1 brief :

• Chose 5 websites from the link provided
• Review and analyze the websites, take notes of it's design, layout, content and functionality
• Identify the + and -
• Summarize it min. 200 words for each website

1. https://sunmetalon.com/

Fig. 3.1 Homepage of Sun Metalon

Right off the bat, I was interested in this websites because of the cover. I love the color choices and the layout. When we get into the contents, I feel they adopted a very interesting content itself and they nicely showcase their innovative approach to sustainable metal recycling. 

This site effectively put their content so it is easy to navigate. Call to action buttons are clear and easy to spot. They also successfully communicated they vision, it is informative and the message is clear. The design is clean, modern and filled with different layouts to keep it interesting. And what I like most in this website is this section (Fig. 3.2.), at first I was a bit confused but when I scroll, pages on the right starts to appear which I find it a very interesting animation. 

Fig. 3.2. Scroll Section 

On the top left corner of the homepage (Fig. 3.1.), we can see the "Company" and "News" button. I assumed it is used as a shortcut to reach those content, but, I you scroll manually through the site, they are not there. So you need to click those two buttons to be able to see those content, which in my opinion is a little uneffective. As the function for a shortcut is great, I would prefer if they also include it without having to click the button. An additional case studies or a video showing a brief about the process also can be helpful for the viewers to visualize the product. 

2. https://zentry.com/

Fig. 3.3. Homepage of Zentry

Contrast with the last website, this site has a more striking visuals, colors and typography that catch the attention of the viewer's eyes. Upon opening the website, we are greeted with this amazing animation, and we can still see these different animations trough out the page. This website talks about the gaming ecosystem and redefining the gaming world. 

The visuals are incredible, animations and dynamic graphics shown in this website very much resembles the style in games which correlates with the topic. Attention to details that they added also is a great additional for the user's experience, in this website they added soundtrack and sound effects when you hoover around the buttons making it an immersive experience. 

Fig. 3.4. Sound Detail

I personally can find any flaw in this website, but since it is full with graphics and animations, it can affect the loading time on certain devices or may affect it's performance when used in poor connection. The navigation could be improved more by implementing a more straightforward menu layout and a clear call to action buttons. 

All in all, this website did an amazing job in delivering the visual and immersive aspect of it. But would be suggested to focus more on performance to enhance user engagement.

3. https://www.nationalgeographic.com/into-the-amazon/

Fig. 3.5. Homepage of Into the Amazon 

Fig. 3.6. Map feature

This "Into the Amazon" website offers an immersive experience through the story of a simple drop of water from the Andes to the Atlantic. 3D elements plays a big part in this website, creating a realistic like visuals and conveying the message clearly. The map feature (Fig. 3.6) is also a great part of this site, making it easy to navigate and having shortcuts if the user do not want to scroll all the way through

The transitions between scenes and periods are smooth and fun, when I analyze this site, it feels like I'm seeing it from a drone perspective. Interactive graphics, scientific facts and the narrative are informative and adds educational value to this site. Limited buttons are also shown in this website, only the map button on the top right corner and the progress bar on the left. 

Fig. 3.7. Loading page

Same as the last one, the heavy focus on the graphics makes this website takes a little time to load (Fig. 3.7). Not necessary but picking from the last website, an additional background sound would be suitable for this page. Making it a more immersive experience for the users. Call to action buttons can also be added here, could be links for donations or conservation efforts.

4. https://goosebumps.epic.net/

Fig. 3.8. Captain Goosebump Homepage

Unlike other websites I've reviewed, this one is a website of a game. Basically you just jump to reach these color balls to fill in the grey background into a colorful one. The graphics, vibrant colors and the animations are visually engaging.

The transition when you pop the colored balls and when that colors are integrated in the background is satisfying. The background sound and the sound effects are a nice touch, they use an upbeat music that matches well with the game. 

Fig. 3.9. The only instruction in the game

At first I thought I was not supposed to hit the colored balls since there is a lack of instruction, but I eventually figure it out. It would be nice if they incorporated more instructions (ex; what to hit and what to avoid) to make it more clear. I think it will also be a nice touch if they add something to avoid on the upper part of the map so that we can duck and not just jump. Making it harder as you go is also a good way to engage with the user (ex; make the chicken go faster as the game goes, and not go with the same speed all trough). I also realize that I don't want to replay this game, because there is only one level. Introducing new levels, challenges, or even new backgrounds could increase the games repeat visits.

5. https://elimar.lmigroupintl.com/

Fig. 3.10. Elimar Homepage

This website covers about the world known artist, Vincent Van Gogh (Van Gogh) and his paintings. Surprisingly considering "The Starry Night" by Van Gogh is his most famous work, they did not put their focus on this painting. They offer a mix of his background, storytelling, analysis in a visually appealing layouts and graphics. Focusing on the authentication of his painting, which can be a boring topic for some, but here they compelled it into an interesting way. 

Fig. 3.11. Stylized Illustrations

Fig. 3.12. Details

Just like some websites I have discussed, this site also has a nice additional touch of classical music playing in the background making it an immersive experience. The style they use (fig. 3.11) enhances the experience even more, they use this effect that reflects the site's thematic focus. I was amazed on how detailed the scientific analysis are. They cleverly broke down each piece and focus more on the details of each part (fig. 3.12.), giving it a more deeper understanding towards the art itself. 

I ran with the same troubles with some of the other websites I have discussed previously. Due the heavy graphics, it takes time to load completely. Adding more interactive features (ex; tap to reveal the painting, rather than scrolling trough for the painting details, we can tap/zoom on it then it will reveal the information) could make the experience more fun.

---

FEEDBACKS

No feedback was given.

---

REFLECTION

Initially I was not interested in web designs. I assumed these type of designs are boring and monotone. However during the exploration of this task, I was amazed by the quality.

I just realized how well put together websites and apps we use daily. Details on placements, layouts, emphasis, and graphics are intended to make it a better user experience. 

During my exploration of the websites, I was amazed by how the websites are made. Graphics, layouts, animations, transitions and even additional background sounds make it an unforgettable user experience. I am thrilled to explore more websites/apps and learn how to make it.