sws05

Lemur zaprasza

Click here to support our advertisers

SOFTWARE
FOR SALE

BOOKS
FOR SALE

SEARCH CENTRAL

JOB BANK

CLASSIFIED ADS

DIRECTORIES

REFERENCE

TRAINING CENTER

JOURNAL

NEWS CENTRAL

DOWNLOADS

DISCUSSIONS

CALENDAR

ABOUT US

Journal:

Get the weekly email highlights from the most popular online Journal for developers!

developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com

jars.com

All Categories :
Web Graphics

Laura Lemay's Guide to Sizzling Web Sites sws05.htm

Feature Site I Lumie[as]re:

http://www.lumiere.com/

Treat the Space as a Complete Unit

Elements Are Individual Parts of a Whole

Stay Ahead of the Pack

Feature Site II gURL: http://www.tsoa.nyu.edu/gURL/

Peer-Based Relationships

Physical Environment

Easy Going

AEGIS: AIDS Clearing House: http://www.aegis.com/

Font Control with WC3 Cascading Style Sheets

Buffalo Exchange: http://desert.net/buffalo/

Server Push Animation

L'ore[as]al: http://www.lorealcosmetics.com/

Nordic Track: http://www.nordictrack.com/

Gadabout: http://www.gadabout.com/spa/

A Man's Life: http://www.manslife.com/

Health Girl: http://www.nethealthgirl.com.au/

Clinique: http://www.clinique.com/

Trend-Setting

5

Sites to Live By: Beauty, Fashion, Health, and Lifestyle

People have long held a fascination for what is beautiful and fashionable. The desire for good health and well-being is also universal. Living well and feeling good rank pretty high up on my list of desires, and I've found a great deal of entertaining

as well as enlightening information by visiting the sites contained in this chapter.

Using fashion, beauty, health, and lifestyle Web sites as a guide, I'll begin the chapter's design highlights by sending the all-important concept of originality down the runway with Lumie[as]re's stunning site, and I'll offer up some challenges and

thoughts for you along the way. A more practical coverage of gURL airs ideas to keep your company healthy, and shows how the progressive pattern of new media/new models can apply to running your Web design business.

Cascading style sheets show off the up-and-coming trend on the Web design scene, in this case, controlling those troublesome fonts for AEGIS, the Web's most comprehensive AIDS database. Server-push animation is next on the roster, with colorful, fun

images from the Buffalo Exchange. Following closely behind is a seductive number from Loreal, showing you how to keep the audience coming back for more! Interlaced GIFs are any season's rage, and you'll learn not only why, but how, to use them fashionably

while working out on your Nordic Track. The importance of white space is on every Web artist in-the-know's gossip menu, and Gadabout Salons shows us how the deed is done. Man's Life sports the use of the <embed> tag, which always helps to add

a little rock to your roll. Knowing your audience is always this season's pick, as sassy Health Girl understands. Finally, CGI-based password protection options on Clinique's runway close the event with sensibility as well as style.

Feature Site I Lumie[as]re:

http://www.lumiere.com/

Figure 5.1. Lumie[as]re splash page.

When Web history gets written, Lumie[as]re will be featured as the grandparent of Internet imagination. Always ahead of the pack when it comes to high-design, Lumie[as]re has always done cutting-edge work with every bit of elegance its online presence

reveals.

A magazine dedicated to fashion and beauty, originality is the word that Lumie[as]re's biographers will use, over and over again, to describe every aspect of the oft-changing Web site's design.

Web designers need to take note of this type of always fresh, inventive approach to design. Not all Web sites are going to allow for the diverse technologies and unusual styles that Lumie[as]re presents; however, the concept of reminding Web designers

that this field is art as much as technology is imperative.

Lumie[as]re has done several things that Web designers need to take note of, and to use as daily method for inviting technique and inspiration into the art of design.

Treat the Space as a Complete Unit

Notice the splash page for Lumie[as]re, shown in Figure 5.1. The model is at an unusual angle, the photograph bleeds right off the page. This use of space is a major part of Lumie[as]re's originality, an exercise in spatial arrangement of elements that

depart from the more conventional, centered header followed by text.

Look at the various elements you have planned for a site. Is there an unusual placement or treatment you can apply to the graphics or text to make best use of your space? As you will read a bit later in this chapter, space is as much a part of design as

