Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is nonexistent. And don’t bother concealing your thievery – celebrate it if you feel like it.Jim Jarmusch
Arijit Singh – With His Soulful Performance – Mirchi Music Awards
I and at least 50,000 other folks love this performance by Arijit Singh. I keep revisiting this video every now and then to draw inspiration for my layout design. Here is a quick 3-pointer list that I can relate to:
#1 Crisp Hero
See how the performance starts — slow, minimal music (almost vocals only), famous song. It’s a song which people have heard over a 1000 times, yet the crowd welcomes it with an applause! Why is that? Well, we as humans, always feel safe and comfortable when we encounter something familiar. There is always a slight fear, when we encounter unknown or strange things. Yet, we’re always curious to find out something new. That’s how our brains have been wired. What Arijit does here is he starts with his hit song, but at a very slow pace. People applaud with anticipation of finding something new in the familiar song. There it is. That’s how hero banners need to be :
Go Minimal, cut the noise
Communicate most relevant offer only, be precise
Catch eye, use familiarity
Build curiosity, use anticipation
Take a look at new vs old hero banner of Zivame. While the old one shouts at you and text is all over the place, the new one has a very soothing image and communicates one single thing: contrast bras. I bet this banner will convert better, and I’ll be publishing the numbers very soon.
Old Hero Banner – Zivame
New Hero Banner – Zivame
Takeaway: Go for a minimal, precise and crisp hero banner.
#2 Seamless Flow
See how the singer uses the Sargam (pardon my limited knowledge in music), to transition from one song to another. Before you know, a song ends and another one starts. And you’re caught by surprise – delight of unexpected. He never makes a sudden jump during this transition, it’s always a ramp. See how the crowd applauds at the beginning of every song. The applaud doesn’t start unless he has already sung 3-4 words. That’s how the page flow needs to be:
Go seamless across sections, use conjoining or overflowing elements
Break monotony across sections, use alternate layouts
Use fillers wherever necessary
See the example below. Here we are using the common background color across 2 sections to give the feel of continuity. So your eyes are guided from video to the collection section. The inclined pseudo-line created by difference in background serves 2 purposes here:
It further guides the eye downwards
It breaks the monotony .
Flow Across Sections
Takeaway: Make page-flow seamless, but break monotony.
#3 Earned Differences
If you have watched the entire video, you’ll realize that in second half, he has taken the tempo to an altogether different level. This breaks the so-called rules set by the original songs. Yet, the audience seem to like it. I think he was able to do it so beautifully because he knew exactly which songs to choose for this to be done and how to do it. Similarly, we as designers must learn to this. Sometimes, blindly following the consistency might result in confusion or monotony. As Steve Krug puts it:
Clarity Trumps Consistency - Steve Krug
There will always be places in our design, where breaking away from consistency yields better clarity. At such places, we should go ahead and do that rather than beating around the bush. Also, sometime, just for visual respite or to bring in a little drama, we can move away from the rules laid out by us, and bring a little freshness. My friend tells me that at Microsoft, such deviations are called earned differences. Fancy term right there, but remember, it is a two-sided sword and could hurt you easily if you end up breaking the wrong rules at the wrong place!
Take a look at the example below. The new Zivame design has all the contextual stuff including navigation implemented in left hand side or right hand side vertical slider (or surfaces) as shown. Eg. Shop by surface looks like what’s shown below:
Left Hand Side Surface
However, the styles surface has an earned difference. It is not vertical, it is horizontal and it comes in the center. This was a very major deviation for us and we argued that this was okay because our users need to see and compare all the styles side by side in a single view, plus we needed to show the styles gloriously. Our creative team had put a significant amount of effort and money in the photoshoot of this and we had to do some justice to that as well. Moreover, when we tried it out, the surface turned out to be beautiful and passed our usability tests. Bingo!
Center Aligned Surface for Styles
Takeaway: Break rules to break monotony, or achieve clarity.
I think all of us like something or the other, if you go into depth of why you are liking it, I’m sure you’ll find analogies like this which you could use in your future design projects. Try it out at your own risk. It’s fun.