Web Design Success Story

by Kimberly Elam — Aug 27, 2007

Composition in web design is similar to good composition in print design. It is a process organizing and communicating in a way that is both functional and aesthetically pleasing. Web design is often even more complex because of the processes of navigation and multitude of variables in user interaction. Order and unity become vital communication ideals.

SamataMason.com

SamataMason WebsiteSamataMason Website

Many of the attributes of good web design can be found on the web site of the well-known Chicago design firm, SamataMason. The introductory screen is simple and well organized. The elements of text blocks and image float on a gray background and can be readily brought up on either a small or large monitor without having to scroll left/right or top/bottom.

Hierarchy

Hierarchy & CompositionHierarchy & Composition

The site has essentially a four tiered hierarchy that is emphasized by size and direction. The image, a horizontal rectangle, is the most important element and the top level of importance is emphasized by the large scale. The second level, a vertical rectangle, is a list of category choices. The third level, a horizontal rectangle, is a brief paragraph of descriptive information. Subordinate information including the heads, company name, and rating control complete the page.

Composition

Visual Analysis DiagramVisual Analysis Diagram

The scale of the major visual elements of image and text blocks are pleasing. The text blocks of the heads, menu, and company name align and give a sense of order. The menu block overlaps the image on a transparent field that literally overlaps and attaches itself to the image and provides unity. The eye moves fluidly from the image to the menu to the description that is tucked in the negative space. This triangular movement feels comfortable, keeps the user focused on the center of the page, and enhances the cohesive feel of the page.

Brevity

The simplicity of design makes the web site inviting from the start. Although there is a lot of information the user is met with an engaging organizational structure. Choices are clear and to the point, and the minimal descriptive text is well written. Long blocks of text sometimes turn-off the viewer because of the length, and are often ignored. Short blocks are much more enticing and in the case of SamataMason delightful to read.

Cropped Images

It is interesting that in all cases the images are not typical studio shots of a complete printed spread or an object but rather a tightly cropped detail of a larger image. The result is an intriguing composition that incites curiosity. Because of resolution constraints it is often difficult to show an entire image effectively. This system allows the viewer to appreciate the details of the design and get the gist of the project.

Visual Analysis

Submenu Choices, (right)Submenu Choices, (right)

The visual analysis diagram breaks the elements on the web page down into simple defined areas. The largest visual element is the image area, shown in light red, as a horizontal rectangle. This image area is systemized on each web page and becomes a standard visual element for each page. Even though the image changes on each page the size and placement of the does not. This yields a sense of continuity and rhythm to the site even as the information changes.

Text information occupies four positions on the web page. The top two blocks are short headlines. The long vertical text block is a menu with a series of choices that link to other text pages. The large horizontal text block is a short descriptive paragraph of informative copy. The company name occupies the bottom text block and aligns with a plus sign in brackets that when clicked invites the viewer to “rate the page.”

Rating & Feedback

Rating & Feedback, (lower right)Rating & Feedback, (lower right)

The page rating invitation gives the viewer an opportunity to provide direct feedback to SamataMason about the effectiveness of their web presence. The viewer can quickly rate the page and if desired can click the “comments” category, which opens another window, to provide written feedback and rate the page as to content, design, usability, and overall. Clearly, the firm cares about the web usability of the site and is interested in the opinion of the user.

Subsequent web pages become only slightly more complex with the addition of another block of text to the right of the description. This block lists a series choices within the category and serves to show the firm’s range of capabilities. The viewer is readily engaged in the information because the choices are so clear that he/she knows immediately how to access information. There is no time lost figuring out how to navigate or return to a previous selection.

Grid System

Grid AlignmentGrid Alignment

Just as the image and text block proportions change from large to medium to small, so too does the grid. The system is a three column arrangement in three widths. The largest width is reserved for paragraphs of descriptive copy. The medium width contains the main menu choices, and the narrowest width is used when needed for additional submenu selections. If no submenu is used the description column occupies the entire width of the two right side columns.

Summary

The intent of the site is to inform the viewer of the capabilities and philosophy of the firm. It does so admirably and in the process persuades the user that SamataMason is experienced, organized, capable, and highly caring. How can you use these principals in your designs to create the same impact? Thoughtful design takes time and thought, but as you can see SamataMason spent both well and created something we can all learn from.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float