Figma – Know Your App Before Developing it – Free UX Tool

There are two things that make a product developers worry. What is the technology that you are building, is it efficient enough, does it function well, is it innovative, etc.. And second, what is the user experience of it? The tech may be killer, but does the experience justify it. UX’ importance has increased many folds in this decade. It is well understood that the only thing, if the user really has of your app, is its experience.

Gone are the days when we will take certain liberties in the interface because the software doesn’t allow some workflows. We used to develop software and then make the UX. We can’t do that anymore. All the right paths need to align properly, all the messaging needs to be perfect, and thus the UX design should be driving the software development. This calls for a tool where you can design the UX of the app before the software development is planned.

There are quite a few such available online. I use figma.com as it is a free online web app. Follow these simple steps to get started and feel comfortable with it within minutes.

Simple Ok Cancel App

Step 1 – First create a project and bring yourself to this screen. Use the top left tools to create a frame and choose it’s dimensions. Now create a rectangle, and a text box inside it. Select them both, and group them together.

Step 1 – Create a “frame” and add a rectangle with some text which can look like a button. Group them together.

Step 2 – This is where magic starts happening already. Select your group and right click on it, and select “Create Component”. This will create a package or a unit of your group, which can be repeatedly used in the rest of your project.

Step 2 – Now right click on the group and do “Create Component”. Rename your component to something meaningful.

Step 3 – Now your button unit is ready, duplicate it and create a “Cancel” button. Note the cancel button’s icon. It is an instance and carries all properties of the source button, unless you override something, for e.g. here the text. Wow!

Step 3 – Duplicate your component, and you have an “Instance”. Change the text to “But I am Lazy”.

Step 4 – Great. Now let’s create two more screens. You can do so by duplicating the existing screen. Make them in a way that they represent what happens through your two buttons.

Step 4 – Create two more screens by just duplicating the current. Treat them as two flows of your Ok and Cancel buttons

Step 5 – Interesting stuff now! Select the main button and Choose Prototype. You can point that button to navigate to one of your screens. Amazing.

Step 5 – Select any button, and like shown, direct it to go to a screen of your choice

Step 6 – Map all the buttons to the screens you want them to go. Fantastic! Your UX prototype is ready for testing.

Step 6 – Now map all the rest of the buttons like above

Click on the top right “play” looking button and you will get a test run of your UX in another tab. And it should work like below.

Your prototype now navigates around different screens through your button according to how you have mapped them

All that was possible within 10 minutes, and you have a functioning user experience of an OK-Cancel app ready to test. How awesome is that?

I have not even mentioned the effects like shadows, strokes, rounded corners. You can also add images, and put things inside a scroll area. Basically you can design your entire app before even thinking about what libraries you want to use for development. Even better, the functioning prototype can be handed over to the programmers to make their life easier. Hope this was of help, let me know your thoughts in the comments. Thanks!

The Making of Krishna Legends – Art, Story and Development

According to the ancient texts, around 5000 years ago, the deranged King Salwa who used to ride in Vimanas (which were speculatively gravity defying flying machines) attacked Dwarka from the sky. Krishna defended the city, and defeated him from the ground. This was a perfect fit to be a game like Space Invaders with Retro Game Mechanics. So the game design came through, but that wasn’t the main inspiration of Krishna Legends.

Inspiration

Visit the temple establishment of Tirumala Tirupati Devasthanam and a feeling of grandness takes over you. It doesn’t matter whether you are an agnostic or religious or cultural, the sheer scale at which a single Idol drives a massive operational city is really a humbling experience. It brings you down to your roots and leaves you asking the question, as humans, have we figured ourselves out yet? This gives life to Balaji’s idol, made up of just stone, and we perceive that to be an actual presence of something bigger than us.

A 30 square km city with a population of 8000 is dedicated entirely to the Temple

Inspired by this, we traveled more around the country and that made our imaginations run wild. We wanted to share that feeling of epic as well as the richness of the Indian culture with everyone (We talk more deeply about this in a post about Dhantra Studio). This is not in the context of faith, but it’s more in the realm of culture-craziness, “What life must have been in that contemporary era?”. So it was clear where the art style of the game has to come from.

The Art Style

At the time, I was fascinated by traditional Mysore and Tanjore paintings because they are incredibly difficult to make, while my wife, Nupur, is a big fan of Madhubani paintings. I tried Mysore painting style a few times and got some understanding of rounded shapes, repeated patterns everywhere, outlines, keeping things symmetric, preferring orthographic instead of perspective, very little to no natural chaos and not overly fit human figures. Madhubani paintings were good to look for colors.

Yudhishthara in His Durbar – Mysore Painting

This was a big part away from my VFX background because as VFX Artists we love dramatic perspective angles, and creating controlled chaos with Gaussian distribution.

Some primary features of the traditional art were maintained, but it still needed a modern look. There is symmetry everywhere and everything is made up of patterns. Even the VFX have no chaos whatsoever, they follow the order of a mandala shape. As we became confident that the art style is in good shape now, it was time to in parallel look at what the story can be. We already knew it has to do with Krishna’s city Dwarka under distress.

The Story

The epic poem Mahabharat is incredibly long and is full of parallel running branches of stories of various characters. Quite possibly this is the reason people always fail to make a movie on it but tv shows work out well. After the main events of Mahabharat, Krishna has many encounters with variety of baddies (small tho) and one of those encounters is with Salwa. When Krishna had gone for a ceremony, King Salwa decided to use the absence of Krishna as an opportunity to destroy his city Dwarka.

