The Internet is becoming littered. Not only is there garbage everywhere you turn when it comes to content, but now bad web design is slowly working its way more and more into the mainstream Internet world. Gone seem to be the days of hand coding, further gone are the basics of design, let alone design for the web. These are troubled times, where idiots are being paid money to pull a site out of their ass (or from another "cool site" on the Internet) and implement it, not even knowing what they are doing. I don't speak with mounds of experience, but I do speak with a limited degree of confidence that there are designs out there that look like crap. So, this post is designed with you, the moron who thinks embedded MIDI files are hip, in mind. This was originally going to be a simple Do / Do-Not list, but instead, I thought it best to provide some basic ideas of how to actually create a page for the Internet. If you were referred here by someone, don't take offense, a quick look through some of my oldest mistakes found me making many of the same errors I will be talking about. So, without further delay, let's begin. The idea called CRAP CRAP isn't what a design looks like, but instead refers to what a design contains. Contrast, Repetition, Alignment, and Proximity all relate to the overall look and feel of a designed object. While important, these basic concepts are often overlooked. Don't put dark blue text on black, even if you like the color dark blue. Don't even do it if you like the color black. If you want people to read your site, there needs to be a strong enough difference in the text and background that it becomes easy to read. If this concept is too difficult, it can be simplified down to pastels and jewel colors on black, darks and rich colors on white. The second of the elements, Repetition, means more than just using the same animated GIF in seven-houjillion different places. If you have a color, a shape, or an object, use it more than once. Be consistent in your design, and it will make all pages in your web site feel like they are part of the same site. Your title belongs in the same place every time, and your formatting shouldn't be changing either. Fonts should be 1-3 in number, and should be repeated where they accent the layout. For a good example of repetition (plus color), visit Post-Nuke's web site. The use of icons and shapes make every page feel like part of the larger layout.
The third element is called Alignment, and it doesn't mean you should center align everything on your page. Instead, it means make sure your edges line up along some plane of existence. To hilight this element, look at a few of the designs on the CSS Zen Garden. While you need not strive for using something as fancy as cascading style sheets in your layout, instead take note of how the elements of the page line up and feel complete. There is a path for the user to follow, and it is very clear where each piece of the page is. If you can't explain why something is center or right aligned, maybe it shouldn't be.
The final piece of CRAP is the P, for proximity. Referring more to where you place things than how or why, proximity is more of a logical arrangement than it is aesthetic. For example, one does not scatter their navigation around the page, but instead keeps it in one central area. This makes it easy for the reader to identify the information in chunks. An example of this is immediately visible on Amazon.com where the logical grouping of objects makes things easier, from navigation to the arrangement of items in your shopping cart and wish list.
You don't have to follow these ideas, but you usually need a good reason to be breaking the rules. Sites that fail the basic principles of design end up never as successful as they could be, often the fault of the design, not the fault of the content.
Additional Resources - CIS 421 Lecture Notes - Graphic Design, Web Design, and Usability
Paper First It is maddening to talk to someone who can't draw their layout, and you'd be surprised by the number of people who can't. This is a very hard fact to face, but if you can't at least conceptually draw your web site on a piece of paper, you have absolutely no chance of creating it on the computer. Your drawing doesn't have to be glamorous, nor does it have to actually include the images on the paper. Instead, what you need is an idea of where everything will go on the page. Where will navigation be? Where is the content? Where will any sort of extra information go? This is especially important for sites that have dynamic content, such as blogs and photo galleries.
Color Sense This seems simple, and I mentioned it before, but it is worth mentioning a second time. The colors you choose for your site need to be visually appealing. Don't do something like cyan on yellow. While that is perhaps a slight exaggeration, the same eye-blowing effect can be achieved using bright purple on blue, cyan on white, yellow on white, and any color whose red, green, or blue is set to 255. These pure colors don't work, and while there are rare exceptions to this, on the whole these colors are better left avoided. If you are like me, and often find things having to do with color a very daunting task, you can look at sites like Easy RGB which will show you complementary colors for the base color you decide on. If all else fails, you can always ask a good friend whose artistic talent you trust.
Do and Don't These things weren't as big as the others as far as depth go, and so they are lumped into one area.
Do have people look at your page with different browsers. What's the point if your page doesn't work on half the computing platforms?
Don't use Java on your page unless you are using a Java application. Java wasn't meant for stupid ripple effects on your banner image, nor was it made to add cool effect. The same thing can be said about Macromedia Flash. Don't use a technology just because it is cool. Use it because it will be useful and help the page.
Don't use DHTML. Dynamic HTML refers to Javascript that does cool things like make popup menus, sliding navigation bars, and things like that. DHTML support is not guaranteed, and many of the scripts on sites like dynamicdrive.com work on only one browser or the other. Javascript does not have an effective document object model, and so you shouldn't be using it to render things on the screen.
Do take advantage of documented standards, and do take advantage of sites such as Blooberry which contain a complete property reference for all HTML tags. This site is especially invaluable if you are coding by hand.
Don't use a WYSIWYG editor for your web page. Dreamweaver, while one of the better options, still is a horrible solution to code. What it does work for is simple first generation web sites with no dynamic content, no fancy code, just one layer. This page and its sub-pages were made using Dreamweaver. WYSIWYG editors are usually unacceptable for anything more complex than this. Dreamweaver should not do any server side code. It should not use PHP, ASP, ColdFusion, etc, no matter what Macromedia would like to tell you otherwise.
Do look at hundreds of web sites. Just start clicking around the Internet. Start from a friend's page, and then look at their links, follow one, and keep going. Before you know it, you have seen several sites and will have an idea of what does and doesn't work.
Do use the entire browser in your design. You are cheating yourself out of precious screen space the instant you forcefully restrict yourself to only a certain pixel width.
Don't misuse widgets. For the sake of this point, let's define widgets as anything that the user expects to behave a certain way. For example, a dropdown menu contains a list of choices, and a radio button let's you select a single choice. I can't emphasize this enough: do not fuck with these things. Don't alter the link mouseover from a finger to a help symbol unless clicking on the link is going to give you help. Don't make it a resize cursor, don't make it a text beam, because all you are doing is pissing off your readers, and often pissing away your Macintosh users. You think it's cute that your text changes color with a gradient effect, but you never look at the css behavior. You just use it and you have successfully added nothing to your page. In fact, you just made it looks worse. This problem is amplified even more when the widget is supposed to be functional. For example, when in a form asking for only a few fields, one expects pressing enter to send the information. If you want to see a misbehaving widget, just look at Target Visa's Account Management. Pressing enter does nothing in the form. Try it yourself. Instead, the information is tied to a Javascript event on a button. Of course, this means that if you are someone who has Javascript off (because of popup windows), you will never be able to use Target's online account system.
While this isn't complete, it should be a decent start. Feel free to add your own comments / ideas to the list as well. The best way to improve design is to share your ideas about it with others.
In response to "On the topic of web design":
To be a human without passion is to be dead.