Design Tips

Define your audience - who will be using your site? What browsers and connection speeds will be most common? What are they looking for? (Go to webmonkey for a good tutorial on information architecture.)

Sketch out your design in Photoshop or on a pad before putting your site together with HTML or a program such as Dreamweaver. If you're stuck for ideas, look around - chances are that someone has a website on the Internet that will stir the creative juices in you.

Create simple pages - Simple pages download faster and give a "clean" look, which often makes a nice visual presentation. From designer Grady Clark - "When the final design seems too simple for the amount of work you've put in, then you know you're done. "

Make sure you have enough "breathing room" or white-space between major page elements, such as banner, navigation, and main text area. Don't be afraid to embed a table with cellpadding into another table to achieve this. BUT too many tables will cause your page to load slower so try and use a "transparent spacer gif" as much as possible to force your layout.

Design for a 640x480 resolution - Though many people now use 800x600 resolution there are people who still have older machines.

Let you designs scale for different users (called a "liquid" design) by having your tables be percents instead of fixed widths.

Keep your page under 50K. It is best to keep the weight of your page, which includes all code and images, under 50K. Keep this in mind when using photos, which are often the heaviest element to a page. Don't be afraid to embed a small image and then click to an enlarged version.

Be aware of your vertical space. The less scrolling the better. The smaller the height of your banner, the better (especially if that banner appears on every page of that site.) Really important stuff goes on the front page, and the most important stuff goes on the top or "above the fold," as newspaper folks say.

Be aware of how your audience's eyes will travel across the page. People read left to right and top to bottom. They almost always look at the upper-left corner first, which is a good place to put something really important.

Form v. Content - The point of a site is to make the content shine. A good design will lead the user quickly to important content.

Keep your navigation clear and consistent. Plan out your navigation before you begin putting together the site. Draw out a flow chart showing which pages will connect to other pages. How deep will the site go? Does your design have a proper structure to handle new content? Use HTML for navigation as much as possible without sacrificing your design - it is easier to load and change.

Link and button names should be clear and simple enough that a user coming to your site for the first time will understand where to go.

Let the user know where they are. Often times a user will not enter your site through the homepage. Let the user know where they are through consistent navigation, titles, and breadcrumbs.

When linking to a pdf or an external site, let the user know. e.g.
Home
Publications
CV (pdf version)

Know the differences between gifs and jpegs. Use jpeg compression for photos and gif compression for line art and text.

When using thumbnail images crop the image in a graphics program to the height and width that the thumbnail will be displayed at. DO NOT take a large image and shrink it by changing the width in height in HTML or DreamWeaver. If the thumbnail clicks to a larger image, then make 2 images - one small and one large.

Test your site - Once you have a base design done in HTML make sure to check it out in as many browsers as possible. What looks good on your machine, may break on another. Netscape and Internet Explorer read HTML code differently - so do Macs and PCs.

Learn to accept and want criticism - You can learn a lot from other, especially those who have built their own sites. Ask opinions of your work at several points during the design process.

Be thorough and nitpick your site. Keep striving for a fast and simple site that is attractive and useful.

Learn HTML - Although tools, such as Dreamweaver, allow you to build sites with no HTML experience, a strong designer is one who can understand the code.

Remember it always takes twice as long as you think it's going to.

Surf the internet - be a user and not just a developer. A good way to keep up on technology and to inspire your designs is to look at existing sites. Be aware of what you like and don't like and why you like or dislike a site.

Rules can be broken, but there must be a good reason.

Read online tutorials and web design books. Although you may not agree with everyone's rules, you will begin to see common design rules stated over and over again.

Work with others - don't be afraid to ask full-time web people for advice and help. That is part of the WHOI web team's job.

Next