INTERACTIVE DESIGN - EXERCISES
22/9/25 - 13/10/25 (Week 1 - Week 4)
Nicole Ng Ying Yan 0382412
GCD60904 Interactive Design
Exercises
TABLE OF CONTENTS
1.0 EXERCISE 1 - WEB ANALYSIS
INSTRUCTIONS
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.
Key points to analyse:
- Purpose & Goals: Evaluate whether they are effectively communicated to the user
- Visual Design & Layout: Use of colour, typography, and imagery
- Functionality & Usability: Navigation, forms, and interactive elements
- Quality & Relevance: Accuracy, clarity, and organization
- Performance: Load times, responsiveness, compatibility with different devices & browsers
Deliverables:
Write a brief report summarising each web analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Ensure clear formatting with headings & subheadings.
Category: Interactive Design
—
1.0 Purpose & Goal
The website effectively communicates its purpose as a personal portfolio for Rauno Freiberg, a interaction designer to showcase their work and projects to potential collaborators. The clear professional identity and affiliations established strong credibility and purpose.
Fig. 1.1 Rauno Freiberg's Portfolio
2.0 Visual Design & Layout
2.1 Colour
The main colours used are pure black and white, with minimal use of yellow and bright orange to create a sophisticated appearance that enhances the content with
distraction. The subtle grey background provides a neutral foundation that reduces eye strain.
Fig. 2.1 Colour palette & HEX codes
2.2 Typography
The website uses minimalistic design by using only 1 font, which is
Roboto. The clean, typeface create a clear information hierarchy
that guides the reader's attention naturally through the content. The
use of different font sizing and spacing demonstrated careful attention
to readability and visual rhythm. This allows viewers to absorb and
understand the information quickly while still maintaining the dynamic
of the website's design.
2.3 Layout
The website demonstrates minimalist design with strategic use of white
space that creates breathing room and visual hierarchy. The layout
prioritises readability and focuses attention on key information without
overwhelming the visitor. The aesthetic aligns well with modern design principles and the designer's
personal brand.
Fig. 2.3 Layout
3.0 Functionality & Usability
3.1 Navigation
The website takes an extremely minimalist approach to navigation, without
the use of a menu or drop down. For example, navigation to project showcases
requires hovering over and clicking specific words, but notably lacks visual
feedback such as colour changes on hover, which may reduce discoverability
and user confidence in interactive elements. While this creates a
clean, distraction-free experience, it requires viewers to pay close
attention and may limit visitors seeking to explore a comprehensive
portfolio of projects and case studies.
Fig. 3.1 Navigation
3.2 Interactive Elements
The email contact feature includes micro-interactions, with immediate
"Copied" feedback when clicked, demonstrating attention to user experience
details. However, the site appears to have minimal interactive elements
overall, prioritising simplicity over dynamic functionality.
Fig. 3.2 Interactive elements
4.0 Quality & Relevance
4.1 Quality
The website demonstrates high quality overall, with good clarity and
purposefulness. The visual is clean and information is straight to the
point, with every words serving a specific function. Content demonstrates
exceptional clarity and purposefulness, with every word serving a specific
function.
4.2 Relevance
The content directly aligns with the website's purpose as a professional
landing page, presenting essential information that visitors would expect
from a design professional's portfolio. The design serves clear intentions
as design content and as a demonstration of the designer's thinking and
approach to their craft.
5.0 Website Performance
5.1 Load Time
The performance is tested using PageSpeed insights.
Overall, the website's performance on desktop is outstanding, with only
accessibility under the score of 90, at 88%. The background and foreground colours do not have a sufficient contrast
ratio.
Fig. 5.1 Desktop performance score
However, this website cannot perform actions such as slow zooming motion on
mobile due to errors in JavaScript and CSS. However, it's load time and
navigation still works well on mobile.
Fig. 5.1.1 Mobile performance score
The website adapts in both desktop and mobile, suggesting good
responsiveness across various screen sizes and devices. The layout remains
clear, organised, and scalable, ensuring consistent user experience regardless of viewing context.
6.0 Conclusion
6.1 Strengths
The strength of Rauno Freiberg's
portfolio is that it is minimalistic, straight to the point, and has little to
no distraction. It has clear readability, visual rhythm, fast responsiveness,
and good compatibility.
6.2 Weaknesses
However, there are some room for improvement with its navigation, such as
adding subtle colour transitions or underlines to indicate interactive
elements while maintaining the minimalist aesthetic.
Website 2:
Autumn Meteorite 2025 Tokyo
by Shimura Tetsuro
Category: Culture & Education
—
1.0 Purpose & Goal
The website serves as the official portal for the Performing Arts Festival:
Autumn Meteorite Tokyo 2025, running from October 1 to November 3. Its primary
purpose is to promote and encourage attendance at this international
performing arts festival, featuring dance, theatre, and performance art.
Fig. 1.1 Autumn Meteorite 2025 Tokyo Website
2.0 Visual Design & Layout
2.1 Colour
The website offers both light and dark mode options, providing users
with visual preference flexibility. The vibrant pink shades serves as an
accent colour that evokes creativity and artistic expression, perfectly
suited for a performing arts festival.
Combined with the simple black
and white base, this creates a visual identity that feels both
sophisticated and dynamic. Both modes maintain high contrast
elements to ensure text readability and accessibility across different
viewing preferences.
Fig. 2.1 Colour palette & HEX codes
Fig. 2.1.1 Light mode vs Dark mode
2.2 Typography
The typography appears modern and clean with a focus on readability. Text
hierarchy is well-established with clear distinctions between headings, body
text, and navigation elements through font sizing, supporting the site's
informational purpose. Furthermore, it provides dual-language mode tailored
to local citizens and international tourists' needs, increasing
accessibility to its viewers.
Fonts used are Noto Sans SC and
Noto Sans SC Fallback for the headline for both English and Japanese
language. Helvetica Neue is used consistently for the rest of the
content.
Fig. 2.2 Noto Sans SC & Noto Sans SC Fallback (left) & Helvetica Neue (right)
2.3 Imagery
Imagery from this website appears to be more functional rather than
decorative. The site relies more on textual information than visual
storytelling, which may miss opportunities to showcase the artistic nature
of the festival.
Fig. 2.3 Imagery
The layout follows a straightforward hierarchical structure from top to
bottom with clearly defined sections. The menu is clearly displayed at the
top of the website, call to action buttons and visual icons are used as well
for better indication The website is logical and user-friendly, though
relatively conservative in its approach to web design.
Fig. 2.4 CTA buttons & visual icons
3.0 Functionality & Usability
3.1 Navigation
The navigation experience is direct and good. It appears intuitive with clearly labeled main sections including News,
Programs, and detailed festival information. The structure supports easy
access to essential information like ticketing and program details.
3.2 Interactive Elements
The website features an innovative interactive system where text elements
are formed by animated meteorite streak patterns that dynamically respond to
mouse movement, rotating and shifting at various angles as users hover over
them.
Additionally, a customisable menu is shown on the right side of the
website, allowing users to modify these interactive elements by selecting
different visual shapes or toggling the animation effects on or off. This is
definitely the main attraction of the website as this element is intriguing
and provides a personalised control over the user experience.
Fig. 3.2 Interactive elements
4.0 Quality & Relevance
4.1 Quality
The quality of this website is decent, it's not bad but not outstanding either. Aside from the animated meteorite interactive element, the design approach of this website is quite simple and less modern. However, information and news of the event are effectively conveyed, text hierarchy is defined, and navigations to other pages are clear.
4.2 Relevance
The content demonstrates high
accuracy with specific dates, venues, schedules, and comprehensive program
categories clearly stated. Furthermore, every piece of information is relevant
and aligns with the purpose of the website. They presented clearly with
well-organised sections covering performance programs, non-performance
activities, and accessibility features.
5.0 Website Performance
5.1 Load Time
The performance is tested using WebPageTest.
As shown in Fig. 5.0, the metrics of the repeated view are better than the
metrics of the first view of the website, which I agree on and found accurate. When I
loaded the page for the first time, it took some time for the animated
meteorite element to pop up, but when I revisit the page later on, the load
time improved significantly compared to the first visit.
Fig. 5.1 Website performance metrics
5.2 Responsiveness and Compatibility
The website is only fully compatible and responsive in desktop. When using
the mobile version, the website isn’t as responsive, the text doesn’t scale properly on mobile, and the animations don’t adapt to different screen sizes.
Fig. 5.2 Poor compatibility of website in mobile
6.1 Strengths
As the main purpose of the website is to convey updated information on the
meteorite event and does not serve any artistic purpose, I would say the
whole website is considered decent enough. It has a clear purpose, eye catching animation, international language support, and
well-organised content structure.
6.2 Weaknesses
A few points can be improved such as making the website more compatible in
the mobile version by scaling the animation and text accordingly. Besides
that, the website relies too much on textual information which may cause
cognitive or information overload for some viewers. Textual information can
be reduced while still retaining the event's message. More images can be
added as well to help viewers visualise better and understand what to expect
from the event, such as including photos or videos of past performances to better showcase the artistic works
and performers featured in the festival.
Kitchen 154 serves as a restaurant website promoting multiple locations
including Vallehermoso, Noviciado, and Conde. The primary purpose is to
showcase the restaurant's brand identity and provide information about their
various locations, while creating an engaging digital experience that
reflects the creative and interactive nature of the dining
establishment.
Fig. 1.1 Kitchen 154
2.0 Visual Design & Layout
2.1 Colour
The website uses a minimalist colour approach with a main accent colour
of dark red. The clean aesthetic suggests a focus on simplicity and
elegance of a contemporary restaurant branding that emphasises
sophistication and modernity.
Fig. 2.1 Colour palette & HEX codes
2.2 Typography
The typography uses an old-school, retro aesthetic that creates a sense
of timeless authenticity. The retro font helps build an emotional
connection with visitors by conveying warmth, heritage, and established
culinary expertise. Besides that, it also aligns with contemporary
restaurant design trends.
Font used is VCR-OSD-Mono for both English and Spanish
language. Helvetica Neue is used consistently for the
rest of the content.
Fig. 2.2 VCR-OSD-Mono
2.3 Imagery
Instead of displaying profession taken photography of the restaurant's
cuisine like most restaurant websites do, the website focuses more on
interactive elements and text-based design. White it can be an unique
approach to restaurant web design, some potential customers may prefer to
see actual food presentation images to help them make dining decisions and
set expectations.
The layout follows a clean, organised structure with clear navigation to
different restaurant locations. The text hierarchy is well-structured with clear distinctions between
navigation elements, headings, and body content, ensuring readability
across section divisions. The design emphasises simplicity with strategic placement of interactive
elements and navigation menus that don't overwhelm the user
experience.
Fig. 2.4 Layout
3.0 Functionality & Usability
3.1 Navigation
Navigation is straightforward with clear links to different restaurant
locations (Vallehermoso, Noviciado, Conde) and an "About Us" section. The
menu structure includes functional elements like the "Close" button that can
be pressed anywhere on the screen rather than positioning it at a fixed
location, which is a feature that I really like and find convenient.
Fig. 3.1 Navigation
3.2 Interactive Elements
The website features a highly innovative interactive drawing tool that
allows users to paint or draw directly on the homepage, creating a
unique and engaging user experience. Users can save their artwork with a "Click here to save" function, adding a
creative, personalised element that distinguishes this restaurant
website from other competitors.
Fig. 3.2 Interactive elements
3.3 Form
The form is simple, direct, and minimalistic. CTA buttons are easily
identifiable and I like how there are no extra personal information
required.
Fig. 3.3 Form
4.0 Quality & Relevance
4.1 Quality
I personally think this is a high quality website with no unnecessary distractions. Fun interactive experience, smooth animations, easily identifiable sections, good text hierarchy. The CTA buttons are easy to find as well. The international language support makes it accessible to tourists as well, expanding their potential customer base. Overall, it is a website that is easy to navigate even for less tech-savvy people as well.
4.2 Relevance
All information and content are relevant with the purpose of this
restaurant, which is to promote the different locations of the restaurant and display its different unique menus at each location respectively.
5.0 Website Performance
5.1 Load Time
The performance is tested using WebPageTest.
The website's performance on desktop is decent, with all metrics
improving in the repeated view. The real-world usage metrics is all in the
"Good" range as well.
5.2 Responsiveness and Compatibility
Although the website performs excellent on desktop, it is not responsive
or compatible on mobile AT ALL. The menu navigation does not even appear
and there are scaling issues with the interactive element. I can still
draw on the home page, but not at a location I want as it does not respond to my scrolling/ dragging/ zooming on mobile.
Fig. 5.2 Poor compatibility of website in mobile
6.1 Strengths
As a conclusion, the innovative interactive drawing feature was a plus
point, it was refreshing and not common in many restaurant websites.
The clean design aesthetic, dual-language support, and unique approach to
restaurant web design that creates memorable user engagement.
6.2 Weaknesses
On the other hand, the mobile version of this website has a very big room
for improvement. Responsiveness and compatibility on mobile can be
significantly improved.
This website is an advocacy and educational platform exposing the cruelty of animal-based circuses. Unlike a directory of ethical circuses, it aims to raise awareness about animal abuse, document hidden practices, and push for systemic change in the entertainment industry. It positions itself as a campaign resource rather than a promotional hub for alternative circuses.
Fig. 1.1 No Laughing Matter
2.0 Visual Design & Layout
2.1 Colour
The website dominantly uses a monotone palette - black, white, and muted greys, with red accents. This high-contrast palette reflects seriousness and urgency that matches the advocacy message to protest against animal cruelty.
Fig. 2.1 Colour palette & HEX codes
2.2 Typography
The typography uses bold headlines and large text blocks to command attention. It serves to be functional and impactful, prioritising legibility and urgency over decorative flair.
Fonts used are BebasNeue for headlines and JetBrains Mono for the body text. The mix of sans serif and serif fonts creates a clear typography hierarchy that can be easily processed by the viewers.
Fig. 2.2 Typography
2.3 Imagery
A distinctive design choice is the mix of photography and illustrative graphics. Real photos ground the content in reality and make the abuse undeniable, while illustrations are used to stylise certain moments or abstract ideas.
For example, in Fig. 2.2, photography images of animals are trapped in cages that are digitally drawn. This blending creates a rhythm between stark realism and conceptual storytelling, ensuring the site doesn’t feel visually monotonous while also making difficult topics more accessible to diverse audiences.
Fig. 2.3 Imagery
The website uses a scroll-based storytelling layout with chapters (e.g. Circus History, Animal Capture, Behind Curtains, Whip Training). Each section unfolds sequentially, resembling a digital report or exhibition rather than a conventional homepage + subpages. The linear narrative flow makes it easy for visitors to absorb information in a structured way.
Fig. 2.4 Layout
3.0 Functionality & Usability
3.1 Navigation
I like how the top bar timeline navigation is minimalistic and thematic, it shows your progress on the website based on how far you have scrolled. There are no distracting menus which helps viewers to fully focus on the storytelling and progress step by step.
However, aside from CTA links to the author's portfolio, it lacks links to external sites (e.g. petitions, articles, etc) which may reduce viewer engagement beyond awareness.
Fig. 3.1 Navigation bar
3.2 Interactive Elements
The website integrated scroll-driven animations, where visuals and text dynamically shift as viewers progresses down the page. This continuous movement turns the reading experience into an immersive journey rather than static scrolling, keeping the viewers engaged throughout. Certain graphics are also interactive and responsive to user input, allowing viewers to move visual elements on screen.
These subtle yet effective interactive features enhance the website’s role as a digital exhibition, blending storytelling with engagement. It is not overloaded with gamified elements which strikes a balance in maintaining the seriousness of the subject while making the content more memorable and impactful.
Fig. 3.2 Interactive elements
4.0 Quality & Relevance
4.1 Quality
The quality of this website is relatively high. The content is thorough, informative, and evidence-based. It combines factual explanations with storytelling to make the information memorable and the writing strikes a balance between informative and persuasive. Besides that, sources, citations, and references to real cases are included as well which adds credibility, distancing the website from being perceived as purely emotional propaganda.
4.2 Relevance
The content is highly relevant, providing a critical entry point for unfamiliar audiences of this topic, making hidden practices visible and sparks awareness. Furthermore, it does not only educate viewers on the negative impact of animal circuses, but also guides us on what we can do to fight cruelty and highlights positive alternatives like animal-free circuses for viewers that are seeking alternatives.
5.0 Website Performance
5.1 Load Time
The performance is tested using PageSpeed Insights.
Surprisingly, the performance score on both desktop and mobile is very low at 35% and 43% respectively. It took a bit of time to load but not more than 5 seconds. In terms of animations, I wouldn't say they are 100% smooth, it can be further improved but it does not hinder the user experience to such an extend.
5.2 Responsiveness and Compatibility
The website is very responsive and compatible on both desktop and mobile. All graphics and text are seamlessly scaled and resized effectively, and the navigation bar changed into a menu dropdown to ensure a clean, accessible layout on smaller screens.
6.1 Strengths
In summary, this website has a well-structured narrative, strong imagery, and evidence-backed storytelling. It is responsive and compatible across different devices, making it more accessible for the viewers.
6.2 Weaknesses
Opportunities for improvement include adding petition or donation links to inspire action, improving the load time, and making scroll animations even smoother for a better use experience.
Website 5: SOGAI™ by Hug Nguyen
Category: Art & Illustration
—
1.0 Purpose & Goal
This website is an experimental platform that delves into the exploration of generative AI in the fine arts. Its primary goals are to educate viewers about the evolution of AI in art creation, challenge perceptions of authorship and authenticity in the digital age, amd stimulate discourse on the ethical implications of AI-generate content.
By presenting case studies and experiments, SOGAI™aims to provoke thought and discussion among artists and the general public on the usage of generative AI in the arts industry.
Fig. 1.1 SOGAI™
2.0 Visual Design & Layout
2.1 Colour
The website's colour palette is relative dark and muted with accents of muted yellow. The colour palette is generally retrained and has lesser contrast, but when applied correctly, the contrast is high between the yellow text and dark green background.
Fig. 2.1 Colour palette & HEX codes
Fig. 2.1.1 Colour contrast ratio
2.2 Typography
The use of large, bold typefaces ensures readability and draws attention to key points, enhancing the overall user experience.
Fonts used are Nippo for headlines, Suisse for the body text, and Neuebit for small text.
Fig. 2.2 Typography
2.3 Imagery
This website has a central focus on imagery, with high-resolution AI-generated artworks displayed prominently throughout the site. Comparison images of classic artworks and AI-generated images are shown as well.
Each image is paired with descriptive text and contextual information. The visuals aren’t just decorative, they serve an educational purpose, helping users understand both the creative process and the ethical questions surrounding AI-generated artworks.
Fig. 2.3 Imagery
The website employs a scroll-based, linear layout that guides users through the content in a narrative sequence. This design reflects a digital exhibition or gallery experience, with each section building on top of the previous one.
There is also clear section hierarchy being used. Content is divided into clear thematic blocks such as AI experiments, case studies, and experiments with consistent spacing and margins that give the visuals room to stand out.
Fig. 2.4 Layout
3.0 Functionality & Usability
3.1 Navigation
The navigation bar is fixed on top in desktop and transitions into a menu dropdown on mobile devices, ensuring accessibility and a clean interface on smaller screens. Links are minimal and clearly labeled, directing users to other sections or external resources and articles.
The navigation complements the linear layout rather than overwhelming it; users are encouraged to scroll sequentially to enhance the immersive exhibition-like experience. The website avoids cluttered menus or excessive options, keeping the focus on visual storytelling and educational content.
3.2 Interactive Elements
One key interactive element integrated in this website is audio integration. The website includes optional ambient audio that enhance immersion, providing a multi-sensory experience as users navigate through the content.
Some images feature hover-based interactivity that allows users to be directed to external articles or other sections of the website.
Fig. 3.2 Interactive elements
4.0 Quality & Relevance
4.1 Quality
SOGAI™is a high quality website that is backed by thorough research and curated case studies. The animations smoothly transitions to the next section, layout is neatly organised, and information is presented with high quality visuals and detailed explanations.
4.2 Relevance
The content addresses contemporary issues that are happening in the arts industry, including debates over AI's role inc creativity and concerns about originality and authenticity, which is very timely and relevant at the present.
5.0 Website Performance
5.1 Load Time
The performance is tested using WebPageTest.
According to Fig. 5.0, the performance is not bad, all real-world metrics are in the 75th percentile of visits. Loading the website did not take long for me either.
5.2 Responsiveness and Compatibility
The website is generally quite responsive and compatible on both desktop and device. All graphics, text, and sections are scaled properly according to screen size.
However, there are some issues with text placement under the "Experiment" section in the mobile version. It is not too much of a bother, but this detail can be revised to reduce the excessive waste of space. Besides that, the audio integration feature works find on desktop, but doesn't seem to work on mobile when I tried turning it on.
6.1 Strengths
To conclude, the website's strengths lies in its innovative content and engaging interface design. The aesthetic and interactive elements (audio integration, hover-based interactivity) creates an immersive and sophisticated user experience.
6.2 Weaknesses
Opportunities for improvement include making the mobile version of SOGAI™more responsive and compatible by fixing the text placement and audio integration issues.
2.0 EXERCISE 2 - Simple HTML Personal Profile Page
INSTRUCTIONS
Create one file named index.html. When opened in a web browser, this file must display a simple page about you correctly.
Your index.html file must include the following elements:
- Basic Document Structure: Correctly use the <!DOCTYPE html>, <html>, <head>, and <body> tags.
- Page Title: Add a descriptive title inside the <head> using the <title> tag (e.g., "My Awesome Profile").
- Main Heading: Use an <h1> tag for your name or the page's main topic.
- Sub-Heading: Use an <h2> tag to create a section heading (e.g., "My Hobbies" or "Favourites").
- Paragraph Text: Write at least two descriptive paragraphs using the <p> tag.
- Ordered List: Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favourite books, movies, or foods).
- Unordered List: Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact methods).
Submission Requirement:
Submit your e-portfolio link. Attach the url from Netlify.com to your e-portfolio.
Netlify link:
3.0 FEEDBACK
Exercise 1 - Web Analysis: No feedback from lecturer because everything's good and done correctly.
Comments
Post a Comment