Advanced Interactive Design - Task 2

 

05.6.2024 -26.6.2024 /Week 7-Week 10
Tai Tong En/ 0363164
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media
Task 2-Interactive Web Application Pre-production & Prototype

INSTRUCTION



Task 2 - Interactive Web Application Pre-production & Prototype

Our assignment for this endeavor was to develop an interactive application prototype for a selected brand. Before beginning the website design process, I visited Pinterest to get ideas and inspiration. I started ideating my website and made a mood board.

Fig 1.0 Mood board

Using this mood board, I hope to create a landing page that appears like an LV package when you first arrive and then displays various of LV eyewear goods when you open it. This is a very innovative idea, in my opinion, and it will draw lots of visitors to the page to learn more about our offerings.

I'll allow customers to select the products they are interested in when we view them using the movie selection paradigm. I created the seat selection link in the movie theater so that patrons could select their own seats after deciding on whatever products piqued their interest. The seat selection link is to provide customers with additional information about the product, we will broadcast an overview and a video introduction. Naturally, you can also see the product specifics up front. To allow customers to look more closely, I also created a 3D mode.

Sample Animation 2: https://www.pinterest.com/pin/

I proceeded by creating slides to show my ideation and proposed it to Mr. Shamsul.

Fig 1.1 Creating proposal

After getting approval, I started creating my user flow and wireframe. I used Adobe Illustrator to develop a high-fidelity wireframe and Figma to create my user flow. I then used Figma to import my wireframes and start working on the prototype.

Fig 1.2 Creating user flow




Fig 1.3 High-fi wireframe



Fig 1.4 Prototyping


After finishing my user flow, wireframe, and prototype, I made a video explaining about my website design and the animation for my website.


Final Submission

Fig 2.0 Final presentation slides

Fig 2.1 Final presentation video


REFLECTION

It was a fun assignment to prototype an interactive application for Louis Vuitton eyeglasses. Creating the website animation was one of the project's most fascinating components. Animations, in my opinion, can greatly improve the user experience by adding interest and visual appeal to a website. Additionally, I believe that user flow planning and wireframing are essential to making sure the application is simple to use and navigate. I now have a solid understanding of the design process overall thanks to this assignment, and I can't wait to use it to animate my website for my next project.

Comments

Post a Comment

Popular posts from this blog

Publishing Design - Task 1

Image
  Week 1 -Week 7 Tai Tong En / 0363164 Publishing Design / Bachelor of  Design (Hon) in Creative Design  Task 1: Exercises INSTRUCTION LECTURES 1. Lecture 1 -Historical Format Numerous civilizations have had a significant influence on how we record and disseminate knowledge, according to research on the historical format growth of books. 1.1 Mesopotamia Civilization (Iran-Iraq) According to Denise Schmandt-Besserat's research, the earliest writing system replaced counting technology. Bullae developed from simple and sophisticated tokens, paving the way for pictographic writing on clay tablets.   1.2 Ancient Egyptian Civilization (Egypt) The only people who could read and write Hieroglyphics were Egyptian scribes, who recorded information on papyrus, a unique paper created from the pith of the papyrus plant. 1.3 Indus Valley Civilization (India-Pakistan-Afghanistan) One of the oldest writing systems was cuneiform, which was employed on soft clay tablets for trade, gov...
Read more

Publishing Design - Task 3A

Image
  Week 5 -Week 11 Tai Tong En / 0363164 Publishing Design / Bachelor of  Design (Hon) in Creative Design  Task 3A: Book LECTURES Lectures are done in  Task 1 - Exercises INSTRUCTION WEEK 1 - WEEK 4 1. Task 1 & Task 2 - Content Generation & Visual Design 1.1 Text Formatting - Visual Design Before start doing task 3A, we need to do a write up of 3000 words on on any subject that are familiar with and divided into 3 chapters and each chapter must have 2 subtexts and 1 pull quote. Identify 16 areas in written text for visualization, I use medium that is suitable for my topic - illustration. 1.2 Text Formatting - PDF 1.3 Content Generation - Visuals Design - PDF WEEK 5 - WEEK 7 Task 3A - Book 1. Book - Instructions The binding method shall be predetermined to be staple binding (saddle binding). The book is of 32 pages, which is smaller than A4 and bigger than A5.  After developing content (text and visuals) the next stage is to determine the format (size...
Read more

Publishing Design - Task 3B

Image
  Week 9 -Week 13 Tai Tong En / 0363164 Publishing Design / Bachelor of  Design (Hon) in Creative Design  Task 3B: E-Book-Brand Guideline LECTURES Lectures are done in  Task 1 - Exercises INSTRUCTION WEEK 9 Task 3B - E-Book - Brand Guideline 1. Brand Guideline - Instruction In this task will be required to adapt the printed book have designed for the purpose of on-screen reading or the like.  The design of the digital publication will be dependent on the device it will be read from or the type of format used - ePub/PDF/HTML.  Presently most digital books are in the ePub/eBook format (How To Create a Fixed Layout Ebook with Adobe InDesign CC) or a PDF interactive.  To explore and decide on an appropriate format subject to the task type or hardware used. Focus on is navigation between pages; this has to be well thought through, as the user interface must not be an obstacle to seamless reading.  Innovative use of the relevant features to increas...
Read more