INTERACTIVE DESIGN - EXCERCISE 1
21.04.25 - 28.04.25 (Week 1)
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 1: Web Analysis
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 1: Web Analysis
TABLE OF CONTENTS
INSTRUCTIONS
In class on the first week, an overview of the whole module (from MIB
briefing to useful instructions and advices) was given by Mr. Shamsul.
Summary:
- Will learn Front End Coding: HTML & CSS + JavaScript.
- HTML is open source: copy-paste is not plagiarism.
- This module will use teams fully.
- Necessity: Adobe Dreamweaver/Microsoft Visual Studio Code.
- We must bring our laptop in every class.
- Netlify: Free server, but limited storage and bandwidth.
- Resources for self-learning: w3schools, codecademy (not free).
- Projects are related to each other.
Our task on the first week is to analyze 5 websites, identifying its strengths and weaknesses and how they impact the user experience.
PROCESS WORK
1st Website - End Speciesism
|
| Figure 1.1 End Speciesism Home Page |
Source: Awwwards
Purpose & Goals
The purpose of the website could be easily acknowledged very early on, as the
first thing the viewers presented with is a short but deep story which
explains their background to support animal rights. The decision to communicate through a story
(graphics, no long texts), supported by the chosen website title and tagline
accurately represents it's vision.
Visual Design & Layout
 |
| Figure 1.2 End Speciesism Color & Type |
Color
The colors used are quite variative which makes the website eye-catching. The colors fit the emotions radiated through the text (vibrant and warm at the beginning story which becomes cold and discomforting in the climax, monochrome for serious contents and data).
The colors used are quite variative which makes the website eye-catching. The colors fit the emotions radiated through the text (vibrant and warm at the beginning story which becomes cold and discomforting in the climax, monochrome for serious contents and data).
Typography
The website uses a very clear and pronounced typeface, which suits the way the messages need to be stated firmly.
Imagery
Graphics and images provided enhances visual interest and helps in reaffirming the text.
 |
| Figure 1.3 End Speciesism Imagery |
Functionality & Usability
Navigation
The different sections and buttons are shown clearly. One exception is for the
swipe element in the health quotation, since there's nothing signing its
existence, some users might not be aware of it.
Form
The forms of the elements in the website are rustic and abstract, very
suitable for a website on natural livings.
Interactive elements
The website implies captivating interactive elements, from the unique
background story transitions, to slight movements in background and buttons
according to the viewers activity really catches viewers' attention to keep
digging further into the website.
Quality & Relevance
Accuracy
The information are based on factual data, each provided with its sources.
However since it is summarized in short, some context is reduced which may
resulted in different interpretations from viewers if they only read the
website without reading through the sources.
 |
| Figure 1.4 End Speciesism Source |
Quality
The contents are quite brief and to the point, establishing a fast
delivery.
Organization
The content has a simple structure which makes it easy to understand.
Performance
Load times
Overall good. The website loads it's contents quite immediately as the viewer
scroll/click. However, there is still a few specific parts which take a while
to load. For example in my case, the live data count of killed animals only showed only
the numbers at first, the images appear after many seconds later.
Responsiveness & Compatibility
The website still shows well in different devices. However, in portrait layout as in smartphones, some landscape images are cropped, so only the middle bit of the image is visible. The tabs are also presented differently compared to laptop or tablet.
 |
| Figure 1.5 End Speciesism Compatibility |
2nd Website - PBS Kids
 |
| Figure 2.1 PBS Kids Home Page |
Source: The Webby Awards
Purpose & Goals
The website is created for kids to explore useful contents, so the website's home page is filled with the website displays and buttons to their contents. The background target of the website is not stated directly in the home page, but is linked at the very top of the page as it is targeted to parents. In the directed page, the goal to educate kids with enjoyment are provided clearly, supported with a video and more links for further explanation.
Visual Design & Layout
 |
