Dressed in Reventon Yellow

Just got my Spigen – Reventon Yellow Bumper after a lot of slip and falls which seem to be unavoidable for the iPhone 5 being thin and light. And there is no doubt that this makes the iPhone 5 actually look a bit better (as far as bumpers go), though I am a fan of the open original look for any iPhone. Overall effect – Good.

On the downside, the fit of the bumper seems a bit loose and gives the feeling that it may come off easily when things bounce and slide around a bit. But, we will have to see about that. As far as finish goes, this does have the finesse and finish comparable to the iPhone itself and looks precise. The colour is bright and happy, one has to see how well in ages with dents and scratches on it.

Will update.




Four Slice toaster by De’Longhi

This is probably the Toaster I would want. Very retro. At the same time has ample amount of knobs and dials to keep me busy while the toast gets done. And look at all that chrome. Shiny!

Picked it up from 5 of the best toasters by The Telegraph

4 Slice Toaster by De'Longhi

4 Slice Toaster by De’Longhi

Using pop up messages for a new user is a good way to take them through the learning curve

Its possible that you have created some revolutionary in your app and you want your users to give it a try but your previous version was, lets say, mundane and didn’t really move way from the usual path, in that case its a good idea to include some quick tips on your feature enhancements with the new version. Some touch and gesture related controls may go unnoticed by most users and as a result the App will come across as something that was never really worked on. Avoid that, go all out and tell the fellows what’s new in big and bold, in this case red or pink

Here’s how Flickr says things!

Flickr's pop up description within the app when a new user runs it

Flickr’s pop up description within the app when a new user runs it

Cool iPhone Wallpapers


This is one place where you will probably find most of the cool iPhone wallpapers, neatly tagged browsing, categorised properly, with iPhone 5 compatible wallpapers highlighted with a visible tag on them.

You should be working right now (instead of blogging)

You should be working right now (instead of blogging)

Welcome to The Goa Project A unique social experiment that brings dreamers across platforms together for an unconference and a romantic holiday... If you love what you do.

Welcome to The Goa Project
A unique social experiment that brings dreamers across platforms together for an unconference and a romantic holiday… If you love what you do.

Google’s new image search

A few months back google switched from their old Image search to a new one where the preview is shown within the search results by opening up a box. It’s a Content First move from google and it works really well. To begin with:

  1. It allows the user to stay on the same page and see the results in a larger format / size
  2. Shows small thumbnails of the related images and strips the description that surrounds them
  3. Gives a clear buttoned approach to view the web page, the full resolution image or image details
  4. Image detail page actually gives further options to search the same image by size, look for similar images and snippets of the content associated with the images

On the annoying side, being creatures of habit, one will find constantly hitting the back button during preview and the page roll back in history loosing the search results, I guess it’s an easy fix that will get rolled in later or the users will get used to this mode and use the mouse more often than the keyboard.

Google's new Image Search with in page previews

Google’s new Image Search with in page previews

Are you using the Smartphone fully with your design?

For years each of us have worked on user interfaces that interact in 1 dimension and with a maximum of 4 options. Left Click, Right Click, Centre Click and Scroll. And if you were stuck designing for a Mac then you just had Click and Scroll. Things changed rapidly with the first iPhone and the others that followed. With them came the world of multi-touch. Things rapidly changed from Click to Tap. Then came a whole lot of other gestures, Swipe Left, Right, Top, Bottom, while the Scroll was still around. Add to this Pinch and Zoom complicated further by 2 finger and 3 finger swipes Left, Right… and as if this was not all, there was Shake, Tilt and Gravity. 

On todays date, most of these are not supported for HTML and JS, at least not without some serious effort. But on a Native App, you can really go crazy trying to decide which option to give. Apps like Snapseed, Magichour, have successfully managed to compress the complicated process of photo editing into a small 4″ screen (sometimes  smaller) and yes, they work. The trick is to find out what comes naturally to the user on each device. Twitter’s retweet and share options hidden behind a swipe action was one of the first to exploit these features, and today almost everyone understands the process.

Twitter App was one of the first ones to take advantage of vertical scroll and horizontal swipe in the same view, now almost every app has this!

Twitter App was one of the first ones to take advantage of vertical scroll and horizontal swipe in the same view, now almost every app has this!

