Interactive Design - Exercises

21/04/2025 - 08/05/2025 (Week 1 - Week 3)

Chang Wing / 0367807 

Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University

Interactive Design - Exercises

---

TABLE OF CONTENTS

1. Lectures

2. Instructions
3. Task 1: Exercise 1

4. Task 1: Exercise 2

5. Feedback
6. Reflection

---

LECTURES

Week 1 

Mr. Shamsul briefed about the tasks of this module. Throughout this module, students will learn fundamental CSS and HTML coding to gain insight of essential development processes behind website design, which are crucial for UI/UX designers to understand the limitations and mechanisms before creating interfaces. He also highlighted the expected learning outcomes, by the end of the semester, students will be able to conduct research and design effectively to cater to different user experiences.

Week 2

Norman Door is a concept that highlights poor design where the affordances (visual cues) and signifiers (indicators of how to use something) are unclear or misleading, causing frustration and usability issues. The term is widely used in UI/UX design to emphasise the importance of intuitive and user-friendly design.

Figure 1.1 Norman Door

Usability

Usability is a key aspect of UX, focusing on how effectively a user can interact with a product or design in a specific context. The usability of a design is determined by how well its features align with users’ needs and situations.

Key Principle of Usability

1. Consistency: Ensures website elements (navigation system, page layout and menu structure, fonts and typography and branding etc.) remains coherent and follows a similar pattern (elements with same looks provide same functions). Establishing consistent patterns enables users to quickly recognise and learn how the interface functions (Figure 1.2). When visually similar elements produce different outcomes, it can lead to user confusion and frustration.

Figure 1.2 Consistency in Design (Example)

2. Simplicity: The minimisation of steps, using clear symbols and terminology, and reducing the likelihood of errors. This approach enhances user interfaces by enabling users to achieve their goals more efficiently while maintaining positive experience throughout a user's navigation (Figure 1.3).

Figure 1.3 Simplicity in Design (Example)

3. Visibility: Refers to how easily users can perceive and distinguish visual elements on a website. The clearer and more prominent the visuals, the easier it is for users to identify and interact with features within the interface (Figure 1.4).

Figure 1.4 Visibility in Design (Example)

4. Feedback: Involves visual cues that inform users about the outcome of their actions, indicating success or failure. For example, a tick symbol may appear next to completed tasks, providing immediate confirmation of completion.

5. Error Prevention: Focuses on alerting users when they are about to or already made a mistake, ensuring users to stay on the right track throughout each performance of task. This principle is crucial because human errors are inevitable, and effective design can minimise and fix their occurrence (Figure 1.5).

 

Figure 1.5 Error Prevention in Design (Example)

Class Activity

We were asked to design a way finding app's interfaces for Taylor's as a group, each group was required to come up with a paper prototype (Figure 1.6). I think it was a fun activity since we got to bounce ideas off each other and figure out different users' experience as a team.

Figure 1.6 Paper prototype

Week 3

Key Elements of Websites

1. Header: Top section of each webpage, typically containing the website’s logo, navigation menu, and contact information. It serves to provide users with immediate access to key information and page links to facilitate easy back and fourth navigation across different pages.

2. Body: The main content area of a webpage, featuring text, images, videos, and other multimedia elements. Effective content organisation is essential for readability.

3. Footer: The bottom section that contains copyright informations and contact details. Some of them includes navigation links as well to make returning to certain page easier for users.

Figure 1.7 Anatomy of Landing Page

---

INSTRUCTIONS

Task 1 - Exercise 1: Web Analysis 

To analyse an existing website and identify areas for improvement. This exercise will help to develop critical thinking skills and gain insights into web design best practices. 

Choose 5 websites from the provided link and write a brief report (minimum 200 words each) in e-portfolio, can include a screen capture of each section or page of the website to explain. The analysis should cover the following aspects of websites:

- Purpose and goals 
- Effective communication
- Visual design and layout (use of color, typography, and imagery)
- Functionality and usability (navigation, forms, and interactive elements)
- Contentt quality and relevance (accuracy, clarity, and organization)
- Performance (load times, responsiveness, and compatibility with different devices and browsers)

Task 1 - Exercise 2: Web Replication

Replicate 2 main pages from the websites analysed in Exercise 1 to study existing website's structure and dimensions. Follow the width and height of the original pages. This exercise will to develop design skills using software such as Photoshop or Adobe Illustrator and gain insights into web design best practices. 

---

Task 1 - Exercise 1: Web Analysis

Website 01

Figure 2.1 Website 01: Into The Amazon by National Geographic

Link: https://www.nationalgeographic.com/into-the-amazon/

Analysis​

Purpose and Goals

