Advanced Interactive Design / PROJECT 1: Thematic Website Design Proposal
Daphne Lai Yu Cheng / 0366380
DST 60804 / Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
All lectures & class activities are documented in Advanced Interactive Design / EXERCISES.
INSTRUCTIONS
Project 1: Thematic Website Design Proposal
Instructions
Description
Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that it is a movie, the site can simulate movie universes offering virtual tours through time and space, or any other subject previously created in the movie. The aim of any such site is to keep the user engaged in the medium through interactive exploration.
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
- Have to be documented and posted in your E-portfolio as your reflective studies.
I did some research and narrowed down my directions to consult with Mr. Shamsul in the next week. Mr Shamsul said that the Vivienne Westwood and Blue White porcelain (QingHuaCi) are interesting so it's up to me to decide which one to do.
I decided to work on the Vivienne Westwood topic as I think it's more interesting than Blue White porcelain (QingHuaCi).
Before starting the proposal, I did some research on Vivienne Westwood such as the designer herself and the brand identity.
Figure 1.2 Vivienne Westwood Official Website
Based on the brand's identity, the website would definitely feature a chaotic and playful aesthetic such as collages and editorial design.
Figure 1.3 Vivienne Westwood Collage. Source.
The project incorporates an editorial punk aesthetic inspired by the identity of the Vivienne Westwood brand and combining elements of punk culture with contemporary editorial design. The website will feature bold typography, collage inspired layouts, layered visuals, and interactive elements to create an immersive user experience.
The overall design aims to reflect Vivienne Westwood's rebellious spirit and distinctive visual identity while showcasing her legacy and influence in the fashion industry.
- Introduce users to Vivienne Westwood, her brand identity, history, and influence.
- Showcase her iconic collections and their significance in fashion history.
- Explore the influence of punk culture on her fashion designs.
- Examine the materials, craftsmanship, and design elements in her creations.
Figure 1.4 UI Elements
1)- Editorial design
- Paper tear effect
- Rotatable 3D model
- Metallic texture
- Collages
- Ransom letter font
- Stacked polaroids, photobooth images
- Inspired by model comp cards & photoshoots
The website references used reflect an editorial magazine and chaotic bold collage aesthetic which aligns with Vivienne Westwood's brand identity.
Figure 1.5 Website References
2) Studio XXX
3) Punk Rock
- Bold tones such as red, black, and gold.
- Reflects the brand's punk-inspired aesthetic.
- To convey the rebellious spirit and distinctive identity associated with the Vivienne Westwood brand.
Typography:
Title Font: Bold typography and Ransom note font, a core staple of punk culture that creates a bold and chaotic aesthetic.
Content Font: Sans serif font (Montserrat) used to maintain content readability and balance against the expressive title typography.
Loading Page
.jpg)
‘Vivienne Westwood’ in ransom letter font animating with a loading percentage at the bottom.
1. Homepage
.jpg)
Introduces Vivienne Westwood and the brand while establishing the website's visual identity and overall theme.
2. History
.jpg)
Explores Vivienne Westwood's background, career journey and evolution as a fashion designer.
3. Punk & Rebellion
Explores how Vivienne Westwood incorporated punk culture into her designs to challenge and rebel against traditional fashion norms.
4. Materials & Design Elements
Showcases the materials, fabrics and distinctive design elements commonly featured in her creations.
5. Famous Collections
Showcases Vivienne Westwood's most iconic collections and their significance within the fashion industry.
*Ideation sketches will be explained in detailed in proposal slides*
This is the overall user flow of the website created in Figjam board. Link here!
Figure 1.14 User Flow
SUBMISSION
Figure 2.2 Thematic Website Design Figma Prototype
Figure 2.3 Thematic Website Design Figma Prototype
Week 1 (23/4/2026)
Ideas are too broad right now, narrow it into one direction, e.g. Art -> Claude Monet. Blue porcelain's page idea on customisation is difficult, might wanna think of another content idea.
Week 2 (30/4/2026)
Vivienne Westwood and Blue Porcelain's ideas are interesting.
Week 8 (9/6/2026)
Working on this proposal was fun because I really enjoyed being able to explore different topics and ideas for my website as it gave me more creative freedom throughout the planning process.
One of the challenges I encountered was deciding on the animations and interactions that would best enhance the user experience and match the concept. The feedback provided by Mr. Shamsul was helpful and helped me to further refine and improve my proposal. Figma was slightly limiting when I was trying to fully visualize how I wanted the website to look and function so I am looking forward to bringing my ideas to life by creating the website from scratch and refining it further in the next task.
Comments
Post a Comment