| Figure 2.2 PBS Kids Visual Design |
Color
The website's really colorful and saturated, usually perfect for kids. However, the website has many contents, each being really colorful tends to look busy.
Typography
The type used varies, depending on the diverse contents. Most of them are bold in weight, color, and characteristics.
Imagery
The website if filled with lots of custom graphics in the buttons and backgrounds which is a double ended sword, as they attract interest from kids, but may look messy and crowded, overwhelming users in finding the center of attention.
Functionality & Usability
Navigation
The tabs and signs are obvious, but since there's many of them and they're spread out, it may took the user a while to fully understand them.
Interactive elements
Most of the buttons have sounds as the hover effects, with a few having movements.
Quality & Relevance
Quality
The contents are enjoyable, pleasant to both the eye and ears. They're interactive and engaging, perfect for training kids' thinking, senses, and creativity.
Organization
The organization of the website's tabs and elements are tidy. However, the layout for the content's thumbnail is random. It'll be easier to read and look at if they're designed in the same base structure.
Performance
Load times
Some elements (e.g. like the videos, games, and pictures) require a few seconds load time.
Responsiveness & Compatibility
The website's appearance in smartphones looks odd because of the size difference between the large buttons but small image, while in laptop/tablet the proportion is more balanced. In smartphones turned landscape, the structure is completely destroyed with the elements overlapping.
 |
| Figure 2.3 PBS Kids Compatibility |
3rd Website - HYPE: Tattoo Studio
 |
| Figure 3.1 HYPE: Tattoo Studio Home Page |
Source: CSSWinner
Purpose & Goals
From the quotation and image at the start of the home page to the website address, users are already provided a vivid vision of what the website is about, tattoos. By scrolling down, or clicking the tabs, viewer's will gain all the important information needed surrounding the studio details, the team, to their portfolio with ease.
Visual Design & Layout
 |
| Figure 3.2 HYPE: Tattoo Studio Color & Type |
Color
The main color black well-suited the tattoo essence. Having one accent color: blue-green (outside of greys and white) allows precise division and visual appeal.
Typography
The use of a simple and pronounced type presents confidence, convincingly pulling viewers' trust to the text.
Imagery
All images are in the same theme, making it look very cohesive. They all exhibit cool vibes and offers additional context.
 |
| Figure 3.3 HYPE: Tattoo Studio Imagery |
Functionality & Usability
Navigation
Very neat and easy to understand. One minor fault is in the revolving imagery which has no indication of the movement attribute, potentially making it unnoticed.
Interactive elements
A pen/marker strokes feature following the users' movements is cleverly added corresponding with the tattoo theme. Attractive hover effects are also present, giving a professional feel while also reinforcing the message (e.g. particular text movement on the buttons and titles, image pop ups behind text with tracking movements).
Quality & Relevance
Quality
The contents displayed are all highly necessary, providing all information needed regarding the tattoo studio (without unimportant stuff). They're also build and placed convincingly.
Organization
The placement of texts and images are easy to read. They're well-arranged with an intentional bit of randomness, and generating an edgy presence.
Performance
Load times
Most of the contents and elements appear immediately, but the video has a short loading every few seconds.
Responsiveness & Compatibility
The website's able to adapt to diverse devices. Even in smartphones' portrait mode, the composition still appeared seamlessly. The features and interactivity still works in the various devices. The only tiny casualty it has is in smartphones' landscape orientation, where there top part of the page is cropped.
 |
| Figure 3.4 HYPE: Tattoo Studio Compatibility |
Source: The FWA
Purpose & Goals
The use of the website is the first thing mentioned when we opened it, which is to facilitate brands to connect with their audience digitally. As the user go through the whole page, more details and examples are provided in a very fun and creative way.
Visual Design & Layout
 |
| Figure 4.2 Lusion Color & Typography |
Color
The website mainly showcases its contents in black and white, with little hints of blue.
Typography
The texts looks fun, clean, and elegant as a result of using a thin (light in weight) and simple type.
Imagery
The images and videos provided are quite random, showcasing various things, suitable for a creative platform. Example: The use of astronaut and outer space theme although the content has nothing to do with astronaut or outer space.
 |
