*** From the Archives ***
This article is from September 3, 2002, and is no longer current.
Great Sites: What Makes Sun’s Site Shine Brightly
What makes a Web site successful is the melding of information and presentation. In this occasional series, “Great Sites,” Clay Andres investigates the design side of things — architecture, graphics, color, and flow. This week’s Web site: Sun Microsystems.
As you might expect, Sun Microsystems, the self-proclaimed “leading provider of equipment and services that make the Net work,” has a big Web site. You might also expect that this manufacturer to the planet’s geekiest people would have the typically cluttered site of the computer world, where functionality is compromised in favor of information overload. Not so. Sun has always recognized the significance of good design, both for its products and its marketing, and Sun’s Web site is a fusion of both.
Sun’s home page achieves its clean, uncluttered appearance by dividing the site into three categories: Find It (Products and Services); Use It (Support and Training); and everything else (see figure 1). The result is two major, functionally distinct customer-oriented divisions and a catch-all third division for other information, some of it internal operations. You can’t be more hierarchically simple than this, and the graphic design reflects this simplicity. Two boxes, one canary yellow with purple type, the other fire engine red with reverse white type. A little to the side is a third box in Sun’s corporate purple and branded with Sun’s logo. This is the entirety of the site’s primary navigation. It’s the complex made simple.
Figure 1: Sun Microsystem’s uncluttered home page is divided into three easy to naviaget categories.
The boxed navigation anchors the page and the site hierarchy. In addition, the home page includes a large, single image for the week’s featured story, three smaller featured links, and top and bottom textual navigation for the most basic and persistent links into the site. Essentially, the hierarchy reflects the usability of the product (the site), while the featured non-hierarchical links represent the ever-changing needs of marketing.
Approached from the pragmatic side, the Find It and Use It boxes link to divisional site maps. Here’s where the flood of information and a larger, complex hierarchy become evident. They are laid out in an orderly, easy-to-follow fashion that would not be appropriate for a home page, where image and branding are much more important.
All the graphic identity from the home page is contained within a narrow branding bar across the top of the two divisional navigation pages. The featured items and search field are pushed to a vertical column on the right (see figure 2). The rest is all HTML tables, ASCII text, and CSS style sheets. For instance, within the Products and Services divisional page are two columns titled Browse Products and Browse Services, with a list of sectional links within each subdivision. Each section, indicated by a red arrow, is further subdivided into subsection links and all the text is in Sun-branded purple. It is a straightforward list of links presented in a graphically pleasing, logical fashion.
Figure 2: The home-page graphics carry across the top bar of the divisional navigation pages, which provide easy, logical access to vast amounts of information.
Compulsively Ordered
As befits the mind of the programmer, it is all very orderly, perhaps compulsively so. But there is also plenty of room for free association. Every page has links to related information and a Browse Solutions link that gives the marketing department a chance to channel those free associations in directions that emphasize integrated Sun strategies for its customers.
This site could easily have succumbed to information overload, the bane of the Web. Sun’s solution to this pig-sty effect is orderliness: Establish a hierarchy based on the site’s customer base; keep everything in its place, but give frequent indications of cross-hierarchical associations. All the technical specifications and documentation fit neatly into this scheme.
At the same time, provide ample opportunities to toot Sun’s own substantial horn with targeted messages from the marketing department. This not only establishes the site’s branding with Sun logos and Sun colors on every page, but allows Sun to express its larger message of being the company synonymous with network computing, specifically the Internet.
Figure 3: Digging deeper into Products and Services, site visitors find straightforward information about Sun’s wares packaged in a clean design.
The other functions of the site, such as corporate information, the Sun Store, and information targeted at Sun’s developers and partners, falls into the third divisional branch off the home page — “other” — and creates a kind of independent hierarchy. The navigational, branding, and graphical elements remain the same, but this information exists in a parallel universe. It is related more toward the business concerns of the company and therefore has a less technical orientation.
Simply Savvy
Interestingly, even though Sun’s users are a technically savvy group who might be expect to have the most capacious networks and the latest software, Sun’s site is technically simple.There is little use for animations, Flash, and JavaScripts. In some featured areas, there may be Flash site-tours, but you know what you’re getting when you head off on one of these detours (see figure 4). The site adheres to open standards and is not pushing any technical or proprietary boundaries for XML or XHTML. It achieves its sophistication through clarity in its design and information architecture.
Figure 4: Sun’s site doesn’t go overboard with animations, but when it does use Flash, as in this revolving product shot, it’s used appropriately without extraneous features.
Instead of fun and games, Sun’s site is an open book without mysteries. It uses color and layout to reveal the innermost depths of a very deep hierarchy of information. Everything — the copy, the judicious use of images and symbols, even the arrangement of columns — bespeaks an overriding sense of elegance and quality. It is this sense of quality, the intangible “value-added,” that Sun uses to differentiate all its products from the rest of the networking pack.
Bear in mind that Sun is competing on one side of its market against the Open Source universe, where everything is shared freely, and on the other side Microsoft, the mother that eats its young. An intelligent-looking, no nonsense approach with an emphasis on quality gives Sun the high road of differentiation they need to set themselves apart.
Read more “Great Sites” by Clay Andres.
 |
“No nonsense approach with an emphasis on quality gives Sun the high road of differentiation they need to set themselves apart.” Maybe. But “Intelligent-looking” sites require creativity. This is obviously an information driven site that is well organized. But visually it’s a dud. I don’t think this lends any credence to how less can be more. If less is more and this is the example that demonstrates that point then you can say the same thing about a million other sites that basically have the same planned semi-sterile look. I don’t understand giving kudos to mediocrity.