INTERACTIVE DESIGN EXERCISE1: WEBSITE ANALYSIS
|| 24/09/24-24/12/24
|| Sun Jia Yi / 0370449
|| Interactive Design / Bachelor of Design (Hons) in Creative Media
|| Exercises 1/ Website Analysis
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Feedback
4. Reflection
LECTURES
Week 2:
Our instructor played a movie for us in class on "bad doors." The name
"Norman Door" and its concept are introduced in this video.
A door that is intended to instruct you to do the exact opposite of what
you should be doing.
a door that requires a sign to be corrected after sending the incorrect
signal.
An interface must be understandable. A tutorial bubble may appear for
some applications, such as Adobe Illustrator, to help users become
familiar with the interface; however, this should not occur on a
website.
Enough discoverability and feedback are essential components of a
well-designed product, a concept known as "human-centered design."
Usability：Designing Products for Users Satisfication
The term "usability" describes how well, successfully, and efficiently
a certain user can utilize a product or design in a given
circumstance.It relies on how well its features suit the demands and
circumstances of the user.
On their first attempt, a user ought to be able to figure out how to
accomplish the goal without the need for specialized
expertise.
Principle of Usability:
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
Consistency
- Make that the headers, footers, sidebars, and navigation bar of the website function and appear cohesive.
- Design that is intuitive is consistent.
- Add the page layout, menu structure, typography, branding, and navigation system.
- For users to learn, consistency is essential; similar-looking objects must yield similar results.
Figure 1.1: Example of Consistency
Simplicity
- Users should find user interfaces to be "simple."
- Make reference to the necessity of reducing the number of stages in a process, and using words and symbols that make the interface visually clear.
- Designs that are simple to use enable people to accomplish their objectives more quickly and effectively.
Figure 1.2: Example of Simplicity
Visibility
- Users are more likely to be aware of and knowledgeable about an element's use the more obvious it is.
- An interface should make it clear to users what their options are and how to get them.
Figure 1.3: Example of Visibility
Feedback
- Any contact produces feedback, which is visible and intelligible.
- Its function is to indicate to the user if they have completed a task successfully or not.
Figure 1.4: Example of Feedback
- With the goal of making it simple for the user to do whatever task at hand error-free, it warns them when they are making a mistake.
- As an illustration: Are you certain you want to give up without saving?
- Given that people are fallible and will always make errors, this is crucial.
Figure 1.5: Example of Error prevention
INSTRUCTIONS
This is the Module Information Booklet for this Module:
Exercise 1: Web Analysis
In order to complete the first activity, we must select two websites from
the list of links . We must then evaluate each website, analyzing its
functionality, design, layout, content, and overall user experience. We must
also note any shortcomings or issues that the website may have.
What is required for analysis:
- Take into account the website'sobjectives and
purpose, and assess how well the user is informed of them.
- Examine the website's visual design and
layout, paying particular attention to the images, typography, and use of
colour.
- Take into account the website's usability and
functionality, taking into account the forms, interactive features, and
navigation.
- Analyze the correctness, clarity, and
structure of the website's information, as well as its quality and
relevancy.
- Examine the website's functionality, taking
into account its responsiveness, load speeds, and browser and device
compatibility.
For me I choose two websites with different visual effect and give me
different feelings.
Website 1: BRICK STUDIO by
View Source
Figure 2.1: Brick Studio
Brick studio is a full-service photography studio equipped with grips and
lighting equipment to bring your vision to life.
Brick's goal is to build a photography studio that is professional,
extensive, and artistic. Making it easier and quicker for everyone to rent
a photography studio. Better enjoy the joy of photography.
This site provides professional equipment and photography venues. The
equipment includes spotlights, photography brackets, photography lenses
and so on. This equipment helps us to produce better photography, so that
we can be very low-cost (time, price....) We can rent the equipment and
produce good photography at a very low cost (time, price...).
2. Visual Design and layout
a) Colour
The main colours used on this site are solid black and white and dark red,
which make up more than 80% of the site's colours. As a result, headings and
text are always in strong contrast to the background colours, resulting in
clear readability and visibility.
Figure 2.2: Main colours
b) Typography
The title used the fonts used are self-created, giving it an experimental,
technological feel.
Two font families were used. Medium is used for headings and text. and
all uppercase. The font size is 21px.
Figure 2.3: Uppercase
Figure 2.4: Typeface
Figure 2.5: Typeface
c) Imagery
Use the photographer's point of view to zoom in and out to show the
process of photography, how to show models and products. The image
will zoom in and out in the center button.
This is one of the highlights of this site. The quirky presentation
allows the user to get a different perspective on the purpose of the
site, which I think makes the site more interesting to the user.
However, I also found great disadvantages, such as the appearance of
a very visual image in the first interface of the site rather than the
first moment to know the information content and purpose of the
site.
Figure 2.6: Video in mobile view
d) Layout
The overall layout of this site follows a grid system. It follows
strict guide lines and is well organized.
3. Functionality and Usability
a) Navigation
The navigation experience is not bad. The menu layout is
reasonably user-friendly and obvious. In desktop view, the
little animations that play when you click are rather
animated.
Figure 2.7: Navigation_menu
Figure 2.8: Navigation
b) Interactive elements
The website has several interactive features that function
flawlessly.
The user experience is improved overall by the fluid and
dynamic transitions between menus.
Figure 2.9: Interactive element
Figure 2.10: Interactive element
a) Quality
Overall, this is a high quality website. The visuals
are exaggerated and the information is presented more
clearly. Users can navigate and find what they are
looking for with relative ease.
b) Relevance
The content of the site is relatively niche as it mainly
sells photography equipment and venues. Although it may
not appeal to a wider user base, it provides a
professional service and solves problems for the target
audience looking for this information.
5. Website's Performance
a) Load time
I utilized PageSpeed Insights to evaluate its
functionality.
The amount of material drawn and the lengthy
overall blocking time for interactive designs and
other things lower the performance score.
Figure 2.11: Performance
score_mobile
Figure 2.12: Performance score_dekstop
b) Compatibility and responsiveness
The website is mobile, tablet, and desktop
responsive; the layout is simple and
uncluttered. However, the mobile 3D rotation
is a little sluggish.
a) Strengths
Brick studio's appealing and engaging layouts
that provide users with pertinent information
are its strongest points. The user always has a
positive experience with interactive design. The
arrangement exudes a strong feeling of
exploration and edge. Overall, the content
material is straightforward and easy to
understand, and the user experience is improved
by the lively and playful interactive design
during transition points.
These qualities are all retained across a
variety of gadgets, including tablets,
smartphones, and desktop computers.
b) Weaknesses
Brick Studio is not without its flaws. First off, loading
speeds and functionality are decreased even if the concept
of displaying artwork utilizing zoom-in and zoom-out
components is innovative. The site's primary goal and
message cannot be seen by users at the same time. The impact
of zooming in and out lowers the performance score. This
causes loading times to be slower and the overall user
experience to be worse, particularly in mobile views where
it is harder for users to engage with the material
fluidly.
Furthermore, I think that the site's viewability is
diminished by centering huge photos. When huge pictures are
used excessively, they might overpower the viewer and make
it difficult for them to comprehend the information in the
first place. It's crucial to maintain harmony and variation
in equal measure to create a more cohesive and visually
pleasing experience.
Website 2: ZIKD SPACE by KiloKilo
.png)
Figure 3.1: ZIKD Space
An interactive website called ZiKD SPACE features
ZiKD, a recently established center for immersive art
and design in Switzerland.
ZiKD wants to create a space for interactive design
and immersive art. It facilitates conversations about
the implications of developing technologies with a
broad range of participants, including families, media
artists, and educational institutions.
Details on ZiKD's activities and initiatives may be
found on this page. Programs featured talks by
artists, art exhibitions, and workshops, mostly
focused on 2022. They investigate subjects like
augmented reality and the future of art in digital
settings, with a focus on digital, interactive, and
immersive art.
2. Visual Design and layout
a) Colour
The major colours utilized on this website are plain
black and white. Because of this, the text and headers
always stand out sharply against the background color,
ensuring readability and cohesion.
Figure 3.2: Main colours
Some highly saturated sub-colours were used in the 3D
rotating design elements to showcase the artist's name
and project, as well as transition effects during
navigation. However, there is a great contrast with the
simple black and white background. This has really
helped in adding variety and avoiding staleness.
However, there are too many colours employed.
Figure 3.3: Sub-Colours
Figure 3.4: Sub-Colours
Figure 3.5: Sub-Colours
b) Typography
Only Used the Typeface called san-serif.
Two font are used. Medium for heading and text. Bold for
Link. Font size is 14px .
.png)
Figure 3.6: Typeface
c) Imagery
The artist's artwork is shown on the website using a 3D rotating technique. And when they scroll, the pictures will spin like a tornado.
One of the best features on this website is this.
The artwork and the layout's simplicity clash,
which, in my opinion, offers the user a unique and
quirky experience.
The visibility of the artwork and the difficulty
to observe them all at once are two significant
disadvantages of this, though. Additionally
distorting the image and maybe making it less
readable, the rotation impact lowers consistency
even more.
Figure 3.7: Image in desktop view
d) Layout
This website's general typographic arrangement
uses a grid scheme. It is meticulously planned
and strictly adheres to the guidelines. Every
interface maintains the proper amount of white
space.
3. Functionality and Usability
a) Navigation
It's a pleasant navigating experience. The
menu arrangement is sufficiently user-friendly
and straightforward. There's a vibrant little
animation when you click on desktop
view.
Figure 3.8: Navigation_desktop view
b) Interactive elements
There are several interactive components on
this page, and they're all operating
well.
The user experience is improved overall by
the fluid and dynamic transition while
switching between menus.
Figure 3.9: Interactive
element
a) Quality
All things considered, this website is
excellent. The information is presented
simply, and the graphics are tidy.
Navigating and finding what they need is
simple for users.
b) Relevance
The website's content is a little
specialized because it just contains
program announcements and hasn't been
updated since the program's conclusion.
Therefore, it's just transitory.
Nonetheless, the site's content
nonetheless satisfies the target
audience's particular demands given its
intended use.
5. Website's Performance
a) Load time
I utilized PageSpeed Insights
to evaluate its
functionality.
The amount of material drawn
and the lengthy overall blocking
time for interactive designs and
other things lower the
performance score.
Figure 3.10: Performance
score_mobile
Figure 3.11: Performance
score_dekstop
b) Compatibility and
responsiveness
The website is mobile,
tablet, and desktop
responsive; the layout is
simple and uncluttered.
However, the mobile 3D
rotation is a little
sluggish.
a) Strengths
ZiKD Space's simplicity and
structure are what make it so
effective at giving users the
information they need. The
typeface consistently
maintains a pleasing contrast
with the surroundings. The
arrangement is well done, with
enough of white space. The
user experience is improved by
the overall easy and
straightforward navigation and
the dynamic, clever animation
that occurs throughout
transitions.
b) Weaknesses
There are a few ZiKD Space
vulnerabilities. First off, employing a
3D rotating element to display artwork
is a clever notion, but it decreases
visibility. It is not possible for users
to view every artwork at once. The
rotation effect further obscures the
visuals by warping them and adding
extraneous effects. Additionally, it
decreases the performance score. This
element makes it more difficult for
consumers to smoothly engage with the
information by contributing to slower
load times and a worse user experience,
particularly in mobile mode.
In addition, I believe there is too
much variance in the sub-colour
choices. The design may become less
coherent if high intensity colours are
used excessively since they may
overwhelm the viewer and take
attention away from the primary
emphasis. It is important to strike a
balance between harmony and variation
in order to preserve a more cohesive
and aesthetically pleasing
experience.
Exercise 2: Web Replication
Two of the websites' current main pages must be duplicated. Pay
attention to the width and height of the current webpage. We
have access to software such as Adobe Illustrator, Photoshop,
and Figma.
The screenshots from the websites I chose are as follows:
Figure 4.1: Website 1: Ocean Health index
Figure 4.2: Website 2: Banding Running
At beginning, I try to find the fonts on the google
fonts.
At the google fonts, I find the very similar fonts to the
original website.
Font: FK Grotesk Neue Trial(Regular. Medium and Bold)
Figure 4.3: Replication Process
Figure 4.4: Final Banding Running Replicate PDF
Font: Helvetica
Figure 4.5: Replication Process
Final Outcome
Figure 4.6: Final Ocean Health Index Replicate PDF
FEEDBACK
-
REFLECTIONS
REFLECTIONS
Through this exercise, I learned a lot of the website, and also how to analysis the website and studying the basic structure of the website design. Also learned what kinds of website can give the better user experience in UIUX.
Comments
Post a Comment