Interactive Design - Exercise 1
JUMPLINKS
LECTURES
Usability refers how to effectively or successfully a user can use a product or design in a certain situation. It depends on how well it accommodate users needs.
Principles of Usability
Consistency is a key factor in web design for both visual elements and functionality. It ensures website to look coherent and works across different elements.
Simplicity is used to refer to the need to minimize the number of steps involved in a process, to make it as obvious as possible, and to make it harder to make mistakes.
Visibility is when an element is visible which makes users understand how to use them.
Feedback communicates the results of any interaction, which makes it visible and understandable. Its job is to give user a signal that they have succeeded or failed at performing a task
Error Prevention involves alerting a user when they're making an error, with the intention for them to do what they're doing without making any mistake.
INSTRUCTIONS
PROJECTS
On week 1, we were told to pick 5 websites from the links provided by Mr. Shamsul before examining the 5 chosen websites. We need to analyze the intentions and goals, visual design while also evaluate the functionality and the quality of the website as a whole.
To open the websites below, please click on the title of the website.
1. Practice for Atlasology and Naturopathy
 |
| Fig. 3.1, Website homepage, (22/04/25) |
Purpose & Goals
This site is made for promoting what has written on the title, the practice for atlasology and naturopathy by Leandra Isler. It mentions some important details like their services and what differentiate her services/treatments from the others neatly, which makes the information delivered smoothly and organized pretty well.
.png) |
| Fig. 3.2, Some of the website contents, (22/04/25) |
Visual Design & Layout
Starting from the top, I really like how the heading looks. It instantly draws the attention of readers by putting the text apart with each other to emphasize the herb plant on the middle. This website has a lot of brown, green and cream tones which sets the theme for this site. The navigation menu and logo is also structured very neatly, not drawing too much attention but also make it clear enough for people to notice. The looks is very modern and minimalistic since the fonts used are sans-serif which definitely helps on creating a simple yet elegant look on the layout.
The website itself is interactive as it added video that follows the movement of the mouse wheel which I find very unique, such as the rotating herb plant and the lady on the bottom. Although, personally I think the lady staring on the camera look a little unsettling since it feels like she is staring into readers soul, haha.
.png) |
| Fig. 3.3, Interactive videos on the website, (22/04/25) |
Quality & Performance
For the performance, I would say it is pretty responsive despite the amount of interactive elements available within. Scrolling through this website feels somewhat like a fun journey with the amount of movement and eye candy available throughout the website. I can also safely say the same with its performance on mobile even when I am using my old mobile phone.
.png) |
| Fig. 3.4, The website on mobile, (22/04/25) |
2. Visualbusiness
 |
| Fig. 3.5, Website homepage, (23/04/25) |
Purpose & Goals
At first, I was a little bit lost when I am looking at this website. I mean, it is very artistic and clean. Not to mention, it has so many beautiful photography and images across the site. However, after looking at the description I finally understand that they are a digital art studio. This website is used for showcasing photography, video production, talents and models from Visualbusiness. Through the navigation bar, it can be seen that there is an option to view their works, models, and contacts separately.
 |
| Fig. 3.6, A brief description about what Visualbusiness is, (23/04/25) |
This portfolio website presents a modern-minimalistic look with the usage of sans-serif fonts and a sleek grid-style layout. Navigation bar was made barely noticeable, while text usage is very minimal in this site. Photos are arranged in a chaotic manner with the website utilizing a plenty amount of white space. This interesting artistic choice is utilized for highlighting or focusing the users attention on the images and artwork.
 |
| Fig. 3.7, One of the model showcased, (23/04/25) |
 |
| Fig. 3.8, Nav bar, (23/04/25) |
The performance of this website is incredible. The animations and transitions are smooth and simple. So far, I have not noticed any delays or lags. It works pretty well on mobile too!
.png) |
| Fig. 3.9, The website on mobile, (23/04/25) |
3. HiKeys—1977
 |
