Design an overall site shell which contains a global header, navigation, content, and footer area. Attempt to reuse this overall structure as the foundation of your site.
Attempt to create a balance between strong visuals and textual content.
Keep watch over your information density, and take steps to lessen it's impact. Use items like the CSS line-height property to help lessen the density of large expanses of text.
Think about build-ablity at every turn.
Remember, a design must be built in HTML and CSS in order to be fully realized. Take steps to create a design which is appealing yet has a clear path its built HTML version.
Technical considerations when designing for the web
File size
File size is your main guiding principal. The lower your file size, the faster your site loads. Try to use imagery only when necessary.
Use blocks of color to indicate sections / content divisions, since color blocks are free.
Use images sparingly. Try to reuse image assets if possible.
Image types
What kind of images you use may effect file size. For example, trying to compress a photograph using GIF crompression may result in a larger file than if you you JPEG. Try to follow the format guidlines detailed above.
Font usage
Using non-standard fonts requires increased image use and thus increases file size. Therefore, use fonts installed on the user's computer instead.
The following fonts are considered safe for web page use:
Verdana
Arial
Helvetica
Times New Roman
Courier
Design with less
Remember : content is king
Use more 2-dimensional design. Stay away from photorealistic graphics.
Make your content the viewable item that stands out on your site... don't empasize the container that holds your content.
Design smart and keep in mind that less is more.
Less actually give a site a "clean" look, which user's appreciate.
Web Graphic Types
GIF - One of the older image formats on the web; supports up to 255 colors per image and a one-channel matte
Uses run-length compression
Great for compressing images that use large blocks of color; bad for compressing images that have lots of color and large variation between pixels.
Great for compressing elements that contain a lot of text.
Very widely supported
Can be animated
JPEG - Supports millions of colors but no transparency mattes
Uses block compression, which attempts to remove pixels and blur the result.
Can result in blurry imagery, especially in images that contain large blocks of color
Use for photo compression
PNG - A newer web format that supports millions or colors plus a 24 bit mask layer
Basically, supports the same level of transparency as Photoshop
Open source format; not owned by any one company
The downside: not supported in all browsers yet.
Rule of thumb:
Use GIF compression for all interface elements, especially text heavy ones.
Use JPEG for photorealistic, non-interface elements.