Advanced Interactive Design / Final Project: Completed Thematic Interactive Website
Natalie Chu Jing Xuan, 0354589
Advanced Interactive Design, Bachelor of Design (Honours) in Creative Media
Table of Contents
Module Information Booklet (MIB)
Module Information Booklet (MIB)
Final Project: Completed Thematic Interactive Website
Requirements
Submit your final website using your E-portfolio Link (The final website link to be attached in the E-portfolio).
To demonstrate original authorship and verify that the project was not generated solely by AI, your E-portfolio must include a Process Documentation Section featuring:
- Development Progress: Screenshots of your workflow, code snippets, or asset creation.
- Reflection / AI Disclosure: A brief narrative explaining your design decisions (and a brief statement detailing any AI tools used and their specific role in your process).
Project Overview
For my final project, I created a thematic interactive website about film photography using Adobe Animate. As someone who enjoys both digital and film photography, I wanted to create a website that introduces the beauty of analogue photography in a fun and interactive way instead of simply presenting information on static pages.
Objectives
- To educate users about film photography.
- To introduce the history and development of film photography.
- To show the different types of film photography and cameras used.
Target Audience
- Students in secondary school to university level (16–25 years old)
- People who want to know about film photography.
- Beginners who are interested in photography.
Design Concept
The visual direction of this website was inspired by the nostalgic feeling of film photography and the physical experience of looking through old photo albums, magazines, and printed photographs. I wanted the interface to feel warm, timeless, and slightly aged, similar to an old newspaper with a yellowish paper texture.
Colour & Typography
Since film photography is closely connected to memories and the past, I chose a muted colour palette to create a vintage atmosphere while keeping the overall design clean and readable. The warm beige background (#F5F1E8) acts as the base colour, resembling aged paper, while the dark brown text (#2F241D) creates a strong contrast that matches the traditional print aesthetic. Muted red (#C95555), and yellow-orange (#E9A005) were used as accent colours applied to headings, highlights, and important interactive elements.
For typography, I used Roboto Mono and Iosevka Charon Mono to complement the technical and archival feeling of photography. The monospaced fonts create a structured appearance similar to old printed documents, camera settings, and film-related information while maintaining a modern and minimal interface.
|
| Fig.1 Typography & Colour Palette |
Overall Mood
The overall design aims to balance nostalgia with interactivity. Most photographs are presented with monochrome and slightly brownish tones to reflect the characteristics of old film photography. The combination of vintage-inspired colours, typography, and layouts helps create an experience that feels like exploring a personal collection of photographs and memories.
Website Features
The website is divided into several sections, each focusing on different aspects of film photography. To create a more engaging experience, I incorporated interactive elements such as hover effects, clickable objects, animations, and navigation interactions to encourage users to explore the content instead of passively reading through information.
1. Home Page
The home page introduces the theme of the website through a film camera-inspired layout. It uses a bold title, short tagline, and clear call-to-action button to guide users into exploring the world of film photography. Decorative photo frames are included as visual elements to strengthen the photography theme.
Key Elements
- Main title and tagline
- "Explore Now" call-to-action button
- Decorative photo frames
- Navigation menu
Interactions
- Navigation items have hover effects for better feedback
- Photo frames slightly zoom in and transition from monochrome to colour when hovered
- The "Explore Now" button guides users to the main content sections
The colour transition effect was inspired by the evolution of photography, where early monochrome photography gradually developed into modern colour photography.
2. About Page
The About page introduces users to the basic concept and background of film photography. Instead of presenting information in a traditional format, I created an interactive collage using photography-related elements such as cameras, photographs, film rolls, and stationery to make the page more visually engaging.
Key Elements
- Section title: "What is Film Photography?"
- Brief explanation of film photography
- Interactive collage of photography elements
Interactions
- Collage elements slightly move upward when hovered
- Clicking on each element enlarges it and displays additional information through an information panel
3. Evolution of Film Photography
This section showcases the development of film photography through different historical periods. A visual timeline format was used to help users understand how film photography evolved over time through archival images and short descriptions.
Key Elements
- Historical timeline
- Archival photographs
- Descriptions of selected eras
- Film-strip navigation
Interactions
- Users can select different film-strip sections to view information from each era
- The selected film strip enlarges slightly to indicate the active period
4. Camera Types
The Camera Types page introduces the two main categories of film cameras included in the website. Camera categories are presented through visual cards to create clear separation and allow users to easily navigate between different camera types.
Key Elements
- Page title and introduction
- Camera category cards
- Visual grouping of camera types
Interactions
- Camera cards transition from monochrome to colour when hovered
- Clicking on a card navigates users to the selected camera category
5. Camera Detail Page
The camera detail page provides more in-depth information about each camera category. Users can browse different camera models and explore their specifications through an interactive layout.
Key Elements
- Camera category title and description
- Camera thumbnails
- Large camera image display
- Specifications panel (year, lens, film size, battery)
- Image carousel indicators
Interactions
- Clicking thumbnails changes the selected camera
- Gallery title and instructions
- Film roll selection buttons
- Collection of film photographs
- Users can select different film rolls to browse photographs
- Hovering over images reveals additional information such as camera details and photographer credits
Development Process
The development process involved several stages, from researching the theme and planning the interface to creating visual assets, building interactions, and testing the final website. Each stage helped shape the final outcome and improve both the visual design and user experience of the interactive website.
Research & Planning
Before starting the development process, I researched film photography, including its history, camera types, and visual characteristics to better understand the theme and content direction of the website.
The initial concept, design direction, and website structure were planned during the proposal and prototype stages. These helped establish the overall visual style, user flow, and interactive elements before moving into the development phase.
Proposal slides link: https://canva.link/yczsmv4x6ffnmg3
https://www.figma.com/design/93SrXtWd2uEJ3k7prwtEsb/AID-Proposal?node-id=218-2&t=jywVJcB7CXw5WNw6-1
Figma Prototype
Asset Creation
Visual assets were created and animated using Adobe Animate. This included designing a film strip animation for the loading screen and creating a back button element that aligns with the vintage film photography theme.
They was carefully adjusted to maintain consistency with the overall design style, including the chosen colour palette, typography, and visual mood.
|
| Fig.2.1 Asset Creation |
Adobe Animate Development
1. Intro Page (index.html)
I created a short film strip animation to represent the process of preparing a camera and loading a film roll.
To create the stretching effect, I used a mask layer to control the visible area of the film strip while animating it to stretch in and out. The animation was designed to loop three times to create a loading effect.
 |
| Fig.3.2 Mask for film strip |
When users click the "Start Shooting" button, a camera shutter sound effect is triggered, followed by a circular fade-in transition that creates the effect of looking through a camera lens.
After the transition animation finishes, an ActionScript navigation command is used to open the main website page (home.html) using _parent targeting. This allows the loading screen to remain within the index file while connecting to the separate HTML page.
 |
| Fig.3.3 Actions in index.html |
2. Home Page
To improve the user experience, I created a separate home.html file instead of redirecting users back to the loading screen every time they access the homepage.
After the initial loading animation is completed, clicking the "Start Shooting" button triggers the transition to the main website. The home page is then loaded through home.html, allowing users to directly return to the homepage by clicking the website logo without having to replay the loading animation.
 |
| Fig.4.1 Actions in home.html |
3. About Page
After the page transition animation finished, I added a stop action to prevent the timeline from continuing automatically. Navigation actions were then added to allow users to move between different sections of the website through the navigation menu.
 |
| Fig.5.1 Navigation actions in about.html (part 1) |
Each collage element was converted into a button symbol to create hover interactions. When users hover over an item, the element slightly slides upward to provide visual feedback and indicate that it is clickable.
 |
| Fig.5.2 Hover effect on collage elements |
When users click on a collage element, an information panel slides into view to display additional details about the selected topic. Each item was assigned a unique instance name so that different buttons could trigger different information.
 |
| Fig.5.3 Info panel animation when click on item |
To organise the content efficiently, different information sections were placed on separate frame labels. When a user clicks on an item, the ActionScript navigates to the corresponding frame label and plays the related information panel animation.
 |
| Fig.5.4 Actions in about.html (part 2) |
4. Evolution Page
When entering the Evolution page, the timeline elements are introduced through a left-to-right fade-in animation. Each era section appears progressively, followed by the appearance of the related historical images and descriptions.
 |
| Fig.6.1 Timeline animation |
After the introduction animation is completed, a stop action was added to prevent the timeline from continuing automatically. Navigation actions were also implemented to allow users to move between different website sections.
 |
| Fig.6.2 Actions in evolution.html (part1) |
To improve user interaction, hover effects were added to the era navigation items. When users hover over an era, the selected section slightly enlarges to provide visual feedback and indicate that it can be selected.
 |
| Fig.6.3 Hover effect for era |
Additionally, images include hover interactions that display image descriptions, allowing users to learn more details while exploring the timeline.
 |
| Fig.6.4 Hover effect for images |
Each era was separated into different frame labels (such as era1_info, era2_info, and so on) to organise the timeline content. When users select a specific era button, an ActionScript command is triggered to navigate to the corresponding frame label and play the selected timeline section.
 |
| Fig.6.5 Actions in evolution.html |
When entering the Camera page, the content appears through a fade-in animation. After the animation is completed, a stop action was added.
Users can select between two camera categories: Manual Film Cameras and Point-and-Shoot Cameras. Each category was organised into a separate frame label, allowing the button interactions to navigate to the corresponding section using gotoAndPlay().
 |
| Fig.7.1 Actions in camera.html (part1) |
To make the selection page more engaging, hover interactions were added to the hero images representing each camera category. When users hover over the images, they slightly enlarge and transition from monochrome to colour. This interaction follows the overall website concept of showing the evolution and characteristics of film photography through the transition between black-and-white and colour imagery.
 |
| Fig.7.2 Hover effect on image card |
After selecting a camera category, users are directed to the corresponding detail section. Different camera information was separated into individual frame labels, allowing users to browse through different camera models and view their specifications.
Each camera selection button was assigned an instance name and linked to a specific frame label. I also assigned hover effect to them.
 |
| Fig.7.3 Hover effect on camera |
 |
| Fig.7.4 Different label for different camera detail |
When clicked, the ActionScript navigates to the selected camera section and displays the related camera images and information.
 |
| Fig.7.5 Actions in camera.html (part2) |
6. Gallery Page
When entering the Gallery page, all elements are introduced through a fade-in animation to create a smooth transition into the photo collection. After the introduction animation is completed, I also added a stop action.
 |
| Fig.8.1 Actions in gallery.html (part1) |
Users can select different film rolls to explore different collections of photographs. Each film roll selection is connected to its own content section, allowing the gallery images to update based on the selected film. This interaction was organised using separate frame labels, making it easier to manage different image collections within the timeline.
 |
| Fig.8.2 Actions in gallery.html (part2) |
To make the gallery more interactive, hover effects were added to each photograph. When users hover over an image, additional information is displayed, including details such as the camera used and photographer credits. This allows users to explore the photographs while learning more about the process behind each image.
 |
| Fig.8.3 Hover effect for image |
Final Outcome
Netlify link: https://aid-filmphotography.netlify.app/
[Note: The website may take a moment to load on first visit due to animations and media. For smoother browsing, open each page once and revisit afterward.]
Source file:
https://drive.google.com/drive/folders/1QDzAbRSzeMAW7NFpwvQUXRV81dk91aqm?usp=sharing
AI Disclosure
AI tools used as a supporting tool in the development process. When brainstorming the structure of content, improving interface text, proofreading descriptions, and troubleshooting Adobe Animate and ActionScript problems, ChatGPT helped. I designed and developed all visual design, interface design, interactions, graphics, animation and implementation. AI was applied to aid in the design process, but not to create the final design.
Reflection
Comments
Post a Comment