Story’s main Plot

Krishna had a hint that Salwa, while trying to avenge his friend Shishupal, would definitely cause a havoc. Thus he rushed back, but on his return he found his city depleted of beauty. Seeing Dwarka damaged, he promised himself to destroy his enemies. The whole Shishupal business is then talked about during the cut-scenes.

Most cutscenes happen, with Krishna on the terrace of a building, and Salwa hovering in the sky, exchanging dialogues

We told the story mainly as word exchanges between Salwa and Krishna, on how peace talks fall apart and lead to war. For most cut-scenes we used programmed location to serve dialogues through an animation system, with occasional special cases. Now that we are talking about development, let’s jump to that section of this creation.

Game Development

We chose Unity3D for development given the ease of use and publishing. The core loop was built first with wip artwork and was kept extremely tight. We used optimization not just the ones recommended by Unity, such as load balancing between resources by reading the profiler and maintaining least draw calls looking at the Frame Debugger (We had 4 to 6), we even went strong on general programming level of optimizations too. The tight core loop ensured that we will have no bugs (or till now that’s what we believe because nothing came back from the audience), strong performance (the game works 60fps smooth even on old Kitkat devices) and a small download (25mb) and install size (36mb).

While a small package, assets quality is not compromised at all! Every art is strict to scale of a 1080p screen. Everything was drawn on paper and digitally traced until there was a good hand at the decided art style. At a later point, we were creating digitally directly which sped up our asset creation process.

Initial art was hand drawn sketches traced digitally

Level Design was split between 2 people. One person will create even levels, another person will create odd. This ensured consecutive variety. And we maintained a formula which told us how many enemies, what type, what concentrations, what patterns, should a level have given a level number. This allowed us to design any level anytime and we need not go in a series. This helped us maintain our sanity because designing levels can be tedious along with being difficult.

Difficult levels in the game

We carefully selected Sound Effects and Music to fit our art style. It was not easy to find relevant sound effects. What worked for us was percussion samples from Latin and African countries’ instruments, thanks to zapslat.com. And we found amazing looping music on looperman.com from great artists and we proudly credit them in our game.

Other than Krishna, we added more Vishnu avatars, such as Narsimha, Parsuram, Varaha, Sriram, as well as Krishna’s girlfriend Radha, as playable characters. Krishna in particular is inspired entirely from the Idol of Dwarkadhish Temple (if you were wondering why his eyes are closed).

Krishna, Narsimha, Parsuram, Varaha, Sriram, Radha

Our complete production took exactly 4 months, with some minimal passive updates over the next few months. We called the game “DwarkaDheesh” in the beginning but a fan vehemently encouraged us to have better SEO/ASO and thus we changed it mid way to Krishna Legends and we couldn’t be more happier. If you are interested, you can take a look at the Game’s Presskit here.

A Fun Journey

We wanted to start a conversation around bringing this culture into unfitting art forms, maintaining the traditional art styles, serving in a modern contemporary medium. Combine this with our passion and expertise in video game development and viola, Krishna Legends is a first direct product of that. The response that we have gotten from regular gamers as well as culture experts are in lines of what we had in mind and it gives us the confidence that as Dhantra Studio we will be able to do this with more serious and bigger projects in the future.

So what is Dhantra Studio all about?

Travel across India and you will find unique rich cultures locked in the wilderness of vernacular regions. This includes jaw dropping architecture, beautiful artwork, amazing sculptures, folk stories and historical marvels which will give you goosebumps. But it never leaves those areas, for the local people have that magic right next to their home and are content with that.

The maximum reach this culture gets is when tourists take photographs, but that too gets lost quickly in their travel diaries, again forgotten. Efforts are made by the Government of India for preservation and digitization of various heritage sites, but it still stays within the niche of travelers, historians, archaeologists etc..

Yudhishthara in His Durbar – Mysore Painting

Government aggregates and recognizes the various art styles and can be researched at their websites. And some good folks talk about it in their posts. Never does this makes it way into where we would love to see it, in pop culture!

And we are here to try this tantamount task. We always overlook that Indian mythologies and folk stories are just stories first. They have evolved and been rewritten many times to stay with the contemporary society, and that’s why they are relate-able to our daily lives. We want to bring this to the regular everyday people in the form of video games and in small bytes on social media on the side. We are not going for the masses directly, we are going for the hip popular stage.

For the past generation all this happened through books, then along came TV shows and movies, then made its way into comic books, and now it’s time for it to come to video games. Our focus is creative styles that we see in various traditional art forms and modernizing them.

At Dhantra Studio, we want to bring Indian art and culture in modern art forms, such as and especially video games. We want to explore folk, ancient, historical, mythological, and various other styles indigenous to India in it’s authenticity. We want to make games with a never before seen Indian art style! Krishna Legends is our first attempt at that and we have gotten a fantastic response and is encouraging us to go after bigger and challenging projects.

[DOWNLOAD NOW]

Importance of UX Design Principles in Product Management

Rececntly I got invited by Product School to give a talk on the Importance of UX Design Principles in Product Management. I decided to give an outside look at how to percieve at UX Design for your product, as I do not have direct Product Management experience but I do have experience in working with Product Managers, ideation and understanding Customer Needs. Hopefully this is useful.

You can comment in the presentation for any doubts and discussions. I will be actively looking at it. Thank you!

Time Pass Artwork #4

Past artwork posts: