12 Rules of Thumb for Design

1. Always Design With Your Audience in Mind. Designing pages requires an understanding of your audience because not only does it effect the creation of content, but your audience's computer knowledge and computer equipment will heavily influence the layout of your page. Ask yourself some basic questions when designing a page - what kind of computers will my audience be using, how knowledgeable are they at navigating web pages, will they be using ethernet or modems to download pages, and how long will they wait for a page to come up? These questions will directly contribute to the kind and size of graphics used, page layout considerations, and the navigational scheme employed. Anticipation is an excellent skill when designing a page. Try to anticipate what your audience will think and do when encountering your page. Try to predict any difficulties they might have.

2. Use Consistent Color, Layout, and Navigational Scheme Throughout a Site. When creating a design scheme for a page/site, carry the design throughout the whole site and use elements such as consistent color, layout, and navigational schemes to add coherence to large sites. Nothing turns people off more than a different wallpaper, color scheme, or design on each page, or not being able to figure out how to get from one page to the next. You want users to feel at home and knowledgeable within a site, especially when it comes to finding the information they want. This can be accomplished by placing navigational information in the same place on each page, and making the navigational controls you provide as easy to understand as possible.

3. Make Sure a User Can Get Any Place in Your Site in Two Clicks. Nothing can frustrate users more than having to backtrack through an innumerable number of pages to get to another page. With the use of hypertext, you should be able to give users the ability to jump to any part of a site with relative ease. If your site makes a user click more than twice to get to any page, you may want to revise your navigational scheme.

4. The Look of Your Page is Important and Should Mirror and Compliment Content. Content is obviously the most important aspect of a site, but keep in mind the visual components of your site influence the reception and development of content and meaning as well. Create graphics and a layout that suits the purpose and audience projected for your site. For example, if you're creating a page on Victorian Poetry, you may want to stay away from tie-dye backgrounds or large graphics.

5. Image Size: "Coolness" vs. Download Time. Many users get aggravated when they have to wait prolonged periods of time for graphics to download. Therefore, you have to keep download time in mind when creating graphics, and in selecting the size and number of graphics on any page. A few ways to minimize graphic size for the web include:

• Gif's are generally smaller than Jpeg's. Unless you have a picture that has subtle color shifts, always try to save your images as a Gif.
• Try to use as few colors as possible when designing, and stick to the 216 web safe colors.
• White is the quickest color to download, and text and color generated through HTML takes almost no time to download.
• Spruce up a page with small, graphical headers done with interesting fonts rather than using large images.
• Reuse the same graphics throughout your site to cut download time. Once a graphic is downloaded it's generally kept in the computer's cache (temporary memory). If you reuse the same graphical, navigational bar on all of your inner pages, these graphics will only have to be downloaded once and then will simply be reused out of the computer's memory.
• Cutting a large image up and placing the pieces into a table often gives the illusion that a page is downloading quicker since some pieces will come in quicker than others.
• Utilize graphic compression programs that allow you to change bit depth, format, and selectively compress graphic size. Taking a JPG with millions of colors and converting it to a GIF with 32 colors can cut its download time and size in half with no perceivable difference in appearance. Newer versions of Photoshop, Image Ready, and Fireworks have image compression programs built into them.

6. Be Aware of the Variables. Part of the challenge of web page construction is that you have users viewing pages in any number of different ways depending on their computer, monitor settings, and browser. The burden on the designer is to create pages that look good on as many platforms as possible. A few general rules are:

• Screen Sizes Change - Be aware of the screen size when you are designing a page, and also be aware that a user might be using a screen size anywhere from 640x480 pixels to 1152x870 pixels to view your page. A page might fit nicely into your browser window, but a user with a larger or smaller screen will have a different experience. Check your pages on different screen sizes. As a rule of thumb, you should design for 640x480 pixels. But - even then you have to take into account the browser being used to view your page. Because of the browser's tool bars, viewable screen size of 640x480 might actually only work out to be 590x430 pixels of actual screen size.
• Platform Variations - It is generally the case that pages and graphics appear darker on PCs than when viewed on Macs. Take into account the computer you are designing on and always check your graphics on the platform you are not using.
• Browser Battles - Netscape and Internet Explorer have idiosyncrasies when displaying pages and interpreting html. Be aware that some tags are browser specific, and your page might look slightly different in either browser. Also be aware that certain features such as DHTML, Cascading Style Sheets, and some java scripting only work in version 4 of both browsers.
• Color Variation: Be aware of the color settings of the monitor you are working on and the colors you are using in your page. Browsers generally only support 216 colors, and some users may have their monitors set to display only 256 colors. If you designing with a monitor set to millions of colors and using the majority of them in your pages, the colors of your pages may shift in some browsers and in some monitors.