​National Geographic's "Into the Amazon" is an immersive digital experience designed to educate and engage audiences about the Amazon River Basin's ecological significance. This website transport users through the Amazon's ecosystems, from the Andes to the Atlantic, highlighting the region's beauty and the critical environmental issues it faces.

​

Effective Communication

Informations are well delivered through layered storytelling, balancing scientific facts with personal narratives. The structured scrolling experience and photographies allows users to engage at varying depths, making complex topics accessible and engaging for a wide audience.

Visual Design and Layout

The overall style of the website blends modern minimalism with a vintage aesthetic. It uses a combination of sans-serif and serif fonts to create a classy yet modernised look. Stunning photography by Thomas Peschak, immersive 3D visuals, and a cohesive colour palette reflecting the Amazon’s natural tones enrich the visual experience. The typography remains highly readable, maintaining strong contrast even against complex photographic backgrounds.​ Mobile layout is consistent with the desktop experience, structure and clarity across devices are maintained.

Functionality and Usability

Great guide of flow, each gallery has an explore button to go back to the 'explore' section after viewers viewed the images and infos. The 'explore' and 'map' buttons are sticky which make it convenient for navigating in between the explore and map pages. However, interaction on the "Map" page could be improved, as users must click on specific areas to reveal the "View Gallery" option, which may not be immediately intuitive (Figure 2.2).

Figure 2.2 Interaction on the "Map" page 

Content Quality and Relevance

Content combines scientific research from professionals with personal stories from explorers and locals. The information is well-organised, and presented in a manner that is both informative and emotionally compelling.

Performance

I like the overall unique scrolling experience within the website but the loading speed can be a bit slow, which takes around 4-5 seconds to load on both desktop and mobile. The scrolling could be a bit laggy for sometime.

Website 02

Figure 2.3 Website 02: ISRA DESIGN

Link: https://isradesign.com/en/ 

Analysis​

Purpose and Goals

The website of ISRA Design showcases their interior design services, targeting both the residential and commercial sectors, focusing on high-end interior design and highlighting their award-winning projects.

​

Effective Communication

The entire site reflects ISRA Design’s minimalistic and polished aesthetic. The visuals are consistent with the brand’s tone: clean, modern, and refined, effectively communicating the studio’s core message and style.

Visual Design and Layout

Consistent use of a 60/30/10 colour ratio: black as primary, white as secondary, and blue as accent, which creates a calm, polished, and high-end tone. Call-to-action buttons use contrasting colours effectively for visibility. The header menu is placed intuitively and remains accessible. Layouts are clean and well-aligned, with clear margins and strong visual hierarchy. Typography contrasts well against dark backgrounds, white serif fonts project a refined and modern brand presence. Mobile layout is consistent with the desktop experience, structure and clarity across devices are maintained.

Functionality and Usability

Navigation is intuitive. In the 'Our Projects' page, hovering over project images triggers a 'Discover' button placed clearly at the top, an effective visual cue (Figure 2.4). Clicking leads directly to detailed pages. On project pages, sections are labeled clearly by room, and the mini floor plan updates in real-time with blue highlights (Figure 2.5). Hover states and transitions on CTAs of the website add to the interactive polish without overdoing it.

Figure 2.4 'Discover' button

Figure 2.5 Mini floor plan updates in real-time

Content Quality and Relevance

Copywriting feels professional and not overexplained. Ample amount of photography to showcase each project. On the 'Media & Awards' page, attached external links to articles by officials add credibility and client assurance.

Performance

Overall scrolling performance was great, lags seldomly. Animation runs pretty decent on both mobile and desktop.

Website 03

Figure 2.6 Website 03: Flower of The Universe

Link: https://flower-of-the-universe.jp/

Analysis​

Purpose and Goals

The Flower of The Universe website presents a design brand inspired by an urban legend, one that speaks of a mythical cosmic flower said to possess a beauty beyond imagination. This concept serves as a foundation for their services, including a cosmic themed fashion line, and upcoming services like cosmic-themed wedding invites, fragrances, and gifts. This website aims to captivate users with a narrative about a mythical cosmic flower and using this allegory to showcase the brand's products and artistic vision.

​

Effective Communication

Brand philosophy and vision is effectively communicated through poetic and atmospheric copywriting. The ambient background music adds touch to create a mythical and ambitious sense throughout user's navigation, as if users are astrounauts discovering fragments of beauty in deep space.

Visual Design and Layout

This website uses a pastel gradient colour palette mixed within the dark, with white as a contrasting accent to guide the eye. Grain, light flares, and non-static graphics mirror the look of stars and planetary orbits. The result is a dreamy, mystical aesthetic that reflects the brand’s identity. Combined with non-static visuals and well-integrated hover effects, they heighten interactivity and invite users to explore the site as if navigating through the cosmic. Mobile layout is consistent with the desktop experience, structure and clarity across devices are maintained.

