Advanced Interactive Design | Thematic Website Design
Advanced Interactive Design
23/04/2026 - 14/06/26 | Week 01 - Week 08
Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honours) in Creative Media
Information Design / Exercises / Taylor's University
Table of Contents
I. INSTRUCTION
II. THEMATIC WEBSITE PROPSAL
III.
IV.
V. FEEDBACK & REFLECTION
VI. QUICK LINKS
Thematic Website Proposal
For this thematic website proposal, I developed Before Help Arrives, an interactive emergency-awareness website designed to help young urban residents understand what to do before professional help arrives. The website focuses on common emergencies such as fire, flood, earthquake, and thunderstorm, using visual storytelling and simple interactions to make safety information easier to understand.
Ideation
At the beginning of the ideation process, I wanted my work to be something practical and purposeful, not just visually interesting. I also wanted the topic to be based on factual information and connected to real-life situations. From there, I started exploring themes related to how people can protect themselves during emergencies. This led me to the idea of creating an emergency preparedness website that teaches users how to notice danger early, make safer decisions, and prepare before help arrives.
Research & References
The idea slowly developed into a website where users can move through different emergency-related pages, spot warning signs, learn simple actions, create a safety plan, prepare an emergency kit, and access safety alerts. For the research stage, I looked into the issue of young adults being exposed to everyday emergencies but not always knowing how to respond properly.
Before Help Arrives' Sitemap
The website was then organised into five main pages: Home, Spot & Learn, Make a Plan, Emergency Kit, and Safety Alerts. The Home page introduces the concept through a city scene and phone notification. Spot & Learn allows users to identify warning signs through interactive scenarios. Make a Plan focuses on preparation steps, such as important contacts and meeting points. Emergency Kit teaches users what items to prepare, while Safety Alerts helps users access urgent information and emergency contacts.
The website references helped guide different parts of the design. The first reference inspired the choice-based interaction for selecting emergency scenarios. The second reference was used for the Make a Plan page because of its illustrated preparation layout and note-like structure. The third reference inspired the looping animation idea, in which animation provides context and helps users understand the situation before interacting.
Art Direction
Visually, I wanted the website to feel friendly but still connected to emergency preparedness. The colour palette uses bright and alert colours such as green, pink, yellow, purple, blue, and dark tones to create contrast and highlight important information. The visual style is simple, illustrated, and slightly playful, so the content does not feel too intimidating. For typography, I used a bold heading style with a clean body font to keep the website readable while still giving it a strong identity
FINAL Website Proposal
Refining Concept ( Figma Prototype )
After developing the concept, sitemap, references, and wireframes, I refined the idea into a Figma prototype. This stage helped me test how the pages connect and how the user would move through the website. I refined the homepage into a more visual introduction, using the city scene and phone notification as the starting point of the experience.
Comments
Post a Comment