Interactive Design - Exercises
22/04/2025 - 27/05/2025 / Week 1 - Week 6
Aquela Zefanya Soares / 0374377
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
TABLE OF CONTENTS
INSTRUCTION
EXERCISES
Exercise 1: Web Analysis
For this task, we are required to analyze five websites.
Website 1 - Altitude
Link: Altitude — AI for Finance Complex Decisions Made Simple
Introduction: Altitude is an AI platform for finance made by Terry Emeigh and Blake Woodford. This platform was founded in 2023, NYC.
Analysis:
Purpose and Goals:
Visual and layout:
When I visited this website, I was presented with a beautiful wave visual. The interface is clear, it's easy for users, especially me to spot the navigation. This website uses a simple color palette such as blue, white, and black. This website applied color psychology, according to Banking+ (2024), "Blue is commonly used by banks and financial services, blue conveys trust, stability, and professionalism. It’s no wonder why it’s the most popular color in the financial industry." This website uses a sans-serif typeface, which in my opinion, enhances clarity and readability. I found the layout in this website straightforward, with no overly complicated instructions. Overall, the website maintains a simplistic and modern visual design.
Functionality and usability:
As I mentioned before, this website is easy to navigate. The navigation bar is straightforward for both laptops and phones (refer to Fig 1.2). The buttons all work with animation (only for laptops and tablets), no dead links or images, everything works perfectly.
However, there's no instruction to scroll on the home page. At first, I didn't know that I could scroll through the first page, but since there's an "explore features" button, I don't it's a major problem.
Starting on the second page, I had a little difficulty since as I mentioned before I didn't know that on my laptop, I could scroll the website. Until I read the whole page properly, I found that there was an instruction to scroll the page (Refer to Fig 1.3). Since the text is small, I wish that they would underline it so I can look at the instructions first. However, I don't encounter the same problem on my phone since the instructions are clear and it's quite obvious that I need to scroll down the page in order for me to explore this website.
Also, because of the animation, it felt a little heavy when I tried to scroll the website page. However, this problem doesn't apply to phones since they don't have the animation there.
Quality and performance:
The design of this website is well thought out. The color scheme and the choice of sans-serif typeface enhance the feel of modern and minimalist, so they don't overwhelm the users.
The layout is also well-placed. As I scrolled, I could see how the information was presented in order.
The website loads quickly on both laptops and phones. I found that this website adapts well on both laptop and mobile devices with minimal differences. All buttons on both devices are responsive. However, it's a little hard for me to scroll on the laptop because of the animation. Nonetheless, I don't think the website itself is laggy.
As I mentioned before, I found that the animation is missing on the mobile version. Even though there's no animation, I found my experience on the phone more pleasing than the one on my laptop simply because I felt the scrolling was much better. However, I still would prefer the visual on the laptop because of the animation.
Website 2 - J-VERS
Link: J-VERS homepage
Introduction: J-VERS is a company that helps businesses display job ads to the right people using smart technology. Its website showcases the company's work. The website itself was designed by a Ukrainian design company called Obys.
Analysis:
Purpose and Goals:
Visual and layout:
When I visited this website, I was presented with a moving planet. However, although it's still moving, the planet seems to be cropped on mobile devices. The interface is clear, it's easy for users to spot the navigation bar.
The J-VERS website uses a light color scheme such as lilac, white, dark blue, gray, and black. It enhances the sense of playful and creative vibes. This website uses a sans-serif typeface, which in my opinion, enhances clarity and readability. I felt like this website was memorable, since personally, I like how fun it is to scroll and see the animation for each page.
The layout is clear, no over-complicated instructions. Every letter is clear and the white-spaces are enough. Overall, the website maintains a fun and visually engaging visual design.
Functionality and usability:
As I mentioned before, this website is easy to navigate. The navigation bar is straightforward for laptops and smartphones (refer to Fig 2.2). The buttons work perfectly, with no dead links or images.
There's an instruction at the bottom of the page to scroll down so I know how to interact with the website. All the animation works perfectly, even though it makes the website a little laggy.
I tried the German version and the website still works perfectly just like the English version. Though I don't know whether the translation is accurate, the animation still works perfectly on both devices. It's a good feature.
Quality and performance:
The design of this website is well thought out. The color scheme and the choice of sans-serif typeface enhance the feel of playful and creative vibes, so they don't overwhelm the users.
The layout is also well-placed. As I scrolled, I could see how the information was presented in order.
The website loads quickly on both laptops and phones. All buttons on both devices are responsive. However, the animation is heavy on both devices. I tried to scroll down and they worked okay but once I scrolled up the animation lagged, sometimes it didn't even scroll at all.
Both devices also have the same animation. However, the homepage screen animation/video was cropped for the mobile version. Even so, it's not a big issue and doesn't hinder the experience.
Website 3 - BlueYard Capital
Link: BlueYard Capital - blueyard.com
Introduction: BlueYard Capital is a venture capital firm founded in 2016 by Ciarán O'Leary and Jason Whitmire in Berlin, Germany. This website was made to showcase all their successful investments and company information. It was designed by a creative agency called Everland.
Analysis:
Purpose and Goals:
The purpose of this website is to showcase the firm's successful investments and provide information about the company itself. The website is designed to attract potential partners, clients, and investors by presenting the firm's achievements and expertise in the field of early-stage investment.
Visual and layout:
When I visited this website, I was presented with a glittery ball-planet. The interface is clear, it's easy for users to spot the navigation. This website uses a colorful color palette such as orange, red, white, yellow, blue, purple, green, and black to display a different theme/kind of investments they did.
This website uses a sans-serif typeface, which in my opinion, enhances clarity and readability. I found the layout of this website straightforward, with no overly complicated instructions. Overall, the website maintains a simplistic yet playful and modern visual design.
Functionality and usability:
As I mentioned earlier, this website is easy to navigate. The navigation bar is straightforward for laptops and phones (refer to Fig 3.2). The buttons all work properly, with no dead links or images.
The animations for both devices are really good. The glittery ball-planets are interactive and responsive with no lag at all. I tried to scroll really fast on both devices and everything works perfectly. However, there is no instruction to scroll on the home page. I thought there would be a morphing transition first, nevertheless after waiting for about ten seconds I realized that I needed to scroll so it's not much of a problem.
I wish they would put a small text indicating that we can play around with the glittery ball-planet. I was too focused on scrolling and reading the contents and just realized that I could play around when tried it out on my phone. While I understand that it's not relevant to the information displayed, It would be a waste to let good interactive designs get ignored.
Quality and performance:
The design of this website is well thought out. The color scheme and the choice of sans-serif typeface enhance the feel of simplistic but playful and creative, so they don't overwhelm the users.
The layout is also well-placed. As I scrolled, I could see how the
information was presented in order.
The website loads quickly on both
laptops and phones. All buttons on both devices are responsive. Both
devices have the same animations and the animations were all interactive
and not laggy at all, even when I scrolled fast it's still responsive.
It would be great if there's an indicator for audiences to scroll or play around with the features. Nevertheless, it doesn't ruin any experience since everything is smooth and well-arranged.
Website 4 - The Blue Desert
Link: The Blue Desert
Introduction: The Blue Desert is an immersive and interactive web created by Adoratorio, a creative studio based in Italy. The project was launched as an experimental platform to transform traditional global impact reports into engaging narrative digital experiences.
Analysis:
Purpose and Goals:
Visual and layout:
When I visited this website, I was presented with a typical game main menu interface. However, when I first tried it on my phone, it said that I needed to tilt the phone. The interface is much shorter but not cropped, however, it's to be expected since it was made for desktops.
The background is moving away from where I move the cursor. I had a good time playing with it before starting the immersive and interactive story. However, this interaction only works on desktops or laptops. This website uses a deep-toned nature-themed color palette to add an immersive feeling.
The drawing and animation on this website are well-prepared. Every chapter has its own theme for climate change, and the information was added in a fun way for audiences to interact. The storytelling theme with the background sound effects really adds to the experience.
This website uses a sans-serif typeface, which in my opinion, enhances clarity and readability. I found the layout of this website straightforward, with no overly complicated instructions. Overall, the website maintains a mystical, adventurous, and immersive visual design.
Functionality and usability:
As I mentioned earlier, this website is easy to navigate. The navigation bar is straightforward for laptops and phones (refer to Fig 4.3). The buttons all work properly, with no dead links or images.
The animation for both devices is really good. Almost every object is interactive and responsive with no lag at all. There are a lot of buttons that indicate the objects are interactive. I love that they have sound effects for every interactive object.
This is the chapter indicator to know what chapter you are currently in. I love exploring the features on the website and I eventually realized this function. It doesn't bother the experience at all, as I just realized this feature when I explored the interface.
While everything is working fine, I wish they would put a clearer instruction to scroll the page. At this point, I'm already used to scrolling every website.
However, others might have difficulty seeing as the text color blends with the background. It would be better if they made the text color brighter so users could spot it right away. Nevertheless, it didn't bother me at all as I enjoyed the whole experience.
Quality and performance:
The design of this website is well thought out. The color scheme and the choice of sans-serif typeface enhance the feel of mystical, adventurous, and immersive, so they don't overwhelm the users.
The layout is also well-placed. As I scrolled, I could see how the information was presented in order. The website loads quickly on both laptops and phones. All buttons on both devices are responsive. Both devices have the same animations, the only difference is on the main menu background.
This website relies on heavy animation and is interactive. The quality of the sound effects and the drawing for each scene are top-tier. However, they slightly reduce the image quality on mobile devices, which is to be expected to ensure a smooth experience. It's not a big problem for me as the picture is not that pixelated.
Even though there are lots of interactive objects and animations, the website doesn't lag at all. I tried on both devices and I have a smooth experience. However, the temperature on my devices went high. It requires a lot of GPU/CPU work, and again I don't really mind it as long as I'm able to enjoy the whole process.
Website 5 - Nite Riot
Link: Nite Riot
Introduction: Nite Riot is a creative studio specializing in brand storytelling, visual identity, and website creation. Their website showcases their projects and style. This website was designed by BL/S® (Blacklead Studio), a creative agency based in Ukraine, and developed by V&M.
Analysis:
Purpose and Goals:
The purpose of the Nite Riot website is to showcase the studio’s creative projects and branding services. Their goal is to attract clients who want bold, energetic, and rebellious visual identities.
Visual and layout:
When I visited this website, I was presented with a landing page that consisted of their projects and their creative team. However, it was really fast so I can really see the content.
This website uses a simple and minimalistic color palette such as black, white, and gray. The website uses a sans-serif typeface, which in my opinion, enhances clarity and readability. I found the layout of this website straightforward, with no overly complicated instructions. Overall, the website maintains a minimalistic yet professional and modern visual design.
Functionality and usability:
As I mentioned earlier, this website is easy to navigate. The navigation bar is straightforward for laptops and phones (refer to Fig 5.3). The buttons all work properly, with no dead links or images.
The animation is missing on the mobile devices. However it's to be expected since the animation relies on the cursor, which something that smartphones don't have. The minimalistic layout makes it easier for me to understand the what the creators intended for this website.
Quality and performance:
The design of this website is well thought out. The color scheme and the choice of sans-serif typeface enhance the feel of simplistic and minimalistic but maintain professional settings, so they don't overwhelm the users.
The layout is also well-placed. As I explored, I could see how the information was presented in order. The experience on both devices was smooth, and there was no lag.
Exercise 2: Web Replication
For this task, we are required to replicate two websites.
Website 1 - Taaj
Link: https://taajkitchens.co.uk/
Introduction: Taaj Kitchens is a company in the UK that designs and builds custom luxury kitchens. They help with planning and choosing materials to installing the final kitchen. Their goal is to create stylish and practical spaces that fit your home and lifestyle.
Process:
Final:
.png)
Website 2 - McAlpine
Link: https://mcalpinehouse.com/
Introduction: McAlpine House is a design company in the USA that makes special custom homes. They mix old and modern styles to create warm and beautiful spaces. Their houses feel cozy, elegant, and full of character.
Process:
Final:
Comments
Post a Comment