Functionality and Usability

Sticky elements like the sound switch, menu, scroll indicator, and page number are thoughtfully placed, allowing users to navigate smoothly and toggle the ambient music without hassle. Hover effects on CTA buttons are well-executed and contribute to interactivity, though they occasionally lag. However, the entrance animation for the 'Contact' page feels unnecessarily long and disrupts the flow of navigation. The major issue lies in the 'Company Profile' page, once entered, the menu button becomes unresponsive, making it impossible to return to the homepage without reloading the original link, this significantly affects usability and breaks the immersive experience of users.

Content Quality and Relevance

The main website showcases minimal product imagery, with only the fashion line currently available. Clicking the ‘Read More’ button at the fashion section redirects users to https://flower-of-the-universe.com/, but the transition disrupts the thematic continuity. While the main site builds a strong cosmic identity through poetic language, ambient music, and celestial visuals, the redirected website lacks this atmosphere entirely, the e-commerce layout is conventional, with a plain white background and standard product thumbnails that do not reflect the cosmic inspiration promised on the main site (Figure 2.7). 

Figure 2.7 Redirected fashion website https://flower-of-the-universe.com/

Besides that, the main website features elements like nature-inspired animations such as auroras, mountains, and forests, align with their broader cosmic narrative, but their direct relevance to the fashion line or product offerings remains unclear (Figure 2.8). Some call-to-action buttons contain spelling errors, such as “Comming Soon” instead of “Coming Soon,” which affects the professionalism of the presentation (Figure 2.9). Furthermore, the ‘Company Profile’ page remains blank.

Figure 2.8 Graphical elements irrelavant to product line

Figure 2.9 Spelling errors on call-to-action buttons

Performance

While linear navigation runs relatively smoothly, issues arise when attempting to backtrack. For example, scrolling back to the top introductory section triggers a bug where users can no longer scroll down to revisit the gallery section (for both desktop and mobile). This disrupts the browsing flow and undermines the immersive experience the website tries to create.

Website 04

Figure 2.10 Website 04: VISUALBUSINESS

Link: https://www.vvisual.biz/models 

Analysis​

Purpose and Goals

Visualbusiness positions itself as a high-end digital art direction, production, and modeling studio. The website functions as a visual portfolio, showcasing a wide range of model-based projects, complete with photographs, model names, and locations. Its goal is to attract potential clients and collaborators by presenting its work with a sleek, editorial flair.

​

Effective Communication

The site communicates its intent well, letting the visuals speak, each project is displayed with ample amount of photography. However, the lack of accompanying text or context for each projects of the studio and model's images may hinder deeper storytelling and emotional connection with visitors. I have no idea what the projects are about or what Visualbusiness actually stands for.

Visual Design and Layout

This UI of this website embraces an ultra-minimalist, grid-based layout that draws full attention to imagery. The white background allows high flexibility for various colour palettes within the photos. The scrolling effect of the webpage adds a cinematic feel to the browsing experience (Figure 2.11). The look of this website feels polished and editorial, but the stark minimalism seems to make it feels more like a gallery than a space that invites users in. Mobile layout is consistent with the desktop experience.

Figure 2.11 Scrolling effect

On the 'Index' page, the titles and information below appear visually similar, lacking clear typographic hierarchy, which makes it harder to distinguish key details at a glance (Figure 2.12).

Figure 2.12 Typographic hierarchy on the 'Index' page

Functionality and Usability

Navigation is straightforward. Hovering effect establishes clear distinction between clickable and unclickable links (Figure 2.13). Footer links help users easily jump between models and projects (Figure 2.14). Smooth UX overall.

Figure 2.13 Hovering effect of clickable links

Figure 2.14 Page footer links

Content Quality and Relevance

While the content remains concise--highlighting photography, model names, and locations, the lack of detailed model bios or studio info makes the experience feel sort of incomplete. Filler text still exists in some sections, reducing clarity and professionalism (Figure 2.15).

Figure 2.15 Filler texts

Performance

Pages load smoothly with no lag on both desktop and mobile. Navigation is fluid, no excessive loading is required.

Website 05

Figure 2.16 Website 05: RAYRAYLAB

Link: https://www.rayraylab.com/

Analysis​

Purpose and Goals

Rayraylab is a one-person creative agency specialising in interaction design, web development, branding, and strategic planning. This website powerfully conveys the agency's commitment to crafting one of a kind digital experiences that defy convention and its ability to understand and appreciate development while designing. It positions Rayraylab not just as a service provider, but as a collaborative partner that deeply values each client’s philosophy and ideas, transforming them into meaningful interactive solutions.

Effective Communication

Rayraylab communicates its vision with clarity and confidence through both language and design. The ambitious copywriting, paired with bold and experimental visual elements, reinforces the agency’s commitment to innovation. The website itself serves as a living portfolio reassuring potential clients not just through what it says, but through the unique experience it offers.

Visual Design and Layout

This website embraces a minimalistic design with a neutral colour palette (black and white), which complements and tolerates the diverse colour schemes of the project photography. It incorporates interactive 3D elements that animate as users scroll, with some components being draggable for added interactivity (Figure 2.17). The clean, structured layouts are consistent throughout, enhanced by futuristic visual cues that reflect the brand’s forward-thinking vision and experimental identity. Mobile layout is consistent with the desktop, though has more simplified interactive elements to suit smaller screens.

Figure 2.17 Dragging 3D elements

Functionality and Usability

Information is delivered clearly. As users scroll through different project thumbnails, hovering triggers animations that showcase each project's website UI, offering a quick and engaging glimpse of the UI to users (Figure 2.18). Navigation across pages is smooth, intuitive design touches like the logo transforming into a 'back' and home' button on hover contributes to a seamless browsing experience and make the site feel smart and responsive to user actions (Figure 2.19).

Figure 2.18 Hovering effects

Figure 2.19 Back to previous page and home button

Content Quality and Relevance

Rayraylab’s website presents its past projects with clear labels for the client’s name, publication date, and project category, which helps users understand the scope and timeline at a glance. Each project is thoughtfully documented, including the ideation process, mission, and goals, reflecting a high level of professionalism (Figure 2.20). The content displayed feels well-aligned with the brand’s promise to craft bold and unique interactive experiences with their forward-thinking vision.

Figure 2.20 Past projects and descriptions

Performance

The website delivers smooth scrolling and responsive interactive animations, with minimal loading times when navigating between pages. Both desktop and mobile versions perform consistently well.

---

Task 1 - Exercise 2: Web Replication

Website 01

Figure 3.1 Website 01: OH Architecture

Link: https://www.oharchitecture.com.au/

Process

Identified fonts used in the website using online font identifier (Figure 3.2).

Figure 3.2 Font Identifier: https://www.myfonts.com/pages/whatthefont?step=crop

Inserted text contents across the webpage. Kerned the texts accordingly (Figure 3.3).

Figure 3.3 Kerning process (Sped up)

Recreated the interactive buttons across the webpage using shape tools in Adobe Illustrator (Figure 3.4).

Figure 3.4 Creating interactive buttons

Lastly, images were saved from the webpage and positioned according to the layout margins. Necessary croppings were done to each image.

Final Outcome 

 

Figure 3.5 Final Replicated Website 01 (JPEG)

 Figure 3.6 Final Replicated Website 01 (PDF)

Website 02

Figure 3.7 Website 02: Monolith

Link: https://monolith.nyc/

Process

Once done identifying the fonts used in the website, I inserted them and kerned each accordingly (Figure 3.8).

Figure 3.8 Kerning process (Sped up)

Recreated the graphical symbols across the webpage using Image Trace + Pen Tool in Adobe Illustrator (Figure 3.9).

Figure 3.9 Creating graphical symbols

Saved images from the webpage inserted them accordingly, necessary croppings were done to each image (Figure 3.10). 

Figure 3.10 Image arranging and cropping process (Sped up)

Final Outcome

Figure 2.1 Final Replicated Website 02 (JPEG)

​

 Figure 2.1 Final Replicated Website 02 (PDF)

---

FEEDBACK

Task 1 - Exercise 1: Web Analysis 

Week 2 (01/05/2025)

Feedback: -

Task 1 - Exercise 2: Web Replication

Week 3 (08/05/2025)

Feedback: -

---

REFLECTION

Analysing the award-winning and nominated websites have allowed me to observe the nuanced design choices made by professionals. I noticed how different typefaces evoke distinct emotions, how well structured text formatting enhances readability, and how consistent typography and colour usage contribute to visual cohesion. Initially, analysing five websites felt overwhelming, but as I explored through many creatively interactive sites, I became increasingly engaged, learning from their user-friendly and visually compelling designs was both an enjoyable and enriching experience.

During Exercise 2, replicating the website design made me realised the significance of precise text kerning in achieving a clean, polished look. Maintaining alignment with the webpage margins also proved crucial for a consistent reading flow.

Overall, these exercises have provided me valuable exposure to diverse creative websites and now inspired my aspiration to design well-crafted interfaces in the future as a UI/UX designer.