Implementing a visual design for the web

Introduction

The proper implementation of a visual design or user interface is the product of trained eyes.

However, there is no innate talent that designers have that allows them to see things that others cannot -- any brain can learn to detect the nuances of visual detail, or notice the subtleties of interaction, whether it's a button that's placed 1px too far to the right or a link that has no hover.

The following is an ever-expanding list of tips to help you implement visual designs and interfaces more accurately, and make sure that all our user experiences are delightful.

Tools

Ruler apps: On Mac, Xscope is robust http://xscopeapp.com measurement tool and Free Ruler is a simple, free ruler-only solution: http://www.macupdate.com/app/mac/7197/free-ruler/

On Windows, try something like http://ruler.codeplex.com/

Tracing plugins allow you to layer a design/mockup over your HTML page and turn it on/off. This makes implementing a design a literal process of tracing -- now you can put all the art in your code :)

Chrome plugin for tracing: https://chrome.google.com/webstore/detail/dkaagdgjmgdmbnecmcefdhjekcoceebi

Firefox plugin for tracing: http://pixelperfectplugin.com/

Alignment & Structure

Look for a visual structure in all designs -- if it's not immediately clear, see what happens when you take a ruler and scan the page with it -- the ruler's hard edges might make the alignment of certain elements that may seem totally unrelated become clear -- you might experience an "ah hah, the button at the top aligns with the other button on the bottom" moment.

Typography

Getting familiar with typography basics will empower you to make small decisions on your own: http://www.typeworkshop.com/index.php?id1=type-basics

Interaction & UX

All links should have an a:hover and an a:active state. Period. The goal is to illustrate the user that there is a something that can happen if they click, and that if they click, something did happen (a:active). The exact colors and styling of the hover and active states are less important than their usage -- always use each.