| Fig. 3.10, Website homepage, (24/04/25) |
Purpose & Goals
This websites aim is to advertise HiKeys—1977, a practical and easy-to-carry synth keyboard product still in development. To be completely honest, I was very interested with this product it made me went all the way to search for this product. After a little bit of research, HiKeys—1977 turns out to be just merely a conceptual model or an idea of a synth.
Visual Design & LayoutIf I have to explain the website in one word, It will definitely be futuristic. Fonts used are as per usual, sans serif which keeps the clean look on. The design on this website is nothing like the other site I have seen before. The 3D model on this website really elevates the design and layouts. As users keep on scrolling, the keyboard hovers and floats on different parts of the screen, showing different features on the product, accompanied by the description of that described component.
.png) |
| Fig. 3.11, Synth keyboard showcase, (24/04/25) |
The lower part of the website consist of the specifications and features of the product, also more features and color variations. While still keeping the futuristic look, now they put an outline of the synthboard with some images to show the details of the product.
.png) |
| Fig. 3.12, Product specs & features, (24/04/25) |
I have to be real here, the performance in this website can sometimes be a little bit slow at start, which is understandable considering the amount of rendering it needs for the 3d model to load. Other than the 3d model at the beginning, the other parts of the website work quite smoothly. Surprisingly, this website looks incredible even in mobile, which I think is not a very common occurrence.
.png) |
| Fig. 3.12, The website look on mobile, (24/04/25) |
 |
| Fig. 3.13, Website homepage, (24/04/25) |
Purpose & Goals
A website that promotes, recommends, and curates music and albums from underground artists and bands that do not really get radio plays. Unlike other music-reviewing celebrities or websites, New Musik Radar prioritizes underground and under-rated artist to help them grow in numbers. New Musik Radar also drops Spotify playlist filled with their hand-picked tracks monthly. Being a 100% free-to-use website, it also allows users to submit their music to the website through submission forms and Instagram which makes this website a really good starting point to grow as an artist.
 |
| Fig. 3.14, New Musik Radar's album recommendation, (24/04/25) |
Visual Design & Layout
To be honest, I think the design of this website is just good, nothing too interesting, nothing too bland, its just good. Selection of songs and albums are arranged neatly. A Spotify preview pops up if an album cover is clicked. The navigation bar and menu can change in color as users scroll through the site. While bolded fonts are used to highlight the title of the track or album, while thinner fonts were used to tell the genre and name/s of the artist or band.
 |
| Fig. 3.15, Spotify preview and menu bars, (24/04/25) |
Quality & Performance
This website is amazing! I have genuinely spent quite some time searching for new artists and music through this website. No lags, no delays, everything is going smoothly. Truly an amazing website to find new artist to listen to.
 |
| Fig. 3.15, The look on mobile, (24/04/25) |
5. The Museum of Digital Influence
 |
| Fig. 3.16, Website homepage, (25/04/25) |
The Museum of Digital Influence is a website that highlights the evolution of digital influence. Dating back from the year 986 to present, The Museum of Digital influence explores the rise of blogging, introduces readers to word press, MySpace, to the rise of TikTok and Instagram.
 |
| Fig. 3.17, Menu, (25/04/25) |
If we are talking about the UI design, this website has everything it needs to be a digital museum. Starting from the timeline on the bottom, to the individual portals that lead the readers into the history of each category, The team who made this website clearly understands what they are doing. The logo was kept simple alongside the about and support project button on the right. Upon entering on of the portals, users can see pillar-like structures on each sides of the content. After reaching the end of the content, users can also see two portals leading to "The Hall" and the next part of the timeline.
 |
| Fig. 3.19, Rise of blogging, (25/04/25) |
 |
| Fig. 3.21, The Pillow Book, (25/04/25) |
 |
| Fig. 3.20, RIse of blogging, (25/04/25) |
Quality & Performance
This website run pretty well, I did not notice any lags or error during my experience on using this website, overall it was good. There is some difference on the mobile UI of this website. For example, the timeline was changed into a list and some changes on the buttons.
 |
| Fig. 3.21, Mobile UI, (25/04/25) |
REFLECTIONS
Throughout my analyzation of the 5 chosen sites, I have learned that website designs usually have a set of rules to follow for achieving a clean look. For example, every navigation bar needs to be put on top, footer will always be put on the bottom. Icons need to be visible, but also must not stand out. I used to prefer flashier websites with glossy icons, 3D elements, and bright colors, basically the Windows 7 era aesthetic. However, I learned that the standard for this industry is the complete opposite of that.
Comments
Post a Comment