the graphic elements, text, and navigation are. People often believe that making elements large draws attention to them. However, if every element on a page is large, then nothing stands out. The communication is lost in the over-emphasis of the design.

So not only are you challenged to come up with novel placement, but also understand how to balance the elements of your work! The best ways to gain a better understanding of this balance, if you don't have design training, is to read and study as much

about the subject as possible. Then, browse the Web frequently. All Web designers should do this—it's the same as art students studying the work of other artists. Notice how some Web designers fall into the mistake of over-emphasis. Find how others

have learned the art of subtlety. Look closely at the ways fonts, text, colors, and graphic elements are employed. Not everything will appeal to you, but some things will light fire under your design passions.

Elements Are Individual Parts of a Whole

In Chapter 8, "Sites with Spice: Food and Beverages on the Web," I discuss the importance of treating photo images as part of, not separate from, the Web environment, and I offer some technical practices to make your

photos more efficient. With the Lumie[as]re site, the point is to look at how to treat photos and graphic elements as unique elements that are not disconnected from the flow of an entire page.

Figure 5.2 demonstrates a perfect example of the visual continuity found with Lumie[as]re's design. Note that the artist has created a field for the subject of the photo, yet the model's hair flows right out of the field into the main field! This

creates a beautiful stream of image and space, flowing from one to the other, and joining them in a continuous whole.

Figure 5.2. Lumie[as]re photo image and continuity.

In fact, it occurs to me that this is the strongest way to remember the concept: Just as our hair, our bodies, and our hands are separate from one another, they are also connected to the greater entity. The same is true of each element of a design, be

it a graphic, text, or interactive element—each aspect should have a common thread that conceptually involves them in the entire design.

Stay Ahead of the Pack

Where you can, be revolutionary. Think of something that nobody else is doing, or some new way of doing something that's been done before, as shown in the unusual photo treatment in Figure 5.3. Obviously, this isn't going to apply to all Web sites; it

is understood that sites like Lumie[as]re are the exception rather than the rule when it comes to wanting this kind of high-style presentation.

Figure 5.3. Unusual design approach.

This doesn't mean that you as a Web designer shouldn't be playing with concepts and ideas outside of the client realm. No one wants to take his or her work home, so try to plan some hours of the week to spend researching and developing ideas that, if

not immediately applicable to the type of projects you are currently involved with, will hone your skills and allow you the creative freedom to explore.

Encourage others in your company to do this too. It's a challenge finding the time to keep up with rapid trends, developing skills external of those used on a daily basis, and finding time just to browse the Web. However, these activities will provide

the fuel for what is essentially a Web designer's responsibility, and, ultimately, his or her empowerment.

Feature Site II gURL: http://www.tsoa.nyu.edu/gURL/

Figure 5.4. The gURL splash page.

Beauty, lifestyle, and intelligent insights about all interests to young women are featured in this refreshing and self-proclaimed "playful" Web magazine.

What's interesting to note about this noncommercial project is the collaborative model in which the designers and contributors are working to create innovative Web design and content. It's long been my take that new media demands new working paradigms,

and gURL appears to embrace that theory.

Nine women at New York University's Interactive Telecommunications Program are responsible for gURL's content and art. Interestingly, each works independently to create the content and art that comes together as the final product. This in and of itself

might seem to contradict the idea that a successful Web site is the result of comprehensive design—all elements working together.

Studying the site, it becomes increasingly clear that the goals of the site as a whole have been well-determined. As such, each independent artist knows and understands the parameters in which they are working, so the final product is, in fact, very

cohesive and not at all choppy, as it might be if the underlying goal were not so crystal clear. Note the similarities between Figure 5.5 and Figure 5.6, where a consistency in look and feel is maintained.

Figure 5.5. A page from gURL.

Figure 5.6. A page from another section of gURL. Note the consistency in look and feel.

The design success of gURL is a testament for new models of working within a new media. You might be thinking that this is rather heady philosophy and might not apply to the Web designer at large. I would differ, in that case, because in order to be

successful at this job, all Web designers need to keep eyes, ears, mind, and heart open to what is new and exciting, both on the level of technology and the level of business. One will lend to the success of the other.

Peer-Based Relationships

You can begin applying the new model/new media concept by studying the environment in which you work, both from a theoretical and physical sense. Cooperatives such as gURL can inspire an examination of the way you and your business operate, and the way

