Advanced Interactive Design / Task 1: Thematic Website Design Proposal
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)
Task 1: Thematic Website Design Proposal
Requirements
Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:
- A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
- Movie promotion
- Game release promotion.
- Gallery/Museum exhibit launch
- Band/Artist latest release.
Or anything else you have in mind (subject to the module coordinator’s approval)
Submission
- Completed UI/UX proposal document.
- All processes (concept, wireframes, mood board, flow chart/site map)
- Prototype
At the beginning of this project, I explored three different ideas:
1. The Sims 4 NPC Household
Inspired by the game The Sims 4. This concept would present different NPC characters and their household stories, allowing users to explore character profiles in an interactive way.
2. Fujifilm X-Series
I planned to design a photography-themed website showcasing different Fujifilm camera models and their features. This idea focused on a clean, product-based layout with strong visual hierarchy.
3. The Psychology of Colours
Users could learn how different colours affect emotions and behaviour. This idea would include interactive colour selection and visual feedback based on user choices.
Draft Proposal Slide
After consultation with Mr. Shamsul and further consideration, I decided to proceed with the Fujifilm X-Series direction initially. However, I refined my idea during the process.
Instead of focusing on Fujifilm X-Series models, I shifted my concept to film photography. This decision was mainly because I am personally interested in film photography, and I wanted to design something that I am more passionate about. I feel more motivated working with this theme, as it allows me to explore film cameras and present them in a way that feels more meaningful and engaging in the design process.
Final Concept: FILM PHOTOGRAPHY
The website will organized into several main sections to guide users through the learning experience in a clear and structured way. Each page focuses on a specific aspect of film photography, allowing users to gradually understand the topic from introduction to visual exploration.
- Home Page – Introduction to film photography with a themed entry and navigation to other sections.
- About Page – Basic explanation and background of film photography.
- Evolution of Film Photography – Timeline showing the development over time.
- Camera Types – Information on different types of film cameras.
- Photo Gallery – Collection of sample film photography images.
The main objectives of this website are to educate users about film photography, introduce its history and development, and showcase the different types of film cameras used. It aims to help users gain a basic understanding of how film photography works and appreciate its unique characteristics.
The website is designed for students from secondary school to university level, aged 16 to 25. It also targets beginners who are interested in learning photography basics, as well as individuals who want to explore and understand traditional film photography.
Moodboard
I browsed through Pinterest to gather visual references and inspiration for my website design. From there, I selected images that reflect the mood I want to achieve, focusing on film photography aesthetics, composition styles, and overall visual tone. These references helped me define the direction of my design before moving into layout and interface development.
|
| Fig.1 Moodboard |
Colour Palette
The colour palette consists of warm, muted, and vintage-inspired tones: #F5F1E8, #4D433B, #8A6F4D, #C95555, #E9A005, #2E617C. These colours are selected to create a minimal yet nostalgic film-inspired aesthetic, combining soft neutrals with subtle accent colours to enhance visual hierarchy and mood.
|
| Fig.2 Colour Palette |
Typography
The typography chosen for this project is Roboto Mono for headers and Iosevka Charon Mono for body text. The use of monospaced fonts helps create a clean, structured look while maintaining a subtle analog feel that reflects traditional film photography.
Fig.3 Typography: Roboto Mono & Iosevka Charon Mono
User Flow Chart
Then, I created a user flow chart to map out the overall navigation and structure of the website, helping me visualize how users will move through each section before I proceeded with the design and prototyping process.
Fig.4 User Flow Chart
Sketches
After that, I created initial sketches and wireframes using Procreate on my iPad. This helped me quickly explore layout ideas and structure the interface before moving into digital design and refinement.
|
| Fig.5.1 Sketches on iPad |
In my sketches for the home page, I explored two different layout directions. The first layout places the main title at the top, followed by a short tagline, a CTA button, and decorative photo frames to support the film photography theme. The second layout uses a full-page film strip background with images, with the title, tagline, and CTA button placed in the centre.
|
| Fig.5.2 Home Page #1 and #2 |
After comparing both options, I chose the first layout because the second one felt a bit too busy, especially when placing images in the background. I wanted the interface to feel cleaner and more readable, so the first layout better supports a simple and focused visual hierarchy.
|
| Fig.5.3 Evolution #1 and #2 |
Moving on to my evolution page sketches, I explored two different layout directions. The first idea was inspired by a more experimental concept, where I arranged images like a corkboard with pins and strings to show the timeline order. However, I felt that this approach was quite messy and not clearly structured, as the sequence was harder to follow.
So, I chose the second layout because it feels much cleaner and more organised. The final design uses a film-strip style timeline navigation at the bottom, which makes it easier for users to follow the chronological development while keeping the interface visually consistent and simple.
|
| Fig.5.4 Camera Detail #1 and #2 |
For the camera detail page, I explored two layout options and ultimately chose Option 1 because it feels more balanced and organized, making the page look cleaner.
Option 2 uses a large image with a lot of empty space, which makes the page feel a bit unfinished and less structured. In comparison, Option 1 presents the image alongside the information in a side-by-side layout.
Wireframes
Then, I created a hybrid wireframe and prototype in Figma to refine my layout and explore basic interactions and visual outcome.
Fig.6.1 Wireframe in Figma
|
| Fig.6.2 Home Page |
I designed the home page to act as a strong introduction to the website and immediately communicate the theme of film photography. I kept the layout simple by placing a bold title and short tagline at the top, followed by a clear “Explore Now” button to guide users into the site. I also added decorative photo frames to reinforce the visual identity and create a more immersive film-inspired feel.
For interactions, I included subtle hover effects such as photo frames changing from monochrome to colour and slightly zooming in, which helps make the page feel more dynamic without being overwhelming. The navigation bar also has hover feedback to improve usability.
For the about page, I focused on introducing the concept of film photography in a simple and engaging way. I included a short explanation to help users understand what film photography is before they explore further into the website. To make the page more interactive, I designed a collage of photography-related elements such as cameras, film rolls, and photographs to support the visual storytelling.
Instead of presenting the information in a static layout, I wanted users to interact with the collage and discover content in a more exploratory way. When users hover over each element, it slightly rises to create a sense of depth. Clicking on an element enlarges it and displays additional information on the right side, making the experience more interactive and engaging.
Fig.6.4 Evolution Page
For the evolution page, I designed it to showcase the development of film photography across different historical eras through a structured visual timeline. I included archival-style images and short descriptions for each selected period to help users understand how film photography evolved over time.
After exploring different layout approaches, I chose a cleaner and more organized direction. The final design uses a film-strip style timeline navigation at the bottom, which allows users to easily follow the chronological order of each era while keeping the interface simple, structured, and visually consistent.
I also changed the horizontal line of the timeline to a thinner strokes after consultation because it will look more clean.
|
| Fig.6.5 Camera Selection Page |
For the camera selection page, I designed it to introduce the two main types of film cameras in a clear and easy-to-browse layout. The categories are presented using cards, allowing users to quickly compare and understand each type before exploring further.
For interactions, I added hover effects where the cards change from monochrome to colour, making the page feel more interactive. Users can also click on each card to navigate to the corresponding camera detail page.
|
| Fig.6.6 Camera Detail Page |
For the camera detail page, I designed it to display detailed information for each selected camera category. I included key visual and informational elements such as camera thumbnails for selection, a large main camera image, and a specifications panel that provides details like year, lens, film size, and battery. This helps users compare and understand each camera more clearly.
For interactions, users can click on thumbnails to switch between different camera models, and use carousel controls to view the camera from different angles.
During my design process, I refined the layout to better follow UX Law, especially the Law of Proximity and Law of Common Region. In my initial layout, the film roll selection buttons were placed at the bottom right, which made them feel visually disconnected from the main gallery content. This could cause confusion as users might not immediately recognize them as selection controls.
In the final design, I repositioned and grouped the elements more clearly to
improve visual hierarchy and usability, ensuring the film roll buttons are
clearly understood as part of the gallery navigation system.
Final Proposal Slide:
Task 1: Thematic Website Proposal
Reflection
Overall, this task helped me understand the importance of planning a website from the early ideation stage to the development of wireframes and an initial prototype. I learned that having multiple ideas at the beginning is useful because it allows me to explore different directions before deciding on a final concept that I am more confident and interested in.
Throughout the process, I improved my understanding of UX principles such as visual hierarchy, proximity, and common region. These principles guided my design decisions, especially when I noticed certain layouts were not clear or well-balanced. I also learned that small changes in element placement can significantly affect how users interpret and interact with a page.
Working on sketches and wireframes helped me quickly test different ideas before transferring them into Figma, where I started building a half wireframe and half interactive prototype. This stage made me realise the importance of continuous refinement rather than sticking to an initial layout.
In conclusion, this task has helped me develop my design thinking and UI/UX skills, particularly in planning user flow and creating a more structured and user-friendly website concept.
Comments
Post a Comment