INTERACTIVE DESIGN - EXERCISE 1: WEB ANALYSIS
25.09.25 - 02.10.25 (Week 1)
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 1: Web Analysis
TABLE OF CONTENTS
Lectures
Week 1
Introduction to the module. No lectures yet.
Week 2
Usability Principles
(Shared Online)
- Consistency, for visual elements & functionality - look & work harmoniously throughout all elements.
- Simplicity, minimizing steps in a process, obvious symbols & terminology > difficult to make mistakes.
- Visibility, making user understand by looking - make it noticeable.
- Feedback, result of interaction - signaling success or failure.
- Error Prevention, reduce mistakes (e.g. confirmation label pop up).
Process Work
1st Website: Takuya Oshima
|
| Figure 1.1 Homepage |
Source:
CSSWinner
Purpose & Goal
The website above is a portfolio of Takuya Oshima, a web designer/front-end
developer. The website displays all the works she has created, her profile,
and contact. Its purpose is to showcase Takuya's capability in designing
websites, from planning, directing, designing, developing, until marketing.
The website serves as prove of her skills and ability, communicating her
experiences in designing websites.
Visual Design & Layout
Theme
Overall the website portrayed a minimalist design without any decorative
elements.
Color
The website only uses 2 main colors, which are black and white, creating a
monochrome. It plays with opacity, so shades of grey appear to create contrast
and text hierarchy.
Typography
Only one font is used throughout the whole website. It uses a refined serif
typeface with variations of thick-thin and smooth curves radiating elegant
look. The letters have clean shapes and are well spaced allowing readability.
The website utilizes text sizes, formatting, and alignments to create
separation and visual contrast. For titles/texts needing emphasize, it applies
larger size, thicker weight, wider spacing.
Imagery
The website barely has any images. Most of its contents are in texts. The only
imagery present in the website are in the homepage page as background, simple
icons for buttons, and hovering effect for the works page.
Layout
The layout of contents in the website is the key point of the design as it is
unique and different from the norm so it gives it character. For a website to
only have texts and very minimal graphic, it tends to look
boring/uninteresting. The playful arrangement and layout of the texts provides
visual interest as well as acting as a distinction between sections,
typographic hierarchy, and functions.
Functionality & Usability
Navigation
|
| Figure 1.2 Navigation |
The navigation is quite standard, it's kept simple and straightforward. Since
the overall design is very minimalistic, the navigation buttons are clear and
easy to see.
Interactive Elements
There are a few decorative interactive elements in the website, such as are
sparkling animation in the home page, moving circle cursor, and never-ending
text moving horizontally. The rest interactive elements that are present are
used to provide feedback to user's interactions, such as:
- Hover linked texts that are button - underline animation
- Hover buttons - change opacity - act as feedback
Quality & Relevance
Quality
The simplicity of the website creates a fast and smooth flow. The contents
provided are brief yet clear, error-free, and updated. The website URL starts
with https meaning its security is encrypted. Overall, the website is proper.
Relevance
The website looks and feels professional, suiting its function as a portfolio
(selling & showcasing). It's straight to the point, providing all
information needed from a portfolio directly. All the elements has purpose
without unnecessary design & features.
Performance
Load Time
The load time of the site is quite quick. There's no lagging or long loading durations due to the simplicity of the elements inside.
Responsiveness & Compatibility
The design works well on wider screens like laptop and tablet, but terrible on narrow & tiny screens like on smartphone. The texts and elements got squished and even stacked on top of each other when displayed using smaller screens.
 |
| Figure 1.3 Responsiveness |
2nd Website - End Speciesism
 |
| Figure 2.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 2.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 2.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 2.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 2.5 End Speciesism 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 |
Feedbacks
Week 1
- Come earlier, class starts exactly at 8am.
- In class need to follow up with tutorials - if late, can't keep up > fall behind.
- Learn HTML & CSS, deploy on a server.
- Software: Adobe Dreamweaver/Visual Studio Code (prepare by week 3).
- Try to choose websites from different categories for diversity.
- Bring paper for week 2 group activity.
- There's a reason websites win an award, even though they might look usual.
-
Screen capture or screen record (gif format) the website to support
explanation.
- If there's any attendance error, inform and contact within 2 weeks.
Week 2
No physical class.
Reflection
Experience
Doing this exercise was very entertaining! It's an opportunity to investigate and discover the many kinds of website that exists. This activity somehow brings inspiration, excitement, and motivation in web designing for me.
Observation
Websites could look so different depending on its target user and purpose. There might be some rules and guidelines on how the web should be, but a large part of it is also creativity and preferences. Web design is a mix of both, making it subjective, allowing flexibility.
Findings
There's so much more to a web design other than its visual. I've always just thought about colours, shapes, images. But there's functionality, usability, quality, and performance. The whole user experience in using the web is thought through and put into consideration in web design.
Comments
Post a Comment