Advanced Interactive Design 1---Task 1: Thematic Interactive Website Proposal

23.9.2024 - 15.10.2024 ( Week1 - Week 4)
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Advanced Interactive Design
Task 1: Thematic Interactive Website Proposal

Jumplink

Lectures

Week 2:

Mr. Shamsul basically briefed us on MIB and what we need to do, then he introduced us to using Adobe Animate. First, he taught us how to create a new file, setting the web quality to high or very high, with a frame rate of 30. We also needed to ensure the platform type was set to HTML5 canvas.

Next, he taught us the basic functions of Animate, including the pen tool, shapes, and so on. Then he guided us in drawing a ball and encouraged us to draw a boat on our own.

Fig1.1 Week 2 Demo

Week 3:

This lesson involved making objects move along a path. Next, we were to find a map and draw a car to move along that path.

Fig1.2 Week 3 Demo

Week 4:

This session began with simple animation, transforming the letters A to D using shape tween. Next, we were tasked with creating a spider animation on our own, ensuring that the spider's legs also animate.

Fig1.3 Week 4 Demo


Instructions

MIB of Advanced Interactive Design

The due date for this proposal is in Week 4. We need to explore various thematic interactive websites for inspiration. Mr. Shamsul directed us to visit https://thefwa.com/ to gather ideas. Afterward, we need to think of five potential topics to include in our proposal, which will help us start conceptualizing the website's wireframe after consulting.

The proposal should include five potential topic ideas, a brief introduction for each topic, and references to relevant websites.

After considering, I've settled on the ideas of tarot cards, Tomaz watches, gyms, tattoos, and Gentle Monster glasses. I prefer the tarot card and Tomaz watch ideas.

Fig1.4 5 potential idea

After consulting with Mr. Shamsul, he agreed that all the ideas are good, but I mentioned that my references are mostly 3D, which might make it challenging. I decided to focus on tarot cards as my design theme and shared my ideas for transitions and some basic concepts with him.


Next, I began thinking about how to turn the tarot card concept into a website. In the proposal, I explained why I chose tarot cards and provided an introduction to them. I also included a general plan for the colors and fonts I intend to use.

Fig1.5 color, style, fonts

I plan to use dark colors, such as purple, blue, and black, to create a starry night effect and convey a sense of mystery. Gold and silver will be used for the text, with some lighter colors for transitions. The style will combine a vintage and mysterious feel with a minimalist layout. The fonts will include three types: Great Vibes, Lobster, and Playfair Display.


Fig1.6 Wireframes

The next section is the wireframe, which I divided into four pages. The first page is the home page, providing a brief introduction to tarot cards. The second page is the tarot page, displaying the details of the tarot cards. The third page is the tarot card spread, showcasing different spreads. Finally, the last page is the daily draw card.

Fig1.7 Moodboard and flow chart

The final part is the mood board and flow chart. I gathered some tarot card designs to serve as inspiration for my project. Mr. Shamsul also advised not to create too many tarot cards, as it could take too much time to complete.


Feedback

Week 3:
After presenting my proposal for the 5 potential ideas to Mr. Shamsul, he felt that all of them were feasible. However, I mentioned that the ideas I’m most interested in involve 3D elements, which could be quite difficult to implement. So, he suggested keeping things simple. I introduced the tarot card concept, and he advised me not to include too many cards, but instead to focus on the key ones.

Reflections

Thematic interactive websites are really fascinating; there are so many different and unique sites that are visually stunning and engaging. I'm particularly interested in 3D elements, but I'm unsure about what I can realistically achieve with my current skills. After browsing many other websites, I have a better understanding of the essential features that need to be included. I've started to slowly conceptualize how to design for the upcoming tasks, but it feels quite overwhelming with so much to do.

Comments

Post a Comment

Popular posts from this blog

TYPOGRAPHY Task 1: Exercise ( Type Expression and Text Formatting)

Image
25.9.2023 - 24.10.2023(Week 1 - Week 5) Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media Typography Task 1: Exercise ( Type Expression and Text Formatting) Jump link 1. Lectures 1.1 A. Introduction 1.1 B. Development 1.2 Text 1.3 Text_P2 1.4 Basic  2. Instructions 2.1 Task 1: Type Expression 2.2 Task 2: Type Formating 3. Feedback 4. Reflections 5. Further Reading  LECTURES Week 1 : A. Introduction Typography WHAT: As a subject in a module Fundamental aspects in any design studies  Fundamental skills allow us to develop features, attributes and ...
Read more

Application Design 2 - Task 1: Self- Evaluation and Reflection

Image
24.04.2025 - 15.05.2025 （Week 1 - Week 4) Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media Application Design 2 Task 1: Self- Evaluation and Reflection Index 1. Lectures 2. Instructions 2.1  Application Design 1 Review 2.2  UXLab Assistant Analysis and improvement 2.3 Submission 3. Reflection Lectures Week 1: In our first class, Mr. Razif introduced us to the MIB (Module Information Booklet) and briefed us on the tasks we would be working on throughout the semester. He also introduced the use of ChatGPT's UXLab Assistant, which we could leverage for Task 1 — to assist in design analysis and improvement.  Later, we explored how tools like FlutterFlow and GitHub Copilot could be integrated into our workflow for animations and coding. We ended the session by registering accounts for these platforms. Week 2:  There was no class this week due to a public holiday. Week 3:  ...
Read more

Advanced Interactive Design - Final Task: Completed Thematic Interactive Website

Image
13/11/2024 - 30/12/2024 ( Week 9 - Week 14 ) Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media Advanced Interactive Design Final Task: Completed Thematic Interactive Website Index 1. Instructions 1.1 Home Page 1.2 Cards Page 1.2.1 Major Arcana 1.2.2 Minor Arcana 1.3 Card Spread Page 1.4 Daily Draw Page 1.5 Actions 1.6 Final Project Submission 2. Reflection Instructions MIB for Advanced Interactive Design This final task requires integrating the knowledge from previous tasks to create a webpage with animations and include it in the blog. Requirements: Upload the website to a web server. Record a video walkthrough. Publish an online post in your e-portfolio as part of your reflective studies. ...
Read more