Where did my shopping cart go?

Most probably it’s on your Browser

With so many e-commerce websites around us, one always wonders what is the correct place to put a shopping cart so that the user can easily access it. Most of these websites take the easiest route to execute by example and inspiration, in other words Copy Amazon and put it on the top right corner of their website. There is no problem with approach as long as it works, but it really does not work for everything. When a user is buying a book or a trouser, they probably have 2 to 3 items in their cart at the time of checkout. When they are buying groceries, they have 50 – 70 items in their cart of which almost all are repeat purchases. Putting the cart on the top right in this case just means a waste of available real estate on the screen and creating a very long scroll to actually see the cart. In truth, a regular user will never really look back on how many Scothbrites he put in the cart, and even if they do, it will be immediate within the next few minutes while adding the next few items. What is important is that they do not repeat a product, which means whatever goes into the cart gets marked as In Cart and preferably with a Count and an option to delete. This makes sure that if the user added 5 Scotchbrite Pads in the beginning of his session and forgets about it by the time he has added 50 more items, he can search for Scotchbrite and immediately see that its already in his Cart.

Then comes the Cart itself. Why not place it at the bottom or the top which is more scalable as the monitor size increases with an exclusive button to Edit Cart. While the horizontal band can keep showing the last 10 added items for immediate reconfirmation. It works, and increases the speed of shopping for the user significantly. It can be argued that users are not used to this placement, in truth, it’s an easier option and they soon get used to it. After all, the downloads in Google Chrome also show up at the bottom of the page, so does Chat Windows when you are on Gmail. So why not this!

ZopNow with it's shopping cart at the bottom of the page. Fixed.

ZopNow with it’s shopping cart at the bottom of the page. Fixed.

Smartphone has Two Faces

A smartphone today has two faces, and by smartphone I mean a proper iPhone or Android that has an accelerometer included in it. Anything without that is probably not considered smart enough. While one is designing for these devices, one should keep in mind that there is always that possibility to include an experience when the phone is tilted by detecting its orientation. A classic case for this is the calendar app on iPhone. You can tilt the phone to see a weekly view from any point on the calendar view, and it makes sense since fitting the weekly view in portrait mode will be completely useless!

Here’s a screen shot.

Calendar weekly and daily view toggle on iPhone by tilting the screen

Calendar weekly and daily view toggle on iPhone by tilting the screen.
And yes, I know the highlight really does not match, that’s because I tilted the same phone image in Pixelmator and just got done with it!

Should the Designer Write Code?


The designer should write the primary code and test his / her theories in interactions by doing so, much like a prototype. It’s even better if you can create prototypes that can work just as well in production. Without this, much of the Design is of no use as you are always at the mercy of the person writing the CSS and HTML and their skill set. Writing your own HTML, CSS, some part of Javascript and PHP never hurts, that’s what makes things work exactly how you wanted them to be. A good place to start practicing your skills is a dummy install of a wordpress blog and then changing it one step at a time using the theme editor.

Should one use a visual editor

No. They are mostly for people that don’t want to do the hard work and create a lot of junk code. Avoid editors like dreamweaver where things can be dragged and dropped. Best way to do it is using Notepad (Windows) and TextEdit (Mac) and a bunch of stuff that are free on Linux. If you want it to be a bit more colourful you can use editors like Coda, Netbeans or Sublime Text. They help you just a bit by colour coding the different aspects of the code.

When do I use Photoshop?

Only when you need to create graphical elements that are not possible through CSS3 and HTML5


Translating to Tablet

Translating to tablet is a tough job with so many of them around in various resolutions. I dont have enough metrics yet to decide from which point to switch to a Tablet View and after that to a Mobile view. But overall, the experience should be similar to available apps, like Mail, Facebook, and others which users are already used to. Here’s a view of that this page looks like with the menu tab open on an iPad.

Clicking on the 3 bars under the header opens the side panel on iPad and other tablet devices below 980px maximum resolution

Clicking on the 3 bars under the header opens the side panel on iPad and other tablet devices below 980px maximum resolution

The geek stuff used to do this is 99% CSS and 1% JS. Just load up the required values with a proper media query that looks like this.

@media screen and (min-width: 641px) and (max-width: 980px) {
/* And put all the cool stuff here */

And then a simple open close for now using jQuery does the rest! You need to have two open / close buttons so that the user can actually close the panel if they do not need it. The status is not carried over to the new page that loads from any click.

//$(".hidden-menu").hide(); this is to be kept on if you want the menu hidden always, even in full view
// this does the show menu part
// this does the hide menu part

That’s not all. Now you have to find the button and assign the class “showmenu” to it.

<div class=”menu-icon”><a class=”show-menu” href=”#”><img alt=”" src=”yourbuttonimage.png” /></a>

And then find the actual menu so that it knows what has to be opened when clicked! Make sure you create a separate class to define the attributes of the menu itself and not complicate matters by clubbing the two. It’s just simpler and easier

<div class="menu-class show-menu">/* Your menu here */</div>

Now that the menu is opening, chances are, it has hidden the button that was used to open it in the first place and there is no way to get rid of it if you wish to do so. For this, we add a simple fix, a clone button within the menu that does exactly the opposite. It closes the menu so that the user has a clear view to the actual content. You can give an additional conditional style to this one for situations where you do not need the button, for instance, mobile.

<div class="hidden-menu">
<div class="menu-icon hide-on-mobile"><a class="hide-menu" href="#"><img alt="" src="yourbuttonimage.png" /></a></div>
/* Your menu here */</div>

And we are all done!

Having an all accessible “Menu”

WordPress has it famous sidebar. And every blog needs one. It’s another thing completely as to how a theme interprets and shows it. Most blogs have it on the right of the left, like a standard large pile of links that keeps increasing. This leads to an unusual page height and people accessing your blog get bugged. This blog however will slowly go in a direction that is a hybrid of Desktop and Mobile and the three bars on top is the first step in that direction.


Try it out

Now the menu is on demand. Look for the familiar 3 horizontal bars on mobile and tablet!


Are you killing your SEO with Social Presence

These days most websites spend a considerable amount of time getting their data structure correct and organised for Search Engine Optimisation, so that bots from Google, Bing, Yahoo.. or even Dataweave can read them and understand, make sense of it and publish it when a user searches for it.

At the same time they start a lot of activity on Social Mediums such as Facebook, Twitter, Google Plus to get the users excited about the concept. However, if this is not done correctly, you land up getting 10000 likes on Facebook and 10 actual users on your website! The idea of social media presence is simple, get your users excited about elements on your website and then try to pull them in. Over time they get into the habit of clicking that link and coming back to the website. If you want to publish a lot of posts about recent developments and releases, a blog is a better idea that is then shared on to your Facebook Wall.

Given the hits a social media page will get, they will almost always get ranked higher than your website initially and that can completely ruin your Search Engine presence. Whenever someone searches for your website, the search engines by default will give the user the Facebook or Twitter feed preference over your actual website.

Use social media in a way that redirects traffic to your actual product. If it is failing to do that, it’s of no good use!

Avoid traffic flowing the red arrow direction as much as possible. If you have to add a social link to your site, add it to the footer

Avoid traffic flowing the red arrow direction as much as possible. If you have to add a social link to your site, add it to the footer

Oddroad.com – BETA Launch

We re-launched a conceptual product today after a complete re-design. Oddroad is targeted to be a place that allows you to browse destinations and then go there rather than search for them on a travel or booking site. The idea is based on the theory that people want to go to a place that feels a certain way, but not exactly that particular place.

e.g. I may want to go to Shimla, but once I am done with that, I probably would think twice before going there. As a result I look for places that are similar to Shimla and not Shimla itself.

Oddroad treats it’s destinations just like an e-commerce portal would treat its products. Categorised and ready for consumption, so that one can reduce on the research and guess work and concentrate on the adventure part of it. What’s the fun if you have to read up a lot of pages before you can find a place to go to.

Oddroad’s promoters have collected detailed data for over 1000 destinations within India and their points of interest. Places are tagged by their activities and have detailed weather and other descriptions as well, including what to wear and what not to wear. It’s not perfect as yet. But it will get there. Tight integration with a on ground support structure is coming up to connect the traveler to the last mile, not just the last Airport or Bus Station. Today was Day 1 of the new version and it received an overall warm response. The first month data and analytics will help us shape it further and give it more focus so that the Traveler gets to his destination ASAP. Give it a Spin.