 | ||
|
| ||
| ||
|
| ||
Nadja Vol Ochs
Microsoft Corporation
March 30, 1999
The following article was originally published in the MSDN Online Voices "Design Discussion" column.
Site Lights takes on a new name and new directions. The Design Discussions column now features articles on a variety of design topics -- ranging from the presentation layer of Windows DNA to comparisons of Web user interfaces. This month, I discuss design with Wendy Tapper, graphic designer for the MSDN Online Web site. Wendy takes us behind the scenes to look at the design process, team dynamics, user interface, and graphical approach taken through out the design process of the phenomenal and massive information-rich MSDN Online site.
When I look at this site I wonder how it all started. What initial design considerations were taken? What was the first step in re-designing the site and merging the two different MSDN Online and Site Builder Network (SBN) sites together? I found out from Wendy that this site began with healthy communication and a focused goal: The team knew they had to find better ways for developers to access information.
The next step was a brainstorm of possible scenarios for accomplishing that goal. The brainstorm resulted in three different possibilities.
After testing all three scenarios, the team opted for merging the two sites into one central resource for developers
A lengthy and unique usability testing process was implemented for this merged site. Because the sites and community programs of SBN and MSDN have a history and a large group of users, the team had many people from whom they could gather information -- people with high expectations and specific needs and requests.
The testing began with focus-group testing of the concept. From those tests, the team prototyped a design, which was presented at the Professional Developers Conference (PDC) last fall. Feedback gathered from the PDC was incorporated into the next phase of the project -- the launch of the MSDN Online beta site, which went live last February. The beta site continued to receive feedback, and most of it was positive. (For a sampling, see the MSDN Online Letters column.)
There are many ways to go about the design process. Designers can create storyboards, comps, sketches, or HTML mock-ups. Wendy used Adobe Photoshop to mock up the designs. Then she saved the various designs as large GIFs. This made it easy to present the comps page-by-page, using HTML files.
The existing site-wide Microsoft.com properties had a great deal of influence on the MSDN Online design. Wendy said that her team followed a set of guidelines provided by Microsoft.com that was created with the release of Toolbar 2.0, a global navigation system for all of the Microsoft.com sub-sites to follow. "This navigation system established the site-wide navigation. The toolbar affected placement, look and feel, and menu functionality for the entire site. It created a banner approach to all pages. The benefit of this is that all Microsoft sites function roughly the same," Wendy explained.
Think about ways that your site can be broken into pieces. Perhaps you can design a navigation system for your intranet and Internet properties that brings consistency and uniformity across all your related projects. For example, I just completed work on an e-commerce sample site for which we created a very simple navigation bar. This navigation bar is separated into an ASP file and then included on every page at the top and bottom of the page with this simple line of source:
<!--#include file="Navbar.asp"-->
Doing this makes it easy to maintain a consistent navigation header and footer for all pages. And to make changes, you need to work in only one file.
Here are some examples of the comps Wendy shared with her team and with focus groups at the PDC. The concept in these designs is basically the same as what you see posted today. The site organization changed along with branding and the inclusion of the new Microsoft Toolbar that plays a strong influence on the page structure.
Click image to enlarge
Click image to enlargeThe screen shot below was one of the first designs created incorporating the new Microsoft toolbar. Wendy originally designed the toolbar with a white background and a blue dropdown menu. Later, the background was changed to blue, because the code provided by Microsoft.com for Toolbar 2.0 required that the dropdown menu color be the same as the background color in the toolbar.
Click image to enlargeI asked Wendy what design guidelines or templates the team used to get started when they went from comps to HTML production. Wendy stated: "Every page has a template with cascading style sheets (CSS) guidelines. Throughout the site, excluding the portal page, each section has a home page template and a secondary page template design with a table of contents frame." Thanks to a goal for consistency across the site, Wendy said, the designs were similar, and "the template creations were pretty minimal."
The graphics on the site are used moderately and effectively. Wendy spent her time using Adobe Photoshop 5.0 to create layers of ideas and samples. Her inspiration for the graphics on the site came from all over. "Like a lot of designers, I find inspiration from anything and everything -- books, textures, photography, trade magazines, Web surfing, and from people I work with."
When I asked about page size, Wendy explained that "the goal with any site is to keep the page size as small as possible. We try to keep the page under 50K, including graphics." Yes, this is absolutely true, and a must for all sites. Some sites even cut it smaller, and keep page sizes to 35K.
Notice that the color choices of the site are subtle and well integrated. The analogous colors of light blue, navy, purple, and the complementary red-orange arrow from the MSDN logo anchor the palette of the MSDN Online site. Wendy said the colors evolved from the browser-safe color palette. She worked within this palette whenever possible.
Various blue tones were used throughout the project. For example, the blue #99CCFF was originally used for the beta tool bar color. The color #003399 is a strong, dark blue used for the section tabs and for hyperlinks.
This is a big decision for all sites being designed today. What browsers do we target, should we use browser detection, and how can we best degrade gracefully for other browsers?
The new MSDN Online site was designed to target Internet Explorer 4.0 and above. The site uses CSS, script, DHTML, DHTML behaviors, and ASP technology to enhance the design for modern browsers. However, the team recognized that the site's content -- information for developers -- needed to be accessed by other users, and the resulting site does degrade gracefully to accommodate other browsers. This site is very rich with textual data; therefore it does not need to support the level of interactivity that an entertainment site might require.
A design team of three talented designers -- Wendy Tapper, Craig Kosak and Sharman Armstrong -- worked closely with the Web development team to improve functionality and reduce the download time.
Craig, the original designer of http://home.microsoft.com/ 
gave Wendy a lot of valuable and positive feedback that helped enhance the site's performance and design. "And without Sharman's design production help, this site wouldn't be live today," Wendy added.
I asked Wendy if she considers herself a pure graphic designer or a mix of Web developer and graphic designer. I wanted to find out whether she had authored any of the HTML or script on the site.
"I would consider myself a pure graphic designer. When I first started designing Web sites, I designed and created the HTML templates myself. Today, thankfully, I work with Web developers who do this for me. This allows me to concentrate more on the actual design of the site. however, I think it's important to know HTML and to understand the limitations and benefits of this and other technologies."
I asked if there were parts of the design that were, in the end, driven, limited, or implemented a different way because of HTML and scripting.
"I think there will always be something you'd like to see implemented a different way," Wendy replied. "I wouldn't say we were limited by technology, but rather by time. Having designed SBN, we were all pretty aware of what could be accomplished. The biggest concern was converting everything to new templates. There were a few glitches along the way -- and temporary fixes created, until more time could be devoted to certain sections of the site."
I asked Wendy if she were to meet someone who was tackling a similar design project, what one bit of advice or tip would she offer. Her answer: "Do usability testing whenever possible, know your audience, and be patient with the design process."
Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top