Name: Matthew Butterick
Age: 26
Home Team: Atomic Vision

Best Site I've Designed: http://www.excite.com

Toolbox: PowerMac, Nanao monitor, Agfa scanner, Photoshop, Illustrator, BBEdit

Matthew Butterick is one of those rare designers who believes in the beauty of the written word. Wouldn't you know it? He's a former type designer.

When the Web began to boom, Butterick discovered the opportunity to move into the world of digital type design. "I saw there was a chance to do more than design letters," he quips. "I could design sentences, even paragraphs."

Butterick soon became a full-service Web designer, working on everything from font creation to information architecture. He says his love of letter forms has served him well in the world of Web design. "It's a good fetish to explore," he says. "If you go to our Web site, you'll see big letters, not big illustrations. Words are really easy to download."

My specialty Helping clients see the big picture. That happens by paying attention to their goals, and then making sure all the elements of their site come together.

My top secret design tip Nothing communicates better than the written word.

Secret weapon Have you noticed that all the clip art on the Web looks the same? If you take clip art straight off a CD and put it in your site, it'll look canned. First, ask yourself if you really need the clip art. If so, do something with your clip art before you put it in your page-combine images, crop them, or change the colors. Better still, find objects around the office and scan them in on a flatbed scanner. That way your art is your own.

Mistake beginners should avoid at all costs Don't attack the Web as a print designer would. A good print idea isn't much good online if it doesn't fit in with the rest of the site. Also, if it doesn't add something for the end-user experience, don't do it. There are a lot of CD-ROMs that look like they were fun to make, but that aren't fun to use.

Where I go for inspiration I'd say http://www.jodi.org is one of the most interesting sites there is. It's this amazing environment designed by someone who really knew what they were doing. It's random in a very deliberate way, like a Jackson Pollock painting. The site feels like a live experience, unlike so many sites on the Web that are huge and lumbering, like an elephant giving birth.

Best resource for Web designers There's nothing better than well-designed sites. It's important to hone your eye to identify what it is about one site that makes it more appealing than another site.

Why the Internet sometimes bores me I like chaos. I like things that aren't particularly aligned. I think it's a challenge to make something look random or organic on the Net. So many sites have no emotional depth.

Name: Amy Franceschini
Age: 26

Home Team: Future Farmers of America

Best Site I've Designed: http://www.atlas.organic.com

Toolbox: PowerMac, 17-inch monitor, Agfa scanner, Global Village modem, Photoshop, Infinity-D, Illustrator, Extreme 3D

Before she set her sites on Web design, Amy Franceschini aimed to be a photojournalist. Her career path turned Webward while working as an intern at Photo Metro. It was there that she learned to use imaging and layout software, such as Photoshop and Quark. She also discovered that her "linear personality" meshed well with the machinations of computers-and before long, she was a partner at @tlas, a Web site and creative arts organization that won The Net's art Site of the Month award in June 1996.

Franceschini believes her love for color and appreciation of "real-world" images make her a top designer. "I love to take shapes that have been used in the past and modernize them," she says. "It's inspiring to give life to these shapes."

My design specialty Creating graphically intuitive interfaces from shapes that already exist in the real world. I'll look at an airport map that points to terminals, and use that as an interface. I like to use natural elements, such as scanning images from old books or images found on the food cans at Thai markets, and juxtapose them with the Web environment. Technology scares me, so I like to balance it with natural elements.

My most cherished design hack My graphics look really lush and my colors draw you in, because I use millions of layers of color. My images are honestly sometimes 45 layers thick. What I do is blur them, and change the color behind the original image. The secret is to add back to the background and shadows to make them more deep. But to do this while working with a program like GIFBuilder, you need the Photo GIF plug-in.

Mistake beginners should avoid at all costs Designers are using the "glow" effect, like that on a television set, to make images stand out. But they're doing it by erasing behind the image instead of lying the graphic over the light source. It often looks terrible.

Mistakes beginners must make in order to get better Trying too hard. Everyone is really trying to make their sites active with GIF animation, but it ends up being too in-your-face.

Site that piques my curiosity There's this French TV Web site at http://www.france3.fr. They have video streaming. It's a little broken up, but I give them credit for doing it.

