Interactive Design: Exercise 1
23/4/2025 - 30/4/2025 Week 1 - Week 2
Komugi Uchibori / 0363900
Interactive design / Bachelor of Design (Hons) in Creative Media
Exercise 1
TABLE OF CONTENTS
- MBI
- Exercise 1
- Taiki Sato Portfolio
- SLEEP SOUND LABEL ZZZN
- WEEKLY WINE
- The Museum of Digital Influence
- Grids
MBI
Exercise 1
Taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
What to have in the analysis:
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
I chose 5 website from this link: https://www.awwwards.com/
 |
| Fig.1-1 Taiki Sato Portfolio |
The purpose and goals
This website is about a portfolio created by Taiki Sato, who does visual design and art direction for web and graphic design. The website aims to show his design experiences and promote his works to attract new clients, including companies and individuals.
The visual design and layout
 |
| Fig.1-2 Color |
Color: The main colors are greige and charcoal gray, creating a humble atmosphere. The latter one looks like black, but it is a bit lighter, so this makes these 2 colors combine well.
 |
| Fig.1-3 Typography |
Typography: The website mainly uses serif fonts. The logo and headings are emphasized with boldness. Menus and subheadings have thinner serif fonts. Both English and Japanese are used throughout the site, and the Japanese text is set in a Mincho-style font, which gives a polite, refined impression and is easy to read.
Imagery: Basically, all images are related to his works and himself. The image size is both small and large, so they are selected and applied according to the purpose and context.
The functionality and usability
 |
| Fig.1-4 Navigation |
Navigation: Very simple and minimalistic. If you click on MENU, it expands to show navigation and easy to understand where the icons lead to on this website. Also, the filter function makes it easier to access each different type of his works.
Forms: There are 2 ways of opening forms, one is inside of menu, the other is the the bottom of the homepage with bold fonts.
 |
| Fig.1-5 Interactive elements |
| Fig.1-6 Interactive elements |
| Fig.1-7 Interactive elements |
Interactive elements: When users hover over text or images, they respond, which makes the site naturally easier to use. For example, when hovering, colors change or images slightly expand. Additionally, the appearance of the word “観覧” (viewing) helps users anticipate their next action (Fig.1-6). However, in Fig.1-7, the photos on the homepage become too large, or the colors are too vivid. It is hard to read. Additionally, it is unclear whether the page is scrolling.
The quality and relevance
Accuracy: His works and experiences in the design field are clear. Also, his design philosophy is shown, so it meets the purpose of a portfolio.
Clarity: The content and design are clear, but some interactive elements cause slight confusion.
Organization: The interactive design is consistent and well-organized.
The website's performance
Load times: It works smoothly and the interactive design is also well.
 |
| Fig.1-8 Responsiveness & Compatibility |
Responsiveness & Compatibility: Smartphones, iPads, and laptops adapt to this website, and there are differences in home design. As for the works section, the image on a smartphone and iPad is a bit larger and harder to see compared to a laptop.
The strengths and weaknesses
Strength: Overall, this website has sophisticated vibes and is user-friendly in navigation and readability. The important information, such as headings, is bold, and typography is selected according to its contents. Also, navigation is simple and minimalistic, which makes viewers use this website with comfort.
Weakness: Some interactive elements are quite confusing when scrolling the screen. When hovering, the color of the image remains the same, making the headline text difficult to read.
 |
| Fig.2-1 SLEEP SOUND LABEL ZZZN |
The purpose and goals
ZZZN is a label that expands the possibilities of sleep and music. This website aims to share knowledge about sleep and music and to create works where the two blend beyond boundaries.
ZZZN is a label that expands the possibilities of sleep and music. This website aims to share knowledge about sleep and music and to create works where the two blend beyond boundaries.
The visual design and layout
 |
| Fig.2-2 Color |
Color: The light blue and black are mainly used in this website. The combination of these creates a balanced and sophisticated contrast in lightness. These color makes you feel calm and relaxed, like sleeping.
 |
| Fig.2-3 Typography |
Typography: Sans-serif fonts are mainly used. Logos of this project are emphasized with hollow fonts in the center of the homepage. Typefaces are almost the same, and some parts are bold in the middle of sentences, especially in Japanese letters. The size of the letters is changed to make a difference between the subheading and body text.
 |
| Fig.2-4 Imagery |
Imagery: There are some pictures which remind us of sleeping and music but as for the music aspect, the impression is a bit weak. Also, music/sound section has only one image because this music comes from a single album. However, it includes "ZZZN", it still connects to this website's purpose.
The functionality and usability
 |
| Fig.2-5 Navigation |
Navigation: Very simple and minimalistic. Some navigation uses icons so that the viewer understands easily.
Forms: The contact form is shown on the top right constantly.
| Fig.2-6 Interactive elements |
Interactive elements: If you click or wait for a certain seconds, the image slides and the movement is smooth. Also, when hovering over the menu sections, the letters inside the two bars can be seen clearly. Changing the wakeup/sleep mood affects the movement of "ZZZN".
The quality and relevance
Accuracy: The content, such as listening to music and projects related to sleeping while listening to live music, is connected to the project's purpose, informing people about the possibilities of sleep and music.
Clarity: The typography choices are rather conventional, making it unclear which information is most important. Additionally, the menu bar opens even when the cursor is not hovered over it, so it is difficult to determine which section the user is currently in.
Organization: The information is sorted out and organized in every section.
The website's performance
Load times: very smooth and quickly respond.
 |
