Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

24.4.2024 - 15.5.2024 / Week 01 - Week 04
Tan Zhao Yi / 0363285
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media
Task 1: Thematic Interactive Website Proposal


LIST

Lectures

Task 1: Thematic Interactive Website Proposal



INSTRUCTION


LECTURES

Lecture 1: Adobe Animate
In the first lecture class, we get to try our first step on Adobe Animate. 
We were requested to draw an apple, a beach ball, a kite and a boat.
Exercise on Adobe Animate

Lecture 2: Principles of Animation
  • Squash and Stretch
  • Anticipation
  • Staging
  • Straight-ahead Action and Pose to Pose
  • Follow Through and Overlapping Action
  • Slow in and Slow out
  • Arc
  • Secondary Action
  • Timing
  • Exaggeration
  • Solid Drawing
  • Appeal
  • Timing
  • Easing
  • Continuity
  • Hierarchy
  • Screen Transition
  • Clarity: simple and clear movements
After the lecture, we begin to create our first simple animation: the bouncing ball, and shape transferring.
Published animation exercise: http://127.0.0.1:8090/bounce.html?12706110
Exercise on Adobe Animate

Task 1: Thematic Interactive Website Proposal

A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilise multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that it is a movie, the site can simulate movie universes offering virtual tours through time and space, or any other subject previously created in the movie. The aim of any such site is to keep the user engaged in the medium through interactive exploration. 

The topic chosen can be:

  • 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 any other topic subject to the module coordinator's approval
Requirements of contents:
1. Concept
2. Wireframes
3. Moodboard 
4. Flow Chart
A. Research
Mr. Shamsul provided us a good example from a website that contains many project from designers worldwide. I explored the website and found some of the thematic websites that I really like. 
Website link: https://thefwa.com/

Website #1: We Are All Angel
Fig 1.1. We Are All Angel
I really like the hover effect that focuses on the text while blurring the rest. The light effect that follows my mouse is also impressive. Additionally, the progress bar at the bottom clearly indicates which page I'm on and how far I've navigated through the website, helping me know where I am.
Fig 1.2. Hover effect
Website #2: Food for Fish
Fig 1.3. Food for Fish
I really like this website. It's a mini game of finding the golden underwear which was the final wish of the main character's grandfather before he passed away. I can explore the game myself and while I didn't know what to do and where to go, there's a reminder that gave me clues.
Fig 1.4. Reminder
B. Ideation
My initial idea is to promote the Derby session in Hay Day, a farming video game, by creating a mini game to promote the excitement. 
Fig 2.1.  Thematic Interactive Website Proposal - Version 1

However, after the feedback section, I realised that I may not bear to cope with the difficulties of creating mini game due to time limitation. I was thinking of instead of creating a mini game, I could develop an informative website. Mr. Shamsul suggest that I could recreate a new story for the characters in Hay Day, but I prefer to stick to my topic so I decided to recreate a new story of the derby.
Fig 2.2. Hay Day Existing Character
C. Development
I started to brainstorm a storyline for the Derby as there actually has no official story for the Derby session in Hay Day. I limit myself for only three chapters, one pages for each of the story.

Topic: The Derby Adventure

Storyline: 
Introducing the three character in the new Derby story: Farmer Joe, Daisy and Tom.

Chapter 1:
It was a bright and sunny morning in the peaceful village of Hay Day. The birds were singing, the crops were swaying in the gentle breeze, and the animals were bustling around, ready for another productive day. Just as Farmer Joe finished feeding the chickens, a colorful envelope arrived at his doorstep. It was an invitation to the annual Hay Day Derby! Excitedly, Farmer Joe rushed to share the news with his friends. Daisy, the resourceful dairy farmer, and Tom, the energetic delivery boy, were thrilled to join in the adventure.

Chapter 2: 
During the Derby, Farmer Joe, Daisy, and Tom faced several challenges, starting with harvesting 100 crops in 24 hours, which they completed just in time, earning their first ribbon. Next, they completed 10 truck deliveries in 48 hours despite obstacles, gaining another ribbon and a golden scarecrow. Midway through, they mine ores and bring back the diamonds, earning another ribbon and the community's gratitude.

Chapter 3: 
As the Derby came to a close, they hosted a grand feast, celebrating their achievements and the spirit of farming. With their golden scarecrow proudly displayed on the farm, Farmer Joe, Daisy, and Tom had not only conquered the challenges but also strengthened their friendship and left a lasting legacy in the village.

Concept:
  • Farm-themed: Integrate farm-related visuals such as barns, tractors, crops, animals, and rustic tools throughout the website.
  • Bright and Cheerful Colours: Use a vibrant colour palette featuring greens, yellows, blues, and reds to reflect the lively and inviting atmosphere of Hay Day. These colours should be soft and warm to create a friendly and welcoming environment.
  • Cartoonish Illustration: Incorporate whimsical, hand-drawn style illustrations that capture the playful and lighthearted nature of the game. Characters, crops, and buildings should have a rounded, cartoonish appearance to enhance the fun, animated feel.