the people within it relate to one another. Who is the boss? Is there a sense of strength with each individual's abilities and contributions to the team ideal? How well do you communicate with each other? If you work alone, how honest are you with yourself

about the way you do things, and the way you are willing to take serious assessment of the way you communicate with yourself and your clients? New media development demands communication. That is your job—and if you are to succeed at it,

beginning with your immediate environment creates an incredibly strong foundation.

No company is going to be without its growing pains and challenges, particularly when a group of gifted, driven people all end up in the same room. There will inevitably be differences of opinion and diverse methods of how things are done. Success in

peer-based models of business requires everyone in the company to challenge his or her own ideas.

If you're involved in a work relationship with fellow designers, examine your own belief systems and how they operate within your company. Be willing to look at weaknesses, and be ready to celebrate strengths, both in yourself and in those around you.

This enhances opportunity and moves away from the old paradigm of boss-gives-orders/worker-takes-them hierarchy. Instead, pull out a roundtable and allow for peer input. Even bosses need constructive criticism, and praise, in order to grow.

Physical Environment

Next, examine the physical environment. What on earth does this have to do with good Web design? Well, this is intense stuff, and the work environment is critical to both high production and creativity. Do you have windows in your workspace? Do you have

fresh air? What about plants and art? Each of these things can add to the artistic and productive elements of the job.

Perhaps, what is even more critical—how comfortable and ergonomic are your chairs and equipment? Save yourself a world of pain and money by providing ergonomic keyboards, supportive chairs, and be sure that computer monitors are placed front and

center as you work, not off to the side or at any dramatic angle where it becomes a physical strain.

Consultation with professionals who understand ergonomic methods will enable you and the people you work with to not only enhance productivity, but protect against serious physical problems encountered by people who do computer work. Such health

problems include Carpal Tunnel Syndrome, Repetitive Motion Syndrome, deterioration of vision and other eye problems, neck and back injuries, chronic headaches, and weight gain.

Easy Going

Encouraging a healthy work environment is one of the best things individual Web designers and upcoming new media companies can do to ensure success. By creating positive communications, individuals avoid frustration, feel challenged by their work, and

bring their enthusiasm into their output. Keeping the environment optimized enables long-term health and productivity for you and your team members.

Finally, make sure you and your team take plenty of time to do other things. I once came very close to being tossed in a cold pool because I was talking shop at a party! This industry is so exciting and those drawn to it tend to be a very focused group.

Encourage outside activities and vacations, and be sure to offer positive feedback as well as criticism. Most of all, have fun. When the job becomes a drag, my bets are that the company's output will too.

AEGIS: AIDS Clearing House: http://www.aegis.com/

Figure 5.7. AEGIS home page.

Using a variety of communications tools, including Bulletin Board Services and the Internet, AEGIS (AIDS Education Global Information System) is a worldwide provider of information about AIDS and HIV.

Sister Mary Elizabeth of the Sisters of St. Elizabeth of Hungary joined forces with Jamie Jemison, who had started AEGIS as a local electronic Bulletin Board System (BBS) in the Orange County area. The two gathered support and services for their

humanitarian goal to reduce the amount of suffering and isolation of people afflicted with HIV and AIDS. The end result is this international outreach center, which is considered to be the largest database of its kind.

The AEGIS Web site is simply but attractively designed, and powerfully easy to use. It provides AIDS Daily Summaries from the U.S. Center for Disease Control, offers "Newsline," which is a link to major newswire articles on AIDS and HIV,

provides support information, and houses a completely searchable, online library of publications related to the theme.

Font Control with WC3 Cascading Style Sheets

One interesting item found on the AEGIS Web site is the use of WC3's (World Wide Web Consortium's) cascading style sheets to control font size and appearance. Unlike the use of font tags and the arguing of attributes within that tag, the style sheet

method allows for global control of different attributes of a given page. In this case, the font face, point size, color, and weight have been argued.

Style sheets are very powerful, and in this case demonstrate how they address the long-overdue need for better control. Fonts, after all, are a major part of design. Without them, Web designers are at a disadvantage.

The one downside to the use of cascading style sheets is that they are primarily supported by Internet Explorer 3.0. However, Netscape Navigator 4.0 is reported to have support for these style sheets. Furthermore, if a specific font isn't native on the

