| 
Making Waves
A Web Site Makeover for
The Institute of Native American Studies
By Gary W. Priester Summary: "Mitakuye Oyasin—All My Relatives" is the phrase that greeted me when I visited my first Web site makeover candidate, the University of South Dakota's Institute of American Indian Studies. Pronounced Mih-tah-koo-yay Oh-yah-uh-sien, this term is one of highest respect. More than a greeting, Mitakuye Oyasin is used most commonly as an affirmation said by those present, after a prayer or other special/honoring statement, to convey the continued sense
that all things provided by the Creator have a life and are related to one another. The Web site is very straightforward and provides information to both students and people searching for information about The Institute of American Indian Studies' various programs. The director of the Institute of American Indian Studies, Leonard R. Bruguier, Ph.D., wrote: "Hello Gary: Through the years I've deconstructed our Web site into an easily downloadable educational site that provides
information to prospective students and interested surfers. At the same time, I've harbored dreams—not being able to actualize them for whatever reason—about adding some sounds and sights to the site. Maybe this is the time." Before  |
Here´s the institute's current home page that illustrates the "deconstruction" to which Leonard referred in his letter. The reason for the simplicity comes from the desire not to shut out older, slower computers and older browser software that some of the students possess. So my assignment is to design a site that is clean, contemporary, and functional as well as
accessible to all levels of hardware and software. I used NetObjects Fusion to design a site using Nested Tables that would work for users of Netscape 2 and Microsoft Explorer 2.0 and newer versions of these browsers as well. But I'm getting ahead of myself. Soar With the Eagle My initial impression of the site was it lacked visual continuity from page to page. For example, colored initial caps were used on one particular page, but not on others.
Small stuff, nothing major. On the positive side, I really liked the stylized eagle logo that graces the institute's home page. The eagle seemed a good path to take for my makeover assignment. But before I could start with the eagle, I decided to select a palette of colors that I could use throughout the site. I created a palette of Web-safe colors that would complement the colors in the image
.
The numerical values for the RGB colors are under the swatches. Web-safe colors (also known as nondithering colors) are the 216 RGB colors that display solid (nondithered) on any computer monitor capable of displaying
256 colors at one time. Dithering is the process of placing colored hatching and dot patterns over a solid color to visually create another color. Dithering at its very best is ugly, so whenever possible, I try to use the 216 nondithering colors for solid areas or for text.The current logo places some of the text directly on top of the eagle so I decided to try a few approaches where the eagle had a little more elbow room, that is to say, where the type
did not print over the art. 
This is my first variation. All my images were created in Corel Xara
, a Windows, vector-based drawing application that is particularly well-suited for creating clean, crisp, Web GIF and JPG images. I imported a screen capture of the logo, increased the size dramatically, and recreated a vector version of the eagle in Xara. The vector version of the logo gives me the flexibility to make the logo larger or smaller without loss of image quality. Once I had sized the vector logo to the desired size, then I could export the GIF or JPG bitmap image.
My next approach was a bit more "designery." The designs for Figure 3 and Figure 4 are oriented vertically and might gobble up valuable screen real estate, so I tried some horizontal approaches. 
This uses a rule to separate the institute text from the university text. I created some tiny bead images to add to the center of the rule after first researching Lakota (one of the Indian nations in South Dakota) crafts to make sure beadwork was appropriate. This led to another idea, but that will have to wait for a moment. The colors in the color palette I created were
applied to four rectangles, creating a distinctive background for the text . 
Stringing Beads The Institute of American Indian Studies administers one of the largest oral history collections of its kind in the United States. The South Dakota Oral History Center's archives contain more than 5,200 recorded interviews.Remember the beads? Leonard had said he wanted to add sound files to the site. The voiceprint graphs–the ones with the squiggly up and down lines that look like seismographic
earthquake recordings and represent the human voice--might make an interesting beadwork pattern if they could be simplified. My reference books on Native American crafts had some exquisite examples of Lakota beadwork. I simplified a portion of a design found on a beaded shirt using a repeating diamond pattern that dissolves into the stylized voiceprint. Here´s the final header. 
For all of these explorations, except the colored rectangle, I used Adobe's Caslon Regular with small caps from the Caslon Expert font. The classic font adds a nice formal counterpoint to the eagle logo and/or the beaded banner. I decided to go with the beaded header because it visually combined Native American tradition with European technology. Creating the beaded image took about as much time as actually stringing
the beads by hand as each bead had to be placed by hand. Navigational Aids OK, I now had the banner with which to tie the pages together. The next step was to create a means for the visitor to get from page to page. After examining the current Indian Studies site, I arrived at
five logical areas into which the site could be divided: Home, Welcome, Overview, American Indian Studies Major, and South Dakota Oral History Center. I intended to merely modify NetObjects Fusion's default Style and use the buttons as is. This would make the site design job easy as NetObjects Fusion automatically links all the pages together. However the wording for the five sections is so different in
the number of characters that this did not work effectively. I tried several approaches until I landed on one I felt was a good solution.  Here five stacked, colored rectangles contain centered type.
Then I explored a series of connected rectangles.  Finally, the most visually pleasing approach seemed to be to simply stack the type using a black bead to separate the sections. This design could be converted into a bitmap image and then converted to an image map in NetObjects Fusion.  Here´s the final navigation image map.
NetObjects Fusion automatically places text links at the bottom of the page so visitors with browsers not supporting image maps can still access the information.
Tending to Details For a site that had been "deconstructed" for quick downloading, I noticed two of the bitmap images, while small in physical size, were very large in file size and took an inordinate amount of time to load into my browser. Upon downloading the images, and bringing them into Adobe
Photoshop, I noticed that one of the images was larger than my 17" monitor's screen. Yikes! And the photograph of Leonard was in fact about 2 1/2 times the size of the image on the Web page. How could this be? Well it seems whoever produced the site (and I'm not pointing fingers, Leonard!) simply changed the image size in the HTML document. While this does make the image smaller in terms of screen real estate, it takes just as long to load as the larger size image. So, I reduced them in
Photoshop to the desired size and used Ulead's Smart JPG Export plug-in to achieve the best balance of image fidelity to small file size. (Lacking Ulead's plug-in, I would have selected Medium quality for the JPG image in Photoshop). The 169K file slimmed all the way down to 14K with no loss of image quality (Polite applause!). And I was able not only to reduce the size of Leonard's black and white photo in Photoshop, but I was able to increase the contrast and image
sharpness to boot. (Oohs and ahs followed by more polite applause!) After
Here´s the Indian Studies Majors page being constructed in NetObjects Fusion. Although I'm fairly new to this application, I found it relatively painless to learn and implement.
Click Here
to see the actual pages that were created in NetObjects Fusion.I began with the Basic Style (which is the default style) and then modified it. I replaced the default banner with the beadwork banner. I replaced the default navigation button rectangles with my stacked type image map. I created a new style for subheads so by simply highlighting text and selecting a style from the menu, I could add all the attributes at one time. I modified the default font style making the text color deep
red (RGB 102, 0, 0) and used dark green (RGB 0, 102, 0) for headline text. This preplanning makes it easy to create pages that have visual continuity. I should point out that pages also can have many different styles, I just prefer a modicum of order in my Web pages. I placed the artwork from the current Web page (this is the image I reduced from 169K to 14K) and set the alignment to Wrap Left with 10 pixels horizontal offset and 4 pixels
vertical offset. I specified Verdana for the text style. Verdana, a sans serif font designed specifically for Web page use, ships and installs with most Microsoft products, so it's a safe bet that most visitors will already have the font installed on their computers. It also can be downloaded by any Windows or Mac user, even if you're using Navigator! I highly recommend you download this very readable, and free, face. To download this face, click here.Although it doesn't state this anywhere, NetObjects Fusion also adds several other similar, fall-back fonts (Arial and Helvetica) to the HTML statement in case Verdana is not installed. And if the visitor has none of these fonts, the text will default to Times Roman or any other font the visitor may
have designated as the default browser font. (I shudder to think what some of them might be!). If you want more control over the fonts used when the font you specify isn't there, you can edit a file called fontmap.txt, which is in the NetObjects System directory. For more information about type on the web, click here.The rectangles around the navigation graphic on the left side of the screen represent Hot Spots on a single GIF image. The Hot Spots make the image into an image map so when a visitor clicks on Welcome, for example, the browser knows to go to the Welcome page.  NetObjects Fusion's Site-Structure outline. Adding linked pages is as easy as clicking on the New Page button (not shown in this portion). With NetObjects Fusion, the institute can import its current pages into the new format and add linked pages as needed in minutes. It makes me crazy when I think of the time I used to spend adding links
manually in HTML and half of the time they were wrong anyway!
A Sound Decision This site design should provide The Institute of American Indian Studies with a format it can use to update its current site and expand it as needed. When Leonard is ready to add
sound files, he'll find that in NetObjects Fusion, the process is painless. By selecting Sound from the Media flyout menu (on the main toolbar), the Sound Properties dialog is enabled.  The sound file can be located and selected, alternate text can be provided (so users with sound-impaired
browsers will not know what they're missing), and an associated icon or image can be linked so that when the visitor sees the icon he/she will know there is a sound bite attached.
Does Your Site Create Sore Eyes? If you need help with your Web site, let us help. That's why we're here after all! E-mail us and give us the URL for your Web site as well as a brief description of what you hope to accomplish with your site. If we pick your site for a
makeover, we will contact you for more information.
About the Author  Gary Priester is a partner in The Black Point Group, a Northern California graphic design company. He is the author of Looking Good in Color, Ventana Press and CorelDRAW Studio Techniques, Osborne/Corel Press. E-mail Priester
or visit his web site.
|
