• 1. IdentityIt is still a rarity to see a site, particularly a news site, without it’s identifying logo at the top of the page. There is no exception with Wired. One unusual feature about the logo position: they move it to accomodate the Sponsor Units. This is both an unobtrusive method of ad placement and a clever use of real estate.
• Web design notes: White space is always useful to provide distinction among dissimilar Units. The uninitiated might have a bit of confusion with the Identity and Sponsor Cases being intertwined. For instance, the updated Wired home page displays a Sprint ad. A user might think Sprint is the actual site they’re visiting or that Wired is a Sprint subsidiary. It is not utterly critical to the experience, but such confusion should always be avoided.
• 2. ImpactThe folks at Wired have created a hierarchy of news Units that correspond to the level of importance they’ve placed on these stories: lead at the top, then three sub-levels of news Units. How do we know that? It’s not only the spatial arrangement of these items, but their headlines and images. As you move down the page, the headlines decrease in size, allowing you to scan and categorize the news units: feature or lead stories, secondary features, tabbed items (latest blog posts), etc. You’ve got four levels of news units, and it’s yours to decide how far you’d like to browse through them. Negotiating this page from top to bottom becomes a pleasant exercise in scannability.
• One of the nice features further down the page is the “prologue” for the tabbed items. Though the headlines are helpful clues to a story a prologue supplements the more obscure headlines.
• Web design notes: Though the large headlines for the lead stories jump from the Web page, is it necessary to dedicate such space to them? The largest ones are 2.8em. It would be understandable if this were an accessibilty issue, but a smaller size would suffice. No text decoration is needed for the headlines – a user will know that simple standalone phrases will likely be a link – a mouseover will take care of any amibiguity.
• The Georgia serif font is a familiar remnant from print days and are just as readable in this context. Many news sites have begun to use serif fonts in their redesigns.
• 3. Navigation The first Navigation Case is cleverly and distinctly placed. It dissects the Impact Case with a bold contrasting color, giving a nod to the lead stories while still making it easily located by the user. The top level categories give credence to the implied user task and gives transparency to the site’s information architecture.
• The second Navigation Case at the bottom of the page, could also be considered a Courtesy Case, simply by its locale and redundancy of some of the links in the first Navigation Case. But there are some very helpful links connected to common user tasks on the site. These might be considered secondary, to the first Navigation Case, but giving them top-level navigation (rather than within a dropdown menu) flags them as important items.
• 4. SearchWired adds a helpful dropdown that enables the user to search via section. This gives the user a level of omniscience regarding the site contents. Helping to filter the contents also gives the user control and eliminates the feeling that you’re just stumbling into a big pile of irrelevant search results.
• 5. FeatureThe Feature Case is a “Visit Our Sister Sites” promotion of sites within the Conde Nast conglomerate. It doesn’t really serve the user as much as it serves the business and, therefore, identifies it as a Feature.
• 6. SupplementalThese discrete Units entitle the reader to a peek at upcoming news or current interesting events as a supplement to the Impact Case. Because of their standalone placement, they are given emphasis with the other competing page elements. The subtle but eye-catching border also helps.
• 7. SponsorOnly one area has been dedicated to a Sponsor Case, integrated with the Identity Case. It appears custom-made to fit in with the logo, allowing the design of the site to reign over a what could have been blaring banner ad. The Web user if often sacrificed for commerce (as we know so well in daily life), but this is a subtle integration that still has an effect and draws attention.
• 8. AdminThere are two Admin Cases on this page. The first is the ubiquitous copyright, user agreement and privacy policy. A site that doesn’t have this info easily seen is, of course, likely to not be covering those bases. But those that do give the user pause about any type of plagiaristic intent or other nefarious intentions.
• The second is located to the right, below the Supplement. Or is this Admin a Feature Case? This was a tough call because the subscription links (already offered in two other areas of the page) are business-driven, but there are Admin elements also offered, such as RSS Feeds and FAQ’s. So we’ll leave it as so. If the Quick Links hadn’t been there, we’d call this a Feature Case.

• 1. IdentityTypically the company logo is the primary, or only, unit within the Identity Case, as we see here. Sometimes you will see a tagline and/or a photo. Google has such name recognition, though, those additional units are extraneous. Even the Supra-Elements (i.e., the page title and browser title) simply offer “Google”.
• Web design notes: a few people might consider drop shadows on logos somewhat of a relic nowadays, leftover from an earlier era. Not that drop shadows aren’t still used in many thoughtful ways, but it really doesn’t lend any mystique to the logo. Might we see a new rendering of it one day soon? Who cares as long as we find what we’re looking for. Right?
• 2. ImpactWhat does this page want the visitor to do? Search! The Units within, a textbox and two buttons “Google Search” and “I’m Feeling Lucky,” are all you’ll ever need to get by on this site. Simple.
• The only question here: doesn’t the “I’m Feeling Lucky” text for the right button seem a bit esoteric? I’ve rarely used it and I wonder what is the ratio of users to the “Google Search” button. Once you’ve used it, you get it. But it requires an extra step for the user to understand its purpose.
• 3. NavigationThese Navigation Cases are two dissimilar units separated not only by space, but objective. The left is a filter for finding more specific Google-hosted content; the right for personalized Google pages. A fine use of navigation: grouping links by their use case.
• 4. SearchSearch isn’t a standalone Unit, because the Impact of the page is centered on a search action.
• 5. FeatureThe Feature Case in Google’s example is, again, about as simple as it can get. It is company-centered, more so than user-centered, as the linked pages are geared toward Google’s commerce. Though there are certainly users who desire access to the pages, this case isn’t necessarily helpful to the critical component of the page, the Impact Case.
• The only item of note is the “About Google” link. “About” links are generally of a Courtesy or Supplemental nature. In this instance its placed with the Feature Units. If you visit the landing page for that link, its clear why its place there: it’s quite a promotional page for Google.
• 6. SupplementalThe three links to the right of the search box are there for a singular purpose: to enhance the search process. A Supplemental Case is normally used to either supplement the Impact Case or a component of the user experience of the site. For instance, a “News and Events” Supplemental Case doesn’t always help along the Impact Case of a page, but it’s a nudge to the user that the site’s owners are thinking of them and what they might want to see that’s new or interesting.
• Web design notes: Google uses the default blue link color consistently throughout its site. It tends to change a bit in the deeper search pages, but, due to the simplicity of the home page, it’s not necessary to use much styling on disparate links. Their division by purpose and space is enough to distinguish them. The same goes with the Supplemental Case: though the font’s a bit smaller, they merely need to have proximity to the search box for the user to understand their purpose.
• 7. SponsorThere is no Sponsor Case on this page.
• 8. AdminThere are two Admin Cases here, both very typical. The top right one offers user login and settings. The bottom: ©2007 Google. Nothing unusual. In fact, most usual.
• Web design notes: The smaller, lighter colored font gives it understated emphasis.

I chose to analyze the Google Web site because of its simplistic design, as well as its very recognizable interface. Although this isn’t the best execution of the Style Cases because of the lack of content, they can be easily inferred from the page.

I’d offer only a couple of suggestions in style changes:

The “About Us” link could perhaps be in a discrete Courtesy Case, but that’s fairly minor. The “I’m Feeling Lucky” button text is hazy in meaning (and, therefore, in purpose?) Otherwise, this Web page is a solid example of how to infer Style Elements effectively.

And don’t worry, we’re going to have plenty of examples where a Web page doesn’t align with the Style Elements, and we’ll decide if that is good or bad. All of these case studies will be to prove or disprove that every Web site is the same and that we all use these Elements, understood or not.