Interactive Design | Exercises 2
30
Apr
2025
-
7
May
2025
(Week
2-3)
Justin
Cleon
(0375523)
Interactive Design | Exercises 2
Table
of
Contects
1. Instructions
2.
Lectures
Lecture
2
(Week
2)
:
Usability:
Designing
Products
for
User
Satisfaction
What
is
Usability?
Usability
refers
to
how
effectively,
efficiently,
and
successfully
a
particular
user
can
utilize
a
product
or
design
in
a
certain
situation.
It
is
a
part
of
User
Experience
(UX)
Design.
It
is
the
second
level
of
UX
Design.
Overall,
a
design's
usability
depends
on
how
well
its
features
accommodate
users'
needs
and
contexts.
When
users
first
see
an
interface,
they
should
be
able
to
navigate
it
easily
and
reach
their
goal
without
relying
on
expert
knowledge. An
interface
with
high
usability
guides
users
through
the
simplest
path
to
achieve
their
goal.
There
are
5
key
principles
of
usability:
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
1. Consistency
Consistency is a key factor in web design for both visual elements and functionality to ensure that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.
Consistent design is intuitive design. It includes a consistent navigation system, page layout, fonts and typography and branding in web design. If similar looking things do not produce a similar output, the user is bound to become frustrated.
Figure 2.1 Consistency
2. Simplicity
The principle that user interfaces should be “simple” refers to minimizing steps involved in a process, using clear symbols and terminology, and making it difficult to make mistakes.
Incorporating simplicity in a design helps users achieve their goals faster and more efficiently, while enjoying a great user experience.
Figure 2.2 Simplicity
3. Visibility
Visibility is the basic principle that the more visible an element is, the more likely users will know about and use it. Users should know, just by looking at an interface, what their options are and how to access them.
Figure 2.3 Visibility
4. Feedback
Feedback communicates the results of any interaction, making it both visible and understandable. It gives the user a signal that they (or the product) have succeeded or failed at performing a task.
An example is when an icon changes color on a mobile app when you are on the selected screen.
Figure 2.4 Feedback
5. Error Prevention
It involves alerting a user when they are making an error, to make it easy for them to do something without making a mistake. The principle is important because humans are prone to making mistakes.
Figure 2.5 Error Prevention
Common Usability Pitfalls and How to Avoid Them
• Complex interfaces
• Confusing navigation
• Poor feedback
• Inadequate error handling
Lecture 3 (Week 3) : Understanding Website Structure
Website structure is the foundation of a user-friendly and accessible website. A well-structured website helps users find information easily and keeps them engaged.
There are 3 key elements of a website:
- Header
- Body
- Footer
Header
The header is the top section of a webpage. It usually contains the website's logo, navigation menu, and contact information, giving users quick access to essential information.
Body
The body is the main content area of a webpage. It contains text, images, videos, and other multimedia elements, and its organization is crucial for readability.
Footer
The footer is located at the bottom of a webpage. It typically includes copyright information, links, and contact details, providing closure and additional navigation options.
Organizing Content
Content organization is key to a well-structured website. Using headings and logical grouping of content and clear labels improves user experience.
Navigation Menus
Navigation menus help users move around the website. Use clear labels for menu items, and consider dropdown menus for complex sites.
3. Exercises 2
Exercises 2: Web Replication
Choose two (2) websites from Exercises 1: Web Analysis.
Replicate it through using Adobe Photoshop or Adobe Illustrator
to gain insights into web designs. Following the dimensions of
the existing website, including the width and height.
Key Considerations:
- Images used can be stock images from websites such as Pexels and does not have to be the exact same thing in the original website.
- Focus on the layout, type style, and color style. To find similar typefaces/fonts, we can download fonts from Google Fonts.
1. Baci Baci Matera
Figure 3.1 Replicate the font
The first thing I did was search and find a font that is similar to the brand name "BACI", helped by ChatGPT, which gave me several lists of options that I could find in Google Fonts. Then, I tried and compared one by one what font was capable of matching with the brand name and text typeface. However, it was quite challenging for the brand name, so I combined it with some different typefaces.
Font used:
B - Playfair Display (Semibold)
A - Abaddon™ (Regular)
C - Charm (Regular)
I - Playfair Display (Regular)
Donkey Milk - Poppins (Bold)
Cuddles - Brownhill Script (Regular)
Body text (text typeface) - Work Sans (Medium)
Figure 3.2 Replicate layout and images
The guidelines were useful and helped me to do alignment. I used the Selection Brush Tool, Quick Selection Tool, and Magic Wand Tool on Adobe Photoshop to clear the background and make a layout which I couldn't make. For the images, I replaced it with other images that I found on Pinterest and look closely at shown on the website.
Here are the images that I applied to recreate as the original website:
Figure 3.3 Source: Pinterest
Final Baci Baci Matera (Replicated Website)
Here is the link: https://bit.ly/WebReplication
Figure 3.4 Final Baci Baci Matera (Replicated Website)
2. Wov World Body
Figure 3.5 Replicate the font
Same as the first website I replicated, I selected a font that is closely matched appearing on the website. However, it was difficult and hard to find as the original font.
Font used:
Headline - Montserrat (Medium)
Body text (text typeface) - Work Sans (Light)
Figure 3.6 Replicate layout and images
Overall, this website is very simple and minimalist compared to the previous website. Since the website has not too many elements, only text and images.
Here are some images (more images remain) that I applied to recreate as the original website:
Figure 3.7 Source: Pinterest
Final Wov World Body (Replicated Website)
Here is the link: https://bit.ly/WebReplication
4. Feedback
That's fine if the image is not exactly the same. The important thing is to know and understand in detail how website layouts are arranged.
5. Reflection
In the beginning, I thought that this exercise was quite easy, just replicating websites with Adobe Illustrator. However, I kind of underestimated it because finding exactly the same or similar font on that website was quite challenging for me. Additionally, replicating a website design is very time consuming.
Comments
Post a Comment