Tuesday, July 30, 2013

How to make an Ugly App


Being away from my wife for more than a month doing admin works again, this time in Port Moresby, I have time to play with my form's appearances during the night.  With her besides me, of course I cannot do that as that will mean war!  LOL!  And honestly, I should not do that as well because there should be a fine line between being a developer/designer and a loving husband.

Anyway, being alone here on my room at night and not still into coding mood these days, I work instead on finding out how to make my forms look better by creating what I hope are stunning but not too comical forms.  So I play with mixing colors, creating some effects for my forms' appearances, plus some new tricks on some menu/button effects for further eye candies. While this post won't and can't help anyone on coding matters, I hope this will at least give you ideas on how to make your forms uglier.... err... prettier.   Here are some pointers:

a.  Use Photoshop.  This is the best tool I have known so far where I can design stunning effects to serve as form's background.  Play with layers, Layer Styles, Filters, Opacity and Fill.

b.  Transparent Pageframes.  Well I shared this before here but if this is ignored, I cannot blame them.  The sample I gave there is very simple and does not leave much to imagination.  But take a look at the effect when used in my real forms.



c. Color combinations - choose colors that won't fight with each other.  Play with shadings, make others darker while others lighter.

d.  Contain - try to contain objects so the section in the forms are properly defined within a glance. Have you  noticed the New Entries with glass effect?

e.  Don't leave huge gaps.  The form below has only several objects because it is my practice to use objects that are only needed.  I want things to be very easy for my users to speed up as well their coding time.  However, because of that, sometimes the problem I have is on "how" to make the form appealing to look at which is very hard with just few objects.  Either I will make the form very small or I will attempt to make it bigger so it won't look just like a popup.  When I do make it bigger though, having only few objects, that will leave huge gaps or spaces on portion of the form.  And that do not appeal to me because it feels empty.  To counter things like that, we can try to put useful infos on those huge empty spaces like in one of the images below, a comparative grid and last issuance date and qty.

f.  Use nice icons and images.  This one is a no-brainer, but when choosing images to act as icons or additional popup indicators, try to choose something that works in harmony with the rest.

Caveat:

While using pretty backgrounds like this makes your forms look stunning, one thing that it will prohibit you is form resizing because if you do, you'll end up with any of these two:

1.  If you used directly the image as form's background, you will then have a tiled background
2.  If you used instead an image object sent to back and is stretched with Anchor, then you will end up with a pixilated background.

Here are some of the forms I modified these past few nights:




One thing you will maybe notice here, there is no uniformity of design yet.  That is because I am still playing with different tricks (see buttons) and colors to see which one is better.  So which one do you think, among the three is the ugliest?

No comments:

Post a Comment