in

ASP.NET Weblogs

Austin Avrashow

July 2009 - Posts

  • Design principle: Shared features show a bunch of items belong together

    A previous post explained symmetry and asymmetry, the yin and yang of effective design (different, but inseparable).

    Symmetry helps the viewer group items into a "box" (category).  Asymmetry provides a touch of visual interest.

    Take a look at a screen capture of a web page with several images.

    web page with 5 images

    Each image was originally completely different, but a few things tie them together as a single group:

    The center image is different in its orientation, but it has the same dimensions as the other images, just turned on its side.

    The boy in the straw hat was a black-and-white photo scaled down and cropped to the same size and dimensions as the others, but it looked out of place.  It drew the viewer's attention to itself as the only image without color.  (Interesting.  When everything is colorful, something black-and-white stands out.)

    I tinted the grass green and the sky blue, giving it a look similar to hand-painted photographs from the early 1900s.

    Then to tie the images together as a whole, I placed the center image so its horizon line was even with the baseline of the top-left and top-right images.  The center image is not exactly vertically spaced between the top and bottom images, but this gives the group a slight asymmetrical visual tension.

    Another unifying feature is the same color is used as the background for the HTML body of the web page and as the background for the Silverlight application.  You don't have to stick with the default white background that Blend or Visual Studio give you on a new Silverlight project.

    Note how the arms and legs of the center image point directly to the other 4 images. This unifies the group as a set of interrelated images. I didn't plan it.  It just turned out that way.

    To see the full web page and hear the songs (Silverlight required), visit http://www.avrashow.net/music/Default.html

More Posts