Wednesday, October 22, 2008

Picturing Texts on the Web

A website that I think has an outstanding design is www.perich.com. Perich is an advertising and graphic design firm based in Ann Arbor. The opening page of the website uses words and pictures in a very unique way. As you move your mouse over the images, words pop up that describe what can be accessed by clicking on the picture. The site is very interactive and requires some interesting navigation. Some of the images seem a little random compared to the content, but this only adds to the viewer’s curiosity about the site, and encourages us to explore the entire site. The images cannot stand alone without the words that are revealed when the mouse is moved over the pictures.

The background picture of a building and the icons within it has a mostly symmetrical balance, and from that building other images and text project from various places when links are clicked by the mouse. Even the top of the building is balanced by a small billboard sign for Perich on the left corner, and a set of three light bulbs that contain a link called “interactive”, on the right. With the home page of the site, there is equal weight on both sides of the background. Certain elements of the page move, which draws our eyes attention and creates emphasis. By using animated objects and different colors, the designer has created patterns that move our eyes around the page. The page includes metaphors, such as a moving brain in one window of the background building that says “adverthinking” when the mouse moves over it. Also, clouds move in another window that says “our belief system” when the mouse moves over it. This implies some form of metaphysical belief, such as Heaven. One other example of symbolism is the picture of an old rotary dial telephone representing the link for contacting the company.

The whimsical character of the Perish brand is reflected in the design of their website. There is also a very surreal point of view, with a neutral negative space surrounding the detailed building. There is little depth to the site because the foreground does not separate from the background, except for the animated objects that move beyond the window frames at the top levels of the building. There is a horizon line, which provides a unique perspective because we can see the entire building, and can see into the levels below ground.

The most important information is classified in the windows at the top of the building, while supporting information is presented below, in an ordered, symmetric layout of icons. The site uses neutral colors in the frame of the building and the background, to contrast with the variety of color images that contain links to other parts of the site. Patterns are used to guide the viewer to specific areas of the page, and relay different types of information. The most important element of design applied to the site is repetition, which gives the page strong unity. While the links seem to be represented by random objects, the repetition of icons of the same size and color palette add to the unifying structure. Also, the repetition of the windows and shutters unify the image. There is a simple grid design to the layout of the page, which makes the site appealing and easy to use. I thought this page demonstrated a creative use of the elements and principles of design, which add drama to the information that the company wants to present. With their website, Perich shows why they have earned many design awards and contracts. Even though the pictures don't always make sense to the viewer, the page is visually stimulating and after clicking on a link they may be able to draw a better connection between the content and the icon image.

No comments: