Welcome!

.NET Authors: Liz McMillan, Peter Silva, Yakov Werde, Matthew Pollicove , Kevin Benedict

Related Topics: .NET, AJAX & REA

.NET: Article

Design for Developers

Interactivity, animations, and AJAX

Grids Aren't Just For Data
A natural way to create a layout is a grid system. Newspaper typesetters have been doing this for years and grids are becoming more and more ubiquitous in interface design. A grid system lets you set up regular lines and maintain consistent spacing with little effort.

There are a number of great tools out there to help you create grids in CSS (I'll highlight a few in the resources section at the end of this article,) but it's easy enough to write your own. The basic idea is to use the browser's ability to apply multiple CSS classes to an element to your advantage. You'll create classes that define rows and columns of different dimensions and then compose them together to form your grid. Some classes can even allow cells to merge.

When in Doubt, Draw It Out
When it comes to laying out a Web page (or any application interface for that matter) nothing really beats the paper wireframe. Now don't get all flustered because you don't have to be an artist to do this. All you need is a good Sharpie and some graph paper. While this exercise may seem superfluous, if you commit to it you'll begin to find it indispensable. Quickly sketching an outline of what you want to do in markup makes you more directed when you get to your IDE, and even lets you dispense with the Visual Studio designer altogether.

Color
Reams of words are written about color theory, and if you ask a designer he will happily chortle on about color for hours. Despite the mixed signals and varied opinions about color, there are a few techniques that can make a design pop with little effort.

Happy Palette
Those of you who are old enough to have started programming on an Apple IIe will remember Bob Ross from PBS. Bob was the simultaneously charismatic and mellow host of a landscape painting show. He often talked about a happy palette, which I took to mean one that's simple, balanced, and appropriate.

Before you even open up your first CSS style sheet of a project, you should determine a color palette. Doing so will help you avoid common color mistakes. There are a few guidelines for creating a good palette:

  • Keep it simple: You need surprisingly few colors to make a design pop. Most schemes you'll see are only five or six base colors with a handful of variants thrown in. Some of the best designs utilize as little as three.
  • Keep it balanced: Meaning that your scheme should range fairly evenly from dark to light. Too many dark colors or too many pastel(ish) colors can make a design seem heavy or washed out. While this rule can be easily broken if you're a master at color schemes, for those of us with an unpracticed eye, balance is key.
  • Contrast is good but clashing is not: Make sure your color choices are contrasting enough to be distinct but not so contrasting that they become unsightly. Lime green and purple are fine for limes and grapes but not good as adjoining blocks on a Web page.

Black and White Are Colors Too (Sort of)
Every now and then I come across a truly inspired design comprised almost (or in some cases completely) of black and white or a derivative gray. Monochrome isn't always appropriate but it can be surprisingly effective in the right context.

One key to monochrome designs is to weight the design to one extreme or the other. Designs with an even mix of black and white tend to look crowded. However, the negative space provided by heavily favoring the darker or lighter tones makes a design breathe a little.

Shameless Reuse
If you get to the point of creating a palette and find yourself completely stumped let me offer you some help. Borrow one. One technique I find really helpful is to take a color scheme from a photo. Choose an image that you really like, open it in your favorite photo editor, and chose five colors ranging from dark to light. Now you've got a palette. While this technique seems simplistic it's pretty effective. I find landscape images to be particularly good for this purpose.

Typography
Because there's a real art to typography, it's one of the more abstruse aspects of design. You'll be tempted to think of typography as a choice of font but it's much more than just this. Good typographic choices can take a drab, imageless design and make it seem so rich and full that it hardly suffers from the lack of images. Despite its complexities here are a few principles to keep in mind.

There's More to Life than Times New Roman
As long as I can remember the default font of Internet Explorer has been Times New Roman. It's a pity it's been so over-used because it's really quite a good typeface. But the years of staring at poorly designed Web pages with great oceans of text in Times New Roman have spoiled it for me. You might be thinking that - other than Arial - your alternatives are limited. But there are a number of other typefaces widely available in browsers today. Table 1 provides a breakdown of a few fonts that you probably don't use but could due to their increasing availability.

Flash to the Rescue?
Sometimes a typeface is particularly desirable and equally unavailable; a classic example is fonts used in corporate branding. Often companies will want certain fonts used in key places on a site or application. This usually means you'll have to create an image of the text in question. The problem with this is that it's difficult to maintain (especially if you have trouble spelling) and it isn't easily accessible to users with visual impairment as screen readers can't read images.

There is an alternative technique that utilizes a small Adobe Flash object to read text in a particular DOM element and render it out in any font desired. This technique is made available by an open source project called sIFR. It works so well that it's hard to find a drawback. It lets you use the typeface in question, enter your text directly in the markup, and screen readers don't use the Flash object so they just read the HTML text.

Of course, if you're constrained in using Flash or just have an aversion, then images are still an option. Just be sure to append an appropriate ALT attribute to your <img> tag.

Font Size, Line Height, and Line Length
The Web is a text medium. Of course, imagery and graphics are a huge part of it these days as well, but text is still the bedrock of communicating on the Web. So with such an emphasis put on text on the Web it should be handled with particular care.

More Stories By JC Grubbs

JC Grubbs is a web software architect, designer, and developer for a wide variety of business and social networking applications. Currently, He is an architect/technical lead at custom software firm, www.geneca.com ,where he contributes to the success of Geneca’s unique Getting Predictable approach to software development. JC has expertise in Microsoft technologies such as the .NET Framework, ASP.NET, ASP.NET AJAX, SQL Server, C#, VB, etc. He is also skilled at web front end development with XHTML, CSS, JavaScript, and a number of JavaScript frameworks, AJAX techniques, Microsoft Silverlight, and web standards.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.