INTERACTIVE DESIGN / EXERCISE 1 - WEB ANALYSIS
September 25, 2025
interactive design / EXERCISE 1 - web analysis
-
22.9.2025 -5.10.2025 (week 1 - week 2)
Low Xin Er / 0374596 / Bachelor of creative media
Low Xin Er / 0374596 / Bachelor of creative media
Interactive Design / Exercises - Web Analysis
LECTURE NOTES
week 1
- Download Dream Weaver
- 5 Website analysis reports with different categories
week 2
Norman door
- A door where the design tells you to do the opposite of what you're actually supposed to do.
- A door that gives the wrong signal and needs a sign to correct it.
Discoverability: the ability to discover what operations one can do.
Feedback: a signal of what happened
Fig 1.1 Human-centered design
Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation. A design’s usability depends on how well its features accommodate users’ needs and contexts.
When users first encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge. An interface with high usability guides users through its easiest route to achieve its goal.
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
1. Consistency
- Key factor in web design for both visual elements and functionality.
- Ensures that website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.
- Includes consistent navigation system, page layout and menu structure, fonts and typography and branding in web design
- These patterns to be recognized and learned by users, similar-looking things produce a similar output.
- Consistent design is intuitive design. Example of Consistency in design: Adidas Mobile App, Strava Mobile App, Air BNB Mobile App, ZUS coffee
Fig 1.2 Example of consistency
2. Simplicity
The principle that user interfaces should be “simple” for users.
- Minimize the number of steps involved in a process, to
- Use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.
- Helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
Fig 1.3 Example of simplicity
3.Visibility
The basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.
- Users should know, just by looking at an interface, what their options are and how to access them.
Fig 1.4 Example of visibility
4.Feedback
- Communicates the results of any interaction, making it both visible and understandable.
- Give the user a signal that they (or the product) have succeeded or failed at performing a task.
- Example: selected icon changes color when you in the selected screen.
Fig 1.5 Example of feedback
5.Error Prevention
- Involves alerting a user when they’re making an error
- With the intention to make it easy for them to do whatever it is they are doing without making a mistake.
- The main reason: we humans are prone to- and will always make mistakes.
Fig 1.6 Example of error prevention
6.Common Usability Pitfalls
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
INTRUCTION
Analysis Contents:
- Purpose and goals: evaluate whether they are effectively communicated to the user.
- Visual design and layout: use of color, typography, and imagery.
- Functionality and usability: navigation, forms, and interactive elements.
- Quality and relevance: accuracy, clarity, and organization.
- Website's performance: load times, responsiveness, and compatibility with different devices and browsers
Websites categories
- Art & illustration: https://bleedingdisorders.junction.care/
- Design agency: https://www.futurethree.studio/
- Fashion: https://www.hannahmiles.com/
- Food & drink: https://foragerproject.com/
- Event: https://www.litecomgroup.com/
Website 1: FUTURE THREE created by Samet & Hassam
 |
