When the backend developer decides to do his own UI design

Terminal

It's not an impossibility but sure is recipe for disaster - that a backend developer should dream of doing his own UI. Under very normal body and wallet conditions a backend developer should hire the services of an interface designer or at worst a graphic designer to build his UI.


To borrow a line from economics, external factors are not always equal and there sure will come the day and hour when the unthinkable  becomes inevitable. You called the UI guy up, gave him your specs and he charged you an arm and your right kidney to get the UI you thought was supposed to be something simple. Or.  The UI guy you paid in full to do the job has gone off to some beach resort with his girl, his phone is off and your client is breathing through your windpipe. You don't want to pay another UI guy. No not for this project and not at this point. The whole world seems to come crashing on you like a Chinese laptop running windows 7 with 128mb of ram. One thing you haven't lost though is yourself and your ability to not disappoint so you take up the dreaded task of UI design. It's not that hard once you know exactly what you should do. Here are some pointers that should help you out.


Step out of the shoes of the developer and into those of your users. There is a maxim in UI design that goes like "Know thy users for they are not you!" Ask yourself the most critical question. "What is my user trying to achieve" NOT "what has my backend code achieved that needs a UI to make it pop". In stepping in your users shoes, there are a lot of shoes that need fitting and you definitely need to satisfy almost everyone's dumbness and/or smartness.


Think in color. Most backend boys get stuck in the terminal where they use Vim, pico or nano. At best they use an IDE that throws in a few colors and some nice panel arrangements. Well the world of designing requires much more inspiration than that and teaching you how to color mix and match will be as hard as teaching you how to wear the right kind of clothes. If you think you are able to mix your clothes right when you dress then this website should make it easy for you to match colors. If your color combinations suck when you dress, I'm afraid you really need to wait for that UI guy to come back from the beach resort. You don't just pick colors because they look nice or are your favorites. There is motive behind color choices. The theme of your app will greatly decide what color options you have.

Aligning elements

Alignments: line things up nicely. You need to apply common sense here. Ensure your elements have a logical flow to them both vertically and horizontally. From the 'aligning elements' picture on your right, see how everything (categories, add your profile button, footer links, (c) 2012, twitter button) in the categories column are nicely right aligned. The same is with the headings 'Categories' and 'All Dev'. Their tops are aligned to be at the same level. The search box and 'All developers' also start on the same line. There is logic to the alignments and you need to enforce this using - common sense.


Space things evenly. Spacing is the cousin of alignments and again this also employs your common sense. Going back to our 'aligning elements' picture, see the space between 'categories', 'all developers', 'all dev' and the 'search box'. They are equal. The 'add your profile' button performs an action that's linked to what category of developer one is but it's not a category in itself hence greater space between it and the category list. The footer links, copyright and twitter button are all footer stuff and so have been shoved all the way down with a much wider space. The spaces to the right and left of the dotted line that divides 'categories' and 'all dev' are even.


Choose the right fonts. Here you don't have the luxury of using as many fonts as your document editor gives you but I guess you already knew that. Courier is also not an option unless you are writing a web version of xterm.  Verdana, Tahoma and Arial look nicer when used small, say at 10 to 11px. Verdana and Georgia when big look nice so are great for headings. One of the first things I do in my CSS files is to kill all padding and margin on these elements (p, div, h1-h6, span, label, form) and define CSS styles for them as and when I need them. I mostly limit myself to these fonts because I know they are by default available on Macs, Windows and Linux machines.


Simplify your lingo. You need to very much let your app communicate and let the user know what's happening whenever they need to wait. A backend developer can easily be swayed into writing very technical error and instructional messages on the screen. Google and Twitter do very well in presenting their messages in everyday language. When you empty your inbox Gmail gives you a message like "No new emails! See what people are talking about on Google+". Instead of saying "Your router is refusing to give our app a public IP" just say "You are offline". Instead of saying "You have not added any purchased items to your shopping cart" just say "Your cart is empty". I'm sure you get where I am going with this.


Simplify the design. I know you prefer to complicate things because you believe it shows your genius. Thats ok in life but not in design. Think more of how you can take things out of the design you have in mind. I remember the very first html page I built. Every possible html tag was on that page because I was so excited I had learnt all these new stuff. You may be tempted to do same with some new cool photoshop tricks you have acquired as a backend guy. Please overcome that temptation and keep things simple and clean. The less clutter you have on your pages, the easier it is to convey your apps intent.


Be consistent. This ties in with the above point on design simplicity. Don't mix element styles on different pages. Make sure your buttons, headings, labels, etc are the same style on all pages except where they REALLY need to be different (mostly only on the home page).