 |  |  |  |  |  |  |  |
|
|
 | |
This site from scratch, part II Design and Impressions
Design is a very subjective thing. You can show one design to two people and one of them will love it while the other hates it. That's life. Most people aren't designers, and so the thought of designing a site can be intimidating. A program such as NetObjects Fusion comes with hundreds of professionally designed styles that you can apply to your site in just a click. To take a look at these styles, click here. These styles are a great way to start a site because you can concentrate on a site's organization and content. They're also great if you're not a designer and can't afford a designer because they ensure that your site has a professional look with easy-to-follow navigation.
But I also wanted this site to show how you could use NetObjects Fusion to create a totally custom-designed site, because, like any other "product," a Web site's "packaging" is a very important aspect. When creating something like eFuse.com, you're not just creating a site, you're creating a "brand," which you want to be unique and immediately recognizable. I spent a lot of time looking at other sites. Not to copy them, but to learn
from them. I wanted to see what they did right, and also what they did wrong. In designing this site, I started with certain goals The first goal was that the site be friendly, non-technical, and easy to use. The design needed to be friendly, but also
practical—efficient and fast. It also had to be a good example of Web design and navigation—practicing what I preach. Even though I had designed many sites before this, I did research, as I do for each new site I design. I spent time looking around the Web, seeing what other sites have done and keeping notes on what I found that worked, and didn't. I also talked to my "target audience," the kind of people who
would be visiting this site. I asked them which sites they found useful and which they found useless, and why. I made notes of what I heard the most often and tried to design a site that would avoid these pitfalls. For this site, I came up with the following design goals: A strong visual brand is essential
for a new publication designed to be unique and distinctive. I have a long background in the publishing business and writing tone and design are known to be a vital part of any successful new publication. If you want to stake out a new market, you must make your publication look unique and distinctive because that reinforces the unique and distinctive tone and content. eFuse.com is not a corporate site, or a site merely presenting
product information. It is a content site, a publication, and so a strong design is an integral and vital part of the package. Many sites today are taking the "Yahoo" route of almost no visual identity. This is a mistake. Just because this is a new medium doesn't mean the people who read and see it have changed—people still respond to "packaging" and design, and creating a strong visual brand is an important part of the whole package.
The current design is light and fast-loading, and if it takes a few seconds longer to load graphics that make the site visually memorable, it's worth it. Color
(Tip: There are two ways to see what color is used on a Web page. The first is to save the source HTML of that page by choosing View/Source in your browser. Or choose File/Save as... and save the HTML to disk so you can refer to it later. The second way is to use a program called the Typeface Navigation Most sites leave the branding to the top or bottom of the page,
and when in the middle of the page the reader could be anywhere. This squanders brand building and recognition. Background images can (and should) be quite compact. The ones on this site are around 8K, which, at 28.8, should take less than four seconds to download. Yet their effect can be powerful—helping people know where they are (instead of having them feel they could be anywhere) and repeating your brand name and image so it becomes more recognizable—and valuable. Content framing eFuse.com sets type at an optimal width of approximately 60 characters (at the default 12 point size, this translates to around 450 pixels wide). This leaves a lot of blank space on the screen, but it's not a waste because blank space makes text easier to read. The eFuse.com design uses a "content framing" technique whereby darker colors surround the content draw the eye to the content.
Currently most sites do not do anything with the blank area to the right of the text. This area remains very bright, distracting the eye away from the content. Content framing allows the reader's eye to focus on the lighter content area. Background branding and content framing may not be common on the Web now, but just as my site was one of the first to introduce side navigation with the now commonplace
color bars, these new features are efficient ways to increase readability and branding. You've got to ask questions In talking to the target audience, I asked a large number of people (both through e-mail and personally) what they found
useful, useless, and why. I made note of what I heard the most often and designed a site that would avoid these pitfalls. This was easy to address—I created a section called "Start." Not only did this make it obvious that this was the starting point, but it also echoed the "Start" button that most computer users have under Windows. Through talking to readers and looking at "usage logs," from my Internet Service Provider, I've learned that people can be afraid to click on something if they're not sure where it's going to take them. Many sites today are filled with short, non-descriptive links that force people to do just that. Big empty pages with links that don't tell the readers anything
almost guarantee that the readers will not be able to find what they are looking for. In response, eFuse.com has more descriptive text. Rather than create pages that were a bunch of short links to different pages, my testing showed it was better to present people with a lot of options on a single page. Readers are then more likely
to find something that interests them. Some people think it's better to make people click than to scroll. But people can't click on what they don't see. More experienced Web users may click blindly into the future, but our target audience does not. Short links that bury content under too many clicks trivialize it. It also takes longer to load many separate pages than one longer page— scrolling is faster than clicking and loading a new page.
Finally, a One of the complaints I heard about the corporate site (as well as other Web sites) was that people didn't think there was much there, and the lack of perceived volume made them think the site was shallow and "not very useful," even when the site had tons of content.
Designers tend to prefer overly simplified, streamlined interfaces, claiming "less is more." But my conversations with real people have shown that they believe "less is less." People prefer options and choice, and more descriptive content gives them more to browse, graze, scan, and find. If readers don't know it's there, it doesn't count. New Web publications can suffer from the "not ready for prime time" syndrome; because they're new, they haven't
built much content. This discourages people from returning. eFuse.com has a lot of content for a new publication and showing more content than people can see in one sitting encourages them to return to read more. So it was an intentional decision to make it clear there is a lot of content on this site and to put that content "up front" on long pages where it could be seen easily without much clicking. This common complaint about content sites is the final reason for long pages. Sites such as c|net break articles into many small pages and publicly claim they do this for readability. In truth (and even c|net admits this, in-house), they do it to increase their page impressions for advertisers. Somehow,
along the way, a myth arose that shorter pages are easier to read. The truth is that if someone is interested in a topic, they want to read about it in depth, so long pages in articles are an asset. They're more convenient, more efficient, more friendly. eFuse.com stories tend to be comprehensive and in-depth (there's no excuse for shallow content on the Web). To make them easier to scan, each article begins with a summary of
topics, linked to subheads within the article. Paragraphs are kept short, and subheads are used frequently. This makes it easy for readers to find the text that most interests them without having to leave the page. The way you set your words on screen can make the difference between them being ignored or read. Yet most Web
designers seem oblivious to this. My background is in typography, so I'm especially careful to make pages easier to read. First, I keep my "line lengths" relatively short—always under 500 pixels wide. You can do this using tables and setting the table length in pixels so it doesn't expand (the way normal tables do). As more people use higher resolution monitors (such as 800 x 600 or 1024 x 768), sites that have text running from one side of the screen to the other are
increasingly difficult to read. A few people with high-res screens will complain that there's a lot of blank space to the right in their browser window. But this is intentional, and because it aids readability, it's actually more efficient than using every inch of the screen and then having no one read it! All of the body text on this site is set at the normal size of 12 point. It's set using the "old-fashioned" sizing so it's scalable.
If people want to make their on-screen type larger or smaller, they can. All text is also set in black, with a few headings in white (because they're less important). It's a bad idea to set type in colors for two reasons: First, type set in colors other than black or white is always harder to read. Second, type set in colors can be mistaken for a link and confuse site visitors.
This goes back to what I said about there not being enough description on many Web pages. A lack of descriptive text quite simply makes it harder to find something. You certainly can't find something that's buried on a page you haven't clicked and loaded. So, I decided to keep the site "shallow" in terms of organization—a home page, section pages, then articles. As the site grows, it may become necessary to have subpages for certain topics, so there isn't an overwhelming or unwieldy
amount of information on the section pages, but even then, I'll keep plenty of description about these subpages on the section pages. This is a very common complaint—usually caused by graphics that are not well thought out or saved in the wrong format. (For more information about graphics and file formats, One way to make pages load quickly, and give your site a cohesive, distinctive look, is to choose a few colors and stick with them. In the case of this site, I used two shades of Now, no matter how efficient your pages are, some people will always write to say they're too slow. But the Web works at different speeds at different times of the day and in different parts of the world—all of which you have no control over (other than You also can make text appear faster on screen by making sure to include height and width settings for all of your graphics. Some programs, such as NetObjects Fusion, do this automatically. I hope this explains the logic and reasoning behind the structure of this site and shows how the goals of accessibility and the needs of the reader have been uppermost in the planning and design of the site. If you have questions or comments, please feel free to write.
About the author
Illustration: Ingo Fast´s Technology from
www.artville.com |
|  |
|
|
| |
 |
Background branding