7. Fix the Position of Your Page Elements When Possible. Because a browser window can be opened or closed to various sizes, the elements of your page will move and look different depending on the size of your browser window. Here are a few ways to combat this:

• Use tables and frames with sizes specified and no resizing selected. This allows you to specify how large an area will be allotted for text and will anchor images. Specifying a size for your tables and frames will allow your page to dictate the proper size for your page instead of the user's browser window size.
• Use the "Clear Gif Trick" to keep an image or text selection in a certain location. This method employs clear gifs that can be made in Photoshop using the Gif 89A export plug-in which allows for the creation of transparent images. A clear gif is basically an image that is invisible, and can be used to space an element from the left margin and top of the page. Centering an image or using <br>'s to space an image sometimes becomes problematic because depending on the browser size, the center of the page may not always be the same. To more accurately center an image or place it a certain amount of distance from the top, you can create a table and use two clear gif's to position the image on the page. The image on the left shows a table where two clear gif's are spacing an image from the left margin and top. By increasing or decreasing the size of these gif's this image can be moved an exact distance up or down, right or left. Because the clear gif's are transparent, you can alter the size of them in the html code or editor without worrying about the integrity of the image. The image stays in place because if the browser window is shrunk, the image runs into the gif's and has no place to go. An increase in browser size will not effect the position of the image.

8. Stay Current and Do Your Homework. It's important to stay current on what is happening in the world of web page design. Your designs will evolve if you take a few steps to promote your growth as a designer:

• Visit lots of sites, especially those by people in the web design business. Try to think about what is happening in the site in terms of layout, design, and graphics. View the source codes of pages you like, and develop a folder of bookmarks for pages you find especially well designed and inspiring.
• There a number of excellent sites on web design. Bookmark these sites and visit them regularly for new material. Here are a few to get you started:

  Glass Dog	A well designed, visually interesting site that has a great how-to section and interesting rants from the site's author.
  Yale Web Design Manual	A site that deals with the rhetoric of web site design. This site explores how different aspects of a web site effect how users interact with a site.
  WebCom	A comprehensive resource for publishing on the World Wide Web: tutorials, hints, reference, software tools, and more.
  Jeffrey Zeldman Presents...	Check out the "Ask the Web Doctor" Section as well as Jeffrey's great collection of free graphics.
  HTML Goodies	A nice how-to site whose author encourages theft of the tutorials he provides.
  David Siegel - Creating Killer Web Sites	A web design site that has a lot of handy how-to hints as well as a nice assortment of well designed sites which Siegel analyzes.
  Useit.com	Includes "alertbox" for recent technological developments, web usability book reviews, reports, and interviews.
  Web Usabilty Oversite	This site seeks to collect information produced by those in the field of human-computer interaction on usability issues surrounding Web site development.
  Usable Web	A collection of links about information architecture, human factors, user interface issues, and usable design specific to the World Wide Web.
  patricklynch.net	Inlcudes an annotated bibliography of the references Web designers find most useful.

• Join a listserv dedicated to web design. Check out this "Web Design & Technology Consulting" site which provides Web Design-related distribution lists that offer a wealth of information.
• Visit your local bookstore and read magazines and books dedicated to web design, graphic design, and page construction.
• Collect pages from magazine ads that might convert well to web pages.
• Find people doing web design and ask questions, questions, questions.
• Try at least one new thing in every site you make.

9. Be Creative and Have Fun. People are drawn to this medium because it's a chance to have fun and be creative. Let your work reflect your personality and your page design will become more inspiring to do. You can take a plain, simple page and with a bit of effort and creativity make it an attention grabber. Revisit your old designs and incorporate new design ideas into them.

10. Get Feedback and Take Criticism Well. Pages you create may make sense to you, but their success relies in part on what other people think about them. If possible have someone go through your site and answer specific questions on the site's navigation scheme, layout, and overall look. Be receptive to feedback and make changes that seem appropriate.

11. Keep It Simple. Design your pages in such a manner that they're easy to understand and download quickly. One of the most common layouts is the "inverted L". Designers use it many times because it is very simple and easy to understand, making navigation for the user intuitive.

An example of a typical "inverted L" page.

12. Keep All Linked Files Together. It is important that you upload all files that are related and keep them together in the same folder. For example, if you have a main homepage with many pictures and other sub pages linked to it, you need to upload every picture and related file in addition to the main home page. If you want to keep images in a separate folder (for example, a folder named "images"), then the file path to that image (when it is inserted in an html page) MUST indicate that the computer will have to retrieve the image from another folder (in this case, the "images" folder). So the file path would be "images/dog.jpg" instead of just "dog.jpg"