Good looks go a long way in getting downloads for your apps. I'm a fan of looking out for beautiful app designs. I've looked at so many apps, gotten so much inspiration, but have yet to achieve anything that I can be proud of.
Blame genetics if you must. I am a developer, and although I play the guitar and love music and beautiful art and images (even tried photography once), I suck in the design area. I can give an idea, a design, but cant execute it. I'm a coder damnit!
But, I'm not planning to just sit and let it be. I am pretty sure, just like how I picked up the guitar playing, I can train myself to make better user experiences via good looking apps.
This post will show you how your app can be transformed from the ugly looking thing below (it's a personal taste really) to a more presentable looking app further below.
|The simple basic look|
|With an image background (image from sxc.hu)|
|With a tiled background|
Check the following links out. They are a wealth of resource for your design inspiration. Imitate them if you need to.
40 dribbble shots...
What MOST of these apps have in common is that they have a textured background. A textured background is one where the activity or panel or button have an image or pattern on, instead of a colour or gradient.
What to search for
So, you're all ready to add that background in eh? Where do you get these type of backgrounds? I've been spending a lot of time trying to find similar backgrounds, and only recently I found out what I was actually looking for (before that I was listening to U2's Still Havent Found What I'm Looking For! << check it out)...
You need to google for "subtle backgrounds" or "subtle patterns" (check this one out: http://subtlepatterns.com/ ). You could also get a good wallpaper from sxc.hu too if you're not looking for tiled background. Use GIMP to edit and resize the images for your needs as some of the images on sxc.hu can be pretty big.
Option 1 - An image wallpaper from a file.
This one is too easy for me to cover here. Just set your view's background property to the image, plain and simple. A hint: use images that are not in focus, use blurred images so that your controls/views stand out! (Wow! an advice from an art retard!)
Option 2 - Get the current wallpaper
This is nice to give your apps a look like it is part of the device. This bit uses the live wallpaper library you can get from B4A's forum.
Dim m As LiveWallpaper
Activity.Background = m.Drawable
Option 3 - Tiles
If you're going after the tiled look, let me remind you, that using a single tile image in using the "fill" option on your app's background will most likely not quite look nice. You need to tile the images.
Following is a pretty useful B4A code snippet you can use to draw the tiles. Add it to a code module, and call it for any views (try applying tiled textures to edittext or buttons too) Apologies for the formatting, I'm still finding my way around blog formatting techniques!
Sub drawBG (fname As String, vw As View)
Dim bpbg As Bitmap
Dim bp2 As Bitmap
Dim cvbg As Canvas
Dim rs As Rect
Dim rd As Rect
Dim left As Int
Dim top As Int
left = 0
top = 0
Do While left < vw.Width
rd.left = left
rd.Right = rd.left + bpbg.Width
Do While top < vw.Height
rd.top = top
rd.Bottom = rd.top + bpbg.Height
cvbg.DrawBitmap(bpbg, rs, rd)
top = top + bpbg.Height
left = left + bpbg.Width
top = 0
From what I've noticed, most of the apps that appeal to me have a nice tiled textured background. The background will need to be partnered with matching look and feel that matches the other views too. I'm gonna go study how these apps did that, where the buttons fit in so well with their backgrounds. Once I've learn that bit, you're sure to get a post on it from me.
I'll also be looking at applying typography to apps to beautify them. All this I am actually learning now as I go along with the 2012 theme for Mad Elephant's apps look and feel, and will be applying the lessons learnt to the apps too.
Stick around for the journey... and remember to subscribe to the newsletter!
Cheers and happy tiling!