Polish that Turd: Web Design Rules-of-Thumb for Developers
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.
box-sizing: border-boxon your columns and
display: inline-blockon 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.
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
- 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
- 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-shadowwill make the text appear above the button, a light shadow gives the appearance of inset text.
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
- 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)
Follow Dan’s maxim, “If it still looks bad, add more whitespace.”