Mood Board:
Fig 2.3. Mood Board

Wireframes:
I did the website prototype in Adobe XD. I drew out my idea of how the website should look and started to think which part to animate to make it more interesting.
 
Fig 2.4. Wireframe progress in Adobe XD
Initially there were only the story showcased in the website, but Mr. Shamsul said that I could extend the content such as the author. I expand the content to the character description, gallery, and author introduction. Also, I changed the story page from a limited book view to the whole screen view.
Fig 2.5. Story Page - Before & After

Mr. Shamsul mentioned that I could refer to the Xyzal: Storytime with Nigel from the FWA website.
Fig 2.6. Final Wireframes

Flow Chart:
A website flowchart (also known as a sitemap) maps out the structure and complexity of your current or future website. A well-structured sitemap or flowchart makes your website easily searchable. Each piece of content should ideally give users accurate search results, based on keywords connected to your web content.

Product, UX, and content teams use flowcharts or sitemaps to understand everything contained in a website, and plan to add or restructure content to improve a website’s user experience.
(Reference: Miro)
Fig 2.7. Flow Chart

Final Thematic Interactive Website Proposal

The details will be all shown in the slides.

Fig 2.6. Final Thematic Interactive Website Proposal - The Derby Adventure


FEEDBACK

Week 4
Reconsider about it because mini game requires a lot of scripting and it may be too difficult to finish in a short time. If you have the confidence of finishing it, you can still work on it.

Week 6
It's good to change it to recreating the story. Now it looks a bit simple, you may extend the content to enrich the website, for example you can include the author.

REFLECTIONS

Experience
I really enjoyed while exploring others' project of a thematic interactive website, and I wish I could make something similar in the end of the semester outcome. Hay Day is a video game that I've played since I was 14 (I think?), the idea of recreating the derby story is because most of the players doesn't prioritise completing the task and winning the Derby, based on my experience of changing multiple "neighbourhood", which can be called as a team. By highlighting and valuing the Derby, I aim to encourage players to actively participate and enjoy the collaborative team aspect of the game.
Observations
I observed that users are highly engaged by interactive and visually appealing content. Elements like the virtual book interface, clickable characters, and animated illustrations significantly increased user interaction and retention. Additionally, simplicity in navigation and clear, concise storytelling proved essential for maintaining user interest. Users appreciate a well-structured and aesthetically pleasing interface that guides them through the narrative effortlessly.

Findings
From this project, I found that thematic websites can be powerful tools for storytelling and engagement. Interactive elements not only capture user attention but also make the content more memorable.

FURTHER READING

The Principles and Processes of Interactive Design: : Required Reading Range Jamie Steane Fairchild Books
Book Name: The Principles and Processes of Interactive Design
Author: Jamie Steane
Year: 2023
#Site Maps and Task Flows 
  • Task flows represent steps and decisions for specific tasks (e.g., login, search) without necessarily leaving the current page. 
  • Site maps outline the structure of the entire website.
Key of Flow Chart

Example of Login and Register Sequence
  • Visualisation Syntax: Uses a simple syntax based on Jesse James Garrett's Visual Vocabulary for clarity. 
  • Page Types:  
    • Static Pages: Contain unique, infrequently updated content (e.g., 'about us' page). 
    • Dynamic Pages: Empty containers filled with content as needed, commonly used by news websites. (e.g., news websites use dynamic pages to display time-sensitive content chunks, which can appear on multiple relevant pages. )
  • Labelling for Clarity: Accurate labelling of pages, content chunks, and task flows with a logical numbering system is crucial for clear communication among stakeholders.
  • Site mapping tools: 
    • Adobe Illustrator
    • Axure RP Pro
    • Microsoft Visio
    • OmniGraffle
#Navigation Systems
  • Global Navigation: Buttons and links that are ever-present and usually sited in a consistent place.
  • Local Navigation: Refers specifically to the section of content that you are in.
Global Navigation (left) and Local Navigation (right)

Users navigate the Internet or on-demand TV by browsing or searching.
Browsing Aids
  • Breadcrumb trails: Show current location. 
  • Site maps: Provide an overview of website structure. 
  • Site guides: Orientate within large website sections. 
  • Sequential aids: Indicate progress in specific sections (e.g., 'Step 1 of 5').
Search Interfaces
  • Common method for locating information, especially when unsure of specifics. 
  • Use Boolean logic (and / or / not) for refining searches. 
  • Build queries to check spelling, suggest alternatives, and rank results by relevance and popularity. 
  • Narrow search results by location, time, or similarity to a selected result. 
Navigation Tips
  • Users typically use both browsing and searching. 
  • Provide multiple navigation methods. 
  • Ensure clear labeling and positioning of navigational tools like breadcrumb trails for users who do not enter from the main landing page.

Comments

Post a Comment