Building my first iPad app - looking around for inspiration

In my last blog post on building my Tumblr client, I have stated what would be part of the first release of this application. Now it is time to search the App Store for great applications with similar objectives and see how they are visually presented.

One of the web service that I like is Dribbble, a web service for graphic designers to let them present their work. You can find amazing stuff made by great designers there. I really like the visual look of this web site which is very clean. There is one iPad app made for browsing the content on Dribbble which I like: Dribbblr. the design of this Dribbble client is inspired by the web site design. 
Dribbblr is something I like to use myself. The design of this application is very inspiring me for my Tumblr client. Basically, this is a very standard iPad application using a toolbar at the top of the screen, the rest is for the content. This kind of application is easier to create than a customized split view like the Twitter client.

Here are a few things that I like in this Dribbblr client:
  • Content is king, controls are few;
  • White borders around each pictures (would prefer to see rounded corners though);
  • Nice background (white borders around pictures could also allow a darker background which I think I would prefer);
  • The page navigation at the bottom is also very nice (except for the colour of the handle which comes from the Dribbble visual signature);
But, I feel the pictures layout is not really what I like most from this application. This week, I came across a new application called Mixel. After playing a few minutes with it, I found many things that I would like to re-use in my own application for Tumblr.
In Mixel, the density of content is higher, three times more pictures are displayed compared to Dribbblr application. They both uses shadows from elevated pictures corners to add some depth. Mixel presents pictures with rounded corners albeit with very small radius. Under each pictures you'll find the author, comments counter, like counter, favourite counter and the date. Browsing in this view is done by sliding the finger from the bottom to the top.

The other very interesting view  is the single picture view shown next. It is presented when the users is taping on a single picture.
This single and centred picture view with previous and next partially shown pictures is very interesting to me. First, browsing is done horizontally and the users get a visual cue of what will be the next picture and what was the previous one. Next, pictures are bigger and actions can be done on them by tapping one of the icon at the bottom. This could be pretty much the same layout principle that I could use for my Tumblr client. But, for the 1.0 release, comments at the bottom wouldn't make it as I see that less relevant for picture browsing.

Another design cue that I could take from Mixel comes from the use of the Share button at the bottom right of the icon row. Pressing this button makes the picture flip in order to reveal social networks where the picture can be shared to others.
This view could be done differently though. Why not just dim the picture and present the controls over? If the picture is dimmed very low and the controls very dark with a little white surrounding this could be a nice way of acting on the picture which would be in line with one of my design principle for this application: make the content the centre of the user experience. The user could still see the picture while executing actions on the them.

The other thing about Mixel is the use of space in the layout. There is large and unused space surrounding pictures. I would increase the picture size for better content presentation.

Together, Dribbblr and Mixel applications seems to embody visual design principles that could be the basis for my own Tumblr client. In my next blog post on this subject, I'll try to come up with a design myself. 

0 comments:

Post a Comment