 |
| Fig. 1. Bobert 6B from The Amazing World of Gumball (S2 Ep14) |
INTERACTIVE DESIGN: EXERCISE 1
–––
23/09/2025 - 14/10/2025 (Week 1 - Week 4)
Irdhina binti
Mazli Sham (0366894)
Interactive Design - Bachelor of Design in
Creative Media - Taylors University
Exercise 1
TABLE OF CONTENTS:
- Lecture
- Exercise 1
- Reflection
EXERCISE 1
WEBSITE 1: Hatom
Created by: Hatom
Purpose / Goal:
This website showcases a liquidity hub name Hatom, which is used to forge a new financial frontier. It presents the five phases of Hatom from building synergistic DeFi primitives to expanding without borders.
Visual Design / Layout:
 |
| Fig. 2. HATOM loading screen |
 |
| Fig. 3. HATOM home screen |
The website starts with a loading screen followed by a white background and HATOM in bold capital letters.
 |
| Fig. 3. HATOM Phase 1 Screen |
Typography: A san-serif font was used throughout the whole website, which made it easier for users.
Colour: The colour palette, while pleasing, can be overwhelming at times as it changes from time to time with a click of a button.
Imagery: The imagery and interactive animation in this website plays a big part in the user experience. The interface changes colours when information is presented with a voiceover, which gives the website, and therefore company, a futuristic feeling.
Layout: The text arrangement is neat but when put with the interactive features and the multitude of elements/colours, it is overlooked.
Functionality / Usability:
Navigation: The call to action button was hard to see at first despite being at its usual position due to the overwhelming visuals. This could also be due to the button not being highlighted well enough to catch the user's eye other than being placed at the top of the website, similar to others.
Interactive Elements: This website uses mainly interactive animation to capture the attention of the user
Quality / Relevance:
Quality: The information provided was written in a concise manner and when paired with the voiceover, it is made easier to understand. Aside from the voiceover, additional written information is provided including what Hatom is, its goals and where to contact for enquiries.
Relevance: The website design and the content provided do not match up in terms of aesthetic. When I first opened Hatom, the first thing I thought of when seeing their interface was it would be related to games or design, which would be inaccurate. Additionally, it would cater to a niche audience due to the subject in hand.
Performance:
I could not get a website speed insight on this website.
Load Time: It is a heavy website that may lag if it was opened on a light device such as mobile.
Responsiveness and Compatibility: While the design itself was good, the overwhelming nature of it may disrupt the focus of the users on the information presented.
WEBSITE 2: 100 Lost Species
Created by: Immersive Garden x 60fps
Created by: Immersive Garden x 60fps
Purpose / Goals:
This website is used as a digital memorial for extinct species where users can explore the stories of different animals and the cause of their extinction. To demonstrate the information effectively while staying true to the theme of extinction and time, the creators used a gallery of artworks depicting the animals for the users to pick and choose within a time limit.
Visual Design / Layout:
 |
| Fig. 4. 100 Lost Species Home Screen |
When entering the website, the user is greeted with a brief description of what the website is about and upon clicking enter, the website takes the user straight to the gallery filled with artworks of different extinct species.
Typography: They tend to use different typefaces in a way that can be seen as confusing (ie. introduction page uses a serif font for body text but the information is presented in a san-serif font as its body text).
Colour: The website uses earthy tones with some blues and greens for the artworks, which may mimic old photos or paintings.
Imagery: Upon clicking on an artwork, the website shifts to display a bigger version of the animal alongside a description explaining the reason and factors behind its extinction. Additionally, the artworks presented have the style of a painting.
Layout: The website's layout and visual design overall fits the theme of extinction and limited time, especially when paired with the time limit set up where it leads the viewer to a list of organisations helping animal conservation when the timer is up.
Functionality / Usability:
Navigation: Its navigation system of filtering and organising the animals by either visual, name or extinction date makes it easier and more accessible for users as they can easily search for a specific animal they are interested in.
Interactive Elements: The use of an interactive gallery with photos of the animals helps users go through the list of animals while still knowing their respective appearance. Additionally, the user is given 100 seconds to look through the website before it closes to show resources for conservation efforts. This time limit may be used to depict the temporary nature of existence.
The information presented, while brief, gives a good opening to users for doing their own research on those animals if they were interested enough. This makes it suitable especially for those who are curious but unsure on where to start as this website may serve as an introduction to extinct species.
Performance:
Load Time:
 |
| Fig. 5. Website Performance Test – 100 Lost Species [Desktop] |
 |
| Fig. 6. Website Performance Test – 100 Lost Species [Mobile] |
Responsiveness and Compatibility:
While there is a version for mobile, it is better displayed on desktop or laptop due to the heavy elements which may be laggy on light devices.
Created by: Adam Mirek
Purpose / Goal:
 |
| Fig. 7. Adam Mirek Portfolio Home Page |
This website is a portfolio for Adam Mirek, a PhD in biochemical engineering graduate and a science communicator in Poland who shares his knowledge and interest through various medias such as social media and books. This portfolio showcases Mirek's achievements and news as well as future events with more information linked in each section.
Visual Design / Layout:
Typography: A mix of serif and san-serif fonts were used depending on the heading, subheading and body text.
Colour: A simple colour palette is used where an off white colour is used as the background, giving the whole website a nice and simple yet friendly look when combined with other elements.
Imaging: The portfolio uses interactive animation with fun and vibrant elements to showcase the personality of the person behind the portfolio.
Layout: Mirek's portfolio is organised with specific sections showcasing different items as well as labels on the news section for users to easily navigate themselves.
Functionality / Usability:
Navigation: The buttons are all filled in with colours, which makes them easier to identify. Additionally, the website uses filters specifically on the news and events section to allow users to easily find the information needed.
 |