visitor's computer, he won't be able to read the font that you, as the designer, have selected. However, browsers and computers without the compatibility for this level of font control will call up the default font, so the site will be readable.

Here is the HTML source code that shows the Cascading style sheet request on the AEGIS home page:

<HTML>

<HEAD>

<TITLE>AIDS Education Global Information System</TITLE>

<META HTTP-EQUIV="Keywords" CONTENT="HIV AIDS AEGIS">

<META NAME="Author" CONTENT="Sr. Mary Elizabeth">

<META NAME="Description" CONTENT="Information on HIV Disease and AIDS">

<STYLE></STYLE>

</HEAD>

It's important to first notice where the style definitions are called. Like the <title> and <META> tag, the <style> tag is placed within the </head> tag. Here you can see the syntax used to set the style for this page.

Look at the results through Internet Explorer 3.0, as shown in Figure 5.8. You'll see how the style sheet information is ignored and Netscape 3.0 goes to the default Times font in Figure 5.9.

Figure 5.8. Font control with cascading style sheets (Internet Explorer 3.0).

Figure 5.9. Netscape 3.0 ignores the controls set by the style sheets and defaults to a Times font.

There are more than 30 font arguments, and many more style sheet implementations. Visit the following sites for more detailed information on the current and future issues surrounding style sheet implementation:

http://www.windows.com/workshop/design/des-gen/ss/css-des.htm will bring you to an article that discusses and demonstrates style sheets for Web designers.

http://www.w3.org/pub/WWW/TR/WD-css1 is the World Wide Web Compendium's entire document on cascading style sheets.

One note for designers using style sheets: Because of the browser incompatibility at this time, be sure to test your pages with both popular Web browsers to be sure your overall design is not impacted when a browser cannot interpret style commands.

Buffalo Exchange: http://desert.net/buffalo/

Figure 5.10. Buffalo Exchange home page (Halloween promotion).

This Web site is geared toward the fashion-conscious folks of a younger, more eclectic set. Featuring "re-used" fashion, the Buffalo Exchange stores have a significant following of enthusiastic customers throughout the Western United States,

and a very enthusiastic Web audience as well.

The Buffalo Exchange site is updated regularly, and makes good use of frames, photo styles, extended information, marketing, and animation techniques. In fact, one technique of note used to create the fun animation on the Buffalo Exchange site is the

Server Push style of animation. Also referred to as "runmovie" or a "CGI" animation, as well as "Nanimation" (Netscape Animation), this is one of the earliest ways that animation was introduced to the Web.

Server Push Animation

Server push type of animation combines a technique that is akin to traditional cell animation with CGI (Common Gateway Interface) programming. A script resides on the Web browser, written in Perl or in C, and when called upon, runs inline on compatible

browsers.

Because of the interactive relationship between the Web browser and Web server, this type of animation will often appear to run slowly, sometimes with jerking motions and inconsistent speeds. They can be used remarkably well, however, and because of

these issues should not be disregarded as a very effective way to serve up an animation to your audience. (See Figure 5.11.)

Figure 5.11. "Buffalo Vision" is viewed on the TV in the upper-left corner of the site's internal pages.

If such a script program is resident on your Web server, you can create an animation by following the steps discussed here. Consult with your systems administrator for specifics on the type of programs and syntax you'll need to create server push

animations.

First, you will create a series of individual graphics, either GIFs or JPGs. Be certain to keep these files relatively small, to improve the runtime of the animation.

The next step is to create a list that dictates the order in which these graphics, or cells, will appear. The list for Buffalo Vision looks like the following code, with the first line stating the location of the graphics, the second the number of

graphics in the animation, and then the name and sequence of each graphic.

disk$ebony:[tw.www.buffalo.flick]

20

buffalo.jpg

frame1.jpg

frame2.jpg

frame3.jpg

frame4.jpg

frame5.jpg

frame6.jpg

frame7.jpg

frame8.jpg

frame9.jpg

frame1.jpg

frame7.jpg

frame3.jpg

frame4.jpg

frame2.jpg

frame8.jpg

frame5.jpg

frame9.jpg

frame6.jpg

buffalo.jpg

The list and graphics are then placed on the server, and the proper syntax—dictated by the server's animation script—is dropped into the HTML. Now, when a browser (Netscape is the one of choice in this case) calls the server for this

