Design Details are Worth the Effort

As author Dan Cederholm says in his book Handcrafted CSS, "there’s a real connection between craftsmanship and web design." Its the small touches that make a site—even a simple form page—a stand out. When there's a tight deadline, it's easy to let a design slip by without the little flourishes. But it's worth the extra effort, if possible, to create a visually pleasing, interactive site. Here are some examples:

Laura Schoppa, Senior Designer
#Design | Posted

As author Dan Cederholm says in his book Handcrafted CSS, "there’s a real connection between craftsmanship and web design." Its the small touches that make a site—even a simple form page—a stand out. When there's a tight deadline, it's easy to let a design slip by without the little flourishes. But it's worth the extra effort, if possible, to create a visually pleasing, interactive site. Here are some examples:

Create subtle shadows on menus, buttons and other elements

Adding shadows to drop-down menus and other elements adds depth and richness to an otherwise flat interface. A good example are the drop-down menus on Vancouver2010.com.

Shadowed edges help define the page layout on OpenCongress.org.

White shadows on a dark font (against a light gray background) give text a crisp, indented appearance. On NetTuTs+ it's done with text-shadow.

Create rollover states for interactive elements

There's a small amount of satisfaction that comes from effecting change on a website. I can attest to getting a miniscule thrill when my mouse makes some subtle change happen. As a former design colleague put it once, "it makes me happy." Most commonly, designers create rollover states for navigation. One can take this further as these other sites have done:

Form fields on the login form on Tumblr.com change color on interaction.

Buttons within the page on the White House Gallery have subtle differences on rollover.

Changes to images when linked content is effected on Clearleft's Who We Are page.

Any of these techniques can be over done. Design details should be added judiciously, or they will start to overwhelm the content. Obviously, the aim is to enhance, not distract.

Laura Schoppa

Senior Designer