Design Tips For Developers

Professionals in both fields seem to have realized of late that it helps for designers to have an understanding of web development, and for developers to know about good design practices. And yet, this awareness doesn't often get carried very far in practice. It feels so much safer to stay within your sphere of comfort, where arcane design terms don’t get tossed around with bewildering frequency. But a lot of headaches and misunderstandings can be evaded by understanding just a few of the basic principles that underlie good design.

1. Space

The hallowed concept that designers call white space (otherwise known as negative space) is one of the most essential components of web design. It’s the margins, the padding, the letter spacing and line height within text; it’s every part of the site that isn't filled with some eye-catching object (meaning that patterns and images can sometimes be a part of white space, as long as they recede from focus, rather than grab at it).

For example, this blog has plenty of white space, although you might at first think that the patterns on the top and sides don’t count. But they do, because they’re low-contrast and restful to look at. That’s the point of white space; it rests the eye, creating pauses in content intake that stops users from getting overwhelmed by an excess of information. Notice how all the sections in the sidebar take up so much space to say very little; this makes the text more readable and sections more distinguishable. All these spaces are what makes this site feel so clean, well-organized, and welcoming.

Tips on White Space:

• Make sure blocks of text are always broken up with shorter paragraphs, lists, or images.
• Soft textures, patterns, and images can be used as white space, but don’t overdo them. Too many conflicting elements become confusing, no matter how low-contrast they are.

2. Contrast

There are a lot of ways to achieve contrast in design, but at least a few of them must be employed to make a website look good. There’s contrast in color; people unconsciously respond to this whenever they see a brightly-colored button against a neutral background. There are also ways to use contrasting sizes and shapes. In all its forms, contrast is used to call out important sections, and add a sense of movement and interest to elements that would look static and plain if they were too similar.

This website uses all three types of contrast mentioned above: the bright, flat blocks of color pop out against the light, textured background. The organic shape of the logo on the left contrasts with the rest of the type, which are all blocky and architectural. Furthermore, the title typeface stands out because it’s so much larger than the others.

Tips on Contrast:

• Refer to common color rules, using a color wheel to determine which hues look most striking when put together.
• Typefaces don’t always need to be very different in scale and in shape, but at least one of these contrasts will always help a design.

3. Balance

The last major concept to conquer is one that deals with the arrangement of the page. If a layout is too lopsided, it won’t look right. On the other hand, if it’s completely centered, it risks looking stale and boring. Balance is struck when the visual weight on one side of a page is countered by elements on the other side.

For example, you might at first identify this site as being off-balance because the banner and the logo are both on the left-hand side. However, the visual weight they give to that side of the page are met on the other side with the navigation bar and a striking photo.

Tips on Balance:

• Half close your eyes when you check a page for its balance. The elemental block shapes will be easier to identify, and distracting details will be less apparent.
• Balance doesn't mean exactly equal. A large block of orange on one side of a page can be balanced by an orange button on the other side.
• Check out some infographic design tips to get a better sense of balance; layout is one of the most important considerations in this field.

Developers shouldn't feel like they need to get an arts degree to have a working understanding that gives designers a leg up with their work. All it takes is a general understanding to be able to cooperate in creating great web design. An understanding of these few principles will add immeasurably to your interaction with designers, and the visual aspects any project.