Best resource for beginners Look on the Web, and click on the images to see what they are. Deconstruct a Web site and gain a general knowledge of basic HTML so you know what you're doing and how it works.

Technology scares me, but... My Sony five-disc CD player keeps me from losing my mind.

Name: Margaret Gould Stewart
Age: 25

Home Team: Tripod, Inc.

Best Site I've Designed: http://www.tripod.com

Toolbox: PowerMac, 17-inch monitor, Wacom drawing tablet, Photoshop, Illustrator, BBEdit, Transparency

Margaret Gould Stewart "dropped by accident" into the big-top circus of Web design. She had never even used e-mail before enrolling in New York University's Interactive Telecommunications Program in 1994, but she quickly became fascinated with the Web and its communication possibilities.

Stewart graduated, went on to work for People Online, and soon became art director at Tripod, a Massachusetts-based media company whose Web site won The Net's Site of the Month award in April 1996. Stewart believes designers need to temper their pages with an understanding of the medium's limitations, taking into account the download time of big images and the proportion of Web surfers with low-end equipment. "I've gotten messages that have said, 'Thank you for this site. It looks great on my crummy monitor,'" Stewart says. "I think that's important."

My specialty Navigation. When I was in college, I did theatrical set design, and that experience helped. Web design is much more architectural than graphic, especially when designing interfaces.

My top secret design tip I'm careful to test my stuff on very low-end machines. Also, when I design tables, I make sure that the information falls in a logical procession. I want to make sure that the stuff makes sense.

Secret weapon Posterize photographic images in Photoshop to ensure that images won't dither at lower monitor-color settings. Most designers have monitors that show millions of colors, while most Internet users can see only 256 colors.

Go to the Image menu in Photoshop, pull down to Map, and select Posterize. Click on the Preview option, and play around with the levels. The posterized effect will be more pronounced at the lower levels. When you find a suitable level for your image, click OK. Then index the image to the Netscape Safe Palette. Posterizing gives the image a funky, electric look, which isn't appropriate for all projects. But if it works for the aesthetic you're looking for, it's a great way to ensure consistency for your graphics.

Mistake beginners should avoid at all costs Using technology just for the sake of using it. What you are really trying to do is communicate through a medium. Never use any plug-in or technology unless it's absolutely necessary, or is something that adds to the experience.

How to avoid information overload C|net does a really good job of providing people with tons of information-although there's sometimes too much stuff on their front page.