| Fig.2-7 Responsiveness & Compatibility |
Responsiveness & Compatibility: All devices, including laptops, iPads, and smartphones, adapt to this website. The smartphone version has different types of menu bars. Personally, the smartphone version is the easiest to use.
The strengths and weaknesses
Strength: The user would easily understand what this website is about and its project while experiencing and listening to relaxing music. The cooler color contributes to feeling calm. Also, simple typography leads to high readability.
Weakness: A lack of interactive elements might lead to users getting bored while viewing this website. Also, there is little typographic emphasis, such as not bolding important information, which may make the content less engaging for users.
 |
| Fig.3-1 WEEKLY WINE |
The purpose and goals
Introducing and selling selected wines from around the world at reasonable prices to people currently in South Korea.
The visual design and layout
 |
| Fig.3-2 Color |
Color: Light beige or off-white and light brown are primarily used, having simple and cozy but elegant vibes. It also includes warmth by combining light shades of colors.
 |
| Fig.3-3 Typography |
Typography: The product name uses a Bold sans-serif typeface to enhance readability. As for the winery used name, it is written in script font and gives an elegant and luxurious impression. The font of price is the sans-serif typeface with a lighter weight. The typography in the menu section is all the same color, size, and font, so it’s difficult to see.
 |
| Fig.3-4 Imagery |
Imagery: Every wine bottle picture is shown, and it is easy to understand what it looks like. Also, you can see the region where the wine was made, with flag icons. It explains wine quality control and service with clear pictures.
The functionality and usability
 |
| Fig.3-5 Navigation |
Navigation: The navigation is very simple and minimalistic, basically using arrows to show the wine collection. The search, shopping cart, and so on are shown with icons that allow users to click once. But it overlaps with menu options. Other than that, there’s a curvy box including text.
Forms: Form is in the footer, so you have to scroll down. It takes a bit to find out.
Fig.3-6 Interactive elements
Interactive elements: Hover over the arrows and some images, and they expand a bit.
When scrolling down the screen, the wine labeled by category slides and appears smoothly. In addition to this, the wine in the glass shifts from a top-down view to a side view. There’s a short explanation in small icons under the product names.
While hovering over the menu, it expands, moves the subheadings like a slot, and you can see the details.
The quality and relevance
Accuracy: This website meets the aim of introducing selected wines for those currently in Korea. The explanation of delivery and price is in Korean, but there's a lot of English, especially in the menu and home screen. So it's a bit confusing that the website is for people in Korean.
Clarity: Overall, it is kind to see the variety of wine and its explanation with simple and clean images. However, the typography in the menu is all the same color and size, so the users might feel confused because they can't easily tell where to look or what is different.
Organization: The Top section menu is all related to the details or necessary information when you choose and purchase. As for the complimentary part, such as the magazine and contact form, they are in the bottom part. The variety of wine is categorized by vintage bestsellers and such.
The website's performance
Load times: There is a short freeze of 2 to 3 seconds on the screen. Also, returning to the previous page takes a bit longer.
 |
| Fig.3-7 Responsiveness & Compatibility |
Responsiveness & Compatibility: All devices, including laptops, iPads, and smartphones, adapt to this website. iPad is the best to see in terms of overall organization and with no overlapping between icons and text.
The strengths and weaknesses
Strength: It is easy to view each picture and the winery name with the country of origin, although there are many kinds of wine products. Many interactive elements are minimalistic but stylish, so it keeps the viewer's attention.
Weakness: After opening the menu, there are many options to choose from, and all typography is are same color and size, so it is confusing for users to see where to look. In addition to this, due to the inconsistent use of English and Korean from page to page, it's hard to say that the site is clearly intended for people in Korea.
 |
| Fig.4-1 The Museum of Digital Influence |
The purpose and goals
This museum-like website aims to let viewers experience 9 unique epochs, highlighting the evolution of digital influences, using artifacts created by AI and stories written by humans, including blogging to TikTok. This also shows the milestones, innovations, and trends that have shaped the way we influence online.
The visual design and layout
 |
| Fig.4-2 Color |
Color: The main colors are a gradient of soft grays, blacks, and whites in the background. The letter's color creates contrast against the background when the text is black and the background is white, and vice versa. Plus, there are 9 individual sections with accent colors, and they are basically gradients, so it's good for the eyes.
 |
| Fig.4-3 Typography |
Typography: Overall, sans-serif fonts are used on every page, keeping it simple and highly readable. Headings are emphasized with bold to enhance legibility. Also, there's a hierarchy within the explanation of the images, so you can easily find what it's about and where to look. The main text is lighter weight compared to the Heading.
 |
