"A Web site is your personality in pixels."

Creating a Web site for projects-us.com

by Daniel Will-Harris

Your site can make you look better—and if you're not careful, it can also make you look worse. Here's a real-life example: I collect watches. Not because I like telling time; I usually don't care what time it is. I collect them because they're small, interesting pieces of design that are also mechanical. They're a blend of art and machine (much as Web sites are!).

I've also always been a student of architecture. So, one day I was combining three interests (Web design, watches, and architecture) and I found a site that sold watches designed by famous architects (I kid you not).

• Great products, but... not a great site. This site—Projects-us.com—was not selling itself—or its products well.
• Seeing is believing: A rough draft caught the owner's eye, and he realized his site needed the same sense of quality and architecture that his products had.
• The emotion of design: Basic design steps took us from blueprint to the final product.
• Design for clients: Web site designs must have room to grow, and clients must be able to grow them by themselves.
• A time-saver: NetObjects Fusion shaved 22 hours—at least—off the time it took to do this project. What more could you ask for?
• Growing your site: Fusion makes keeping up with changes in your business easy to translate to your Web site.
• Another example: Another site that's distinctive, yet easy to update.

Great products, not a great site

The watches looked great—I'd seen these watches in fine design stores and always liked them. But I couldn't say the same for the site. It had a lot of problems—jagged graphics, a design that didn't match the products, and it just didn't feel trustworthy. So while I liked the watches and the prices were reasonable, I didn't buy anything because I wasn't sure the site was legit.

About a year later, I somehow came upon the site again. Same site. Same concerns. But I really wanted the watch, so I gave it a try, calling the 800 number. The woman on the phone was great, so I felt as if it was legit—but the site design had caused me to take a year to go from seeing the site to actually ordering.

The watch arrived and it was incredible. I looked at the back of the watch and the box and realized that the questionable site was actually the site of the company that had commissioned the watch from renowned architect Michael Graves, and manufactured it!

Seeing is believing

This rang a big, loud bell in my head that translated into "I wonder how much business they're losing because of their Web site?

So I sent them an e-mail. I said how great their watch was and how their site didn't live up to the great quality of their products. And this was true. I also spent some time (for fun, and as an "assignment to myself") and I created a rough draft of a design (often called a "comp") idea I had for the site.

One thing I have learned about design is that often potential clients can't envision what something better will look like—until you show them. You can talk until you're blue in the face (or red, or whatever color you choose), but most people can't imagine what something will look like, until you show it to them. So I sent them the following idea:

I got a call, from Jack Markuse, the owner of the Markuse Corporation. He had liked it. We came to an agreement, and I went to work.

Design sense

One of my peeves about many Web site designs, even those of big Web sites, is that they're generic. They could be on any site. They don't have anything to do with the content of the site. Some are boring and just look like Yahoo. Others take on a superficial theme that doesn't relate to what the site is saying or selling.

People argue with me about this. They say design doesn't matter. I say that's absurd! People have been conscious of design since the beginning of time. Design is part of nature—it's what attracts animals and insects to each other (and to plants). Design is important and so integrated into the world that many people simply take it for granted, then forget it.

But people haven't changed. Just because we're logging on doesn't mean we've tuned out and stopped caring about what things look like—that's an asinine assumption.

Design conveys many things—and in this case, it needed to convey the basics of these products—a sense of architecture and a sense of quality. Since the market for these products is especially aware of design, the site's design was especially important.

Design steps

Even though we'd agreed on an idea, I still asked Jack lots of questions about his business, his customers, and what kind of feeling he wanted the site to convey.

Emotion is one of the most important, and yet least discussed, aspects of design. You don't have to be a psychiatrist to understand the emotion of design; you just have to look around and be aware of the way different things make you feel. Then, when you've created a design, ask people how it makes them feel. Sometimes it's subtle, and everyone will give you a slightly different answer—but look at the overall effect your design has on viewers.

I created graphic comps in CorelXara. Using a graphics program can be a fast way to experiment with the look of a site. But you have to be careful, because graphics programs will allow you to do things that HTML can't. So sometimes I see sites I can tell were designed by someone using a graphics program, and then someone else had to shoe-horn this impractical design into the web. Sometimes these sites end up as large graphics, sometimes they're cut up and pieced together into sites with designs that fall apart if you change your browser width or font size. You don't want that, so it's good to learn what the web practically can and can't do.

No design is right with your first attempt. In this case, I had a clear direction, but there were lots of details that needed work. While old blueprints often had a dark background with light lines, as in my first design, light text on a dark background gets tiresome on screen, so I reversed it:

And the more discussions I had with Jack, the more I realized that the design needed to be more flexible, so it evolved into this:

Notice how there are fewer lines, more space for items, smaller navigation, and the word "projects" branded into the background where it repeats down the page (so you can never forget where in the world you are on the Web). If you view this page at 800 x 600, you won't see the light vertical "Projects" on the side of the home page (though you will see it on the inside). On the home page, it only appears if you're viewing the site at 1,024 x 768 or higher.

The navigation buttons are rollovers. Normally they're blue with a white dashed line under them. When you roll over them, the text and line both turn black. It's a subtle, but effective, change that helps you see what you're going to click on.

Inside pages have a simpler design, with a dashed line separating the navigation from the body. The current section button is highlighted . And the backgroun d, while similar, is narrower, so even people viewing at 800 x 600 see the Projects name on the side.

The page footer uses a traditional blueprint technique of having a dark blue background with lighter text. The "<" and ">" buttons use NetObjects Fusion's ability to generate "smart links" that take you to the previous or next page, for another way to browse the site. And I put my design credit to the right of this. If you're a designer, it's important to remember to put a design credit on the site. I say this, but I often forget until the last minute! Some sites won't want your credit on every page, and that's fair, but they should at least allow one on the "contact us" or "about us" page.

Content

I heard a woman from one of the top traditional auction sites say, "The more people know, the more they buy." And she didn't mean it in a crass way, she meant that the more someone knows about a topic, the more interested they often become, so the more they want to have the things they know about around them.

The Projects site did have some information about the architects, but it was hard to find, hard to read, and disconnected from the products. So in the new site, we took that material, made it easy to find, linked it to the products, and linked from the product pages to the information about the architects who designed them. We also added links to Amazon.com where people could buy books about these architects.

Design for clients

It's important to design sites that clients can maintain themselves (or, if you're designing it for yourself, that will be easy to maintain yourself). Many consultants and designers want to string clients along, keeping them dependent so they have a steady stream of income from these people. I don't believe in that. I believe if you do a good design job, then people will recommend you, have you do other work for them, and that will create not just a steady income stream but an interesting one!

It's also tempting to create complex designs that are going to be difficult to revise as your site grows. You have to leave room to add, remove, and change.

I also believe that graphic design is a lot like architecture—people have to live with it. So once you've designed a site, clients have to be able to move in, get comfortable, and make it their own. That doesn't mean I can't look at the site from time to time and give them comments; clients appreciate this, and it ensures that the design doesn't get watered down over time.

How NetObjects Fusion
saved at least 22 hours

One of the ways I design sites that clients can update themselves is by creating the sites in NetObjects Fusion. It has a number of features that make it an important tool for designers and their clients (and people designing their own sites).

One of NetObjects Fusion's most useful and time-saving features is the ability to automatically generate graphic buttons and banners. This Projects site has 16 main sections, and almost 80 pages, and it will grow and change as the Projects product line does.

Because the buttons use mouse-sensitive rollovers, and each button has three graphics, I would have had to manually create 48 graphics, just for those buttons. Then there would be 80 different graphic page banners.

So we're talking about manually creating 128 graphics! At just five minutes each, that would take almost 11 hours! Now—if you wanted to change them in some way (which is often inevitable)—in typeface, size, color—that's another 11 hours! And later, when you want to rename pages, or add and remove sections, you're talking about hours of work each time.

