Before you start designing your website, think about what your goals are:
Do you want people to check the site for new content every week? Should it look simple or "designed"? Is the majority of the content text-based or imagery? How often do you plan on updating it? Is it important that your site look professional? Is it a personal website or does it represent an organization or business? Will the site be spread out over many pages or all on one page (or something in between)? How will visitors navigate your website? Will visitors want to print out pages from your website?
Try to answer all of these questions for your own site, and look at websites that you like or that serve similar purposes to your website. Do you want to imitate something that already exists or follow a set of conventions or would you like to do something a little different? People expect certain things from different kinds of websites, so consider your audience and what your website will be compared to.
Once you have begun planning the goals of your website and how you will execute them through design decision, it is important to remember that the site's content is what people are really there to see, so don't forget to proofread, edit, and re-edit your work. Typos and other mistakes is one of the easiest ways to make your site look unprofessional and sloppy.
That said, good design & readability go hand-in-hand. While you choose a layout, colors, and fonts, the first question you ask yourself should be whether it is hard to read your site or if it would give someone a headache if they looked at it for too long. As a general rule, light backgrounds and dark text colors are easier to read, so if you aren't a color theory-buff, stick to that formula.
A good technique for planning the structure of your site is to draw a "site map." Is the content split up into many different pages, each with a different topic or theme, or is everything available on one longer web page? If you choose to make one (or a few) longer pages, will you split up the page into sections and use anchor tags to make navigation easier?
Can you visualize how the pages will be connected and how a visitor will get from one to another? It can be useful to imagine the homepage as the doorway to your website with each link to another page as a hallway to other pages (or rooms). Will your site be more like a long series of "hallways" or will you always be able to move to any "room" from any other "room" at any time?
For most websites, it makes sense to split pages up into different categories headed by a major page for each category that allows you to go from any one "room" to any other main category "room" at any give time — by putting a main navigation bar or menu at the top (or side) of the web page.
Molly.com uses a main navigation bar at the top of the page and a recent blog entries navigation bar, recent flickr uploads display, archive menu, and subscription information on the left side. On the right side, she added a list of links to other blogs and events. On each page accessible from the main navigation bar, there is a set of smaller sub-pages (for example, in "articles," Molly has a list of links to articles and their descriptions and a the bottom of the page another set of categories of archived articles — clicking on an article title takes you away from Molly.com and clicking on an archive category takes you to another page within Molly.com).
By separating the structure and content of your code (XHTML) from the style of your site (CSS) you will have an easy time switching between styles and have much more flexibility in the types of designs available to you. For more information on the advantages of organizing your code this way, take a look at the Web Standards page.
CSS is a powerful style sheet language used to "style" XHTML. This means that once you have written an XHTML document, you can use CSS to determine exactly what it looks like, from colors and fonts to layout and which parts of the site are even visible.
If you don't know already (or even if you do), be sure to read What Makes CSS So Great? by Eric Meyer
Once you are familiar with XHTML and the HTML DOM, the reasons for using CSS will become much clearer. If you have never used HTML or XHTML, take a look at these W3Schools tutorials: HTML Tutorial, XHTML Tutorial, HTML DOM Tutorial.
As part of a series of articles on CSS, Eric Meyer wrote a great article, Creating Your First Style Sheet, in addition to his very useful CSS resources.
For everything CSS, Holy CSS, Zeldman! is by far the best resource on the web. It is a comprehensive (and well organized) list of all the best tutorials, guides, and books available.
Open Source Web Design offers a large array of free designs that you can use for your personal or club website. Most of the designs are simple enough that you only need a basic understanding of XHTML and CSS to use the design with your own content. Remember that if you use a design from OSWD, it is recommended that you link back to OSWD.org, but not required.
If you are interested in creating your own CSS-based design, The Layout Reservoir and CSS Layout Techniques are good places to start. These site give simple solutions and clear examples of different CSS layouts. Once you have tried these layouts and are comfortable with CSS positioning, CSS Layouts describes a few more complicated layouts and some information about making sure that your layouts work in all web browsers (including IE).
To get a sense of just how powerful CSS is, take a look at the css Zen Garden, the self-described "demonstration of what can be accomplished visually through CSS-based design." The site invites graphic artists to create unique CSS files that style the sample html file provided on these site. Below are some examples of the wide variety of techniques used in the Zen Garden:
When you choose fonts for your website, you have to remember that a web browser can only display fonts that are installed on that computer. That means that if you choose a font that you have on your computer, but that doesn't come installed on Macs, anybody looking at your site from a Mac will see it with a font different from the one you intended. To avoid this problem, you should become familiar with the fonts that are most common and also specify alternative or backup fonts in your style sheet.
Codestyle.org has compiled a very useful cross-platform font survey.
Aside from whether the fonts on your site are what you intended them to be, it is also very important to choose readable ones! Don't make them too small or use colors that are difficult to read. If you are interested in reading more in-depth about typography on the web, read Erin Kissane's Typography Matters from A List Apart.
Typetester — Compare fonts for the screen lets you try fonts (both from a "safe list" and the fonts installed on your computer) using different sizes, colors, word spacing, etc.
Whether you are making a personal, club, or academic website, your "home page" is important. This is the web page that visitors to your website will see first, and is often also the main page on the site. It is the first place where visitors to your site will decide to continue reading or to move on.
Your home page should let people know what they are looking at, keep them interested, and depending on the intent of your site, keep them coming back!
Molly.com has a good article on personal sites, 10 tips for a great homepage.
Derek Powazek from A List Apart also writes about home pages, but with a larger site in mind: Home Page Goals
If you think visitors will want to print pages from your site, you may want to create a second style sheet for printing. If you have ever noticed that pages printed from NYTimes.com look slightly different (and simpler) than it does on your computer, it is because they use a separate print style sheet that omits color, advertisements, and banners.
Eric Meyer explains how to use style sheets "to go to print" on A List Apart: CSS Design: Going to Print