21.04.2025 - 29.05.2025 / Week 1-Week 2
Chika Clarissa Widjaja / 0378636
Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Exercise 1:Website Analysis
TABLE OF CONTENTS
- INSTRUCTIONS
- TASK
- FEEDBACK
- REFLECTION
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/16IkoMiIbbtlHzVGN1GHzH0TBH-p65FHB/preview" width="640" height="480" allow="autoplay"></iframe>
TASK
These are the five websites I chose from the link given.
5. http://www.deepbeautykikomilano.com/en/transfigurations/
NOTE: The numbers beside the texts is a guide that correlate to the images that are present below.
Website 1: Iconixx Media – https://iconixxmedia.com
When I first opened the Iconixx Media website, the purpose was immediately clear. It’s a creative content studio, and that’s shown right away on the homepage. (1) I liked that it gets straight to the point and sets a clear tone. One thing I noticed is there’s a “play video” button on the homepage, but when I clicked it, nothing happened. (2) That was a bit disappointing because I think it’s meant to help introduce what the studio does in a more engaging way. If it worked, it probably would’ve made the homepage stronger.
As I scrolled down, the website had smooth and subtle animations where images and text slide or pop in, which adds some nice movement without being too much. The navigation is simple and easy to use, the sticky menu bar stays at the top, which makes it easy to jump to different sections. I also noticed they do a good job emphasizing clickable buttons by using a pink box around them, which really helps guide the user. (3) For example, at the very bottom of the site, there’s a fun little section that says “This is Herbert. He likes to dance. Help a guy out and click the button." (4) Followed with more information about the brand (address, phone number, email). It’s playful and makes the brand feel more personal and less corporate.
Design-wise however, the color palette feels really inconsistent. I saw orange, pink, white, and red all used across different parts of the site, and it didn’t really feel like they belonged together. (5) It might work better if they stuck to one or two main colors to help make the brand identity clearer and make the site feel more put together. The typography is readable and modern, and the layout overall feels creative but could benefit from some more structure in terms of visual.
The content is clear and not overwhelming, and I think they did a good job balancing images with short text sections. Everything loads quickly, and the animations don’t lag, which helps with overall performance. It also worked fine when I viewed it on both a desktop and mobile.
Website 2: Sun Metalon – https://sunmetalon.com
Sun Metalon’s website makes its purpose super clear right from the start. The homepage has a strong opening line that says “Turn your metal waste into revenue,” (1) which immediately tells the user what the company is about. I think that’s really effective because it sets the direction for the whole site. They also included a small language toggle in the top corner where you can switch between English and Chinese, (2) which is a great way to reach more users and show that the site is accessible to different audiences.
Design wise, the site sticks to a consistent brown and neutral color palette, which gives it a clean and professional look. It’s not super flashy, but it works well for the kind of business they’re in. The typography is clear and readable, and the layout feels really organized. There’s plenty of white space so nothing feels too crowded. A bit below the homepage, there’s a section that briefly explains the company’s purpose and has a “Contact Us” button right below. (3) I thought that was a nice touch because it gives you info first, then gives you the option to take action without being pushy.
One small issue I noticed is that the scrolling feels a bit off. It’s like the sensitivity is low or something. It doesn’t ruin the experience, but it’s just not as smooth as it could be. That said, there are some cool interactive features throughout the site. For example, when you scroll, the previous text or section fades or shifts out in a nice way. Also, when you hover your mouse over buttons or icons, there are little animations or color changes. It’s subtle but adds a bit of polish and makes the site feel more modern.
At the bottom of the page, there’s a sign up form asking for user info. I thought that placement made sense because after reading about the company, users are probably more ready to engage. It shows a good sense of hierarchy and flow.
Fig 1.2 Website 2 Reference Examples
Website 3: Osaodiase – https://www.osaodiase.com
When I first landed on the Osaodiase website, I found it a bit confusing. The purpose of the site isn’t very obvious right away, which makes it hard for a new user to understand what the website is about. (1) There’s a section called “Connect” that leads to a sign up page, (2) and while that button is easy to find and works fine, the rest of the site feels incomplete. For example, when I clicked on the “Observatory” button in the navigation bar, it just said “Coming Soon.” (3) That kind of makes it seem like the website isn’t fully ready yet.
Design wise, the site doesn’t really look modern. The overall layout is pretty plain, and it doesn’t have much visual balance. One thing that really stood out to me in a bad way is the typography. There’s a glow effect on the purple text that looks tacky and kind of outdated. (4) It doesn’t match the clean or professional vibe that most sites aim for. The font choice also doesn’t feel very readable, especially with the shadow effect behind the letters.
There also isn’t a lot of content. The pages are very minimal, and while that could be intentional, it ends up feeling more like there’s something missing. There aren’t many interactive elements or animations, and there’s nothing that really pulls the user in. If the goal was to keep it simple, that’s fine, but in this case, it feels more like the site hasn’t been fully built out yet.
Functionality wise, there’s nothing that’s broken, but there’s just not much to engage with either. The lack of features, content, and visuals makes the site feel a bit unfinished. It’s not very responsive or interesting to explore, which kind of defeats the purpose of having a personal or portfolio site. But on the plus side, there’s nothing broken, and all the links I clicked on actually worked, which is more than I can say for some other sites.
Fig 1.3 Website 3 Reference Examples
Website 4: DuChâteau – https://www.duchateau.com
DuChâteau’s website makes a really strong first impression. As soon as the page loads, the brand name takes center stage in large typography, (1) which immediately sets the tone for a sleek and modern experience. The homepage is minimalistic but effective, and the layout feels very clean and organized. The navigation is super straightforward too. There’s a menu bar at the top, and one of the best features is the jump link that takes you directly to the furniture section without needing to scroll too much. (2) That kind of shortcut is helpful and shows they’re thinking about user convenience.
The design is very consistent and elegant. It sticks to a mostly neutral color palette: black, white, and some soft greys, which matches well with the brand’s high-end vibe. The typography is stylish and sharp, and overall, it feels like a premium website. One thing I liked is that when you hover your mouse over a button or link, a thin underline animation appears with a small movement. It’s subtle, but it makes the site feel more dynamic and polished without being too flashy. (3)
From a usability point of view, everything works really smoothly. The site is responsive and loads fast, and the animations are light enough that they don’t affect performance. I tried it on both desktop and mobile, and both versions were easy to use and didn’t feel cluttered. The spacing and layout also help with readability. It never feels like too much text or images at once.
The content is well organized and fits the luxury tone of the brand. Product pages are clean, with high quality images and clear descriptions. You can tell they really focused on the visual side, which makes sense for a company that’s about interior style and aesthetics. (4) I think they could add more interactive features like product filters or more storytelling around the design collections to make it more engaging. But overall, it works well and feels polished.
Fig 1.4 Website 4 Reference Examples
Website 5: Deep Beauty - http://www.deepbeautykikomilano.com/en/transfigurations/
This website honestly has one of the coolest and most creative designs out of all five. The homepage is super minimal and clean, which actually works really well because it keeps the user from getting overwhelmed. One of the first things I noticed is the interactive background that follows your mouse movement. (1) It’s a small detail, but it immediately makes the site feel more alive and immersive. There’s also a subtle background sound that plays, which adds to the overall experience without being too distracting. You can switch between Italian and English in the top left corner, which is useful for making the site more accessible to a wider audience. (2)
The main highlight of the site is definitely the “Transfigurations” section, which is basically an interactive digital art gallery. There’s a clear instruction that tells the user to scroll to explore, which is really helpful because it removes any confusion about how to navigate. (3) As you scroll, it feels like you’re walking through an actual gallery. Each artwork is spaced out like it's hung on a wall, and when you click on one, it zooms in and gives a detailed description. (4) That interaction is really smooth and makes the user feel like they’re part of the experience. Also, as you move through different sections, the background color changes and the music shifts, which I think is to keep the users engaged and not bored.
The design uses simple fonts that are very readable, and the layout stays consistent throughout the gallery. There aren’t too many colors clashing or anything, and the whole site sticks to a calm and artistic theme that fits the project really well. The navigation is clear, and there’s not much risk of getting lost since the site structure is pretty linear.
One downside is that in the “About Us” section, when you click the voice note, the voice sounds like an AI-generated voice. (5) It’s a bit monotone and kind of takes away from the otherwise engaging and thoughtful experience. I think if they used a real human voice, it would match the artistic vibe much better and feel more emotional or personal.
Overall, this website is super creative in how it uses design, audio, and interaction to make the user feel part of the space. It’s different from a normal website in a good way, and it’s memorable because of how interactive it is.
Fig 1.5 Website 5 Reference Examples
FEEDBACKS
REFLECTION
After analyzing five websites, I realized there’s so much more to web design than I thought. At first, I just looked at whether a site looked nice, but this exercise really pushed me to pay attention to the layout, color palette, fonts, animations, and how easy it is to actually use the site. I started noticing how important it is for a website to guide the user clearly, be organized, and work smoothly across different devices.
The Deep Beauty website especially stood out to me. I honestly didn’t even know websites could be that creative or immersive. I never thought you could have a full digital art gallery online with music, animations, and interactive features. It opened my eyes to how far you can go with web design and how it can become more of an experience than just a page with info.
Doing this kind of deep analysis helped me understand what works and what doesn’t, and it’s going to be super helpful for my next project, which is designing my own website. Now I have a better sense of what I should focus on, like making sure the purpose is clear, keeping the design consistent, and making sure it’s user friendly. I feel like I’m more prepared to think like a user, not just a designer, and that’s something I wouldn’t have picked up just by looking at websites casually.
Comments
Post a Comment