Polish that Turd: Web Design Rules-of-Thumb for Developers

June 12, 2012

1. Grid

Align all elements to a grid. Use a framework like 960.gs if you want, but you may find that the gutters between columns are too narrow or your page elements don’t fit neatly into the pre-defined grid. It doesn’t take much effort to set up your own self-consistent set of widths in CSS. You may find it easier if you:

  • Use a CSS Reset declaration to more easily set up predictable spacing, especially if forms or lists are involved.
  • Use a Clearfix hack on rows to avoid weird floating anomalies.
  • Use box-sizing: border-box on your columns and display: inline-block on horizontal list items (e.g. menus) to make padding and margin adjustments easier. Remove any whitespace between inline-block elements to get the best results.

We created our own grid for Subpug

 

2. Color Palette

Choose a color palette and stick to it. You probably don’t need more than three colors, along with black and white.

  • Don’t be afraid to use shades of your main palette colors. Once you have your main palette in RGB format, it’s easy to create shades with different opacities in rgba() CSS declarations.
  • Limit the amount of gaudy fully-saturated colors in your palette. Even black and white should be a little desaturated; think #111 or #222 instead of #000, and #FDFDFD rather than #FFF.

3. Typography Hierarchy

Create a typography hierarchy and stick to it. Font size is the most obvious way to visualize the different priorities of text, but you can also use font weight, color and family.

  • One font family is the easiest to get right; use two if you need the additional flexibility in your hierarchy. In general, combinations of font families should be dissimilar, such as a serif and a sans-serif, though of similar proportions.
  • If you’re going to stick with a single font-family, you’ll get the most flexibility from a family with lots of weights to choose from. Helvetica Neue is great on a Mac; for consistency across all platforms, try Proxima Nova from Typekit or Open Sans from Google web fonts.

 4. Line Height

Set your line heights. It’s surprising how a small change to line height can make a block of text feel more professionally designed.

  • Make sure that you know the difference between a line height of 1.2 and 1.2em.
  • Try a line-height of around 1.4 to 1.5 for nicely readable paragraphs of text, and 1.1 to 1.2 for tighter headlines.
  • If possible, keep a common multiple between your line heights to set a vertical rhythm. For example, a paragraph of 12px with 1.5 / 18px line height could be paired with a heading of 24px and 1.125 / 27px line height, both of which fit onto a base vertical grid of 9px.

5. Light Source

Define an invisible light source and apply its effects consistently. Most designs assume a dim ambient light source at some distance beyond the top of the page, but you could try different directions or even a brighter point of light directly “over” the page (i.e. from the user’s direction). The effects of the light source are:

  • Solid blocks of color should be replaced with subtle gradients. If the light source is at a large enough distance from the top, a linear gradient should run vertically with a lighter top. Unless your virtual bulb is extremely bright, keep the gradients subdued, though big blocks of color will need a large enough gradient to prevent banding. If the light source is hovering over the page or is close to an edge, it should produce a radial gradient.
  • Interface objects that have depth, such as buttons and hovering elements, will cast a shadow. For most subtle light sources, keep the shadows no more than a few pixels in offset and blur distance, e.g. box-shadow: 0px 2px 2px rgba(0,0,0,0.1), and don’t use pure black for the shadow color.
  • Text that appears on a button or other interface element surface should be given depth, with a 1 pixel drop shadow. A dark text-shadow will make the text appear above the button, a light shadow gives the appearance of inset text.

We use a consistent top-down light source in Subpug

 

6. Realism

Add subtle realism to the interface details.

  • Square pointy corners are sharp and painful, so most real objects tend to have slightly rounded corners – take the same approach to your UI elements with border-radius.
  • Real-world objects tend not to instantaneously disappear, but instead fold, fade or slide away. Add transitions like -webkit-transition: all 0.4s (and other browser equivalent properties) to elements that move, resize or disappear.
  • Materials are rarely perfectly smooth, so add a subtle amount of noise to your interface. You’ll have to apply noise with an image, but you can create a single tile-able noise PNG with alpha transparency and apply it to elements of different colors via multiple backgrounds, e.g. background: url('noise.png'), -webkit-gradient(linear, left top, left bottom, #E7ECF1, #D1D9E0)

 

In this upcoming app, we use a non-standard, subtle border-radius (border-radius: 2px 2px 20% 2px / 60px 2px 2px 60px) combined with an inset shadow for an asymmetrical paper effect.

 

7. Whitespace

Follow Dan’s maxim, “If it still looks bad, add more whitespace.”

 

One Response to “ Polish that Turd: Web Design Rules-of-Thumb for Developers ”

  1. Tobias on June 12, 2012 at 8:39 pm

    Nice suggestions.

    I think that, in my experience though, using a grid system is unnecessary, and in fact can be more awkward to use than just writing ONLY what you need from scratch. If you don’t need a grid, don’t use it.

    Also, on a similar note, lets face it, using RGB color values sucks. If you don’t need alpha transparency for that element, good old hex is just fine.

Leave a Reply