Saturday, November 15, 2014

Why I couldn't do what an UXD proposed me to do in my android app

Don’t shoot a programmer, He draws as he can..

Things to keep in mind with UI Assets.. 

Scale and Size of Image and Icons. For every icon/image that we would use strictly follow android UI guidelines so we need 5 size for icons with 2:3:4:6:8 scaling ratio. This means the baseline (MDPI) asset is 48x48 px, and the high-density(HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.

So we must create icons/image with above scalling. The easiest thing for a developer to use  link.
Howto’s : If we have the highest density and scaled image we can easily create assets with the above link for Luncher/Action bar/Notification/Generic Icons. This tool will create all necessary set of icons for all device size. Note : Create an  image/icon with highest density/scale with GIMP or adobe illustartor first then use them as the input for the above tools.
Some Take away :

Splash Screen  – I couldn’t implement it cause the screen-shot that the UXD gave me was not covering the phone width, it was little ugly when I tried to stretch and I didn’t have screen shot for the Icons that I had created with a replacement for the icons shared by him, for the helper views too. So skipped for this release (I liked the proposal, if not today some day I will incorporate with the app)

SearchWidget – I am using the default android search widget in which the search_icon comes in the left side I tried a lot, did some search but could not make it possible to keep it in right side. (I could have achieved with my customized search widget which would take me few days to build !, Why ? if I make my customized control again that should follow android UI specifications which would need me to create controls for every device size, everycolor, 9 patch image, icons- which would be cost me around a week of time, its lack of time that forced me to keep it still hidden and pops up from a menu click).

Location Icons – Customized location Icons again has to be for different device density. And the location icon given to me was eye catchy though I had to use the default map icons. Icons were left anchored but my requirement was for centered gravity.

Theme with the app color : It took me a few days to find out the best theme color that suit my app. I did a lot of experiement with themes. There are still some controls, for which its hard to create theme specific controls e.g android switch !  So I am still living with the default android theme controls.

Refer : The links that I refer while creating my icons for my app / webpages.

Geo-Pulse list icons – Again the asset that he shared was awesome but I couldn’t generate icons using link. We must generate all icons with the android studio as it ensures that we have the right size and scaled icons. But remember any given icon by a designer should be with the highest size i.e  192px/192px (if not minm should be atlest 96px / 96px) so that you can create smaller and bigger icons wihtout loosing the quality. The most important thing is any icon given by a designer should be transparent in nature without which you cant create icon for different devices using the above links. So I had to create my own icons with cliparts that collected from web which are holo and tranparent and matched the UXD’s proposals.

Luncher Icon :Luncher icon should be created from a 512px / 512px Image without which you will loose the quality again  for different devices. Just a small note, all the assets name should be in small letters and underscores (no hiphens) .

This is just for book keeping of all that I did for ZPulse which might help for an enthusiastic android programmer and ease him for beautification for his/her app.

No comments:

Post a Comment