Interactive Design - Exercise 1
SHIMANLIN,（0375858)
BACHELOR OF DESIGN(HONOURS)IN CREATIVE MEDIA || TAYLOR'S UNIVERSITY
INTERACTIVE DESIGN - Exercise 1
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Reflections
LECTURES
Week 1
Mr. Shamsul gave a clear explanation of the module content and walked us through the assignment tasks for this week. He provided detailed information for each task, which helped us understand all the requirements and clear up any doubts we had.
Week 2
Usability: Designing Products for User Satisfaction
Figure 1.1 Week 2 Lecture Presentation Slides by Mr. Shamsul / Week 2 (30/4/2025)
Usability refers to how easily users can interact with a product to
accomplish their goals effectively and efficiently, without requiring prior
technical knowledge. In this session, we learned about five core principles
of usability: Consistency, Simplicity, Visibility, Feedback, and Error
Prevention.
- Consistency
Maintaining consistency in layout, navigation, fonts, and branding helps
users feel more familiar and comfortable while using the interface. Examples
like the Adidas Mobile App, Strava, and ZUS Coffee app were mentioned to
illustrate this principle.
- Simplicity
A clean and simple design allows users to complete tasks more quickly,
reducing confusion and decision fatigue.
- Visibility
A well-designed interface should clearly display the available options and
actions. For example, using contrasting colours can help highlight important
buttons or sections.
- Feedback
Providing immediate feedback lets users know their actions have been
registered or completed successfully, such as a loading animation or
confirmation message.
- Error Prevention
Good design helps prevent mistakes by warning users before they make an
error or offering clear instructions to avoid confusion.
After learning these principles, we worked in groups to create a hand-drawn
prototype for a mobile app for Taylor’s University. During the critique
session, Mr. Shamsul pointed out that the prototype did not include any
features for visitors to find ongoing events. I responded by suggesting that
we could add an “Events” section directly under the homepage banner, below
the search bar. This would allow visitors to view upcoming events and get
directions more easily.
INSTRUCTIONS
TASK
I chose these five websites ：
EXERCISE 1 - Web Analysis
The website is the official website of the French creative agency HOMERUN,
which mainly showcases its project cases in the fields of innovation and
communication.
# Visual Design & Layout
1. The design of this website has a minimalist aesthetic, with lots of
white space, and the layout of the content cleverly draws attention to
the pictures and case studies.
2. The website uses a lot of interactive scrolling elements, and the
images move in layers as you scroll down the page, which adds a sense of
dynamics to the user experience.
3. The layout of the website is simple and easy to read, with bold
titles and small text content, which gives users a comfortable feeling.
# Functionality & Usability
The website has smooth navigation. The top navigation bar allows users
to easily access the various sections of the website. The layout of
these sections is simple and clear,making it easy for users to find the
information they need.
# Content Quality & Relevance
1. The content of this website is logically clear and easy to
understand. The language is professional and easy to understand, and it
cleverly combines professional terms with easy-to-understand
explanations to make it easier for users to understand.
2. The website uses high-quality images and videos. These visuals are
pleasing to the eye and closely related to the projects presented, which
helps to provide a good narrative effect for the case studies.
# Responsiveness
The website is responsive and works well across devices. It adapts to
different screen sizes. The images and content scale perfectly to fit the
mobile and desktop views, ensuring a smooth experience on different
devices.
# Weaknesses & Suggestions
1. The site has high-resolution images and lots of scrolling animations,
so it may load slowly on weaker or older devices.
- Optimize animation effects to ensure website loading speed and
response time on various devices.
2. The case studies on this site focus on visuals and narratives, which
results in a lack of tangible metrics or data.
- Add detailed case studies that showcase project challenges,
solutions, and outcomes.
# Purpose & Goals
The website mainly introduces Yellow Fellow, a creative animation studio
based in Tel Aviv, founded by Guy Trefler. Their creative style combines
humor, vitality and visual impact, and is highly recognized by the
industry.
# Visual Design & Layout
1. The website features a bold, experimental visual design and a highly
dynamic, animated layout. It uses dynamic typography, playful scrolling
effects, and full-screen visuals to embody the forward-thinking
aesthetic and creativity of this art studio.
2. The website uses a theme with bright, highlighted colors that quickly
grab the user's attention.
# Functionality & Usability
1. The site features smooth interactions, scroll-triggered animations, and
a cross-device responsive design.
2. It's visually conscious, but its minimalist navigation may be confusing
to first-time users.An overly creative interface strengthens its artistic
brand image, but it also sacrifices the clarity of the interface.
# Content Quality & Relevance
1. The content and information on this website are clearly organized,
allowing users to easily browse and obtain the information they need.
2. The website has a clear target audience. It is mainly aimed at
brands, advertising companies, music labels, etc. The content closely
follows their needs and demonstrates the professionalism of the studio.
# Responsiveness
The website performs well on desktop, but the experience on mobile devices
is not so good. Some animation effects are not fully displayed on small
screens, or load slowly, affecting the user experience. In addition, some
interactive elements may not respond well on touch screen devices,
resulting in inconvenience in operation.
# Weaknesses & Suggestions
1. The homepage and project pages are densely packed with content
and lack a clear hierarchy.
- Add more separators, such as titles, icons, etc., to improve readability
and user experience.
2. The loading speed and interactive experience of this website on mobile
devices have decreased.
- Further optimize the loading speed and interactive design of the mobile
terminal to ensure consistency and smoothness on various devices.
# Purpose & Goals
The website features OH Architecture, an architecture and interior design
firm based in Brisbane, Australia, that focuses on creating human-centric
residential and commercial spaces for its clients.
# Visual Design & Layout
1. The website uses a simple color scheme, mainly in neutral tones,
highlighting the project images and content. In terms of typography,
the fonts are modern and easy to read, enhancing the overall visual
comfort.
2. The navigation structure of this website is clear. Each section is
organized through simple menus and links, allowing users to easily
find the information they need.
# Functionality & Usability
1. The website displays multiple projects, and users can view project
details by clicking on thumbnails. Each project page has pictures of the
firm, project introduction and design concept, which is rich in content
and demonstrates its design strength.
2. The website adopts a simple design style, unified color matching
and layout, and an intuitive interface that is easy to operate. Users
can easily browse projects, understand the firm's design concepts, and
contact the firm through the project consultation form.
# Content Quality & Relevance
1. The website clearly reflects the core concept of the firm: 'We design
places for people' This concise and powerful expression highlights the
people-oriented design concept and conveys the firm's brand image of
focusing on customer needs and spatial functionality.
2. The website content is highly consistent with the firm's brand
image, emphasizing the design concept of people-oriented,
detail-oriented and functional. This consistency helps to establish the
brand's professional image and enhance client recognition.
# Responsiveness
The site uses a fluid grid system, which allows elements to resize
proportionally based on the screen size. This ensures that content
remains well-aligned and accessible regardless of the device being used.
# Weaknesses & Suggestions
1. The content of the process page is slightly ordinary.
- Use more colors or change the fonts in the text section, add
customer stories, pictures or video introductions.
2. The website has too many images, which may slow down loading times
on slower connections.
- It is recommended to compress images, streamline some animations,
and optimize loading speed.
# Purpose & Goals
The website is the official website of In Cognita, a brand and consulting
company based in France, which focuses on helping companies and teams cope
with crises. Its official website is known for its bold, artistic design
style and innovative interactive experience.
# Visual Design & Layout
1. The site's large fonts, dark theme aesthetic, and dynamic
animations create a mysterious and sophisticated vibe.
2. The layout is asymmetrical and artistic, and incorporates
interactive elements and scroll-triggered effects to guide the user
experience.
# Functionality & Usability
1. The website features a dynamic layout with animations and
transitions to make it easy for users to navigate the content.
2. The website's minimalist menu design requires users to hover or
click to reveal options, which may not be intuitive for some visitors.
# Content Quality & Relevance
1. The website explores topics such as crisis management, emotion
regulation, and negotiation skills, reflecting In Cognita's expertise
and experience in these areas.
2. The content closely revolves around the needs of companies in times
of crisis and provides targeted solutions.
# Responsiveness
The site uses a fluid grid system, which allows elements to resize
proportionally based on the screen size. This ensures that content
remains well-aligned and accessible regardless of the device being used.
# Weaknesses & Suggestions
1. This website is only available in French.
- Add multiple language options including English.
2. The site's visuals and design are conservative.
- Add dynamic buttons or animation effects to enhance the
interactivity and attractiveness of the page.
- 5 Website : Homepage - Topology
# Purpose & Goals
The website is a cutting-edge technology venture capital company called
Topology, which focuses on investing in early-stage startups in the
fields of artificial intelligence, decentralized systems, neural
technology, etc.
# Visual Design & Layout
1. The website uses a black and white color scheme, highlighting its
stylish and modern aesthetic.
2. The website's homepage is simple, with ample white space,
highlighting key information and effectively directing user
attention.
# Functionality & Usability
1. The website uses dynamic elements and smooth animations to
attract users to browse the content.
2. The website is designed to ensure that the content is easy to
read and access, and uses appropriate contrast and font size.
# Content Quality & Relevance
The website introduces Topology’s focus on early-stage investments in
artificial intelligence, decentralized systems, and neurotechnology,
and cites some specific examples that reflect its investment in
cutting-edge technologies.
# Responsiveness
The site uses a fluid grid system, which allows elements to resize
proportionally based on the screen size. This ensures that content
remains well-aligned and accessible regardless of the device being
used.
# Weaknesses & Suggestions
1. The minimalist design of the website is visually appealing, but it
may make it difficult for users to quickly find specific information.
- Add more visible headers or drop-down menus for easier navigation.
2. The website lacks interactive elements that can attract users.
- Add interactive elements like hover effects on buttons to enhance
the browsing experience.
3. The website's introduction to itself is too one-sided and lacks
more in-depth content.
- Add a blog or insights section.
REFLECTIONS
Experience
Through this exercise, I gained a clearer understanding of how digital
interfaces are structured and how design choices influence usability.
Working through each layout helped me think more critically about
spacing, alignment, and content flow. It also made me realize how much
thought goes into even the smallest part of a website, such as button
placement or the hierarchy of information. I found the process
engaging because it challenged both my creative and analytical
thinking.
Observations
I observed that even the most visually appealing websites can become
frustrating if the navigation is not intuitive. A logical,
user-friendly structure is essential to guide visitors smoothly
through content. I also noticed that some designs prioritize
aesthetics over clarity, which can lead to confusion. It's important
for design to balance form and function — beauty should not come at
the expense of usability.
Findings
I found that user interaction is not just about visuals — it's also
about feeling. Subtle feedback, logical transitions, and a sense of
flow all contribute to the overall experience. In addition, this task
reminded me of the importance of evaluating a design from the
perspective of a first-time user. What seems obvious to the designer
may not be obvious to the visitor. Taking a step back and thinking
from the user’s point of view is crucial.
Comments
Post a Comment