Web Design by Designers

In: Articles

By Kimberly Elam

Published on August 26, 2008

Designers are, as a rule, a fussy bunch, and when it comes to their own business communications they’re even more so. Designing a website for an award-winning design firm verges on the impossible. A design firm’s web presence primarily serves as a tool to attract new business from a global community—and, secondarily, as a means to show off. Designers are by far their own worst critics, and their websites have to tread a fine line between being cutting-edge so as to attract young new business, and more traditional so as to appeal to established or more conservative businesses.

First principals

Many of the most successful and well-known design firms are led by designers who cut their teeth on publication design. They understand the principles of good design and bring that understanding to their web presence. Although many firms will outsource the design of their site, it is guaranteed that the principals in the firm will actively art direct the project, and insist on good typography and design.

An analysis of design firms’ websites can provide an education in a number of the best practices of visual organization for the web, and reveal the tenets of good content structure and typography.

More than any other design principles, hierarchy and structure play key roles in design. Hierarchy is the ranking of text and image elements in order of importance. Hierarchical order enables the designer to position and emphasize the most important elements or features clearly and obviously, the second most important less obviously, and so on. Once content is organized and ordered via hierarchy, the next series of decisions involve the structure of information. In both print and web design the most commonly used structure is a grid. A grid is a system of vertical and horizontal divisions that organize and create relationships between elements. Grid system arrangements are usually formal and are intended to create visual order and efficiency in production. Grids are frequently used in publication design and web design as they guide information hierarchies and promote visual rhythm and consistency among multiple pages or screens.

MetaDesign

The first site we’ll look at is MetaDesign, a very large, highly respected and established firm with offices in Berlin and the US. Their name literally means “Design for Design”, and the firm lives up to the promise with an awesome list of clients. As one of the largest design firms in the world, one might be forgiven for expecting a splashy website with all the bells and whistles that can be produced with Flash. Nothing could be further from the truth.

Restraint and austere colors are hallmarks of MetaDesign.

The site is simple to the point of being austere. One of the most refreshing aspects of the site is the written content, which is distilled into a few sentences that address key topics. The writing is clear and shown at a large scale that invites engagement, even from the most rushed user. The clarity is outstanding and the nonverbal message is truthful sincerity.

All text is distilled into a few sentences for each topic.

All pages have a white background with black and gray text, with color reserved for images of the firm’s work. This serves to make the page crisp and by contrast the color images appear all the more lush. Generous white space surrounds all of the page elements giving each word, line, rule, or image a sense of intended placement and importance.

Client work thumbnails speak to the wide range of projects accomplished.

The selected work section of the site is just that—selected, not every project ever done by the firm, which would overwhelm the user with thousands of images. They have chosen thirty-one projects to showcase, and each has a single image described with just a few key words and a single sentence. This is highly restrained from a site that could have easily become too complex with multiple images of major projects. The broad range of clients is clear from the small thumbnail image and client name. Web projects, interior projects, identity projects, and packaging are all represented, and communicate the range of work accomplished.

The site structure is a simple two column grid with the right column subdivided into thirds. All elements have alignment relationships along the column grid lines.

The structure of the site is as restrained as the use of color and imagery. It is a simple two-column grid in a proportion of roughly 2:1. The smaller right-hand column is subdivided into thirds for the client thumbnail images. All text and images align to the columns, creating a strong sense of order. Black horizontal rules at the top of the page emphasize the grid structure, and the standing categories of text at both the top and bottom of the page are separated from the images by thin gray rules. Every element has a position and intentional placement.

Many designers are successful in grid design when working with columns, but very few carry the grid to a higher level of refinement by working with the horizontal divisions of a grid. The MetaDesign grid is carefully crafted with alignment of text and image elements both vertically and horizontally. Rules align at the top and bottom of the page and frame the column structure. The top and bottom of the large images align with the top and bottom of the thumbnail images. The use of horizontal alignment underscores the intentional design of the site and creates an interrelated and harmonious composition. All elements have a purpose, and their placement is purposeful as well.

All elements of rules, text, and images have strong horizontal alignment. This alignment contributes to a sense of compositional cohesiveness of all elements.

The MetaDesign site is highly sophisticated and direct. The quality of their work is apparent in all aspects of the site design, from the succinct language to the tantalizing images. The user is never lost in the site and is constantly impressed with the range of clients and quality of work. Prospective clients can’t help but feel that their new project is in good hands with this firm.

Duffy & Partners

A web site that is very different and yet equally well versed in the principles of design, as well as the quality of work, is the site for Duffy & Partners.

Users are welcomed to the site with a lush range of portfolio thumbnails.

On visiting the site the viewer is not met with the predictable welcome page and list of choices—instead, Duffy & Partners cut to the chase and welcome the viewer with sixteen large thumbnails of beautiful portfolio work that selectively change. This system visually articulates the wide range of projects and clients. The effect is colorful and rich. Mouse over the thumbnails and the name of the client pops up inside a frame that highlights the thumbnail. Click on the thumbnail for a page that features a quote by the client and a paragraph on the project. The text information is as lush as the imagery. The credibility of the firm is underscored by the client quote in all caps, and the paragraph description speaks to the role that Duffy & Partners played in the project.

Images and text are organized into four sections: 1. Name of client and thumbnails, 2. Client quote, 3. Quote attribution, 4. Descriptive text, and 5. Project components.

This is a lot of text information and could be overwhelming, but the system is so well designed that it works effectively. The page is divided horizontally into four sections. The top section contains the row of thumbnails and the name of the client. Just beneath the thumbnails, the client quote—in all caps with bold orange quote marks—can’t be missed; its importance is underscored by the orange accent color. Next is the name of the person being quoted and their title, lending credibility to the statement. A paragraph of text describes the project and is visually highlighted by a short lead in statement in bold caps. This description helps the user understand the range of the project and the role that Duffy & Partners played. Finally, a horizontal list of deliverables completes the page.

Full screen images invite the user to examine the quality of design.

When one of the thumbnails is clicked the effect is startling. The images scale from micro to macro, with a beautiful full-screen image that allows the user to see the quality of the work in great detail. It’s refreshing to see such large-scale complete images after being teased by the thumbnails.

A similar text system is employed for the categories of Our Mission, Brand Language, Leadership, and Capabilities. The system works very well to communicate the firm’s commitment to excellence. Again, the text is limited and a quote helps to engage the user.

Two video presentations enable users to hear from Joe Duffy and othets about the design process and give insight into how the firm works.

A capstone of the site are two videos that clearly explain the Duffy design process and provide insight into the principals and client reaction to the firm. The videos are short and answer a myriad of questions for potential clients. There’s an opportunity to see the studio, designers discussing work and preparing presentation boards, designers interacting with clients, and clients describing what working with Duffy was like and how rewarding the process has been. The professionalism of the office comes through loud and clear, as does the commitment to excellence.

Summary

For both MetaDesign and Duffy & Partners, there is a clear understanding that good design is good business and that the web site must synthesize the qualities that have made the firms successful. Their approaches are very different, yet each is highly successful. Both firms have carefully worked with text and typography to distill ideas down to their essence. The sites speak clearly about their approach to design in ways that engage the user, whether it be limiting each project to one image, leaving the user hungry for more, or showcasing work with a range of lush images that speak to quality and the client experience.

Related Topics: Web Guru, Web Design, Interaction Design, Information Design, Graphic Design, Critique