Candy Crush Kathak

User Interaction Design Through Dance

Shravani perfoming Kathak
Shravani perfoming Kathak


Her two graceful fingers point towards the sky. The rolling sounds of thunder envelope the lightening-dazzled valleys of Pune. Swaying in her balcony overlooking a verandah with a mango tree, Shravani suddenly widens her eyes, lifts her hands, and her wrists begin to tremble. With two fingers from each hand still pointing to the sky, she traces the path of rains descending on the hills in the distance.

As if on cue, the rain falls heavily on the thousands of thirsty leaves of the mango tree. The young and beautiful Shravani’s dance is expressing her joy at her gaining admission into the prestigious National Institute of Design (NID), a train-journey away in Ahmedabad. The daughter of a dear family friend, Shravani is at the threshold of her new life, sharing for the first time with me her love for design and for Kathak, which is a classical dance-form from India.

When the rain starts to abate her movements slow down, focussing all her energy to the forefinger of each hand tenderly tapping its thumb. Aha! The gentle pitter-patter of a drizzle. In simple, evocative dance moves, she wordlessly expresses the different moods of India’s majestic monsoons. From downpours to light drizzles, lushly lazy to dramatic, thunderous ones.

Her hands and gestures, known as mudras in Kathak, soon melt into evoking the stately poise of a proud peacock, the sudden alertness of a grazing deer, the determined hunt of a ferocious lion, the prowl of a fierce tiger. And finally of course, the dancing form of Shiva, the playfulness of Krishna, the longing of Sita, and the desperate search by a lovelorn Ram.

Hand Mudra Gestures in Kathak
Hand Mudra Gestures in Kathak

Design Is Non-Verbal

Like the first exhilarating chirp of a Koyal, or a nightingale, that bursts into song when the rain finishes, a fresh thought dawns into my mind. Through centuries in India, the essence of stories and myths have been expressed using the non-verbal. Elegantly, they cut across the barriers of different languages and our rich and intricate cultures. Generation-after-generation, the eternal truths encoded in our legends are literally danced through gestures and expressions.

We need to trace our steps back to thousands of years, when ancient tribes in India first discovered the art of storytelling through non-verbal communication. Indeed the word ‘Kathak’ is from Sanskrit that literally means ‘story’ and this art relies solely on the dancer’s expressions, gestures, mudras, stance and especially delicate eye movements to evoke emotions while unfolding the story.

When I then turn my gaze to the years just ahead of us, I see the same game at play. Today, the world is a multicultural, plural society. The internet embraces all, the literate and the non-literate. In the present moment, how do we design apps for smartphones, tablets, smartwatches, smart TV, Internet of Things (IoT) and even more that we have not imagined yet for this rich, diverse and global cauldron that bubbles on this planet.


The Womb of Verbs

Design philosophers of the twentieth century from the Bauhaus movement and its minimalism boldly proclaim: ‘Form Follows Function’. Yet I strongly feel that design is not made of just nouns and its associated forms. Design to me is forged from the womb of verbs, actions and interactions. The role of a designer therefore is to design interactions that emotionally touch and delight your customers while fulfilling specific, precise tasks. Exactly like a dance.

To me: ‘Verb Follows Function’ is the new design language of the century. From the flirtatious swipes of the Tinder app, the harmless pokes on Facebook, the pinch and zoom in photos, the flicking of cash in an e-wallet, the exploding and popping of sweets in Candy Crush Saga, all design has become verb follows function. We are transiting from pure user-interface design to user-interaction design.

In Interaction design, there is indeed a form of Kathak at play in your hands. The Natya Shastra, an ancient Indian text on classical arts, has this famous quotation:

“Where the hand is, the eyes follow
Where the eyes go, the mind follows
Where the mind is, there is the feeling
Where there is feeling, there is mood, flavour, sweetness.”

Shravani’s dancing points to a deeper truth: The most fundamental approach today is to design as if the world has turned non-literate.

The objective of design is to use playfulness to enhance usefulness.

Take a look at these stunning and inspiring examples of six second transitions and interactions here for web and smartphones:
In the ‘Dive Into Interaction Design’ workshops, I cover a great deal more about every aspect of making the world more meaningful through interactions. Here, for example, are easing functions which choose not just the speed but also the mood of moving elements in a design:  Each one conveys a mood and emotion in the interaction design. I call this ‘Motion with Emotion’.

Lots more is covered in the workshop, including for instance, finding inspiration from some great film-sequences and opening title sequences in movies. From these we gain insights in interaction design for apps and UI. Am also curating a special board on my Pinterest account, dedicated to great examples and inspirations of interactivity. I may currently be conducting other workshops on Design, so if you do wish me to conduct one on Interaction Design, just write to me, and will inform you of upcoming dates.
Meanwhile, the next time you have to hire a designer or developer, ask them what they understand about dance. Every button, every icon, and every relationship between elements jumps to life with interaction design, because dance is a celebration of life. Need some quick inspiration to dance? Here’s some trippy, groovy music I composed a few months ago for a colleague, ‘Think With Your Feet.’

So go ahead, dance like its raining. It might just help you understand design as definitely being more alive.

How to Quickly Make Paper Texture in GIMP

Realistic paper-textures! They look so cool in the background of sophisticated website designs, mobile-applications, desktops, in brochures and print-production design, and for interesting user-interface design. Better than using just a plain white background, or a background with black-to-white gradients that often remind me of retro-1980s design. I prefer realistic-looking paper that is subtle, and use it with sensitivity to draw a viewer’s attention to the content.

GIMP is a free and powerful alternative to Photoshop software. When I say ‘free’, I mean muft and mukt. GIMP is available for Windows, Macintosh, Linux, from so get your copy and let’s get started.

Step 1: Launch GIMP, and select File-menu > New. Choose the height and width of your paper in pixels, and press ‘OK’.

Step 2: Select Filters-menu > Noise… and choose ‘RGB Noise’. Apart from ‘Preview’ make sure all other check-boxes are unchecked.

Step 3: Do you want your paper to be smooth, or would you like to have a texture that’s tad stronger? Take your pick as you slide the tab on ‘Red’ ‘Green’ or ‘Blue’ between 0.20 to 0.69. Do notice how all three values move in tandem. Check out the preview which may show granular dots increase or decrease in density. I prefer values between 0.20 to 0.32. Once you find a pattern to your taste, click ‘OK’.

Step 4: Go to Image-menu > Mode > Grayscale. This one step will make the dots appear more textured, and shrink your file to one-third its size in kilobytes or megabytes, which is a good thing.

Step 5: Go to Filters-menu > Blur > Gaussian Blur. Choose a value between 3 and 9 on the slider below. Check out the ‘Preview’ to see what suits your taste, and click ‘OK. You’re done. If required, you may re-apply Gaussian Blur with a different value, for an even smoother finish.

Save your file in the format of your choice, and you’re done.

Further tips:

Use the Color-menu > Brightness-Contrast slider to set the tonality of your paper.

I use the muft and mukt illustration-design software, Inkscape, for authoring user-interface designs. You may find it for free download and use for your platform here:

Import your paper-texture into Inkscape, then draw your interface elements over it using Inkscape’s tools.

Hope you find this quick tutorial useful. It’s a Christmas gift for a client.