information, the cells will cycle through the list order, creating the animation.

Here is the syntax that calls Buffalo Vision:

<img src="http://desert.net/htbin/runmovie.exe/

disk$ebony:[tw.www.buffalo.flick]flick.lst/1" width=120 height=79

alt="">

The image referred to in the <img src=> tag is then called. It knows, from the syntax, to request the server to call up runmovie.exe and the corresponding control list flick.lst. This information is returned to the browser and placed in a 120x79

pixel field.

In this case, you are looking at a server-push running from an Alpha Web server. UNIX server syntax looks a bit different, depending on the scripts being run. Other servers will vary.

L'ore[as]al: http://www.lorealcosmetics.com/

Figure 5.12. L'ore[as]al's home page.

Black on white, white on black, red, red lips. L'ore[as]al is another entry into the usually slick beauty roster of Web sites. There are soft touches here and there, breaking up the hard edges and reminding visitors that they are, indeed, visiting with

a cosmetics company.

Each season, L'ore[as]al offers a new cosmetic line, along with a style report on upcoming hot fashion. This keeps a seasonal sense of change, and people come back to see what's new.

Another fun way L'ore[as]al has found to keep visitors involved is with a makeup trivia game. The game has a new question added daily, with the answer only available if visitors come back tomorrow, same time, same pretty channel. This visit, I

found out that the miniskirt was created in 1965, and I was seriously intrigued by Monday's question: "Wearing lipstick was a dangerous undertaking in 5000 BC. Why?" You can be sure I went back on Tuesday to find the answer! (See Figure 5.13.)

Figure 5.13. L'ore[as]al's trivia game.

Web designers need to work with clients to make them aware of the importance of keeping users engaged. It's always a challenge to figure out fun ways to bring people back to the site on a regular basis. L'ore[as]al's might not be particularly

innovative, but it's witty and it has a hook. As with a good pop song, finding that hook is part of the Web designer's job.

Games, giveaways, prizes, discounts—these are just a few of the ways to keep visitors engaged. Work with the client to find out what they are doing in their more traditional advertising pursuits to keep people paying attention. Sometimes these

campaigns can be extended to the Web with a unique twist.

Make visitors work for prizes! Place a new clue on the site as often as feasible, and make the prize initiative big enough to attract attention. In the U.S., an all expense paid, weekend getaway to Las Vegas can be gotten for as little as 500 dollars!

For a large client looking for big results, this isn't at all unreasonable. For those with a smaller budget, tickets to movies or concerts, a romantic dinner at a fine restaurant, books, video rentals, anything that will inspire the competitive fire in

people can help stimulate interest, all the while keeping folks interested in the site. Big budget? Big prizes—the sky's the limit. I've seen full home computer systems, cars, and tropical getaways used as lures.

Bait that hook, all the while remembering that this idea is as old as media itself. There are many, many familiar techniques that can be used to keep people coming back to your site again and again, and having a great time in the process.

Nordic Track: http://www.nordictrack.com/

Figure 5.14. Nordic Track home page.

There's nothing like a Nordic Track commercial to remind me how out of shape I am. Still, I've always been fascinated by their seemingly never-ending product line. The Nordic Track Web site gives a comprehensive look at all of the Nordic Track skiers,

riders, walkers, and other fitness merchandise for the body of your dreams.

Nordic Track has done a nice job of optimizing graphics. It's refreshing to find a company that made the effort to offer its product in a nice layout, with quality graphic treatment. There is an obvious understanding of how and when to select a specific

type of graphic format.

I'd like to look specifically at interlaced GIFs. Interlacing is a technique that allows for progressive rendering. This means that the graphic will load evenly, instead of scrolling slowly downward until the browser has all the graphic data. First

you'll see an unclear picture, and then it becomes more and more clear as the information loads.

Anytime you've chosen to use GIF formats, interlacing will be an important choice. To make a GIF interlaced, use the Save As or Export choices in your imaging program of choice. One of these selections should offer GIF with Interlacing.

Paint Shop Pro, a powerful shareware program included on the CD-ROM, allows for saving images in this format. Follow these steps:

Image should be open and ready for saving.

Select File from the menu bar.

Choose Save As from the scroll-down menu.

Select GIF CompuServe in the Save As type field.

Choose Version 89a Interlaced in the sub-type field.

Click Save.

You can set up an HTML file that calls the graphic. Open this in a browser and see the results!

Gadabout: http://www.gadabout.com/spa/

Figure 5.15. Gadabout home page.

Slick, sleek, and streamlined could be used to describe the Gadabout Salons Web site. With a palette pulling from bronze, black, and white, color is drawn instead from the attractive fashion photographs.

But what leads our eye to Gadabout, other than the beautiful models posing throughout? What enables us to enjoy the content and the photos, without ever feeling cramped or eager to leave the site? The answer is white space. This is the use of

space to break up elements, giving us a moment to relax and absorb the next dose of information.

There's an old question posed to Media Studies students, and that is: What is not in this advertisement? The challenge is to find out what elements are distinctly missing. Do I actually see the milk in a dairy campaign, or am I being shown

pictures of farm lands and healthy, big-eyed cows?

This exercise enables the development of a critical eye. White space is a paradox of sorts. It is something that isn't really there, but is absolutely necessary to create more powerful, effective conveyance of the entirety of a given presentation.

White space, by the way, isn't always white. The reference is to whatever field color elements are engaged with. Two of the most popular on the Web, and in print for that matter, are white and black. These two colors create a dramatic backdrop for

elements, with a full range of colors used in other instances for other effects.

The important thing for the designer to remember is that white space isn't a design frivolity—it is a serious necessity. The Web was first seen with a hideous gray as its default field color, and there were very few methods to control graphic file

type, much less color and text layout. Just a few years later it's a completely different story, as we see with sites such as Gadabout. (See Figure 5.16.) A designer is now able to think about more traditional approaches to graphic layout, including the

use of space, when he or she begins the creation of a design.

Figure 5.16. Gadabout's exceptional layout and use of white space.

When first sitting down to plan a site, think carefully about the layout, and remember the importance of space. It's very much like a puzzle, and the Web has specific restrictions due to the field constraint of the visual field being quite

small—really only 640x480 pixels per screen for most people.

Think about a puzzle, and think about the elements you have—all of the elements, including graphic headers, photographs, animation, forms, and text content—as pieces of the puzzle. If you're oriented toward visual aids, do a quick sketch of

your ideas and see what appeals to your design sense and makes good use of what is—and what's not—there.

A Man's Life: http://www.manslife.com/

Figure 5.17. A Man's Life home page.

This popular magazine, offering "Complete Instructions for Health and Wealth," combines its gender-oriented, demographically accurate information into a well-designed, easy-to-use Web package. I would bet a favorite stolen sweater from a

boyfriend's wardrobe that this site is a popular place. At least, I hope it is! With tips from everything on how to wear a tux, to all the information on power tools that a guy can dream of, A Man's Life is an enjoyable browse, even for a woman.

One of the tongue-in-cheek snippets of wit on the site is the small sound clip upon arrival. It's a rock 'n' roll, fast guitar, get-in-to-the-groove lick that sets the upbeat tone of the site, and gets guests good to go moving through the site looking

for other gems of fun.

Using the <embed> tag, this sound clip is, therefore, available to anyone with a compatible browser (Netscape 3.0 or Internet Explorer 2.0 and above).

This tag was created for the embedding of application-specific plug—ins. This definition is perfectly exemplified by the use of audio clips in a variety of common formats such as .wav, .au, .aiff, and .mid. The <embed> tag allows for a

variety of arguments, depending on the type of file and the way the designer would like to use and control its functions.

Here is the syntax from A Man's Life embedded sound file:

<EMBED SRC="/cgi/random/sounds/" AUTOSTART=TRUE HIDDEN=TRUE>

The <embed> tag will always carry the src argument because this is the pointer to the embedded file. After that, you can see that the coders on A Man's Life chose to argue for a "true" autostart. This means that the clip will

automatically play once it has been downloaded to your machine, instead of requiring you to perform any initiating action. The "true" hidden value hides the audio console that will appear without this argument.

To learn more about the arguments available for the <embed> tag, visit Ron Woodall's excellent "Compendium of HTML Elements" at http://www.synapse.net/~woodall/html.htm for North

American access, and http://www.highway57.co.uk/html_ref/html.htm for European access.

Health Girl: http://www.nethealthgirl.com.au/

Figure 5.18. Australia's bold and brassy Health Girl.

This boldly colored, in-your-face site is a mix of health, beauty, and well-being served up with snap, verve, and lots of down under attitude. With its fuchsia, purple, red, and lime green backgrounds, frank discussion about sex and safety, and sparkles

of elegance and fine art strewn around, the otherwise brazen site Health Girl is an enjoyable, informative ride.

A site this colorful would be walking a fine-edge of acceptance from a wide audience, however. Some people might find the color scheme, much less the candid subject matter, offensive. A designer might enjoy the irreverence, but a general audience might

not.

Health Girl has done a good job of understanding its audience, and playing directly to her. There is a great deal of safety when audience is as well defined, because then the designer is free to express intent as creatively as possible. If you

understand that your audience is conservative, choosing colors and language that are as bold as that on Health Girl is going to be a dangerous choice. However, if you know your audience will enjoy a little more excitement, there's no reason to hold back!

Ask the following questions of a client to gain a strong idea of audience:

Who is your current audience?

What audience are you trying to reach with your Web site?

How is this audience the same or different from your current audience?

Are there colors, language, and style that you have found to be successful with your current audience? Offensive to your current audience?

What appeals to you in terms of language and style? Do you envision yourself as cutting-edge? Corporate? Conservative? Wacky and wild?

The preceding questions will help give you good information to begin designing your own site. If a client's audience is currently young adults, and the objective is to draw in an older crowd, these questions will give some guidelines as to direction of

design and concept. The client will also give some insight into what to go after. Be on the lookout for inconsistencies, however. And be sure to tackle these inconsistencies early in the process instead of later, especially because you'll invest a lot of

time on the project.

Clinique: http://www.clinique.com/

Figure 5.19. The Clinique home page.

This innovative site takes inspiration from its in-store gimmick of customizing skin type with a take-it-while-shopping test. This helps the shopper decide what makeup, cleansers, colors, and other Clinique products are best.

Using a CGI script (a rather more complicated one than seen earlier) with server-push animations, the Clinique computer will walk you through your very own skin type personal consultation. Then, you will be given the option to browse the product line,

provided you fill out a form, select a password, and return to the site later. Once in, you can browse all about, and learn savvy skin-care tips.

CGI scripts can be fairly simple, or rather complicated, as seen with the Clinique personal consultation application. It's easy to see how powerful such interactive applications can be, both in providing entertainment as well as security. Clinique does

both.

The password protected area keeps my data available only to me. (See Figure 5.20.) This kind of CGI gateway is applicable in many instances, including the creation of private areas for businesses, corporations, and other organizations that want to offer

both public information and private, in-house, access. Another very common application is for subscription-only users of a given Internet system or publication.

Figure 5.20. Password protection on Clinique.

Remember, however, a password is only as useful as it is private. Although chances are very slim some random hacker will find out your information and hack your accounts, be very wary as to who gets your password information. A casual friend might

misuse the privilege, or a child might find themselves in places they ought not go. Keep passwords private!

Because CGI scripting requires extended knowledge of servers, scripts, and programming, I highly recommend those individuals who are interested in creating advanced CGI-based applications to seek out books and resources on the subject. Online, check out

http://www.stars.com/Authoring/CGI/ for a great jumping-off place.

Trend-Setting

Web designers are sure to always be on the cutting-edge of fashion with the Web design tips and tricks featured in this chapter.

Originality is essential.

New media and progressive business models can inspire better ways of working and living in the information age.

Cascading style sheets are powerful tools that Web designers should begin to study and employ.

Server-push animation is an effective animating technique using CGI scripts.

Bait your audience with clever games or puzzles to bring them back for more!

The interlaced GIF is easily created by using a number of tools and helps keep the audience visually engaged while the graphic data loads.

The importance of white space is a design fundamental.

The <embed> tag can add a variety of interesting elements to your site, including audio.

Knowing your audience makes for precise and accurate Web sites.

CGI password protection can assist the Web designer in protecting sensitive or personal material.

I hope these tips will help move designers easily from the fashion runway to the Information Superhighway. Chapter 6, "Sites that Network," examines sites and lessons learned along the hub of computers and pipes that

make up the Internet itself.

Use of this site is subject to certain

Copyright (c) 1996-1998
EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited.

Please read the .
Contact with questions or comments.

Copyright 1998 Macmillan Computer Publishing. All rights reserved.