Interactive Design: Exercise 1 - Web Analysis
GCD60504 Interactive Design
« Web Analysis »
⇢ Kaito Note - Portfolio (SOTD 22 Apr 2025)
Design:
Kaito note has a clear aesthetic, theme, and style with great use of soft gradients and keeping to a colour theme of mainly blues, blacks and whites. This creates a sense of consistency between the pages of the website. There also a lot of motion graphics found throughout the whole website form idles, to blurs to even using it as a revelation of information to the user.
Mainly seen in Kaito Note's image placement, the website itself has good use of grids and consistent spacing. This can be conveyed through the placement of images and the placement of subtext found throughout his website (e.g. Contact information, Profile, little titbits and facts etc.)
Kaito note also consists of 2 main types of fonts which are sans serif and italicised sans serif with the latter being used mainly for detailing and emphasis. This guides the viewer very well down the website and helps the viewer to retain keywords and information without having to stare at it for a long period of time. However, some text sections are not compatible with the background as certain movements makes it harder for the text to be read.
Layout:
Kaito note has a curated intro to each page which give it a more personalised feel, fitting for a portfolio, for the users to get to know the person behind the graphics.
Although, due to the nature of this website some sections can be lengthy. In addition to this, some subtext (although used as a decorative object) is small and hard to read and can cause distractions towards the user throughout the whole website.
Content:
The content is relayed in a very interesting way with gradients slowly revealing information to the user as they scroll down the page. There is a lot of curated loading pages as well to give it a more personalised feel. Although, some page intros don't make sense and can create certain confusion towards the user of the website.
Functionality:
Kaito Note has cross-platform compatibility between different screen sizes. The layout is also curated between each screen size to still keep the speed of scrolling consistent to the user no matter what platform they are viewing this website. This website also has very smooth button transitions, especially the ones found within the gallery in his work page. The menu icon also opens up to right in the middle of the website with a blurred overlay for a clean outlook.
Although cross-platform compatibility is great, on both platforms, the website is lagging throughout multiple platforms due to the amount of object s found in each page.
Design:
Sofi Health showcases a consistent theme and aesthetic, creating a cohesive and visually pleasing experience. Although the main colours are black and white, there are pops of contrast with colours from their own branding. The consistent font usage throughout the website enhances readability and reinforces the brand's identity. The website effectively utilizes visuals and motion graphics, creating an engaging and dynamic experience.
In my opinion, The footnote is a little too large, potentially distracting the user from the main content. This could divert the attention from the primary reason for the website itself.
Layout:
Sofi health features unique layouts, offering a fresh and engaging user experience, from scrolling on a platform to an actual phone to slideshows imbedded into the scroll.
But it does get difficult to discern how much content remains to be scrolled, potentially leading to user frustration. and certain layouts are confusing, hindering the user's ability to quickly grasp information.
Content:Sofi health is an e-commerce website so it doesn't have a lot of information other than the product itself so it seems to compensate it with the graphics found throughout the website. The website does not have a menu button but in this case It doesn't need one due to the information being scarce other than the product, the data and the promotional material.
Functionality:
Sofi health features great transitions between each panel, enhancing user navigation. The website is also compatible across various platforms, ensuring a consistent experience for all users. Surprisingly, including the amount of motion graphics found in this website, it is not lagging as much as I thought it would. This will hopefully provide a responsive and enjoyable user experience.
Although, there is too much movement between each scroll, potentially overwhelming the user. Due to the nature of this website's motion graphics, it moves every time the scroll is activated making the information hard to discern from each section. In addition to this, the website is sensitive to scrolling, potentially leading to unintended actions.
Design:
Astral Frontier boasts very interesting graphics, captivating the user's attention with space-like features like planets and formating that creates a consistent theme and aesthetic that's cohesive and visually pleasing experience. The website utilizes interesting button shapes, adding a unique and engaging element to the user interface. The website also demonstrates a good contrast of colours, enhancing readability and visual appeal.
Despite that, the buttons are not clear, potentially hindering user interaction. This can spark confusion to what's a background decoration and what is an actual button. Moreover, some text is hard to read due to overlaps, creating a frustrating user experience.
Layout:
Astral Frontier is laid out in a space map sort of layout that is very fitting to the overall theme and the topic of the website.
The website introduces sound bytes for buttons, adding an auditory element to the user experience and solidifies the overall space theme of the whole website but, the sound could be repetitive, potentially leading to user fatigue. This can be solved and has been solved by creating a button to turn it off and on to user's preference.
Functionality:
The website incorporates idle motion graphics found in the background and the sound, adding a dynamic and engaging element to the user interface. The website also uses consistent font usage, ensuring a cohesive and professional appearance. Due to the motion graphics and interesting interactivity, the website is laggy on multiple platforms, hindering the user experience.
Design:
The website incorporates idle motion graphics in the background of the website, logo of restaurant locations and a tagline to 'Order Now'. It also has a very simple colour palette with striking blues, orange and yellow, that are very adamant on the old school diner style with a twist.
Layout:
Content:
Pretty Patty is a website for a restaurant and has all the information it needs including, Location, Menu and an About Us page. It is pretty concise with a lot of interactivity found in the website itself with coloured buttons. Although some buttons are a little hard to find due to the sheer line thickness.
Functionality:
⇢ Wemake
Design
Wemake has minimalist design with few colour schemes dedicated to nature and bright themes. The colours are white, black, blues, greens, and brown. The website consists of two different fonts which consists of sans serif and serif interchangeably. Following the simple aesthetic of the website, the elements such as buttons and images are square/sharp shapes.
Although, there is no motion except the brand name at the header, I have yet to classify this as a positive or a negative aspect of the website as it follow the more simplistic style of the overall theme.
Layout
The layout is kept to a minimal with the use of grids (for both text, images and elements) and rectangular buttons. wemake follows the proper basic principles of a good website layout. It is simple enough but not too extremely compact that it takes away with the entire message of the website.
Content
The website has pages such as Home, Past Works, option to start your own project, about us, contact, more info. It sounds like a lot of information but surprisingly it has the perfect amount of information that it doesn't feel empty but it also doesn't feel claustrophobic when surfing the website. It gives the proper context to the website.
Functionality
The loading time is short and optimized due to the simplicity of the elements found in website pages. For accessibility purposes, it has 2 languages that it can change from Norwegian to English and vice versa. Although, this doesn't work effectively half the time but when it works, it works. The buttons also has a hover effect on interactive elements that ties the overall style of the website.
8.jpg)
Comments
Post a Comment