It was not so easy to locate outstanding examples of the five specific design elements and four design principles. I had difficulty finding exemplary use of white space, alignment, and asymmetrical balance. But there were plenty of good examples to choose from of line or shape, color, grid, photography, and symmetrical balance.
Line or Shape
cabedge.com
Among several good examples of the use of shape, Cabedge.com stood out. The curvy shape is unusual, especially on the web where rectangles predominate. The shape, the distinctive colors, and the navigation are used throughout the site. Except for the navigation and footer, all content is located within the orange shape. The site uses Flash very nicely to display a Flash designer’s portfolio.
White Space
nike.com/nikegoddess
The image at right is from within the “Nike Goddess” sub-site, which is designed to sell shoes and other garments to sports-oriented women. Ample white space is used here, which adds to the relaxed, pleasant feeling of the layout and understated color-scheme. (I can’t provide a direct link to this “page” because the whole sub-site is done in Flash, which makes linking and bookmarking impossible once you get beyond the opening page.)
Color and Value
lacountyarts.co.la.ca.us
I love the way the L.A. County Arts Commission site uses squares of different colors, creating an interesting overall shape as well. This is an attractive and very functional site map, which provides an overview of and navigation to the entire site. The same colors are used throughout the site, providing “identities” for each area.
Grid
style.com
Style magazine uses a grid very strongly and effectively. As can be seen from the design of the home page (at right), the site is beautifully layed out by talented professional designers. Wow! This is probably the most impressive overall design I came across. The use of emphasis and photography are also outstanding, but I think the strong use of an underlying grid is what really makes the design so good. The grid is carried through even to details like the blue dot at the top (in Style.com), which is placed on the vertical gridline at the right edge of the three photos below.
Photography or Illustration
japanesestreets.com
When you first see this site, the photo on the home page is in your face, looking back at you. It’s fitting for the site, which is focused on providing photos of the latest Japanese street fashion.
Symmetrical Balance
ballgame.org
This is an excellent Flash-based site about the first known team sport in history, a ball game that began over 3,500 years ago in Mesoamerica.
Asymmetrical Balance
csszengarden.com: Burning (design 43)
The painting in the top-right of the page balances the text in the lower-left. This design is nicely balanced, and there is actually symmetry to it diagonally, but neither horizontally nor vertically.
Emphasis
pbs.org/wgbh/nova/elegant
This design from PBS-TV’s Nova series uses emphasis very well to establish a clear visual hierarchy. White space and grid add to the clarity of the layout.
Alignment
si.edu
On the Smithsonian Institution’s home page, the elements are very well aligned. The design is also a very strong example of a grid, and uses color nicely. This is an outstanding design that packs a lot into the space, but uses a very detailed grid to align the elements effectively, making the quantity of the content seem less overwhelming.
