Web Creativity for Code Geeks

As brilliant as most computer programmers and web developers are, their seems to be something associated with the rational coding mindset which prevents them from creating truly attractive interfaces for the web. Is it that they just don’t care about design? Or maybe they can’t be bothered to think about such trivialities. In any case, I’ve seen many web applications where the UI was created by the same guy writing the back-end code, and it is almost never a pretty site (pun intended). Of course there are some exceptions, like the brilliant Shaun Inman, who’s coding skills are equally matched by his design sense (as clearly exemplified in his web application Mint).   Alas, not everyone can be Shaun Inman, so in this post I will attempt to give some observations on the objective left brain mindset and how it influences design negatively. This article will hopefully help you channel that geeky energy into something truly usable and attractive, design is important!

Just Breath, Whitespace Matters

Probably the single biggest problem I see with programmer-generated design is lack of whitespace. Programmers are used to staring at dense pages of small colorized text in their code editors, and their minds are attuned to this dense block of information. It is easy for them to mentally parse these layouts in their heads. I find that their website / application interfaces usually reflect this through densely packed layouts with little visual separation. Of course, this page looks absolutely readable to the programmer who created it because they are used to it. The programmer is usually focused on packing as much content as possible into a small space. Attention programmers: The average users lacks the magical insight to parse your dense layouts!

Adding some whitespace to your UI will go a long way to increase the readability and attractiveness of your page. Take a deep breath and try some of the following tips to help your design breath easy.

• Use margins liberally. Blocks of text should always have a gutter of whitespace separating them from any surrounding elements.
• Don’t be afraid to use the CSS property line-height on your paragraphs. Adding a little bit of space between lines of text is a great way to make your content easier on the eyes.
• Don’t try to fill up every single piece of empty space on your site. The natural tendency is to use any unfilled real estate on your page for another piece of content/ad/picture. Don’t be afraid to let white space remain unoccupied
• Remember that balance is the key. Whitespace can often look awkward if it doesn’t have a symmetrical pair somewhere else on the screen to balance the flow of information
• Don’t try to cram everything on one page. If your site is simple and content sparse, one page is absolutely appropriate. However, if you have a lot of stuff on your site, make sure everything is separated into digestible chunks.

Using whitespace correctly is the key to getting your web page flowing like a cool summer breeze.

Geeks are Color Blind

Probably the hardest design concept for a programmer to grasp is the color scheme. Color schemes are not very intuitive for those of us who favor the objective left brain. I often find that I can’t just pick a few colors from a palette and have them successfully harmonize. Luckily, colors are like music, each one is mathematically related to another in a special way. When the ratios are right, the colors harmonize and are pleasing to the eye. There are a plethora of online applications that can assist you in choosing colors for your site. Oh, and stay away from primary colors. They are too bright and hurt the eyes on a bright monitor. The trendy color schemes these days are muted, desaturated color schemes with bold accents. If you are hard pressed to come up with a color scheme on your own, I suggest you pick a color that you like from the palette, and place it into one of the following apps to determine its compliments.

• Color Schemer Online v2
• Color Schemes Generator 2
• Color Schemer Gallery

Using colors is a lot of fun, but try not to get too carried away. Here are a couple of color design tips I’ve picked up along the way.

• Gray’s are neutral, they go great with any other color on the palette
• Use subtle color gradients to help create depth in your design
• Don’t use too many colors. Pick 3 - 5 colors for your entire site and stick with them.
• Contrast is key. Make sure your text color has enough contrast against its background color or it will be hard to see, especially on older CRT monitors.

Typographically Deficient

Fact: Geeks love small text. Again, this probably has something to do with taking in as much information as possible with their massively over-sized brains. The average user has a hard time reading small text, and if you have your text size defined in pixels, there is no way to resize the text using Internet Explorer. Typography is one of the easiest things you can change on your website to positively effect your design. There are a few basic things you can follow that will make a world of difference in your user interfaces.

• Bump it up a notch. Don’t be afraid to increase the base size of your text to increase readability. You will also find that if your content takes up more space, you will be less likely to inject noisy design elements to “make it look complete”.
• Use hierarchy to determine font sizes: Headings should almost always be larger than the accompanying content. With text size, you can convey hierarchy and importance using some simple CSS rules. Larger = More Important. This helps readers scan your content to find sections they want to read.
• For the love of god, use an attractive font. The number of fonts you can choose for your web page is constrained by the default font set available on most operating systems. This set is generally agreed to be Tahoma, Trebuchet MS, Verdana, Georgia, Lucida Sans, Times New Roman, Arial and Helvetica. However, do yourself a favor and use something like Lucida or Verdana instead of Times New Roman (I’m looking at you Scoble). The emergence of sIFR also gives you much more flexibility in choosing typography for headers if you so choose to.
• Don’t be afraid to get creative with type. CSS gives us a plethora of styling rules to change the look of plain old web text. Letter spacing, line height, font weight, and text variations are all controllable through some simple style sheet rules.

Just Because You Can, Doesn’t Mean You Should

I’ve struggled with this problem myself many times. Often when designing a website or application you get the itch to learn something new, use the latest AJAX components, or throw in some Flash gobbledygook. Programmers love toys and gadgets, and the temptation to use every shiny new web component in your design is often irresistible. I urge you to resist this temptation and keep these extraneous elements out of your designs. Simplicity is key here. As humans use your interface, these extraneous components which once provided a short-lived “wow factor” will quickly get in the way and become an annoyance. Focus on the core information you want to present, make it as easy as possible to access and manipulate that content, and the extra components can be brought in as needed. Just because you can put the weather, or the time, or a Javascript background color fader (anyone remember these?) on your site, doesn’t mean you should. If I wanted to see the weather I would go to weather.com.

Geeks are Still Cool

Geeks are brilliant, insightful, and logical. Being a good designer does not exclude these traits. There is a misconception that good design comes from some magical creative, emotional place in the heart of the designer. While this may be true in some cases, creativity can be born from a logical, iterative, and emotionally detached place as well. This is the place where most coding geeks find themselves coming from, and if you make some smart choices along the way, you can use brilliant design to transform the beautiful code you created into a memorable user experience.