| Fig. 8. Interactive Animation of Home Page |
Interactive Elements: An interesting element that, while serves little purpose in terms of presenting information, may capture the eye of potential users. Mirek uses a mouse-tracking animation on the face, which is the first thing that would be seen by users as shown above.
Quality / Relevance:
Quality: The information displayed is concise and straight to the point. This, paired with more information linked to buttons displayed helps create a smooth experience for clients to go through as they would not need to look so hard for more information regarding Mirek's work.
Relevance: Since this website is used as a portfolio, it would cater to a niche audience who would be interested in Mirek's work.
Performance:
 |
| Fig. 9. Website Performance Test – Adam Mirek Portfolio [Desktop] |
 |
| Fig. 10. Website Performance Test – Adam Mirek Portfolio [Mobile] |
Load Time: The portfolio overall has a decent performance level, especially when presented on desktop/laptop where the interactive animation is optimised.
Responsiveness and Compatibility: The portfolio overall is easy to navigate with most of the info needed being on only one page. The interactive buttons and animations add a fun bonus to the experience, especially the mouse-tracking face animation which is eye-catching. It is also compatible on mobile as shown in the report above which displays a decent performance level, although the mobile version does need improvement.
WEBSITE 4: Persepolis
Created by: Getty
Purpose / Goal:
This website is a collaboration between historians, creatives and technologists. It is based on the exhibition from the Getty Villa Museum, Persia: Ancient Iran and the Classical World. It features a 3D layout of Persepolis that can be explored by the user as if they were walking through the doors of Persepolis.
Visual Design / Layout:
Typography: The typography used is readable alongside the text colour chosen.
Colours: The colours used are mostly earth-toned to match the 3D visual of the capital.
Imaging: The imagery presented in this website is a strong point as it uses visual storytelling to relay information regarding Persepolis' history. Alongside the 3D visuals of Persepolis in its prime years, certain areas are also accompanied by the current versions of those infrastructures, which allows the users to observe the drastic flow of time and the effects it had on the capital.
Layout: In terms of text information, the website provides an overall set placement for heading, subheadings and body text using grids.
Functionality / Usability:
Navigation:
 |
| Fig. 11. Persepolis Navigation – Explore |
 |
| Fig. 12. Persepolis Navigation – Art Index |
Rather than going through the entire journey of Persepolis, users are given the choice to choose a specific section to experience if needed. The buttons are also clearly displayed with a circular border that turns into a solid colour when hovered or clicked on. Additionally, the website allows you to be given more information regarding a topic with a press of the "read more" button. This allows for a smoother journey where it would not disrupt the experience of those who only want brief descriptions on the topic rather than longer explanation while still satisfying the curiosity of other users.
Interactive Elements:
 |
| Fig. 13. Persepolis Interactive AR Feature |
The augmented reality element alongside the feature of allowing users to see the present version of the structures, in my opinion, play a big part in what makes this website unique.
Quality / Relevance:
Quality: The information is presented in an elaborate but easy-to-understand manner as a lot of the text are given alongside visuals, whether it be the 3D models or photos of the real life artefacts.
Relevance: This website caters to a niche audience since it touches on the history of an old capital in the Achaemenid Empire. However, I do feel like it may attract more users due to the experience of the website itself.
Performance:
I could not get a website speed insight report on this website.
It is overall an interesting website with a unique interface that allows users to explore the interface as they go along as if they were in a game. However, due to the graphics and effects used to create this experience, the website might not work as well on a slower or older device.
Load Time: On laptop, the website loads quite smoothly although it may get stuck on certain parts due to the heavy visuals.
Responsiveness and Compatibility: This website is best use on a desktop or laptop rather than mobile.
WEBSITE 5: Mantis
Created by: Mantis
Purpose / Goal:
This website is used for a design company's portfolio where information such as the company's projects and history are displayed. They specialise in various projects including branding and experiential. The use of mantids and relating the insect back to their vision creates a clever idea of relating Mantis to its namesake.
Visual Design / Layout:
Typography: A san-serif font was used for most of the contents in the website including heading, subheading and body text.
Colour: The website has a simple colour palette with a white background, which makes it easy to navigate since it has little to no eye-straining colours.
Imaging: They also use visuals that come and go as the users scroll down the interface, which adds a nice touch befitting the purpose of the website.
Layout: The text is displayed in an organised manner based on grids.
Functionality / Usability:
Navigation: The call to action buttons are placed at the top of the website, similar to other websites, which helps in user experience. However, the buttons were only displayed as words with no borders or indication that they act as buttons unless the user hovers over them, which would make it inconvenient.
Interactive Elements: The interactive buttons and visuals give an additional bonus to the overall website as the animation can capture the eye of the user.
Quality / Relevance:
Quality:
 |
| Fig. 14. Mantis Page |
The website does not go straight to long information, instead the user is greeted by bold phrases with a 3D scribbled figure that rotates as they scroll down, giving an indication as to what the company is hoping to achieve. The information presented is easy to understand as they have a good use of the language accompanied by graphics to better visualise their points.
Relevance: Mantis as a company is quite flexible based on the projects showcased, which can make them, and therefore the website, be applicable to a wider audience, especially those who manage events and projects.
Performance:
 |
| Fig. 15. Website Performance Test – Mantis [Mobile] |
 |
| Fig. 16. Website Performance Test – Mantis [Desktop] |
Load Time: The website overall runs smoothly on laptop despite having heavy visuals. Additionally, they had an interesting loading screen that stretches throughout the whole screen horizontally, which also ran smoothly. However, it does not run as smoothly on mobile as seen in the report above.
Responsiveness and Compatibility: Due to the interactive animations, it would be more compatible on desktop/laptop rather than mobile which may cause lag.
FEEDBACK
REFLECTION
Comments
Post a Comment