Web Design Tips for the Print Designer

Although there are many web design packages out there (Image Ready, Fireworks) we have found that good old fashioned Photoshop is the best tool to use. We recommend Photoshop over programs like Illustrator or Freehand because it is pixel based. Web graphics (except for Flash animation where the opposite is true) are pixel based graphics (gifs and jpegs). As you design in Photoshop you will be seeing exactly how the site will look when produced.

Tech note: preparing a Photoshop document for a website layout. Set your "units & rulers" preference to pixels and open a new 72 dpi document in RGB mode to 1024 pixels x 768 pixels. This is not the minimum size, but most machines will display this browser setting with no problem. (It may be helpful to drop a couple guides at 800 x 600 to remind you of the area that the smallest screens will display.

Typography can be tricky on the web because you need to distinguish between graphic text and HTML text. HTML text can be controlled in terms of size, color, leading, and font (to some extent). Unfortunately line breaks are just about impossible to control in HTML text. This is for two reasons, one is that most text areas will "stretch" with the browser as it is widened or narrowed by the user. The second reason is that it is possible to place text into a table that does not stretch, but the different ways type is handled between Macintosh and Windows (and even between versions) makes it impossible to specifically control the line breaks in a block of text.

Although you can specify any font in HTML text you should normally choose between Arial, Verdana, Helvetica, or Times because for the text to display in the chosen font it must be installed on the user's system. These four are all likely to be installed.

If you do want to control font and line breaks you will need to treat type graphically. This is often used for navigation graphics, headlines or sub heads. Keep in mind though that any text that is specified as a graphic will not be searchable by the search engines and cannot be edited through a content management system.

Tech note: precise control of graphic text. By duplicating the layers of type graphics and adjusting the layer opacity of the duplicated layer you can control the intensity of the type color.

When creating small graphic type, adjust the point size by 0.1 increments until it looks best. (Sometimes reducing the size will improve the clarity of the type due to the relative juxtaposition of the pixels.) Keep all type layers unrendered so that they can be used later to create additional graphics consistently.

One of the most important things to remember when designing for the web is that although your Photoshop document has a fixed right and bottom, a web browser does not. If you design a background that assumes that a browser will be opened to a certain size you may be making too many assumptions. Left and top are static, but right and bottom will change from browser to browser.

Because of this dynamic you will need to be careful how you might use curves as background elements. The illustrations below show the problem that results when designing background elements with curves.

It can be tempting to break out of the grid like structures imposed by the web by throwing in some curves here and there. But be careful, curves will continue to extend past the arbitrary box used in the layout. Figure 2 demonstrates the problem when you consider a browser opened wider than the predefined layout.

There is another limitation to these kinds of design elements. In order to accomplish this design the entire curve would need to be a part of a background graphic unless coded properly. Background graphics repeat themselves (see figure 3), this is why there are so many bad web pages with repeating logos in the background. So wherever your curved background ends, if content scrolls past it, or the browser is opened past it, it will begin to repeat itself as in figure three.

Background graphics introduce another layout consideration for web design. There are really only two layers on a web page, the background graphic, and everything else. Everything else will lay on top of the background graphic. This means that if you want two graphics to overlap, one will be the background graphic (and will repeat) and the other will be the main HTML. Things like vignettes, transparencies, and drop shadows will be difficult to reproduce in HTML. This is due to the fact that true image transparency is not yet supported in web images. If you do have images or textures in your background graphic don't design drop shadow effects over them. Any of these effects should always occur over a flat background color.

You will need to remember that all graphics are defined by squares. So if you have two independent graphics, make sure that the boxes that contain them do not overlap each other.

Frames can improve navigation since the navigation piece always stays in one place while the rest of the content scrolls. However, we recommend avoiding the use of frames for the following reasons...

• The URL of the page you're on doesn't display at the top of the browser.
• You can only bookmark the index frame, not the specific page you may be interested in.
• Sometimes the framed borders take up too much of the screen, which can severely limit the amount of space available for the rest of the page to load.
• Frames make a web page look bad if they are used improperly.
• It is hard to print a framed site.
• Unless you are careful, search engines won't see the content in a framed site.
• Any secure forms in the site will often not display as secure if they are in a frame.

Although there are some solutions for many of these problems we have tended to stay away from frames, and instead provide text-based navigation at the bottom of each page and back to top links.

The use of a splash page is hotly debated, and in general the consensus is not to use them. This is a good rule of thumb, but we have written an article about splash pages and when their use may be appropriate.

A major aspect of web design is actually quite detached from visual design. Information design, how content is structured, categorized, identified and related, is an important consideration for any website's design. These issues need to be thought through carefully for the visual design to be able to do its job effectively. There are far too many issues dealing with information design to address completely here. (We picked up this topic again in Web Deign Tips part 2.)

Following are a few basic information design concepts to keep in mind to help you with the navigation of your design. Try and distinguish between navigation links that deal with site tools (such as home, contact, search, or site map) and those relating to content. Site tools are common to almost every web site and can often be represented by icons without losing any clarity. By separating and distinguishing these navigation elements you will have more "slots" for content related navigation (products, history, job opportunities, etc). We recommend keeping your main navigation elements to seven or less. In general icons do not work well for these areas. If you do create section icons be sure to use words to describe them as well.

Although Photoshop is the ideal tool for designing websites, Illustrator (or Freehand) is ideal for designing Flash animations. Flash is a vector based plugin that is pre loaded in just about every browser. It allows for smooth animation, sound clips, and greater interactivity than is possible in a standard web page. There are some disadvantages with using Flash so you have to weigh its use carefully. Flash sites are not indexed by search engines, individual pages within a Flash site cannot be book marked, and other browser tools like forward and back do not work in Flash files. Flash content is also harder to update, and can only be updated in limited ways using content management systems. Also, don't overuse all the wizz bang possibilities just because they are there. This can result in files that are far too large. This is extremely common in Flash based sites. We recommend using Flash for embedded presentations, limited conceptual animations, splash pages (when they are appropriate), and when functionality demands its use.

There is no doubt that designing for the web takes a bit of getting used to. But you certainly don't have to become a computer programmer to work effectively in this medium. Just try and keep these rules of thumb in mind and try not to get "too tight" just because you're not sure if what you are designing will work. There is usually a way to solve, or work around, most design challenges.

If you're not sure if your designs are going to translate to the web, feel free to send them to Newfangled for a design review. We'll give you the feedback you need, and help you avoid some of the pitfalls common to transitioning from print design to the web. Most of all, make sure you have fun doing it!