ADVANCED INTERACTIVE DESIGN: TASK 02 INTERACTIVE WEBSITE
ALICIA TENG YI LING [0345159]
ADVANCED INTERATIVE DESIGN [TASK 02 INTERACTIVE WEBSITE]
To do:
- Create a site prototype in Adobe Animate
Process
I started off by selecting the topic for my website. I settled on
Dior's saddle bag collection purely because I love the appeal and
appearance of designer clothing but cannot afford it. As a draft, I
listed down a variety of pages I could include:
- Loading Page
- Side Menu
- Bag Catalogues
- A presentational page for bags (Max of three)
- Find out more / detailed information page
- Store locations
- Sign up for more / membership page
- Contact page
The ones that are highlighted in green are the ones I ended up choosing
and refining for this project.
The primary purpose of this fashion website is to inform and educate
visitors about Dior's "Saddle" bag line. With a focus on providing
detailed information, the website aims to offer an immersive experience
that delves into the aesthetics of these iconic bags. Through
descriptions, visual storytelling, and an exploration of the materials,
and design elements, the website aims to present visitors with an
understanding of the Saddle collection as well as to present them with
famous Dior store locations and the ability to ask for more information
through a contact page. My website aims to enable fashion enthusiasts to
make informed choices and appreciate the unparalleled artistry that
defines each Saddle bag.
Figma
Next, I began playing with page layouts in Figma. I planned them heavily
based off of what I thought could yield max interactability when
animating later on so I tried to keep them relatively clean shaped and
simple for better results.
|
|
Fig 1.1 Draft Website Wireframes in Figma I |
| Fig 1.2 Draft Website Wireframes in Figma II |
Adobe Animate Process
Adobe Animate allowed me to create animations in a new manner,
including the circular unmasking effect on the bag pages, enhancing
the overall charm of the website. The use of tweening for transitions
added a touch of a certain stylistic feeling, creating smooth
movements that elevated the website's aesthetics. My favourite effect
being: Quart Ease-In, Quart Ease-Out, Quart Ease-In-Out
The interactive elements, such as the pop-up information cards and the
world map on the "Store Locations" page, were made possible with Adobe
Animate's scripting capabilities. Through careful scripting, I ensured
that users could seamlessly interact with the content, discovering the
intricate details of the Saddle bags and store locations effortlessly.
The ability to work with vector graphics in Adobe Animate ensured that
the website's visuals and shapes remained sharp and scalable across
different screen sizes, preserving the high-quality appearance of the
Saddle bag images. Additionally, the system support for animating text
and graphics provided me with creative freedom to design captivating
introductions, fade-ins, and other visual effects that added depth to
the website.
Summary of Features & Tools used:
- Unmasking circular animation to unveil page
- Masking animation to unveil headers and subheaders
- Navbar
- OnClick buttons and pop up messages
- Information Cards
- Tweening
- Effect Styles
- Alpha colour effect
- Transform tool
- Usage of motion path
- Looping image carousels
Loading Page
|
|
Fig 2.1.1 Loading Page |
|
|
|
Main Bag Page 1
|
|
2.2.1 Main Bag Page 1 |
|
|
2.2.2 Main Bag Page 1 activate btns = popup information cards |
|
|
|
Main Bag Page 2
|
|
Fig 2.3.1 Main Bag Page 2 |
|
|
|
|
|
|
Main Bag Page 3
|
|
Fig 2.4.1 Main Bag Page 3 |
|
|
Fig 2.4.2 Main Bag Page 3 activate btns = popup information cards |
|
|
Fig 2.4.3 Main Bag Page 3 Timeline |
Store Locations
|
|
Fig 2.5.1 Store Locations Page |
|
|
|
Fig 2.5.2 Store Locations activate btns = popup information cards
|
|
|
|
|
|
|
Contact Us
|
|
Fig 2.6.1 Contact Us Page |
|
|
|
Navigation
|
|
Fig 2.7.1 Code for Navbar Buttons |
One of the highlights of using Adobe Animate was the ability to
preview the prototype in real-time, allowing me to make adjustments
and improvements on the spot. This iterative approach streamlined the
development process, ensuring a polished and user-friendly website
prototype.
Learning Resources: Throughout the process, I found valuable learning
resources and tutorials within the Adobe community, which helped me
discover new techniques and make the most of Adobe Animate's features.
Mostly on YouTube, I linked the tutorials below:
Uploading
Once I had completed my previews and felt content with the results, I
decided to put my work to the test. Following Mr. Razif's
recommendation, I utilized the Simple Web Server application to
conduct initial testing. Once satisfied with the functionality and
design, I moved forward with the next step and proceeded to upload the
website to Netlify for its final deployment.
|
|
Fig 3.1 Simple Web Server Application |
|
|
Fig 3.2 Uploading to Netlify |
Final Submission for Advanced Interactive Design Website
Fig 4.1 Interactive Website Video Presentation
Fig 4.2 Interactive Website Video Walkthrough
*NOTE: If you don't have the typeface "Antonio" on your desktop it will look quite different as it is not a Google font. Please view it through my video and screenshots for the final project outcome or if you are willing, please download the typeface. Thank you!
Feedback
- Add more points of interest on each bag page (different animations and panels to look and be more interactive)
- Change discover more to store locations
- Replace side menu icon with logo
- Add path mapping
- Add drop shadow to text
Reflection
This project pushed me to have my first ever experience with Adobe Animate.
Working with Adobe Animate provided me with a versatile toolset to bring my
creative vision to life and explore the fusion of design and animation. The
experience has not only enhanced my proficiency with Adobe Animate but also
deepened my understanding of interactive web design and user experience. As the website came together, I found immense satisfaction in seeing my vision materialize. The careful attention to detail, from the subtle transitions to the engaging information cards, contributed to creating an immersive and captivating platform.
Embarking on my first Adobe Animate project for the interactive website was challenging and terrifying. As a newcomer to the software, I found myself navigating through unfamiliar territory and faced with a steep learning curve and many other very steep learning curves from other modules. While the journey had its share of frustrations, it was also incredibly rewarding. Witnessing as the website came together, I found immense satisfaction in seeing my vision materialize. The careful attention to detail, from the subtle transitions to the engaging information cards, contributed to creating an immersive and captivating platform.
Overall, Adobe Animate has been an invaluable asset in creating an engaging
and visually captivating prototype for the Dior Saddle bag website, and I look
forward to further exploring its potential in future projects despite still being quite unfamiliar with the software.
Comments
Post a Comment