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

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.”

A Practical Guide to Web App Success

Whether you’ve already started to build a web app, or you’re just starting to think about it, A Practical Guide to Web App Success tells you everything you need to know. Over the course of 25 densely-packed chapters, the book guides you through the lean web development process to help you plan, design, build and market a profitable web app quickly and inexpensively.

Check out the chapter listing and buy in digital or paperback.