"Yakshagana" is a visual interactive gaming app that provides information about different costumes of Yakshagana - a rich theatre art in Karnataka. It helps users to understand more about the various characters in the Yakshagana play by helping the users explore and create avatars, later identify them as different characters of the play.
Information and Classification
Individual
2 weeks - 2020
Characters
Academic Project
Indian Traditions
Visual Design
Theatre Art
CONTEXT
The kids today do not feel the need to learn the tradition and culture of our country. This interactive game just makes them aware about an important traditional theatre art "Yakshagana".
It is a dress up game that lets the kids create amazing costumes, learn about the character, and later use it as an avatar and share it with their friends via social media.
Let's Experience this app
DESIGN PROCESS
Research
Insights
User Flow
Wireframes
Visual Design
Prototype
RESEARCH
Indians are losing their cultural roots, and shifting towards western culture and language. It is seen in a study that the upcoming generations are losing its touch from the language, festivals and other cultural aspects.
When I came across the data of Yakshagana, I was hearing it for the very first time even when I had spent over 2 years in Bangalore, Karnataka. This is when I realized how unaware we are about our cultural roots.
I moved on to research more about Yakshagana.
WHERE IS YAKSHAGANA FOUND IN INDIA?
Karnataka
Andhra Pradesh
Telangana
Kerala
Tamil Nadu
IMPORTANT ASPECTS OF YAKSHAGANA
Tala
Tala are frameworks for rhythm determined by poetry style called Padya.
Raga
Raga refers to the melodic framework of five or more notes.
Literature
Yakshagana poetry is a collection of poems forming a musical drama.
Costumes
Costumes are elaborate & rich in colour defining characters & roles.
RESEARCH INSIGHTS
What got my attention? These elaborate costumes of Yakshagana artist.
Colorful
Yakshagana costumes are very rich in colour.
Elaborate and Distinctive
Costumes set the mood, they are characters-based.
Breast Plates
Breast Plates has mirrors that reflects light & colour.
Shoulder Plates
Made of bulky pads, they change actors' proportions.
Head Gears
Made from areca frond, mica & wings of beetles.
The Interactive Idea?
"Let's make a game out of the costumes,
where user can make their own avatar and learn alongside."
So I started exploring various ideas and layout, finally drew some Avatars.
USER FLOW
Splash Screen
Introduction
Home Page
Select Jewellery
Select Costume
Select Avatar
Select
Shoulder Pads
Select
Head Gear
Character's Match
and their info
WIREFRAMES
"These are some of the key wireframes that I had made for the application"
Selecting Avatar
Information about
Yakshagana
Real Images
of Characters
Matching Percentage
Similarities or differences in the characters
Avatar Selection successfully done.
Primary selection
Secondary selection
LOGO DESIGN
Logos help is creating a visual identity to any product. Below is the process of the logo for Yakshagana.
Layout
Formatting
- ve & + ve
Formatting
Add Element
But is this enough?
Adding stylized text to the logo helps in identifying the product more easily.
How can the logo of such a colorful art form be black and white?
being the most used and celebrated color is the costumes of Yakshagana artist
VISUAL DESIGN
Now let's get in how the visual feel of this application will look like.
COLOUR PALETTE
FDDFBC
FBCA8F
F79520
F7F7F7
C4C4C4
959595
ICONOGRAPHY
TYPOGRAPHY
TONE OF THE APP
Language
Formal and instructive
Greeting
"Namaskaram" - A regional term nationally identifiable ensuring both the regional aspect of the app is kept alive alongside making it easily understable
App flow
Graphically represented
Visuals
Flat illustrations of Yakshagana characters.
UI SCREENS
Splash screen
Avatar changing costume
Choices of costume
CTA to move to next item
Menu for different parts
"These are some of the key screens with the Visual design implemented."
Selection of Avatar
Final Avatar
Matching Percentage
Comparisons of characters
FUTURE SCOPE
This costumes created at the end can later be created in a an avatar that can be used in Virtual reality.
The avatar can also be used as an interactive filter which the kid can share with their friends
It could also be saved and shared as GIFs, and used to make memes.
KEY LEARNINGS
-
I learned how major chunks of data can be visualized into an interactive product.
-
I also explored with various visual elements and their placements to create a balance.
-
I explore logo and avatar making.
