Advanced Interactive Design - Project 2
Khan Saif / 0367438
Advanced Interactive Design / Bachelor's Design in Creative Media / Taylor's
Task 2: Interaction Design Planning Prototype
CONCEPTS:
The objective of this website is to provide an overview of Klang Valley’s urban lifestyle, covering recent events such as food, art, events, and cultures. This is a platform where locals and tourists to explore a curated experience.
ART DIRECTIONS:
The highlight of this interactive is that it features homepage highlights showcasing every event that Klang Valley has to offer. The color palette is based on the customization for day and night transition color skin. Both of the colors and typefaces were chosen based on urban vibes, energy and cultural touches.
FLOW CHART:
DAY / NIGHT TRANSITION:
There’s a bit of a dark blue gradient surrounding the picture of the Petronas Twin Towers. The animation only has to do with the typeface itself. The button gets bigger as it hovers.
WELCOMING PAGE:
There’s a bit of a dark blue gradient surrounding the picture of the Petronas Twin Towers. The animation only has to do with the typeface itself. The button gets bigger as it hovers.
DESTINATION PAGE:
In the destination page, there will be 5 places to showcase here and they’re all in Klang Valley. Petaling Jaya, Subang Jaya, Taman Tun Dr Ismail, Bangsar, and Shah Alam. The Final pictures for those locations are displayed in Figma. The button has once again, the navy blue gradient, or light blue gradient for daytime. The gradient’s gone and shows the photos as it hovers the button. As for what happens when you press the button, it will display this animation transition to the categories page.
CATEGORIES PAGE:
WEBSITE PAGE:
Once you chose your categories, this is how the scroll down animation works here. It scrolls down and removes the top page and displays the categories. Let’s say I choose eat and drink here, and I chose that first photo, when i hover the photo, the photo will enlarge to the point of surrounding the whole group of other photos of restaurants. Once you click the photo, the animation transitions and reveals all the information here.
Comments
Post a Comment