The Business of Mobile - Make Money with Android, mobile advertising and App Store Optimization

Thursday, January 19, 2012

The quest for a better UX - the backgrounds.

Posted by with 1 comment

The background

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


The effects

Check the following links out. They are a wealth of resource for your design inspiration. Imitate them if you need to.

creattica
iospirations
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.

Implementation

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.

Sample code:

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
bpbg.Initialize(File.DirAssets, fname)
Dim bp2 As Bitmap
bp2.InitializeMutable(vw.Width, vw.Height)
Dim cvbg As Canvas
cvbg.Initialize2(bp2)
Dim rs As Rect
Dim rd As Rect
rs.Initialize(0,0,bpbg.Width,bpbg.Height)
rd.Initialize(0,0,bpbg.Width,bpbg.Height)
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
Loop
left = left + bpbg.Width
top = 0
Loop
vw.SetBackgroundImage(bp2)
End Sub



Finally

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!

-Bill

1 comment:

  1. That's still.... hideous.
    What you should have done is:
    +create a gradient (no photoshop skills required, you're a coder, damnit!)
    -choose a base color (google flat ui colors - a mini page)
    -choose a second color very close to the first
    -apply the said gradient
    +make the inputs big. like way big. flat in style. no drop shadows. flat as fu**
    +don't write login. it's stupid. everyone does that. try "hello, friend!" or "howdy!" or, better yet, create a variable with a big list of greetings (poss. multi-language, with a tiny! note tiny! flag somewhere so you know what language it is). call a random to pick a greeting and boom!
    +it's a touchscreen! + sensor box.
    -shake to login
    -tilt to login
    -tap to login
    -slide left-write to login
    -etc etc etc.

    Best regards, paul.

    ReplyDelete