But with NetObjects Fusion, you create a single button style, and NetObjects Fusion adds the text. If you choose an interesting and distinctive typeface, as I did (it's Two-by-Four from FontHead), then it takes just minutes to create that single button, which is used for all of the buttons on the site. The same is true for banners.

So I created three buttons and one banner. The buttons consisted of a rectangle the size I wanted, in the same color as the background, but with a dashed line underneath. The banners are the same, only larger. I went into Fusion, created a new style, told Fusion which graphic to use for the buttons and banners, and specified which font, color, size, and alignment I wanted for the text. That's it.

Boom—NetObjects Fusion automatically created the 128 custom graphics. When I needed to change font size, or color, or alignment, I made one change, and NetObjects Fusion automatically made 128 changes for me. So this feature alone saved at least 22 hours to start.

Despite how far other programs have come, none of them can do this the way NetObjects Fusion can.

To see other sites where I've used Fusion's ability to build banners and buttons in the same way--but with very different design results, see Teacherswithoutborder and Daniel Janal's site.

If you want to read more about how to create a style, see Rick Tew's Style Tewtorial.

Changes made easy

It's vital for a site to be able to change and grow. And NetObjects Fusion also makes that easy because it manages the navigation bars and banners automatically. If you move or rename sections, navigation on all pages is updated. Instantly. Automatically. If you change the title of a page, the banner is changed, too. Nothing to it.

It's impossible to calculate just how much time this can save—but if you figured one section change per month, and several new pages, you would still be talking about several hours per month. So it's clear that NetObjects Fusion can save a lot of time.

NetObjects Fusion also allows me to give a site to customers and know they can change a page name, or a section name, or add pages or change things any way they want and the buttons and banners will be created by NetObjects Fusion and look right in no time at all. No graphics programs to learn or use.

NetObjects Fusion can also generate graphic text on any graphic, so you, the designer, or client (or both), can create custom graphic headlines, right within the program. These are small fast graphics that really help make your site look different from (and better than) the competition.

Fusion really makes it easy to "grow" a site because you can also drag pages to move them around; it's all visual, and Fusion updates the navigation for you. NetObjects Fusion's "MasterBorder" feature lets you make global changes on the top, bottom, left, or right of one (or all) of your pages. You don't have to worry whether you've missing something, because NetObjects Fusion won't miss it.

Here's how a complete inside page looks:

Want to see the site, live and in person? Click here.

Now, even with NetObjects Fusion, it takes time to build a site like this because there is so much text, so many graphics, and just so many pages! So even with great software, don't expect that it's going to magically pull things off your hard disk, figure out what you want to say, and do it all for you. You won't get those features until NetObjects Fusion 20 is released in the year 2020. Don't worry, you can upgrade!

So, if you can, it can be important to find someone to help you! In this case, Rick Tew, of Tewtorial fame, did much of the production work. Taking miles of text, mountains of pictures, and legions of links and somehow managing to put them all in their place. If you need Web work done, I recommend Rick as highly as I recommend NetObjects Fusion!

Janal, too

I took advantage of NetObjects Fusion's ability to do all this on the Projects-us site and also on a site I designed for eFuse.com marketing columnist Daniel Janal. Dan's site

NetObjects Fusion produced all of the buttons and banners so Dan can easily update the site himself and keep it looking as good as when I sent it to him.

This is really important because in the past I've sent sites to companies that then had their own internal Web departments update the site in other programs. While any program can edit the HTML that NetObjects Fusion creates, other programs can't automatically create the graphic banners and buttons. So I revisit sites I've designed and often notice they've used the wrong typeface or things are slightly off—and I have to remind them, and they have to fix it. Even professional Web designers and departments benefit from using NetObjects Fusion because it makes their work more consistent (not to mention saving them time, every day, every month, every year).

What's next?

So, now, Projects has a site that's as interesting and useful as its products. And, like any architect after his clients have moved in, I'm eager (and yes, perhaps a little scared) to see how the site will look in a year or two.

I hope Jack will not have installed harvest gold shag carpeting anywhere, but, hey, if tactile Web backgrounds are what's fashionable in Web design two years from now, I guess anything's possible.

About the author

Daniel Will-Harris is a designer and author whose design and writing work can be found at his Web site. His site features TypoFile Magazine and EsperFonto, the Web's only typeface selection system. He may be reached via e-mail at daniel@will-harris.com