INTERACTIVE DESIGN - EXERCISE 1 (week1)
I.D: 0379525
SECTION: 02
Interactive Design | Bachelor of Design in Creative Media | Taylor's University
Exercise 1 - Web Analysis
TABLE OF CONTENT
1. LECTURE
During this lecture, the professor introduced the course modules for this semester to us and explained the tasks we need to complete in the first week's exercises. This has helped me get a good start in my studies for this course.
2. INSTRUCION
-
EXERCISE:
What is necessary in the analysis:
- Evaluate whether they are effectively communicated to the user
- Evaluate the visual design and layout of the website. (color, image, typography)
- Consider the functionality and usability of the website. (Navigation, forms and interactive elements.)
- Evaluate the quality and relevance of the website’s content. (accuracy, clarity, organization)
- Consider the website’s performance, load times, responsiveness, and compatibility with different devices and browsers.
I selected five websites with distinct styles and themes for analysis. They present different effects based on the varying needs of their creators.
- 2.1 - Website 1:
1). Purpose and Goal:
SAVOR is a website primarily focused on introducing and selling exclusive artisan bonbons from vendors. It also serves as a new platform that embodies candy makers' vision to life, celebrating science, sustainability, and the joy of delicious food.
Through its unique website design, SAVOR showcases to users the details of handcrafted candies, from the selection of raw ingredients to the entire production process.
2). Visual Design and Layout
- Color
For font alignment, left and center alignment are used on different pages for different purposes: Center-aligned text, set against theme-related photos, shares pastry makers’ views. Left-aligned text, paired with subheadings, matches the images that need explanation and serves a clear illustrative role.
- Image
While browsing this website, I realized images play a very important explanatory role in its design. Together with the text, they visually show users the pastry-making process and ingredients.
It’s also worth noting that the photo layout isn’t rigid—instead, the photos move as users scroll through the page, creating a nice sense of flow.
- Layout
As shown in my Figs. 2.1.1 to 2.1.3, most pages use typographic systems. They effectively present the information the website intends to convey to users.
3). Function and usability
- Navigation
The navigation is clear. However, the only downside is that I can’t find one to let users return to the home page—this seems to be missing from the site. As a result, I have to go back through every page I previously visited to get to the home page, which hurts the site’s usability.
- Interactive Elements
4). Quality and Relevance
- Quality
Despite a few minor drawbacks, overall, this is actually a high-quality website. It has a clear theme, harmonious color scheme, and well-organized text and images with a distinct hierarchy of importance. The smooth interactive elements do an excellent job helping users quickly grasp the information the website aims to convey.
- Relevance
This is a website mainly intended to introduce and promote exclusive artisan bonbons. Its clear, detailed information and excellent layout design allow it to keep functioning and being used continuously in this field.
5). Website's Performance
- Load Time
To better test the performance of the website, I used PageSpeed Insights.
SAVOR's performance scores on both computers and mobile phones aren't very impressive, and there's a gap between them. Clearly, the site performs better on computers; otherwise, the scores are nearly identical.
- Responsiveness and Compatibility
The website can be used on laptops, tablets, and phones. However, its responsive compatibility is best on computers.
2.2 Website 2:
Shopify Plus created by Yoann Gueny
Found from CSS (csswinner)
2). Visual Design and Layout
Color
Most of the website’s backgrounds are dark-colored, and its color scheme is chosen to match the colors of the product packaging. This helps the products blend better into the website, enhances users’ visual experience, and supports the website’s goal of promoting these products.
Typography
As shown in the screenshots, the designer used font sizes to clearly distinguish the importance of different information. For example, the main effects of the products are set in the largest font, allowing users to get key information intuitively and efficiently. Other information has progressively smaller font sizes based on its importance.
To improve readability, the website uses lighter font colors on dark backgrounds and darker font colors on light backgrounds—though it avoids pure black or white. This ensures the contrast between the font and background doesn’t significantly exceed that between the product packaging and the background.
I think this is a wise choice. Since the products themselves are also key information to be shown to users, overly eye-catching fonts might make users overlook the products’ appearance, which would undermine the website’s intended goal.
Image
Unlike the previous website, this one barely uses any images on its pages. Instead, it uses 3D models of the products for sale to show users the necessary information. This is likely because the website’s functions and theme mean a lot of images aren’t necessary.
Layout
The webpage design uses a layout similar to a Grid System: information is categorized into different text modules by content before being arranged. This keeps the information on the page well-organized by priority and helps users get product-related information efficiently. The only downside is that the homepage layout looks different across devices, with the layout on phones and tablets being more visually appealing than on computers. This is probably one area where Shopify Plus needs improvement for desktop views.
3). Function and Usability
Navigation
Shopify Plus doesn’t have a menu bar for navigation. Instead, it integrates all content into a single webpage and places necessary page navigation buttons next to relevant information. This still seems to offer convenience to customers.
Interactive Elements
The 3D models of the products are the main interactive elements of this webpage. They change as users browse the page or move their mouse, which adds fun to the website browsing experience.
4). Quality and Relevance
Quality
Overall, this is a pretty good website—I think it has most of the necessary functions. There isn’t a lot of information to browse through here, but users can find almost all the essential details on a single webpage, which makes the site’s purpose and functions very clear. However, I do think the lack of more in-depth product information is one of its drawbacks; compared to other similar websites, it might seem a bit plain.
Relevance
This website has good relevance—it’s entirely built around the products it promotes. It may become less useful as products are updated and replaced, but it can work effectively in the short term.
5). Website's performance
Load Time
According to PageSpeed Insights analysis, the website’s performance on mobile phones is far worse than on computers. For mobile users, this is clearly a flaw.
Responsiveness and Compatibility
This website can also be used on three devices, but in terms of responsiveness and compatibility, its performance is best on computers.
2.3 Website 3:
OVERMODE - Oleksandr Pylypenko
Found from W. (Awwwards)
1). Purpose and Goal
OVERMODE is a website that provides a convenient channel for clothing shopping. It brings together many fashion brands, allowing users to browse their favorite clothing brands in a simple and easy way.
2). Visual Design and Layout
Color
As a clothing sales website, OVERMODE has a very minimalist color scheme. Most pages use white as the background and plain black for the font, with only a few sections using low-saturation yellow as an accent. This has the advantage of naturally drawing users' attention to the clothing photos on the page. Meanwhile, the contrast between the simple white background and black font makes the information on the page very clear, helping users browse and read.
Typography
All text on this website uses sans-serif fonts. Different information is visually distinguished through font size, weight, and italics, which perfectly matches the website's simple, modern design style.
Image
As a clothing shopping platform, you can browse a wide variety of clothing photos on OVERMODE. All these photos, like the pages themselves, have a plain white background—this makes the styles and details of the clothes very clear. There are no extra graphic elements to distract users while browsing, which naturally keeps their focus on the clothes displayed on the page. This aligns with the website’s goal of providing users with a convenient clothing shopping channel.
Layout
The webpage design features a clean, simple modern style, allowing users to quickly and easily access clothing shopping information (such as prices, sizes, men’s and women’s styles, etc.). The only slight downside on the page is that, as a clothing site that brings together many fashion brands, there are no web elements (other than the posters shown on the homepage) to showcase fashion taste to users. The overall page design also feels a bit monotonous.
3). Function and Usability
Navigation
The navigation is clear and located in a place where users can find it intuitively on the webpage.
Interactive Elements
The interactive elements on OVERMODE's webpages play a very important role in the site. They accurately lead to different categories of clothing, effectively helping users browse their favorite brands and clothing styles efficiently.
OVERMODE may not be the best among similar websites, but it still has room for further improvement. However, it already offers all the necessary functions as a convenient clothing shopping platform.
Relevance
This is a website that can be used continuously and has strong relevance. As a shopping site that gathers fashion brands, it can be continuously expanded. It will play an increasingly important role and attract more users as user needs grow and new fashion brands join.
5). Website's Performance
Load Time
Overall, according to PageSpeed Insights analysis, OVERMODE's performance is significantly better than the previous two websites I analyzed, which undoubtedly helps improve the user experience. The website still performs better on computers than on mobile phones.
Responsiveness and Compatibility
This website is suitable for mobile phones, tablets, and computers. There is not much difference in page layout between computers and tablets, while the page on mobile phones enlarges some buttons.
2.4 Website 4:
1). Purpose and Goal
This is a website built to introduce the history and surroundings of Freudenfels Castle, and to provide a channel for users in need to rent the castle venue.
2). Visual Design and Layout
Color
The website mainly uses two similar dark greens paired with a light gray as background colors. The overall color scheme is elegant and sophisticated, giving users the psychological hint that "the castle in the website is surrounded by forests" while coordinating harmoniously with the castle's decoration style.
Typography
As shown in the following screenshots, the designer used almost only one font type for the website. Serif fonts were chosen for headings and subheadings, adding decoration to the webpage and enhancing the user's visual experience; sans-serif fonts were used for descriptions and main text, improving information readability. All text modules on the website are left-aligned, and the font color contrasts with the background to ensure the text is clear enough for easy browsing.
Image
The designer skillfully integrated the website's images with its layout. These exquisite images not only enhance the webpage's visual effect and attract users, but also vividly depict the castle's environment for them.
Layout
Overall, the page design of Freudenfels Castle's website is coordinated and elegant, matching the high-end image and temperament of the ancient castle. However, on many pages introducing the castle's specific functions and decorations, I noticed many large text modules that fill most of the space except for images. This might make some users feel cumbersome or cause visual fatigue. Correspondingly, many webpages use a Grid System layout for images and text, which clearly displays information but also makes many webpages look very similar, thus appearing a bit rigid.
3). Function and Usability
Navigation
The navigation is clear and efficient, categorizing introductions to different aspects of the castle into separate webpages, effectively helping users understand the castle's environment and functions.
Interactiveness Element
When clicking a link to enter the webpage, users gradually see the castle surrounded by forests as their view zooms in, which leaves a good first impression. While browsing, the 3D models of images and light rings move with the mouse, fully showcasing the castle's beauty and helping to attract users.
4). Quality and Relevance
Quality
I don't consider this a high-quality website. Although it does have some merits—such as complete functionality and clear information—its performance falls short according to PageSpeed Insights analysis.
Relevance
This is a website built around Freudenfels Castle, where users can learn about the castle's history and architectural environment, and rent the venue according to their needs. Given factors like the castle's comprehensive functions, exquisite decor, excellent location, and high service standards, I believe the demand for learning about and renting the castle will persist long-term. Thus, the website can continuously accommodate users and has good relevance.
5). Website's Performance
Load Time
According to PageSpeed Insights analysis, the website's overall performance is unsatisfactory, which is a drawback.
Responsiveness and Compatibility
This website can be used on mobile phones, tablets, and computers. On computers, the 3D models and lighting in the website move as the mouse approaches, while on mobile phones and tablets, they move as users scroll the screen.
2.5 Website 5:
1). Purpose and Goal
This is an artificial intelligence website designed to provide patients with convenient, intelligent, and humanized services.
2). Visual Design and Layout
Color
The website adopts the macaron color scheme as the web page color, mainly combining several colors with lower saturation: pink, yellow, blue, green, and purple. Such a color scheme is harmonious and cute, making the artificial intelligence look more humanized and making users feel at ease.
Typography
The website uses sans-serif fonts, which are clear and concise, making it easy for patients to browse. Additionally, the website uses font sizes and colors to distinguish information of varying importance. As shown in the screenshots, some less important information uses a lighter gray font, which makes the black text stand out more, allowing users to quickly capture key information.
Image
The website Kriss.ai does not include unnecessary images; all page navigation revolves around a cute 3D model animation. This is also a good way to bridge the gap between the website and patients, aligning with the goal of AI websites to provide humanized services to users.
Layout
The design of the web page is quite good, with clear layout and harmonious, cute color matching. Overall, the design of the web page makes users feel warm and comfortable.
3). Function and Usability
Navigation
The navigation works well—it's clear and straightforward, positioned where users can see it at a glance.
Interactiveness Element
A building-like 3D model is the most eye-catching interactive element on this webpage. Each room corresponds to a section of the website's introduction. When users enter a room in the 3D model, they can view information about that aspect of the website. Through this playful approach, the website presents key details about its features and advantages, enhancing user interaction with the site and improving the user experience.
4). Quality and Relevance
Quality
This is arguably a high-quality website, as it possesses several essential characteristics of a high-quality site, including strong information readability, an attractive layout, and ease of being found by search engines.
Relevance
Considering that the main function of this website is that provide insights and personalized care around the patient experience. It can be continuously updated according to the needs of users and designers, providing effective services to users for a long time with good relevance. The only slight drawback is that I believe it can offer more than what it currently does. The types of services provided by the website are somewhat limited. Perhaps further updates could enable it to offer more diverse services, such as making appointments with specific doctors for one-on-one consultations.
5). Website's Performance
Load Time
Overall, this website performs well on both mobile phones and computers, which helps it effectively provide convenient and smooth services to patients. Performance will not be a factor that holds this website back.
Responsiveness and Compatibility
This website can be used on computers, tablets, and mobile phones. However, from my experience, the 3D model seems to run more smoothly on computers.
4. FEEDBACK
- Before analyzing each website, it is necessary to indicate the source of the website at the beginning.
- One minor, detail-related issue is that some font sizes and font types in the blog are inconsistent. This causes text with varying sizes to stand out abruptly to the reader when going through the blog, which disrupts the reading experience.
Comments
Post a Comment