Task 1: Thematic Interactive Website Proposal

24/9/2024 - 15/10/2024 / Week 1 - Week 4
Tee Jia Ern / 0348512
Advanced Interactive Design / Bachelor of Design in Creative Media
Task 1


LECTURES

Week 3
We tested out a new software known as Adobe Animate. After a briefing of the available tools, we are tasked to create a beach ball and recreate a ship 2D graphic. Control B is used to allow for filling colours in between the lines. 
Fig 1.1: Exercise 1
Fig 1.2: Original Ship Image

Fig 1.3: Exercise 2 Recreation


INSTRUCTIONS


Ideation
In week 1, we are tasked to come up with ideas for the thematic interactive website. I thought of 3 ideas which are:
1. Soda Can Vending Machine
2. Tea
3. Travel

I thought that the tea have more creative liberty than the soda idea because I can have a timeline, chart and map for the various topics that I will cover. The topic tea has more content and more ways to deliver the information. For traveling, Mr Shamsul advised me to think of something that is not documented too much on the topic travel so it’s more interesting. For example, the top most dangerous/safest place to go to. Or backpacking. I thought the topic tea is more straightforward than traveling so I chose tea as my topic. For the tea topic it can be somewhere more personal like in Southeast Asia. 

Final Topic: Tea Journey in Southeast Asia

Fig 2.1: Ideation 1

Fig 2.2: Ideation 2

Fig 2.3: Ideation 3

Mood board
I created a mood board based on the content I want to include in the page. It is to convey what would be present in the website. I included the 3 main Southeast Asian teas, a location pin map, timeline, tea process and some website designs. 
Fig 2.4: Mood board



There are a total of 4 pages, each with interactive elements so the user feels immersed with the experience. 
  • Home Page
  • History
  • Production
  • Culture


Figma Wireframehttps://www.figma.com/design/fV98wGuyKOm6IGV4yDp1zV/Untitled?node-id=0-1&t=GnHfmUTdL1L5vcmh-1

I experimented with various layouts to hopefully create something visually interesting to look at. Doing a wireframe also makes me visualise and adjust accordingly to make my vision into something physical. 


Final Thematic Interactive Website Proposal



FEEDBACK

Week 1
General FeedbackFocus on the content instead of the outcome. I'm too focus on the implementation of the features in the web. Focusing on the content and later can decide on how I want to convey the information. 

Specific FeedbackThink of something that is not documented too much on the topic travel so it’s more interesting. For example, the top most dangerous/safest place to go to. Or backpacking. For the tea topic it can be somewhere more personal like in Southeast Asia. 

Week 2
General Feedback: Explore how websites do their layouts. Have text around the button for better accessibility. Use left align for most of the texts. 

Specific Feedback: The concept should be a theme instead of the web page content. The moodboard should reflect on the theme and the colour of the website. Colours should be minimal with only 2 or 3 colours without including black and white. Make sure colour contrast is sufficient to distinguish the colours. For wireframes use placeholder image so you can adjust the space it takes up. Be consistent with the layout of the website to aid user experience. Try to avoid anything that involves vertical scrolling. 


REFLECTION

Experience: I learned about the basics of Adobe Animate through the exercises provided. It's quite similar to Adobe Illustrator, except you can make a line curved without a pen tool, which is quite convenient. The exercises helped me to familiarise myself with Adobe Animate. 

Observations: Something that I picked up on is it's important to communicate with the client or lecturer to ensure there are no misunderstanding or different takes on the various parts of the proposal. Consulting with Mr Shamsul makes me better understand what he expects from each section of the slide. I improved my proposal slides based on the feedback he gave me. 

Findings: It is good to have feedback from someone who is in the industry with experience. I appreciate the feedback Mr Shamsul gave me and I'll implement them in my slides. Proposal is mostly ideation, so I don't really have an issue with thinking of the wireframes since it's quite intuitive. Though Mr Shamsul sees things that I never considered before, such as consistency in website layout. His patience and guidance helped me to improve on work. 

Comments

Popular Posts