Week 8 web design critique: CDC.gov

Design features of CDC
The website of the Centers for Disease Control is designed to convey a minimum of emotion and a maximum emphasis on objective factual information. The screen grab above from February 27, 2007 is a simple layout.

Four column grid
The top of the page is a small horizontal band of black with white lettering covering site information, such as an about, an A-Z site index, and contact information, all flush left. The next horizontal band is much larger, and is the page title, "Centers for Disease Control" in large typeface, the name of the federal department deemphasized in smaller type, with a search box and a link to a Spanish version of the page. This section of the page is entirely white letters on blue background.
Below the top, the page design is four-column, a smaller column on the left (about 1/4 of the page width) entirely text based in the English-language version, with sub heads and multiple nested links. The left column is entirely blue letters on a tan background but with different levels of contrast -- the subheaders distinguished by a darker value of the background hue. The left column runs from top to bottom between the page header and footer information.


On the right are three smaller columns, each headed by a photograph. The links below the pictures are the same font as the page title above, but this time blue letters on a white background. Below this, the right 75% of the page becomes a centered 50% of links with a short description a smaller point type, the right 25% (balancing the left column) consists of a photo, news feeds, and schedules. The left column requires little scrolling, ending just below the monitor image, while the right side of the page disappears half a screen below the monitor bottom.
The very bottom of the page is a horizontal bar, again identifying the sponsoring agency, with blue type on a light blue background. The cross platform Usa.gov logo appears at the bottom in red, white and blue, copying the common themed logo of all US Government web pages.

The CDC website is designed to convey a minimum of emotion and a maximum of information. CDC is a scientific agency, devoted to study and dissemination of information. The page is very informative. There is little white space, though the left flush convention of each column of the page does leave some space on the right side of each column. There is little clutter, noise, or busy sections of the page. The page is organized as a grid, there is little freeform. The right 75% of the page does have significant information below the bottom of the initial viewing area, requiring scrolling.

Colors

CDC.gov uses blue as its primary color. Red and blue arrows appear as section markers, and blue background with white letters are also a design element. The red, white, and blue motif that anchors the page conveys the colors of the federal government and gives the page an official US government aura.

Photos

There is minimal use of photographs, four in all. Three are used to define information section, a picture of the globe effectively leading off a section on pandemic flu. The fourth picture is a stock photo of CDC headquarters, appearing at the lower right but above any scrolling area.

Analysis
The page layout draws the reader to the center with the three pictures. There is little flow to the page, however. It is highly text-based. The common use of color spreads the reader across the entire page. Larger typefaces point the reader to different page elements. The repetition of blue as eiher the background color or the color of the words keep the reader moving. The use of columns pushes the reader from top to bottom. With the heavy use of links, I would expect the reader to leave the page quickly when a point of interest is reached. The typical CDC user would be looking for information, not entertainment. I picked 12 random links from the page, 11 took me to a page with a similar top header, with a link back to the main page, similar structure, and similar color usage. The CDC website is clearly designed to convey a common theme and structure, keeping the reader informed and comfortable staying on the site.

Interpretation
I have little emotional response to the site. It is very quiet, not designed to excite the user. It is strictly factual, as befits a governmental science website. The themes amplify the reliability image and solidify the credibility of the site. The site should interest both the scientist and the lay person looking for information. The page is very serious and non judgmental.

Evaluation
CDC has solid design, consistent layout throughout, and is neither cluttered nor busy. The site uses CRAP well, the four basic principles of design from Robin Williams "The Non-designers Design Book", being Contrast, Repetition, Alignment, and Proximity.
CONTRAST - the site uses blue and white in different ways, sometimes white on blue, sometimes blue on white.
REPETITION - text links are well organized on the page -- blocks of link are set off from each other with headers with a darker value of the tan hue, with red arrows pointing to the right
ALIGNMENT - the design is clean. The pictures are aligned carefully, as column headers. The page is divided into four columns, anchored by a left column from top to bottom, three columns near the top right, and a fourth column down the right below the pictures. Both the top and bottom of the page are anchored with horizontal elements.
PROXIMITY - Text links are kept together on the left column. News and events are anchored on the right. Pictures are kept together in the center to anchor the right three columns. Links at the top and bottom of the page show information about the site itself and the sponsoring agency.

CDC is successful in its mission with solid layout and design. Other health information sites have different foci. WebMD is very busy, with a greater emphasis on graphics, images, slideshows. WebMD makes use of many more hues and color values, with no unifying theme. WebMD is designed to entertain and also take readers to its ad links (CDC has no advertising). The Mayo Clinic website is poorly laid out, with significant white space, no unifying color themes, and a hodgepodge of typefaces.

CDC en espanol.

The CDC.gov site in Spanish is discussed separately.

Colors for Historic Preservation

Benjamin Moore's paint chips scanned in above celebrate their historic preservation series, dozens of mixes designed to replicate specific paints from historic buildings -- kittery point green, van alen green, sherwood green, yorktowne green, tarrytown green, and lafayette green all harken back. Scanning in CMYK- based process colors allow them to be represented on an RGB computer monitor (though perhaps not with the same hue, saturation, and value). RGB files, however, can not be used to print process colors (Design Basics Index, p. 213)

Colors as Food

Orange juice, sharp cheddar and tangelo. Three foods. Three Benjamin Moore paint chips. Would these be choices for a kitchen wall? Who thinks up the names on the thousands of paint chips you can take from the hardware store and examine what they look in the different light in your house? It is important to understand that colors can appear different based on the light source they are viewed under.
Do the paint colors really remind you of the food they are named for?

The Color Mob: A joke, right?

Karen Strum's article: EXPLAINING COLOR TRENDS
COLOR MOB'S INFLUENCE ON MARTHA STEWART AND THE PASTEL COLORED PORSCHES (archived at imaginationstreet.com 2/2/2002, no link available) tells us:

"CMG, Color Marketing Group, is a diverse group of designers from every corner of the world representing a broad span of industries including everything from automotives to fashion. They meet several times a year at designated locations, stay in luxurious hotels, and determine in private meetings which colors will be fashionable in the up-coming years. An artist not associated with the 'color mob' is left guessing at what will be the next season's set of trendy colors."

This is a joke, right?

Week 5 Branding: Benetton: Cultural Relation

While the culture may be worldwide, it is still a niche, those willing to step out of the mainstream to buy from the cutting edge marketing of Benetton, forever defined by advertising images like the black woman breastfeeing the white baby, part of the infamous 1991 marketing campaign. Benetton was not advertising for sale the red sweater.

Benetton's images are multi-cultural. Even in its annual report, Benetton highlights consumers of all nationalities, such as the multi-cultural female above, with purple hair streaks to match the purple Benetton turtleneck. Benetton's marketers assume that the socially conscious need clothes to match their streaked hair, Rebel With Clothes.

Benetton has reinforced its brand with cutting edge images of social action, ecology, and race relations, clearly designed to target a world wide audience with leftwing sympathies. Benetton's corporate website says "Benetton is present in 120 countries around the world with a strong italian character whose style, quality and passion are clearly seen in its brands: the casual United Colors of Benetton, fashion oriented Sisley and the leisurewear and streetwear brands Playlife and Killer Loop ... Benetton has a long history of attention to ethical values and involvement in social and cultural initiatives. Perhaps the most visible are our institutional campaigns, touching social themes of wide international significance and often in cooperation with renown international organisations."

Benetton buyers surely see Benetton as a lovemark.

Week 5 Branding: Benetton: Message Audience

Benetton's message audience is both world-wide and limited, designed to appeal to those interested in social justice and environmental issues. While this may be niche marketing, those in that niche are highly motivated, and having demonstrated attachment to a strong political and social cause able to transfer that loyalty to a brand in toudh with the buyer's ideology.

Benetton says in its 2003 Annual Report that its business model is based on three factors: brand awareness, a symbol of Italian temperment and Italian effort, giving the products added value in style and quality of life; innnovation; and quality of product, offering extra in identity, innovation, and attention to detail.

Benetton's corporate website says "Benetton is present in 120 countries around the world with a strong italian character whose style, quality and passion are clearly seen in its brands: the casual United Colors of Benetton, fashion oriented Sisley and the leisurewear and streetwear brands Playlife and Killer Loop ... Creating added value for the brand: this is the aim of United Colors of Benetton corporate communication. It contributes to creating the image of a global enterprise that invests in research, is modern and projected towards the future, emphasising its principal and most important characteristic: uniqueness ... Benetton has a long history of attention to ethical values and involvement in social and cultural initiatives. Perhaps the most visible are our institutional campaigns, touching social themes of wide international significance and often in cooperation with renown international organisations. Our social commitment, in fact, goes beyond these campaigns, with initiatives of both international and local impact. "

Week 5 Branding: Benetton: Image/Metaphor

left: credit: Ko(char*)hook's photostream

Benetton social issue ad

I have chosen Benetton as my brand.

Benetton image is both multicultural and Italian at the same time, seemingly inconsistent. Benetton products are a metaphor for wearing chic clothing while at the same time rejecting capitalist consumerism. Through Benetton's long standing (former) advertising campaign of speaking out on social issues like AIDS, or using photos of a black woman breastfeeding a white baby, with no mention of the product being sold (other than "United Colours of Benetton"), Benetton has been a metaphor for pursing social justice while still looking good.

Week 4 culturally laden signage: Lady Liberty

America's entrance sign is the Statute of Liberty (left). Located in New York Harbor for over a century, it is a beacon to immigrants and (other than Tiger Woods) America's most recognizable symbol. It is a symbol, the New Colossus of the Western Hemisphere, with Emma Lazarus' poem of that same name

illustrating the many metaphors much better than I: "Not like the brazen giant of Greek fame ...Here at our sea-washed, sunset gates shall stand
A mighty woman with a torch, whose flame
... From her beacon-hand
Glows world-wide welcome ... cries she
With silent lips. "Give me your tired, your poor,
Your huddled masses ... I lift my lamp beside the golden door!"

Of course, being America, it has been appropriated as a sign and symbol for commercial purposes (right) by the New York New York Hotel and Casino in Las Vegas, where tired and weary gamblers and sinners are also welcomed by Lady Liberty (1/3 scale).

image source of Statue of Liberty: http://www.cr.nps.gov/worldheritage/images/Statue_05a.jpg

image source for NYNY Hotel in Las Vegas: Flickr Creative Commons http://flickr.com/photos/martinrp/334489122/ photo by .Martin

Week 4 Metaphor: You've failed

The red x inside a square is a symbol, a metaphor for failure on the internet. The user has tried to post an image, but the link is dead or the upload failed. The "x" is well understood as meaning "no". It is symbolic because it bears no relation to the nonexistent image. It is soundly designed because it can not be mistaken for what it is not. It is successful at communication because it has either been seen or happened to all of us, and inserts itself at a place on a webpage where an image is expected. Except, of course, on this post.

week 4 A sign that does not work: Adult Swim panic

Designed to promote the Turner cartoon Network "Adult Swim" program, hundreds of one-foot tall signs placed in major cities across the United States in the last three weeks caused panic in Boston on January 31,2007, unprecedented since the 1930's Orson Welles' produced "War of the Worlds". The illuminated signs, illustrating the Mooninite characters from the popular Cartoon Network program and resembling crude 1980s era computer graphics, the devices, with their protruding wires, were mistaken as bombs and shut down the city. By combining different images (a cartoon character recognizable to a small segment of culturati and wiring that appeared to many to be a bomb) the designers created a sign mistaken as a terrorist threat.
Or did the signs, perhaps, work exactly as the designers had hoped? One could not have bought as much national publicity for the show.

week 4 signage: public usage

This public usage signage (taken from the South Plainfield New Jersey recycling website) clearly conveys how to dispose of tangible objects, place them in a trashcan. The user is clearly a human, taking the act of placing a tangible object in a trashcan. A human will know that the force of gravity will cause the object to drop into the can. The objects are simplified from the actual, blurring design elements, racial differences, and sex. The sign is clearly inconic, all three items are easy to interpret because they resemble the thing they represent.