Forms. Often found at the bottom of pages, they are neglected and are left to e-rot. These form fields are deprived from much needed love from their designer, and understandably so, primarily due to their stubborn, rigid and rectangular design. In turn, we witness a conflicting square-circle relationship between the form field and the body content. More often or not, forms don’t need to be spruced with fancy CSS magic, but require just a little re-composition.

Negative space is our adversary. Negative space created around the fields and the layout of a badly designed form can be unsettling, disrupting the flow from the body-content, onto the fields.

Probably the most horrible part of Jen Gordon’s site is her comments form. Although there is an attempt to combat negativity, negative-space fights back and lashes Jen in the head. And stomach.

Stuff.co.nz epitomizes ‘bad form composition’ - Bad position of input fields which appear to be centred, text in-front of the input boxes prevents all 4 fields from nicely aligning, and a textarea which falls short of the width of the page. My eyes hurt.

We’re getting there - things are starting to look good now, however there is still something unsettling about this form from Wake Up Later. One of the flaws of this design is that the text field lengths are inconsistent. The verification image and code should’ve been the same size to convey conformity and the email field should’ve been adjusted to match the length of the first 3 fields.

Even Jesse Bennett-Chamberlain of 31Three found himself in an acid pit…

Getting it right

Design is very rarely born of nothing. It is common to source inspiration for your ideas to spur. Even ol’ Pablo (Picasso) once said,

Good artists copy, great artists steal.

Creating a column for field descriptions is another way of doing things, however if descriptions vary drastically in length, then things could get ugly. Brilliant form design by Sidney, with Equi-length form fields.

The default Wordpress theme Kubrick also appeals. Very elegant looking despite the strange amount of left and right padding on the content divider.

Sara takes a simple approach, obeying the law of simplicity - K.I.S.S.. The void of space is filled with a colloquial-styled filler-image and to top it off, content-congestion is out of the question.

A large coloured rectangular divider can give an illusion of conformity and is commonly used to portray a sense of ‘together-ness’, shown here at Simple Bits.

Pixelage has a different approach, some-what interlocking. Seems unnatural looking to me.

Simplicity strikes back at nclud. Mmm, the yummy goodness of simplicity.

Form design is difficult, and I have yet to witness a perfect design. But with a little bit of inspiration and avoiding the do-nots, getting something looking ‘right’ isn’t too far-fetched.