| Fig 2.1 Future Three |
1. Purpose
FUTURE THREE is an design agency website as a multi-award-winning design studio based in Wiesbaden.
FUTURE THREE aim to provide professional services as brand identity design, UI/UX design and Webflow development. It engages any entrepreneur for branding and development.
This website provides past project with variety of brand & companies in FUTURE THREE's studio. Programs included , mainly from 2022. They focus on showing their signature projects,services introductions and studio's concept. It also list-out the studio contact including address and related picture.
2. Visual Design and Layout
a) Color
The webpage has different block colors, such as the green color related to the product theme color on the homepage, the clean light gray background when introducing business content, and the deep red when introducing the team philosophy.
Fig 2.3 colors
b) Typography
There are two san-serif typeface used which are "Heltiva Now"and "GT Sectra Fine Regular".
Heltiva Now for heading and text while GT Sectra Fine for sub-heading.
c) Imagery
Hovering over a photo will reveal more photos of the work. The homepage doesn't feature many detailed images of the work, instead linking visitors to specific projects they'd like to learn more about.
This design maintains a clean and concise homepage, allowing visitors to quickly find the projects they're interested in without being distracted by unrelated projects.
Fig 2.5 Image in desktop view
Fig 2.6 Image in mobile view
d) Layout
The website layout design mainly uses copywriting and content to create block layout, and most of each area is mainly read horizontally.
Fig 2.7 Layout in desktop view
Fig 2.8 Layout in mobile view
3. Functionality and Usability
a) Navigation
Since there is not much content to browse, mainly the studio's design concept, portfolio and contact information, keyword links are provided at the top of the homepage to allow viewers to easily go directly to the project page they interest about.
Fig 2.9 Navigation
b) Interactive elements
Upon landing on the homepage, the team's name appears, followed by a dynamic presentation of their commercial work. Interactive elements throughout the site revolve around keywords and images that link to other pages.
These changes are triggered by hovering over the interactive elements or scrolling the page, revealing the full image while retaining the same text. Given that visitors want to quickly find their ideal design team, the site prioritizes content over excessive aesthetics, significantly improving convenience and efficiency.
Fig 2.10 Interactive element
Fig 2.11 Interactive element
4. Quality
The website's overall color scheme and layout lean towards a simple design, providing a pleasant user experience and making it a high-quality website. However, when browsing the website, there's no one-click link to return to the menu when switching to another page. Instead, it takes you directly back to the top of the homepage, which is a bit inconvenient.
5. Website's Performance
a) Load time
Testing website's load time: Page Speed
Desktop version website performance is better than mobile version.
Fig 2.12 Performance score-desktop
Fig 2.13 Performance score-mobile
b) Responsiveness and Compatibility
Fig 2.14 Website adaption in desktop & mobile version
Fig 2.14 Website adaption in desktop & mobile version
6. Conclusion
a) Strengths
Overall, the website has ample white space to enhance reading comfort, and the relatively simple color scheme allows for a smooth browsing experience while efficiently presenting the website's content.
b) Weaknesses
Regarding the dynamic display effect of product images on the homepage, it will only be successfully displayed when the main title is clicked, and it cannot be displayed by refreshing the page normally. This obvious mistake affects the aesthetics. In addition to the aforementioned issue of the lack of links back to the menu on branch pages, the design lacks interesting interactive elements. While a simple design can enhance browsing comfort, excessive simplicity can also lack interactivity and aesthetic appeal.
Website 2: Pulse of Discovery created by Junction Care
Fig 3.1 Pulse of Discovery
1. Purpose
The Pulse of Discovery is an art & illustration website about bleeding disorders by non-profit organisation Junction Care based in Europe.
The Pulse of Discovery aim to inspire healthcare professionals to rethink how they engage with patients and serve as a source of knowledge for care, education and research. The project reflects how art and science together can bring a fresh perspective to women’s healthcare.
2. Visual Design and Layout
a) Color
Fig 3.2 Colors
Fig 3.2 Colors
b) Typography
Fig 3.3 Typefaces
c) Imagery
All of the story covers feature the female body, expressing feelings about women's health and emotions. The images often feature low-saturation colors or simple, clean compositions, with ample white space creating a sense of texture.
Fig 3.4 Images in desktop view
Fig 3.5 Images in mobile view
d) Layout
Fig 3.6 layout in desktop view
Fig 3.7 layout in mobile view
3. Functionality and Usability
a) Navigation
The menu in the upper left corner of the website allows for a quick preview of all story covers and themes, and the infinite loop design makes it easier for viewers to browse. As the screen scrolls, each story cover is accompanied by a different themed short article, which gradually switches as you scroll, adding a more appropriate atmosphere to the content.
Fig 3.8 navigation
b) Interactive elements
When log in to the website, the first thing you see is the title and the portfolio cover that flashes by quickly, which is very special.
As you move your mouse, a circular graphic appears on the story cover, revealing the second chapter photo. The striking color difference between the two photos draws visual attention and creates a beautiful effect. As the screen moves to the next story, the background color also changes. Clicking on a story cover, the circular graphic on your mouse will expand to fill the entire screen, creating a visually appealing experience, as if you've entered the story cover.
Fig 3.9 Interactive element
Fig 3.10 Interactive element
4. Quality
The overall color and layout of the website are in line with the message and atmosphere of the theme, making people immersed in it. The images are all low-saturation colors, with simple and clean compositions, and the short text summarizing the story fully demonstrates the texture.
5. Website's Performance
a) Load time
Fig 3.11 performance score in desktop
Fig 3.12 performance score in mobile
b) Responsiveness and Compatibility
Fig 3.13 website adaption in desktop & mobile
6. Conclusion
a) Strengths
The website's desaturated color palette and high-quality images ensure a seamless experience for visitors, eliminating distractions and creating a high-quality atmosphere. The interactive elements are also playful but understated, with a generous amount of white space between them and the content summary. The background color changes as the screen scrolls, giving the website a sense of breath without being boring.
b) Weaknesses
Although the design is good, the content is lacking. There is no content on the last page to conclude the theme of the entire website.
Website 3: FORAGER PROJECT by Stephan Williamson & JC
Fig 4.1 Forager Project
1. Purpose
Forager Project is a food & drink website about selling dairy-free milks using plant by Stephan Williamson & JC’s community since 2012.
The Forager Project aim to reinvent dairy with plants but not cows. The website show their value which is better food, and better business, should move the world forward as dairy from plants does.
2. Visual Design and Layout
a) Color
The important background colors are all light colors, and the accent colors are all from the color scheme of the picture.
b) Typography
Fig 4.3 Typefaces
c) Imagery
The website focuses on showcasing the food's texture, ingredients, and the team's work process. The photography includes photos of nature and farmers, while the product and ingredient photography techniques and colors are natural, enhancing the website's intimacy.
Fig 4.4 Image in desktop view
Fig 4.5 Image in mobile view
d) Layout
The typography design mainly uses a zigzag approach to guide the viewer's reading route.
Fig 4.6 layout design
3. Functionality and Usability
a) Navigation
The homepage immediately showcases the site's signature products, allowing viewers to quickly identify them. Easy-to-understand links lead directly to the product menu and store location. The browser in the top right corner also provides detailed product categories and corresponding product images, making the process very smooth and simple.
Fig 4.7 navigation
b) Interactive elements
The website changes its background color as the mouse moves over products or buttons, adding to the user experience. However, the website is rather simple in style, and aside from some dynamic effects on images, there aren't any other interesting or significant interactive elements.
Fig 4.8 Interactive elements
Fig 4.9 Interactive elements
4. Quality
The main background color of the overall color is white, and the picture of nature occupies a large proportion, surrounding their products in nature and a purely handmade atmosphere, which well expresses their values.
5. Website's Performance
a) Load time
Fig 4.10 performance score in desktop
Fig 4.11 performance score in mobile
b) Responsiveness and Compatibility
Fig 4.12 website adaption in desktop & mobile
6. Conclusion
a) Strengths
Taking photos of nature and farmers and sharing their processes and experiences, this content strategy greatly improves affinity and trust with viewers.
b) Weaknesses
Most of the product pictures are obviously flat drawings rather than real photos. In addition, some product pictures on the computer version of the website are covered, making it difficult to see the information on the packaging. This is a serious mistake.
Website 4: LITECOM created by Erik Bremer, Morten and Rasmus
Fig 5.1 LITECOM
1. Purpose
LiteCom was founded in 2000 by Erik Bremer and his two sons, Morten and Rasmus — a family-built company grounded in Danish craft and a deep respect for technical excellence. What began as a local venture has grown into a recognized name in international visual production, with operations in both Denmark and Sweden and projects delivered across Europe and beyond.LiteCom aim to provide full-scope visual production partner,delivering lighting,video, and rigging solution to support customers' productions worldwide.
2. Visual Design and Layout
a) Color
The dark grey background color perfectly highlights their focus on stage lighting and highlights the brilliant lighting effects in the photos.
Fig 5.2 colors
Fig 5.3 colors
b) Typography
Fig 5.4 typefaces
c) Imagery
The photography content mainly revolves around the stage lighting effects and the setting process. There is no color restriction, but the white space of the background color has different warm and cool tones, making the web page picture very rich.
Fig 5.5 Image in desktop view
Fig 5.6 Image in mobile view
d) Layout
As the screen slides, the reading order changes from top to bottom to left to right, and the appearance of pictures will also force the reading direction.
Fig 5.7 layout design
3. Functionality and Usability
a) Navigation
The website has a very simple menu in the upper right corner, which allows you to return to the homepage smoothly after switching to other pages. However, the transition between pages is a bit slow, which does affect the user experience.
Fig 5.8 navigation
b) Interactive elements
As the webpage scrolls, the content below slowly emerges, giving the website an interesting dynamic effect and making up for the monotony of the solid background color. As the mouse moves over the image, the image also has a dynamic zoom effect, which increases the guidance.
Fig 5.9 Interactive elements
Fig 5.10 Interactive elements
4. Quality
While the website's overall color scheme features a contrasting light and dark palette, the soft, dark gray background prevents glare. The well-balanced layout of the text and images creates a balanced and comfortable reading experience.
5. Website's Performance
a) Load time
Fig 5.11 performance score in desktop
Fig 5.12 performance score in mobile
b) Responsiveness and Compatibility
Fig 5.13 website adaption in desktop & mobile
6. Conclusion
a) Strengths
Choosing dark gray instead of pure black for the background color of the website is a very good choice. It can not only highlight their lighting effects with dark colors, but also take into account the visual comfort of the viewers.
b) Weaknesses
The website uses large text to emphasize key information, but the font size of titles and key content is too large, which makes it difficult to read. There is a noticeable lag in the appearance of content and images between pages, which slightly affects the browsing experience.
Website 5: Hannah Miles created by Extract Studio
Fig 6.1 Hannah Miles
1. Purpose
The Hannah Miles is a fashion website about photographer by a London-based design and branding agency working worldwide since 2010.
Hannah Miles aim to showcase photography that specialising in menwear, people and commercial. The website reflects how photographic can be an art and show the fashion value well.
a) Color
The background color of the website is mainly soft beige, and only the contact page has a special black background color. The font color is mainly black and white.
Fig 6.2 colors
Fig 6.3 colors
b) Typography
The choice of font is very consistent with the style of the website. It is simple and powerful, which makes the website more textured.
Fig 6.4 typefaces
c) Imagery
From the website, 90% of the photos are of men and 10% are of women. It specialize in men's clothing, but there also have a small amount of photos of accessories and food.
d) Layout
The website layout uses a grid system to arrange all the works, and the title is placed at the bottom of the picture to make it conspicuous without interfering with the picture.
Fig 6.7 layout design
3. Functionality and Usability
a) Navigation
Compared to the common search engine located in the upper corner, the menu of this website is located at the bottom and is conveniently designed in the form of buttons. Since the content is not very diverse, the simplest button method of classification also makes the operation screen more streamlined and advanced.
Fig 6.8 navigation
b) Interactive elements
As you scroll through the website, images gradually appear from their original positions, moving downward. Hovering the mouse over an image reveals the model's name or the brand they've partnered with, while clicking on the image zooms in for a better look. Switching between pages first reveals the theme, then the content, creating a sense of gradual progression.
Fig 6.9 Interactive elements
Fig 6.10 Interactive elements
4. Quality
Overall, the website's color scheme is clean, and the font choice highlights the high-quality imagery of the artwork. Since viewers are primarily focused on viewing the artwork, it's wise to omit most operational and interactive elements, instead adding a simple dynamic display of the title between page transitions.
5. Website's Performance
a) Load time
Fig 6.11 performance score in desktop
Fig 6.12 performance score in mobile
b) Responsiveness and Compatibility
Fig 6.13 website adaption in desktop & mobile
6. Conclusion
a) Strengths
The colors of the works are mostly low-saturated, making the pictures look harmonious and high-end. Although the background design is very monotonous, it actually provides clean white space for the various photos to show their own uniqueness.
b) Weaknesses
The slideshow of images is a bit confusing, as it scrolls in a loop. A little more categorization, perhaps into collections, would be helpful. The information provided for each image is too limited, and the photographer's information on the contact page is also quite limited. It will be better if adding more information about the photographer's philosophy to better understand their style and facilitate communication.
Reflection
From the beginning, I had many questions about the module I was supposed to learn, and it was even a bit unfamiliar. However, this website analysis report gave me a solid foundation for understanding websites, or rather, through observation and experimentation, I became more comfortable with and comfortable with them. I understand that the course schedule was compressed, so the first assignment was quite demanding, but the analysis process also kept me thinking, which energized my brain for the upcoming assignments.
Comments
Post a Comment