Best resource for beginners Lynda Weinman wrote a fantastic book called Designing Web Graphics. Her Web site (http://www.lynda.com/) is useful for beginners, and still informative for very advanced designers.

With whom you shouldn't try to keep up The Web-design Joneses.

Name: Ammon Haggerty
Age: 25

Home Team: Qaswa

Best Site I've Designed: http://www.qaswa.com

Toolbox: Quadra 650, 17-inch monitor, Powerbook 5300ce, Kodak digital camera, LaCie Silverscanner, Photoshop, Illustrator, Amapi, Strata, Director, Debabelizer, After Effects, GIFBuilder, PhotoGIF

Ammon Haggerty's experience in assembling and designing CD-ROM interfaces seems to have been the perfect training for Web design. In fact, Haggerty believes the two media are so closely related that the Internet will replace CD-ROMs entirely once it beats the bandwidth conundrum.

When Haggerty isn't working on a client site-he's designed interfaces for the likes of big fish Time Warner Interactive and small piranhas, such as Yang Snowboard Clothing-he experiments with new technologies on his personal site. "I believe personal exploration helps you as a designer," he says. "Personal projects can be great learning practice that can then be applied to your clients."

The entrepreneur believes the Web is poised for a revolution in design tactics. He insists designers must be creative to circumvent the Web's endless technical hurdles and limitations. "There's a lot of room for expansion and new ideas," Haggerty says. "There's unexplored territory for people getting into this medium."

My specialty Information architecture and conceptual interface design. One of my clients already had content on the Web, but they wanted a new site with a more cohesive design and better information structure. I introduced an interesting design, restructured the navigations, making them intuitive, and added a centralized location of information. Additionally, the site was designed to be easily updated while retaining its visual integrity.

My top secret design tip My signature technique is dimensionality. By adding dimension to your work, you create space where users feels they're part of the site. Dimensionality takes away from the flat-page feeling, and moves it into a natural physical space that brings the user into the environment. You can do it using 3D tools, such as Strata and Amapi. These tools immediately create dimensional space. You can also create a dimensional effect by adding shadows and thinking about the highlights that directional light would cast upon hitting the page and landing on an object. This effect creates a continuum through the whole site as well as adding dimensional space.

Mistake beginners should avoid at all costs Not exploring the Web's potential, and creating designs based on an established protocol. There's a lot of room for new ideas.

Mistake beginners must make in order to get better There's a lot to be learned while working with a client. The expectations are high, and the limitations are high. You can learn from trying to find a balance between what's possible and what's expected from your client.

Where to explore the bleeding edge Head for http://www.finemagazine.com. It features innovative new ways to structure information. It also uses new tools and techniques that take advantage of the medium. Also, the design is top-notch.

How rhythm powers the Internet My inspiration comes from music-both in listening to it, and in studying the art that's attached to most CDs and records that I buy.

Name: Sorel Husbands
Age: 32

Home Team: Organic

Best Site I've Designed: http://www.stoli.com

Toolbox: Powerbook 5300c, Photoshop, FreeHand, Illustrator, BBEdit, GIFBuilder, Navigator

Sorel Husbands traveled the advertising route to becoming a Web designer. She's currently creative director at San Francisco's Organic design firm, which she joined last April. How did such a dramatic career change take place? "By accident," Husbands says. "I'm still surprised to find myself here."

Husbands believes her advertising experience helped to develop her instinct for keeping audiences in mind while creating projects. She believes it's a skill many Webmasters lack. "You have to think of who you're designing this site for, and who their audience is," she says. "Not many people do this."

My specialty Information design. Coming up with ideas and understanding the user. I make sure a strong linear presentation exists, especially with a site containing many pages. You have to ask questions: Why is this element here? What does this do for me? If it doesn't serve a purpose or add value, it should be taken away. Not enough designers scrutinize their work that way.

Mistakes beginning designers should avoid at all costs Thinking that the Web is like print, and that a Web site operates like a printed page. Another mistake is featuring illustrative elements that have nothing to do with anything on the site. Avoid putting bars at the bottom of a page just to do it.

My top secret design tip When you design a site, don't underestimate the importance of navigation. New Web designers tend to design a beautiful page, then add navigation. Your navigational system and methodology will greatly affect the user experience.

Navigation is more than a footer-it includes all the information that tells you where you are and where you can go. This might include a header, something in another frame, or links within a page. Everything on every page should be questioned. A Web site isn't just a marketing piece or an informational resource. It's also a software tool. Figure out the navigation before you lay out a page.

A journey worth the reward http://www.jodie.com is completely abstract, but it fascinates me. It uses HTML at its simplest, but it's very effective and easy to navigate throughout. Web designers could learn something from examining this site.

Name: Brad Johnson
Age: 32

Home team: Brad Johnson Presents

Best Site I've Designed: http://www.nationalgeographic.com/modules/forest

Toolbox: Two PowerMacs, Hewlett Packard Pavilion 150, PowerComputing Power Tower Pro 225, After Effects, Illustrator, Photoshop, Premiere, Elastic Reality, Strata StudioPro, Director

He studied painting, earned cash as a carpenter, and majored in philosophy. All three disciplines have been muses in guiding Brad Johnson's work as a digital media designer. The Berkeley, Californian is especially proud of the three modules he designed for National Geographic Online: Dinosaur Eggs, The River Wild, and Fantastic Forest. "For Fantastic Forest, we took two-dimensional illustrations of trees, ferns, and forests, and put them into a 3D environment," Johnson says. "Kids could walk through and look for animals."

Johnson's work on TerraQuest's Virtual Antarctica (http://www.terraquest.com/antarctica/) helped the site win The Net's science Site of the Month award in April 1996, and his firm recently won the New Media Invision Award for Best Overall Design Online for its work on Forest. Johnson believes an appreciation for design and an understanding of technology are the secrets to a Webmaster's success.

Worst cop-out beginners should avoid A designer shouldn't have a programmer execute his work. Learn as much about the technology, and think creatively about working with those challenges. My strength comes from having an equal understanding of the technology and the need to create strong navigation and graphic design. A lot of designers cave in to the desire to have a tech person to put it all together for them.

My top secret design tip Our biggest challenge as designers is to keep a site simple and intuitive. Never forget that users on the Internet have to learn a new navigation system every time they enter a new site. If the user can quickly and intuitively visualize the architecture of the site and their place in it, they have control over their experience and are more likely to enjoy it.

We start designing the architecture of our sites well before we address the look and feel. In all of our most recent projects, in fact, we've built the site and put it on the Net before any of the final graphics were built.

All of the naming conventions and directory structuring is developed and placeholder graphics are inserted. It might sound like more work, but in the end, it streamlines the more time-consuming graphics generation. We, along with our clients, are able to experience the interactivity before all the labor-intensive graphics are developed. This way, we know exactly how the navigation will work, and we let these architectural forms-as well as the content-define the look of the site.

Site with the best design philosophy National Geographic Online-and, no, I'm not the only designer-features a breadth of interactive material. There's a richness to the site, and an individuality about the models that you don't see on any other Web sites.

Why I lose myself in fantasy I'm most inspired by my love of the fantastic. The love of wanting to be transported by the medium. The ability to create something that is its own autonomous world. That's what I did as a painter, and that's what I'm doing as a Web designer.

Name: Mignon Khargie
Age: classified

Home Team: Salon

Best Site I've Designed: http://www.salon1999.com

Toolbox: PowerMac, 17-inch monitor, Premier, PageMill, BBEdit, QuickTime, Lightning DX

When a group of San Francisco Examiner entertainment writers left the newspaper to create the Web publication Salon, they made sure to bring along the paper's design artist, Mignon Khargie. Those scribes were smart. Khargie has since won awards for her clean and compelling design for Salon, which gets as much attention for its look as it does for its content.

Khargie says she has no specific specialty-a result of working at the resource-strapped Examiner. "While there, I was doing illustration, design, and layout," she says. "It's a scrappy paper."

San Francisco, Khargie says, is one giant think tank for Web designers. She feeds off the energy of the city's design community. "San Francisco is really a Mecca for us," she says. "There's so much great work being done in Web graphic design and illustration here. It's very inspiring."

My most cherished design tip You can't make pages that are bigger than 30 to 40 Kb. My clean-look design aesthetic came about due to those constraints. Graphics start to grow once you move to a T1, so designers have to exercise self-control. I use black-and-white images, because I can go bigger with them than color. Nothing is so worth seeing that it justifies going past the 30 Kb limit.

Mistakes beginners should avoid at all cost Avoid background images and patterns. They're clunky, heavy, and make text hard to read. And I have never, ever seen them used well, unless they're the only thing on the page, and the reader has a quick escape route.

Mistake I had to make in order to get better At first, I was very cautious. I kept everything in the 20 to 30 Kb limit, and as a result, some things looked static. Later, I loosened up a bit.

Site that makes the best second impression I like HotWired (http://www.hotwired.com). The first impression you get is you can't read it. But its look makes sense for their audience, and it's willing to try new things.

Best resource for beginners Laura Lemay's Teach Yourself HTML in Seven Days is the best resource around. She has a new book out on HTML 3.0. She's good at articulating Web design and its underlying structure. I would also piddle around the Web to see what other people are doing.

Why I'm nice to postal employees I'm inspired by good design. I even get excited if I get something well-designed in the mail.

Name: Yoshi Sodeoka
Age: 29

Home Team: Word

Best Site I've Designed: http://www.word.com

Toolbox: PowerMac, 17-inch monitor, Kodak DC50 digital camera, Photoshop, Illustrator, Infinity, Strata Studio Pro, VD-Edit, GIFBuilder, Transparency

Yoshi Sodeoka is considered by his peers to be one of the top Web designers around. When you consider his career path and skills set, you might assume he was somehow groomed for the royal title of Webmaster.

He started off working for a multimedia design company, then moved over to Viacom, where he created prototypes for interactive CD-ROMs. Along the way, he honed his animation-design skills. And, by the way, he's also a musical composer.

Last year, Sodeoka became the Webmaster at Word, considered by some to have one of the strongest designs on the Web. Sodeoka believes Web designers need to take advantage of the Web's multimedia possibilities-and that requires an understanding of a wide-range of technologies. "I try to do everything," he says.

My specialty My willingness to try anything. I try to take advantage of new plug-ins. I play a lot of music, so I like working with MIDI.

An avalanche of tips Try anything and everything. When working with 3D animation, keep it simple. I try to avoid shaded graphics, because of the download time. When composing in MIDI, try to do something crazy. Because the sound isn't going to be good, you have to at least make it interesting. The MSN.com site uses MIDI in the background-and it's boring. Don't be afraid to try new things. And don't focus on just one thing, because the Web is multimedia. Most people who focus on audio aren't good in design. Or they're good at design, but don't care for animation. Experiment, but don't do anything too crazy.

My top secret design tip If you want to design a page, sketch it out on a paper with pencil first. Don't start building a page just from HTML code-any design you think of would be possible with HTML 3.2. Find a reason to use new technology and take advantage of it, but don't use it just because it's new. Understand basic design issues, like using grids and color schemes. Leave empty space. It helps people see things better on the Web. Too many items makes the page inaccessible.

Mistake beginners should avoid at all costs Don't go crazy and add tile backgrounds, forgetting about the context of the page.

Mistake beginners must make in order to get better I pushed so many new technologies, like CGI programs, that I crashed people's machines. I learned from that experience. But at least I was taking a risk.

Best resource for beginners When you see something that you like, figure out what they're doing and apply the same technique to your page. That's what I did. I didn't read too much about Web design.

Where to catch a peak at the future Music shows that use multimedia. I'm into trance music, and I'm trying to figure out what we can do on the Web with music. It's coming soon.

Name: Paul Vachier
Age: 32
Home Team: Transmitmedia

Best Site I've Designed: http://www.transmitmedia.com/dish

Toolbox: PowerMac, Pentium 133, 17-inch monitor, modem, Photoshop, Debabelizer, BBEdit, NetObjects Fusion, GIFBuilder, WebMap, Transparency

Paul Vachier became so engrossed in Web design that he started No End, a mailing list and real-life discussion group for Web designers. Each week, Vachier recruits a spokesperson from the Internet, multimedia, or design communities to address the group. It has become one of the top resources for Web designers in the San Francisco Bay Area.

Vachier, a New York native with a French last name, got his start in desktop publishing. He honed his layout skills by creating everything from brochures to newsletters to flyers. He would eventually like to parlay his expertise into teaching.

Vachier believes a clean, conservative layout should be a designer's first ambition. "Many amateur designers use splashy backgrounds that make the text illegible," he says. "That should never happen, but it does. All the time." Vachier has written two books: Plug 'n' Play JavaScript and Debabelizer: The Authorized Edition.

My specialty Since the biggest issue on the Net is bandwidth, I use black-and-white images and duo-tones within a conservative design that effectively takes advantage of the limitations.

My favorite design tricks Break out images, such as navigation bars, by using tables. I'll break a navigation bar into four pieces. So, as you go through the site, just one part of the navigation bar changes, and the rest stays the same. It cuts your load time down to a fourth of what it would otherwise be. Another little thing I do is put an intro graphic at the bottom of a text page. So as the graphic is loading, the user can be reading.

My top secret design tips Above all, make sure you Debabelize all your images. Debabelizer is the premiere Web tool. Additionally, choose your graphics wisely, and avoid large blocks of graphics and splashy backgrounds. White space is your friend. White space is zero download time. You can have a very effective page with a tiny 1k graphic surrounded by a sea of white.

Also, I use the <BLOCKQUOTE> tag for text to give my pages a margin. I learned this from Mignon Khargie of Salon. Text looks bad on a page when it's jammed up against the side of the browser. Adding a margin gives the page a more classy look and adds white space.

The most innovative Web site on the Net http://www.Enigma3.com is really cool. It uses Shockwave and streaming audio very effectively, and it's very low on bandwidth. It's also beautifully done and very original.