Interactive Design | Exercises 1
23
Apr
2025
-
30
Apr
2025
(Week
1-2)
Justin
Cleon
(0375523)
Interactive Design | Exercises
Table
of
Contects
1. Instructions
2.
Lectures
This week is lectures-free.
3. Exercises
Exercises 1: Web Analysis
Choose five (5) websites from the link given. Review the website that
you've selected carefully, 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. Write a brief report
summarizing your findings and recommendations (200 words minimum for
each website).
Key Considerations:
- Are the purpose and goals of the website effectively communicated to users?
- How effective is the website's visual design and layout (color, typography, and imagery)?
- How functional and user-friendly is the website (navigation, forms, and interactive elements)?
- How would you evaluate the quality and relevance of the website's content (accuracy, clarity, and organization)?
- How well does the website perform (load times, responsiveness, and compatibility with different devices and browsers)?
1. Baci Baci Matera
Purpose & Goal
Baci is a cosmetics and personal hygiene product. They are the
Fratello Sole Cooperative, helping other people with addictive
tendencies and mental illness since 1982. They are committed to
focusing on psychological and social reintegration, supporting
individuals to recover confidence, cooperation, and independence. For
over 10 years, donkeys have contributed greatly in their journey and
are truly remarkable creatures with great therapeutic power to afford
comfort and safety. By incorporating onotherapy (donkey therapy),
their treatment programs deliver excellent outcomes.
Accordingly, their mission is to create a recognizable
branding "Coccole al latte d'asina" which means
"Cuddles with Donkey Milk", nourishing and moisturising your skin with natural, paraben and
petroleum products. Whether for your own well-being or to make a
unique and healthy gift.
Figure 3.2 Purpose & Goal
Visual Design & Layout
Overall, the design appearance is
delightful, eye-catching, and
instructive when first opening the
link. The combination of two (2) of
fonts in simple design layout makes
the design lively and comfy to create
aesthetic appeal. In addition, the
merge of dreamy shades and dynamic
colors come up with a fresh
perspective for skincare
products.
Figure 3.3 Visual Design & Layout
Functionality &
Usability
The
navigation
menu
is
easily
visible
and
has
great
options
at
the
top.
On
the
other
hand,
I
have
some
distractions
when
we
are
scrolling
or
sliding
down,
the
navigation
menu
fades
away
and
suddenly
shows
up
again.
It
would
be
better
if
it
kept
staying
there
with
seamless
and
convenient
access.
Lastly,
all
the
buttons
and
icons
when
we
want
to
click
run
smoothly
with
the
background
images
transitioning
regularly
and
little
feature
animated
movements.
Figure 3.4 Functionality & Usability
Quality & Relevance Content
Personally, this is an excellent
website with readable content and
impressive visuals for user friendly
design. The information is simple
and structured, which fits for
spoiling the audience's eyes.
Performance & Load
Time
There
is
nothing
wrong
with
the
performance,
everything
is
responsive
and
works
well.
Nevertheless,
the
load
time
on
the
phone
is
slightly
delayed
or
lagged
rather
than
on
the
laptop.
It
is
responsive
and
instant.
Figure 3.5 Performance & Load Time
2.
BlueYard
Capital
Figure
3.6 Homepage
of
BlueYard
Capital
Purpose
&
Goal
BlueYard
Capital
wants
to
support
and
invest
in
foundational
(fabric-level)
technologies
that
will
shape
the
future
world.
Additionally,
their
goal
is
to
be
active
partners,
nurture
breakthrough
ideas
from
the
ground
up,
and
have
lasting
impact
beyond
short
term
gains.
Figure 3.7 Purpose & Goal
Visual
Design
&
Layout
The
design
outlook
is
futuristic
and
geometric
abstraction,
gradient
backgrounds,
minimalist
typography
captures
the
vibe
in
another
dimension.
The
combination
with
animation
element
design
and
sans
serif
font
creates
clean,
dynamic
and
cozy.
In
addition,
the
background
is
well
with
foreground
visuals,
enhancing
the
immersive
vibe.
Figure 3.8 Visual Design & Layout
Functionality
&
Usability
This
website
functions
well
without
any
issues
and
there
is
no
navigation
menu
on
top
of
this
website.
However,
it
is
customized
as
a
button
'Menu'
at
the
top
right
and
bottom
left
just
for
sliding
to
the
next
slide
or
content.
Additionally,
it
still
remains
simple
and
user
friendly
to
navigate
and
animation
cursor
effect
following
when
we
want
to
move
the
cursor.
Figure 3.9 Functionality & Usability
Quality
&
Relevance
Content
From
my
perspective,
this
is
a
superior
and
the
next
level
of
website
with
clear
information
and
impressive
visuals
for
user
friendly
design.
The
information
is
simple,
structured,
and
animated,
which
fits
moving
the
cursor
repeatedly
for
spoiling
the
audience's
eyes
with
the
effect.
Performance
&
Load
Time
The
initial
load
time
is
slightly
delayed
or
lagged
for
devices
besides
desktop.
I
think
this
is
because
the
website
contains
too
many
elements
animated
to
process
when
scrolling
the
pages,
well
no
other
problem
besides
that.
Figure 3.10 Performance & Load Time
3.
The
Museum
of
Digital
Influence
Purpose
&
Goal
The
Museum
of
Digital
Influence
is
a
charitable
platform
established
by
Zorka.
Agency,
one
of
the
leading
influencer
and
performance
marketing
agencies
globally. They
are
dedicated
to
educating
and
engaging
the
rich
history
of
digital
influence,
showcasing
how
online
connection
and
content
creation
have
transformed
over
time.
The
Museum
uses
AI
powered
artefacts
combined
with
human
crafted
narratives
for
an
informative
and
immersive
experience.
Additionally,
the
Museum's
epochs
feature
ambassadors
who
formed
influencer
marketing
to
recognize
their
impact
and
inspire
future
creators.
Figure 3.12 Purpose & Goal
Visual
Design
&
Layout
This
website
uses
metaphors
of
time
travel,
art
curation,
and
doorways
to
explore
the
evolution
of
digital
media.
The
bottom
section
plays
a
key
role
with
decorative
and
functional
in
storytelling
and
navigation.
It
acts
grounding
the
experience
in
time
and
giving
the
users
a
map
through
digital
history.
The
colors
of
each
digital
phase
have
a
distinctive
hue,
adding
clarity
and
mood.
In
addition,
the
fonts
used
sans-serif
in
the
homepage
reflect
clean,
modern,
and
highly
legible.
Figure 3.13 Visual Design & Layout
Functionality
&
Usability
The
website
functions
well
for
every
story
or
chapter,
all
the
articles
in
it
are
clickable,
then
it
will
be
moved
into
those
specific
articles.
The
animation
for
the
overall
experience
serves
a
clear
communicative
purpose
to
present
a
timeline
or
progression
of
steps.
The
design
encourages
quick
understanding
without
overwhelming
the
users,
which
means
user-friendly
and
accessible.
Figure 3.14 Functionality & Usability
Quality
&
Relevance
Content
The
contents
are
perfectly
structured
with
the
sections
of
the
important
information
effectively
communicating
clear
instructions
and
persuasive
for
people
to
go
through
the
website
because
it's
like
going
through
a
journey
or
adventure.
The
combination
of
color
and
text
makes
the
design
readable
without
any
issues.
Additionally,
it
guides
the
viewers'
eyes
according
to
its
intentions
and
engages
users
intellectually
and
emotionally.
Performance
&
Load
Time
The
performance
is
awesome,
there
is
nothing
wrong
with
the
performance,
everything
is
responsive
and
works
well.
However,
when
I
am
using
the
phone
I
have
to
wait
for
a
long
time
on
the
loading
pages
before
opening
the
homepages
because
the
website
contains
many
animations
to
process.
Figure 3.15 Performance & Load Time
4.
Into
the
Amazon
|
National
Geographic
Purpose
&
Goal
Reporting
for
this
project
is
presented
by
the
National
Geographic
Society
in
partnership
with
Rolex
under
the
National
Geographic
and
Rolex
Perpetual
Planet
Amazon
Expedition
to
explore
and
study
Amazon's
Waters,
document
environmental
change
through
science
based
research
and
photography,
protect
the
Amazon
by
highlighting
the
importance
of
Amazon's
waterways,
support
science
and
international
collaboration.
Figure 3.17 Purpose & Goal
Visual
Design
&
Layout
The
visual
design
emphasizes
clarity,
narrative
flow,
and
emotional
resonance.
Supporting
visual
hierarchy
text
is
smaller,
with
spacing
and
weight
to
guide
the
reader's
eye.
The
layout
design
uses
a
vertical
scroll
to
gradually
reveal
content
perfect
for
long
form
storytelling
with
smooth
transitions
and
content
layering
enhance
immersion. The
middle
left
and
top
right
section
plays
a
key
role
with
decorative
and
functional
navigation.
The
colors
of
each
digital
phase
have
purposeful,
minimalist
and
effective
in
guiding
attention
using
accent
colors
selectively. In
addition,
the
fonts
used
sans-serif
in
the
homepage
reflect
clean,
modern,
and
highly
legible.
Figure 3.18 Visual Design & Layout
Functionality
&
Usability
The
website
functions
well
for
every
story
or
chapter
with
interactive
elements
for
the
overall
experience
serves
a
clear
communicative
purpose
when
scrolling
down
through
all
the
information,
all
the
articles
in
it
are
clickable,
then
it
will
be
moved
into
those
specific
articles.
The
navigation
menu
on
the
top
right
is
comfortably
clear
for
quick
access
and
on
the
middle
left
appears
to
be
a
vertical
scroll-based
progress
or
section
navigation
bar.
The
interface
design
enables
users
to
understand
content
swiftly
without
being
overloaded,
which
means
it
offers
a
smooth,
user-friendly
experience
that
is
accessible
to
all.
Figure 3.19 Functionality & Usability
Quality
&
Relevance
Content
Personally,
the
quality
and
relevance
of
content
with
accurate,
well
sourced
facts,
rich
storytelling
and
narrative
structure,
highly
relevant
to
climate
science,
geography,
indigenous
cultures,
and
environmental
change.
The
combination
of
color
and
text
makes
the
design
readable
without
any
issues.
Performance
&
Load
Time
The
performance
is
awesome,
there
is
nothing
wrong
with
the
performance,
everything
is
responsive
and
works
well.
On
the
other
hand,
when
I
am
using
the
phone,
it
is
slightly
delayed
or
lagged
because
the
website
contains
many
animations
to
process.
Additionally,
the
navigation
on
the
phone
moved
to
the
top,
it
should
be
on
the
middle
left
although
still
functional.
Figure 3.20 Performance & Load Time
5.
World
of
Volvo:
Every
Body
Figure
3.21 Homepage
of
World
of
Volvo:
Every
Body
Purpose
&
Goal
"Every
Body"
is
an
interactive
installation
to
serve
as
an
engaging
and
intuitive
introduction
to
the
World
of
Volvo
exhibition,
emphasizing
the
idea
that
mobility
should
adapt
to
the
unique
needs
of
every
individual.
Their
goal
is
to
create
a
memorable,
visually
and
interactively
communicate
Volvo's
commitment
to
inclusivity,
innovation,
and
human
centered
design.
Figure 3.22 Purpose & Goal
Visual
Design
&
Layout
The
visuals
are
pretty
simple
and
classic
as
people
are
easy
to
find
compared
to
the
previous
websites
I
reviewed.
I
understand
that
this
website
aspires
to
focus
more
on
the
functionality
rather
than
aesthetics
with
animations
or
something
more
complex.
Figure 3.23 Visual Design & Layout
Functionality
&
Usability
The
website
functions
well
when
scrolling
down
through
all
the
information.
The
navigation
menu
on
the
top
left
is
comfortably
clear
and
stays
there
with
flawless
and
quick
access.
Additionally,
the
information
was
displayed
clearly
with
descriptions
supporting
effective
communication.