| Fig.4-4 Imagery |
Imagery: All images are related to each section's theme, such as Instagramism. The artifacts are created by AI, but they look like actual artwork in the museum. Some paintings make sense, while others feel more abstract.
The functionality and usability
 |
| Fig.4-5 Navigation |
Navigation: They are very simple and easy to understand the function of their icons, and so on. The small animation encourages the viewer to experience smooth action.
Forms: There are no contact forms, but sharing links with social media and crowdfunding.
| Fig.4-6 Interactive elements |
Interactive elements: when you click the timeline on the homepage, the screen leaps to the specific section while the door-like shape rotates. Then, hovering over the shape leads to changing the accent color a bit to show where you are now. As you keep scrolling the page, new paintings are automatically loaded, which gives you the feeling of walking. These interactive elements are immersive.
The quality and relevance
Accuracy: It provides the perfect experience to meet the aim of this website. You can know and deepen your understanding of the trends and influences of online platforms with clear images, a timeline, and descriptions written by humans.
Clarity: Overall, the content, typography, images, and theme are consistent and minimalistic, providing an immersive feeling.
 |
| Fig.4-7 Organization |
Organization: The museum-like perspective provides an immersive experience, while the paintings and their descriptions are concise and engaging. In addition, the timeline clearly shows when each platform gained popularity, making it easy to visually understand the trends.
The website's performance
Load times: Changing pages takes 5 ~ 7 seconds with the loading screen. It gives you a feeling of playing video games. Also, the screen becomes unresponsive and laggy when scrolling.
 |
| Fig.4-8 Responsiveness & Compatibility |
Responsiveness & Compatibility: This website adapts to iPad, laptop, and smartphone. Comparing the status when scrolling, the iPad and the smartphone don't become laggy. But the loading time is almost the same for these 3 devices. Also, there's some change in icon design.
The strengths and weaknesses
Strength: This website has consistency in theme, typography, and interactive elements while providing great user experiences. Well-organized information and a minimalistic layout are engaging for viewers. In addition to this, the hierarchy in typography makes information easily understandable.
Weakness: Loading time is longer compared to the other website, and the screen tends to become laggy as you keep scrolling. There's no contact form for this website itself, so if there's a system problem, you cannot report it.
 |
| Fig.5-1 Grids |
The purpose and goals
This website is for an educational project about grids with unusual storytelling to show the principle of grid use.
The visual design and layout
 |
| Fig.5-2 Color |
Color: Black and white are mainly used; however, if you click on crazy mode, soft yellow is added to the entire screen. In normal mode, black and white create a strong contrast with each other, meaning that they have high readability. Soft yellow is the accent color, and it greatly changes the impression.
 |
| Fig.5-3 Typography |
Typography: Sans-serif fonts are set as the basis of this website, while the size and typefaces vary. There's a hierarchy according to the importance of the information, meaning the headings are emphasized and changed to a quite larger size compared to the main or complementary text. The text color is adjusted using different shades of grayscale depending on the page.
 |
| Fig.5-4 Imagery |
Imagery: This website shows the use of grids entirely, so it contains few images. However, it includes a few examples of works along with the grid setting explanations.
The functionality and usability
 |
| Fig.5-5 Navigation |
Navigation: The navigation is quite simple, just showing "scroll down" in a small size on the top right. The menu and button for changing mode are minimalistic.
Forms: If you scroll to the end of the page, you'll find a contact form.
| Fig.5-6 Interactive elements |
Interactive elements: This website is rich in interactive elements because if you keep scrolling down, they won't stop moving. This is rather a video than a website, so the viewer would be engaged until the end. For example, the rectangles and text smoothly move up and down, expand in size, and shift the screen's color with transitions. In addition to this, the advertisement related to the grid system pops up when you go to the intro/homepage. Other than that, you can change the entire color by clicking "crazy mode", turning the background color to soft yellow.
The quality and relevance
Accuracy: There is only something related to the grid system, so it always has consistency. The detail of the works is also shown, so it is educational.
Clarity: Overall, the simple navigation and scrolling interaction make it very user-friendly.
Organization: The transition using interactive elements is perfect to engage viewers. There are only 3 sections, including intro(homepage), grids, and book/credit. This means a very clear layout.
The website's performance
Load times: It took about 3 seconds, but as you keep scrolling, the screen tends to get slower and raggy on the laptop. Plus, the transition sometimes doesn't work well.
 |
| Fig.5-7 Responsiveness & Compatibility |
Responsiveness & Compatibility: All devices, including laptops, iPads, and smartphones, adapt to this website. The iPad is the best tool for viewing the website because its interactive elements work smoothly, and all descriptions and images are easy to see. There's a special instruction on the smartphone, suggesting to rotate the screen be rotated to be seen properly.
The strengths and weaknesses
Strength: The interface relies almost entirely on scrolling with a minimal design for the menu and mode switch button, and users can navigate the site easily. Although the contents and theme are consistent, the richness in interactive elements makes the website visually engaging and appealing.
Weakness: As you keep scrolling, the screen tends to lag, causing slower performance and transition failures. In addition, the "scroll down" navigation is small and easy to miss, so it may be unclear how to navigate the website.
Comments
Post a Comment