Before&After: Lessons From a Beautiful Site
The design of this website uses a dozen visual techniques allow its many parts to coexist effortlessly.
Two dark bands—one green, one tan—form a simple, substantial header that leads the site; logo and links are reversed in white. To soften the look, a faint gradient yields an understated illusion of radiant light. This 12-page article from issue 47 of Before&After Magazine takes apart the design of this website [2008] to show you how it handles complexity beautifully.

Beautiful typography is the signature element of the site. Scholarly Caslon type in classic, old-style caps and small caps (big circle, below) conveys literacy and tradition; compact line spacing (small circle) keeps minor information from floating away. The two lines of small type are the same size but spaced differently; the more-important words are in panorama.

© John McWade/Before&After Magazine, courtesy of Gaye Anne McWade.
Commenting is easier and faster when you're logged in!
Recommended for you
Before&After Design Tip: Using Many Photos? Display Them in a Grid!
A beautifully simple way to display a group of photos
Before&After: How to Set a Text-Only Logotype
The key to a great logotype is to find a typeface that makes the name look good...
Before&After Design Tip: Use a Ghosted Logo to Make a Great Notepad
This small notepad shows off your logo and lets your reader interact with it slo...