| Figure 4.3 Lusion Imagery |
Functionality & Usability
Navigation
Evident, both through buttons or scrolling.
Interactive elements
The thing that stood out from the interactivity of this website is the scroll effects. It make use of the scrolling motion in going through a website cleverly. Loading effects and abstract sweeping motion following user's movement adds up the uniqueness (though it has a 1 second delay), making the experience memorable to the user. Different back sounds according the content also enhances the feel of the page.
Quality & Relevance
Quality
Points mentioned in the narratives are supported with the diverse interactive elements and project examples in the website, proving it's quality.
Organization
The composition of the website has slight varieties, avoiding tiredness in reading.
Performance
Load times
Overall very quick. The transition with the buttons are immediate. The load time for the videos are also very little. Since it utilizes some loading effects, the loads just look like intentional transitions.
Responsiveness & Compatibility
Performs amazing throughout all devices. The contents and interactive elements run smoothly. The only little casualty is in a phones' landscape orientation, the first interactive feature isn't really compatible, making the screen fully dark.
 |
| Figure 4.4 Lusion Compatibility |
5th Website - GFI: Career Pathways
 |
| Figure 5.1 FGI: Career Pathways Home Page |
Source: Awwwards
Purpose & Goals
Just like the rest, the main objective of the website is stated early on, followed by a very put-together-illustration. It is targeted for people who look for guidance in seeking their careers in alternative protein. All beneficial information are written and illustrated from the basic definition of the term to the different fields of the career (career maps).
Visual Design & Layout
Color
The website uses a variety of colors, yet they still look united. The colors for topic sections are specified for separation (e.g. greens for plant-based protein, blues for cultivated meat, and yellow for fermented stuff).
Typography
Uncomplicated and straightforward type is applied, appropriate for the objective traits of the contents.
Imagery
The website is filled with illustrated graphics which plays a huge part in the website's visual interest.
Functionality & Usability
Navigation
Uncomplicated and simply understandable.
Interactive elements
Overall simple. Little motions are applied to the website's illustrations. A few modest hover effects are also added to the buttons.
Though the interactivity is ordinary, when combined with great illustrations and sound effects like below, it could produced a masterpiece! Making the process of digging information more pleasant.
Quality & Relevance
Quality
The contents are packed, detailed with lots of information provided on the field, great for scholars and graduates looking for thorough information on possible careers.
Organization
Standard layout of title text, body text, and imagery, allowing a very natural flow of reading.
Performance
Load times
The transition from page to page took a while to load.
Responsiveness & Compatibility
Excellent adaptability. The website looks flawless no matter the device. Since it has no complicated interactive elements, the features easily translate well.
 |
| Figure 5.2 FGI: Career Pathways Compatibility |
FEEDBACK
Week 1 (21/04/25)
- This module requires self learning, exploration, and research. Only relying on classes alone is not enough.
- What matters is the outcome/result. Doesn't matter how much effort.
- It is encouraged to share our progress and consult in class each week.
- Sitting in front seats are advised so we get clearer vision and could keep up better.
- Since the projects are related, we need to decide wisely and put attention into the work since the beginning.
Week 2 (28/04/25) - After showing my blog
- No MIB is okay.
Very good layout already. - GIFs are better than videos to make the website lighter.
REFLECTION
Experience
In this first task of the module, I had lots of fun. I really enjoyed looking through the many websites, each with their own characteristics. It opened me to the countless possibility in interactive design. Doing the task brings me joy as it pushes me to analyze, think critically and express them into a brief, concise, and clear summary. I do struggle a bit in explaining my points, since we haven't yet learned the materials on interactive design to know its technical terms and concepts. However, this encourages me to do the best with what I got and do my own little research. Overall, I had a pleasant experience working on this assignment.
Observations
I noticed that I get easily inspired from seeing the amazing works of others. The more research I do in finding references and good quality examples, the more motivated I am to create my own in the future. The broader my knowledge is, the more variative my works could be. So this exercise taught me to keep being curious, and not be afraid to learn from others.
Findings
Through this module which requires lots of observation on many different websites, I found out that there's really no limitation in making websites. Endless creativity and ideas can be made into reality with the resources invented now. And technology never stay still, it keeps upgrading and improving, which means I also need to keep learning to become better day by day, keeping up with the technology. I can't wait to learn more through this module and I'm excited to see what else in possible in the future of interactive design.
Comments
Post a Comment