Creating a High-
Impact, Single Graphic Web Site

by Roger Parker

Why aren't more small businesses benefiting from the Web? Perhaps the following two frequently heard statements are part of the problem.

• "I'm going to wait until I learn HTML before I create my Web site."
• "I want a really cool Web site!"

These statements are harmful and self-defeating for several reasons. The first statement implies you have to understand underlying technology to create an effective Web site (do you need to know how a carburetor works in order to drive a car? I think not!). This leads to procrastination and emphasizes technology at the expense of your message (the truly important part).

• You can do it, simply and easily: Get simple, effective, high-impact results with just one graphic.
• Five goals to keep in mind: Efficiency, branding, simplicity, easy navigation, and speed.
• Three steps to success: They're easy. Try them.
• Step 1: Identify your Web site's central message. Start by asking yourself the question: "What does your firm or association stand for?"
• Step 2: Prepare your site's "signature" graphic. Translate your idea into a simple, strong graphic.
• Step 3: Creating your Web site with NetObjects Fusion. Once you know what you want to say, NetObjects Fusion makes it easy to say it.
• Final refinements: some finishing touches.
• Discarded approaches: Ideas come and go. Think of as many as you can—then choose the best of them.

The second statement assumes visitors to your Web site want to be entertained or dazzled—when what they really want is information--information that explains how you can solve their problems. Visitors to your Web site have problems and hope you have solutions. (If they want entertainment, they can turn on Nick at Night or go to a Bruce Willis movie if they find him entertaining—some do, some don't.)

You can do it, simply and easily

I want to suggest an alternative to procrastination and unnecessary complexity. I want to show you how to create a simple, effective, high-impact, results-oriented Web site using a single graphic and NetObjects Fusion.

By combining a single, well-thought-out and well-executed graphic with the features built into NetObjects Fusion's templates, you can get on-line faster and at far less cost than your competitors who are delaying and unnecessarily complicating their Web initiative by aiming for "glitz" and "dazzle" rather than meaning and simplicity.

Web marketing is no different from any other type of marketing.

The ideas and benefits your Web site communicates are more important than the dressing—the colors, the type, and the special effects. Colors, type, and special effects can certainly enhance your message, but they cannot replace your message.

Three steps to success

To create a high-impact, single-graphic Web site, all you have to do is follow three simple steps:

1. Identify your Web site's central message.
2. Prepare a "signature" graphic.
3. Let NetObjects Fusion do the rest.

I hope, by the end of this article, you'll not only be convinced that you can do the job yourself , but you'll be convinced that now is the best time to get started.

Five goals to keep in mind

I had five goals in mind when I started work on my Web site:

1) Efficiency. As a "word person," I wanted easy-to-work-with graphics. I wanted a simple framework that would allow me to concentrate on my Web site's content—i.e., words that communicate ideas and generate results—instead of fussing with graphics.

2) Strong branding. I wanted a single, recognizable graphic image to create a unique memory in the viewer's mind. I wanted a Web site that people could identify on a 17-inch monitor from across the room. The single-graphic structure also retains its branding when printed. I wanted pages that, when printed and distributed as classroom or seminar materials, would retain my image plus my contact information.

3) Simplicity. In contrast to the many cluttered Web sites, I wanted to project a very simple image. A simple framework would emphasize the words and whatever graphics (such as covers of my books) I added to each page. Simplicity itself would help brand my Web site.

4) Easy navigation . Since I knew my Web site would grow quickly, I wanted visitors to my site to always know where they were, making it easy for them to locate information, jump around from topic to topic, as well as return to topics they enjoyed.

5) Speed. I wanted my Web site to be as fast-loading as possible, which would encourage visitors to visit as many pages as possible. Using a single graphic and as much HTML text as possible contributes to that goal.

Step 1: Identify your Web site's central message

Probably the hardest part of creating your Web site is creating a position, or mental image of your site. Start by asking yourself the question: "What does my firm or association stand for?"

It took me a long time (i.e., several months) to come up with the central organizing concept. This process, while time consuming, was beneficial in the long run because it forced me to rethink the purpose of my business.

Originally, I had focused on the idea of "meaningful content" as I enjoy copywriting. Several prototype "meaningful content" designs were created. But, the problem is, I don't want to restrict myself to copywriting.

The concept I finally arrived at was The New Entrepreneur. The New Entrepreneur concept reflects one of my central beliefs: Today, it's not enough to simply be competent at creating a product or providing a service, you have to be equally competent at promoting your competence. Today, competence is assumed. Success requires being able to promote your competence in person, in print, and on-line. The New Entrepreneur concept provided me with an "umbrella" that encompasses everything I enjoy doing: design, writing, speaking, consulting, and mentoring.

Once I came up with the New Entrepreneur concept, the rest quickly fell into place.

Step 2: Prepare your Web site's "signature" graphic

The next step was to translate The New Entrepreneur concept into a strong visual one that was as unique and as personalized as possible. It doesn't have to be complex or difficult, as you'll see.

To create my signature graphic, I used CorelXara, although it could have been created using a variety of programs. I chose Xara because it's easy, fast and you can't get better results with any other software. Enough said.

When creating a signature graphic, think simple--in terms of color and number of items in the graphic. You want the graphic to be distinctive, but not busy.

To make my graphic as simple and effective as possible, I decided on an all-type treatment. I employed three tools of typographic contrast to make the words come alive: size, weight, and color. The key words--"NewEntrepreneur.com"--were set in Adobe's Frutiger 95 Ultra Black. The space was eliminated between "New and "Entrepreneur" to make the words into a unit. The "E" was capitalized to add visual interest to the graphic and emphasize the second word.

"Roger C. Parker's" was set significantly smaller in red Frutiger Bold. (I also experimented with several serif typefaces, but the contrast between serif and sans serif weakened the image. Often, the best results come from using different weights of the same typeface.)

The final touch, the touch that changed "NewEntrepreneur.com" from a simple Web site address to a graphic, was to set the period before the "com" in the same color red used for my name. This unified "NewEntrepreneur.com" with my name. The final logo is seen here.

If you still find the idea of creating your own signature graphic to be intimidating, then think about hiring a freelance designer. You can find good designers all over the web—or locally where you live. It shouldn't cost much to have them do a single graphic, and if the designer is good, the results should be well worth what you've spent. (That said—try it yourself, first, because it is simple, and it never hurts to try—if you don't like what you've done, you can always hire someone to do it for you!)

Step 3:
Creating your Web site with Fusion

With premise and graphic in hand, creating the Web site became relatively easy.

I started by selecting Fusion's "Elementals" template. I chose this template because of the simple primary and secondary navigation bars the program automatically creates when you choose the Elements template. My goal was to use the primary navigation bar as a major visual element on the page, reinforcing my logo and providing a "horizon" to organize each page.

One of Fusion's strong points is the way it automatically creates a navigation bar as you add pages in Fusion's Site view. A little experimenting showed that the best results occurred when I limited primary navigation to four choices. This four-choice limitation, again, improved my Web site by forcing me to seriously think about the structure of my site and the information I wanted to present. With the addition of a Home Page link, this creates a primary horizontal navigation bar with five links across the top of the page, as shown here.

The next step was to resize the graphic to match the length of the five-link navigation bar. This required a little back and forth work with Xara, resizing the length of the NewEntrepreneur.com graphic until it equaled four of the navigation links. (I wanted to leave the space below the first, lefthand, Home navigation link empty.)

Measuring tip: In NetObjects Fusion, you can measure objects in pixels (the dots that make up elements on a computer screen) using the cursor. Place the cursor where you want to start measuring. Look at the bottom of the NetObjects Fusion screen and near the right, you'll see a box that says "x: 300, y: 75 (the numbers will be different depending on where your cursor is). "x" is the horizontal measurement; "y" is the vertical measurement. So, if you want to measure horizontally, and your cursor starts at x:350 and ends at x:500, you know what you've measured is 150 pixels long. Likewise, if you're measuring vertically and your cursor starts at y:70 and ends at y:170, you know the distance is 100 pixels.

Most graphics programs also let you measure in pixels. This way you can easily coordinate the size of your graphics so they match the size of your navigation, the width of a text box, or any other element on your Web page.

If your signature graphic is not aligned with the navigation bar or is a little too long or too short, you could project an "accidental" image, rather than a logical, structured, organized, professional one.

  Working with Xara, I resized the logo so its left edge was aligned with the second navigation link and the right edge of the logo was lined up with the right edge of the navigation bar.

I then positioned the logo and primary navigation bar at the top of Fusion's MasterBorder, so it would appear on every page. I added my name, address, phone number, fax number, and e-mail contact to the bottom of the MasterBorder, so they, too would automatically appear on each page.

Refinements

To complete my Web site, I added my photograph to the left of the logo, aligned with the second navigation link. Note that the bottom of the photograph had to be aligned with the baseline of the type (the baseline is the bottom of most letters—excluding letters that "descend" such as g, j, p, q), rather than the bottom boundary of the graphic. This is because the bottom of the graphic extends to the descender of the "p" in "entrepreneur." (It took me a while to figure out why the original layout didn't look right.)

I then aligned the left border of the Layout with the second navigation link and aligned the right Layout border with the right edge of the navigation bar. Limiting the width of the Layout to the width of four out of the five navigation links reduces line length, which makes text easier to read and builds white space into every page, projecting an inviting, easy-to-read image, as seen here.

Adding secondary navigation bars

Four navigation links aren't enough, of course. That's where Fusion's secondary navigation bar comes into play.

When you click on one of the four primary navigation links and reach one of the four primary pages, secondary navigation bars appear. This is a good example of how you can use multiple automatically generated navbars to create more detailed navigation for your visitor.

In this case, I first created a new MasterBorder, which I called "secondary." If I added the secondary navbar to the main MasterBorder, it would appear on all pages that use that border. So I created a new one (based on the first one so NetObjects Fusion copied all of the elements and I didn't have to rebuild it).

Then I made the top border larger by adjusting the top border numbers in the Properties palette.

I clicked on the navigation bar icon, then clicked in the top border and NetObjects Fusion inserted the navbar. To make it a secondary bar, I clicked on the "secondary" button in the Properties palette. Done.

Now, any time I add a page that I want to include both navbars, I simply click in a MasterBorder and choose "secondary" from the Properties palette. Instant, automatic, always accurate and up-to-date navigation.

Here's how a typical page looks in Fusion.

When viewed on a Web browser, as shown below, notice how you know at a glance exactly where you are. The pale yellow background in the primary and secondary navigation bars clearly indicates your location. Note how the single graphic and photograph brand the page, yet don't distract from the page's contents.

Discarded approaches

While creating my Web site, numerous ideas were tried and discarded. You shouldn't expect to find perfection on the first try or be afraid to experiment. If something doesn't work, don't use it. No one ever has to see it.

The more you try, the more choices you have and the more chances you have to find the best solution.

The original NewEntrepreneur.com logo included a horizontal bar and my photograph on top, next to my name. The lower portion of NewEntrepreneur.com was outlined in the same red used in my name.

This approach was discarded for several reasons. One of the most important problems was that placing my photograph on top of the logo created a pool of empty space to the left of the photograph. The top of the page looked incomplete and wasted a lot of space. The complexity of the logo also was at cross-purposes with the high-impact simplicity I wanted to communicate. Finally, the horizontal line competed with the navigation bar instead of relating to it and reinforcing it.

My son, Christopher, advocated making the logo at the top of the page a separate frame. I resisted this for several reasons. First, I wanted my Web site to be as accessible and as fast-loading as possible to the largest number of people. I didn't want to lock out visitors whose browsers couldn't accommodate frames. Second, frames make it harder to print and bookmark pages. I wanted my picture and Web site address to remain active when teachers printed my pages and distributed them to students. With many browsers, however, the default printing option results in only the currently active page printing, which would mean my logo and contact information wouldn't print.

Finally, I dislike the way text is clipped along the top of the first line when viewers scroll down. When visitors scroll down a page with a top frame, often only the lower portion of the top line of text remains visible, the rest is cut off by the frame. I find this an annoying characteristic of Web sites with top frames.

The results

Even with my five goals (efficiency, branding, simplicity, easy navigation, and speed) in mind, I didn't realize what an important role NetObjects Fusion would play in the site's design.

Fusion's site-oriented design helped me carefully plan my Web site so it was more logical and easier to visualize and use.

The four-link maximum imposed by my design (based on a four-link navigation bar) disciplined me and—in doing so—resulted in a simpler, much better organized site than if I had had total freedom to add links at random. Creating a logical hierarchy quickly became a game, instead of a chore.

About the author

Visit Roger C. Parker's Meaningful Content Web site. Roger has written numerous books including Roger C. Parker's Guide to Web Content and Design (MIS Press).

Illustration: Ingo Fast´s Technology for www.artville.com