Embedded Files
24.09.2024 - 15.10.2024 (WEEK 1-4)
Koh Xin Yee / 0363349 / Bachelor of Interactive Spatial Design (Hons)
Advance Interactive Design
Task 1
Task 1: Thematic Interactive Website Proposal
Task 1: Thematic Interactive Website Proposal
To Do:
To Do:
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)
Week 2
Week 2
Tutorial
Tutorial
To Do: Learning to using the app Adobe Animate. By using tools in Adobe Animate, create a illustration of a beach ball and a sailing boat.
We are thought to use line tool to first draw out the outline of the object, bent the lines with the selection tool, then use "break apart" to break it into sections, and only fill in the colours. I also make use of layers for the shadow part
Beach ball:
Image of sailing boat provided as reference:
Sailing boat:
Week 3
Week 3
To Do:
By Week 3, come out with:
5 potential topics for a microsite
visual references
10 website examples
Potential Topics
Potential Topics
At the idea exploration stage, I look for ideas on Pinterest, Behance and Dribble to choose a topic I can start with. I focused on products, such as perfumes, accessories, wine and whisky. Aside than looking at the products, I need to consider at the same time whether the content and images of them are enough or accessible, so that it can ease my design process.
Carolina Herrera Good Girl Perfume
Gucci Beauty Flora Gorgeous Gardenia Eau De Parfum
Miss Dior fragrances
Jeulia "Hug Me" Collection
Tiffany & Arsham Studio & Pokémon
Royal Salute 21
ONE BY PENFOLDS.
Colnago V4Rs Tadej
Personally before I thought of the bike website idea, I preffered wine and whisky more, as their packaging or product design are more simple then beauty products, so the website won't come of too overwhelming.
But after some struggle, an idea of road bicycles came across my mind. Since I'm quite familiar with this rider named Tadej Pogacar, I immediately thought of his special edition bike which he rode during the world championships.
So I went to search for it, and to my surprise, the official website of Colnago is somewhat quite complete with the content about the bike and nice shots of various angles. I really like this theme, compared to the others, so I went on to do research and look for visual references that will match my idea.
Visual References
Visual References
Website Examples
Website Examples
Here are some examples of thematic microsites that I find really interesting, for references and record purpose only. Not all of these can be considered into the design of my thematic website, but I like the interactivity and creativity which they offer. They all focus on how they convey the content of their website to the audience, regarding what products or service they offer, in a playful and innovative way.
After a quick consultation with Mr. Shamsul during Week 3, I decided that I will proceed with my idea of making the Colnago bike website. Mr. Shamsul asked me to do more research regarding branded bikes website design, in order to have a better idea on how to design a website for this kind of product.
So I search for some branded road bikes official website for references:
Cervelo official website: https://www.cervelo.com/en-GB
Bianchi official website: https://www.bianchi.com/
Pinarello official website: https://pinarello.com/global/en/bikes/road
Trek official website: https://www.trekbikes.com/international/en_IN_TL/bikes/road-bikes/c/B200/
Final Topic Chosen: Colnago V4Rs Tadej
Final Topic Chosen: Colnago V4Rs Tadej
Content and images are taken from:
Concept
Concept
The microsite for the Colnago V4Rs Tadej Pogačar Edition was designed to highlight the unique collaboration between the legendary cycling brand Colnago and one of the most successful professional cyclists, Tadej Pogačar. The core concept revolves around showcasing this limited-edition bike's precision engineering, race-proven performance, and symbolic connection to Pogačar’s remarkable victories.
Colour Pallete
Colour Pallete
These are the accent colours that I picked from the bike's paint scheme.
Since the paint scheme of the bike is much more lively and vibrant, I decided that my website design should more focus on a dark and elegant mode, similar to the official website's tone, so I picked black, yellow and bronze for my colour pallete.
Typography
Typography
https://emtype.net/custom/colnago
I did some research and find out that actually the brand Colnago has its own typeface. It will of course be better if I can use their typeface for my website, but I sadly their typeface is not downloadable, so I have to search for my own.
I chose the as simple as possible fonts, as the colours of the bike is already quite a lot, so I have to keep it clean and nice.
So I mainly chose sans serif fonts, as the tails and feet of serif might make it look too fancy
User Flow
User Flow
The user flow is basically a one-directionaly path, which alongway offers some choices to be made, whether to buy the product or proceed on the discover process.
I wanted to keep it simple, so I planned to create only a single landing page, with some pop-ups in specifications and paint scheme sections.
Wireframes
Wireframes
I proceed on with the wireframes. The goal is to simplify the whole process and design, just to keep it clean and nice, but informative and interactive at the same time.
Wireframe 1.0
After referring to some other microsites and considering on my personal ability, I tried to add in some animations and interactions I can possibly thought of.
I also thought of adding a 3D model into the website, since I have some Blender skills, but I'm still unsure whether it is possible or not to achieve this in Adobe Animate.
All details are documented in my UI UX proposal.
The initial wireframe I came out with is more or less similar to the official website's, especially the "Colours" page.
“THE COLOURS” wording is fixed to the bottom of the screen.
Click the left or right button to view the other colours. Or directly click on the shades under the header to jump directly to that particular screen.
The colour of the container will change gradually to match the colour mentioned.
Right side of the container shows an image of the bike which consists of the colour shade.
In fact, I was working with the high fidelity prototype at the same time, as I feel that it is easier to visualise with the colours and images.
And I soon find out that wireframe 1.0 isn't the best design I can think of.
Wireframe 2.0
The major changes about wireframe 2.0 is the "Paint Scheme" section.
I took some ideas from Dribble and decided to make a colour wheel design as I thought it would be much more cooler than the initial slideshow or carousel design. Plus, a colour wheel design + a bicycle wheel is a perfect match.
So I opened my Ps and Ai and started to produce a clean graphic of the wheel of the special edition bike. (Almost fell apart when I was prototyping this)
I thought this design would be much more fun to look at!
Besides that, I made some changes to the footer, as for the initial wireframe there's no proper footer like this one, and I felt that it would be better to have one so I added it in. Anyways I might also change my mind again when I start this in Adobe Animate and coding(?)
Deliverables
Deliverables
Final Thematic Interactive Website Proposal Document:
Reflections:
Reflections:
This project allowed me to explore the balance between storytelling and functionality in web design. By focusing on a premium product, I learned the importance of emphasizing quality over quantity when it comes to content and visual elements. The microsite is designed to resonate with cycling enthusiasts, providing an engaging yet straightforward exploration of a limited-edition product.
Design process is a learning process which requires me to improve myself non-stop, in order to come out with better ideas and more visually appealing and interactive designs. This product I chose is not a collection, which I cannot showcase every item in the collection, so I have to find the content enough to be presentable to the audience.
Page updated
Google Sites
Report abuse