Four Rules For Good Web Design

Rule 1: Symmetry is bad- the more visually interesting and complex layouts are usually asymmetrical. Five examples of well designed sites that feature asymmetrical layouts include:

1.  This site uses asymmetry in that there is a long block of images more towards the center containing the artists’ work, balanced out with a small navigation bar on the upper left hand of the page. This style is maintained when you click on individual photos as well, with the display of one large photo towards the right and a longer list of links on the left.

2.  With most of the type resting on the left side of the page and the amount of information, the white space on the right allows the viewer’s eye to rest.

3. I like the design and simplicity of this site, however I think that it could be much more dynamic if the layout was asymmetrical rather than having everything evenly placed within the center.

4. This website has a similar design as the previous one, with a more symmetrical layout of the thumbnails of work, which is made asymmetrical with the inclusion of the left bar of links as well as the artists’ logo in the upper left hand corner. The page shown when you click on an individual work of art is also asymmetrical in that it shows a large image with a small block of type explaining the piece aligned with the left edge. This allows the image to be the main focus on the page.

5.  The layout when you enter the site features large images towards the center that are examples of her designs, and a small set of navigational links towards the left which allow the photos to be the main focus and show viewers her capabilities immediately upon entering.

Rule 2: White space is good; it offers relief for the eye and allows viewers to focus on the content. Five examples of well designed sites with good use of white space include:

1.   This designer has chosen not to use any color within the background of the site as well as in the navigation bar on the left, which allows the bright colors within her work to be the main focus, and keeps them from clashing with others in the design.

2.  The work by this designer is mostly collages, and by having all whitespace around the images it keeps the design from being to busy, and allows the viewer’s eye relief.

3. The use of a white background in this site allows the colors in the images to really pop, especially when viewed at a larger scale.

4.  The large block of images in the center of the page contains very bold colors and is balanced out well by all of the surrounding white space.

5.   The artists’ illustrations are very soft and use more muted tones which I think is complimented nicely by the use of a simple white background

Rule 3: Less is more; the content must be organized into a clear and concise architecture. Five examples of web sites with well organized content include:

1.  I like the fact that this site only has a few links at the top of the page, that don’t take the viewer’s focus from his artwork displayed in the center. Also, the use of a limited color palette works nicely within this design.


3.   This site features a very simple display of navigational links, which works well with a large image being the background of the page. I also like how when you hover over a link, it interacts with a corresponding element within the photograph. The decision to keep the only color on the page as what is displayed in the photos, while the rest of the type is white allows the design to keep from becoming too busy.

4.   I really enjoy the limited use of color within this design; the white background and light gray text allow the page to be very clean. This also allows for the images of the designer’s work to really come forward, for they are the only source of color and therefore not competing to be the focus.

5.   This designer balances out his decision to use large images with a very small point size of text within his links on the left, and no color throughout the page except in that of his work.

Rule 4: Contrast is Key; there are several types to look for when designing a page, including contrast of visual elements, size, color, shape, texture and direction. Five examples of well designed sites which incorporate contrast into their pages include:

1.  There is a nice contrast between the size of the large photos on the page, and the small type used in the navigation links, as well as between the white background and the dark tones within his illustrations.

2.  I like the contrast of the bright colors within their work and the white background, as well as the two different styles of type used for their name and the links. The use of different scales of thumbnails on the home page is also visually interesting.

3.  Within this site I like the contrast between the one large image and the several smaller thumbnails below it, as well as between the grayscale background and the bright colors within the images. There is also a nice contrast in direction, because at the top the links and large image are read horizontally, while the smaller images and text below are lead you vertically down the page.

4.  In this design, I like the contrast between the colors within the large image and the way the thumbnails are displayed in black and white, as well as the contrast in size of the images.

5.  I like the contrast between the small point size of the type used on the left side of the page, with the large scale images that appear once you click on an icon. Also, I think the contrast between the simple white background of her site and the bright colors within her work is very visually interesting.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: