Tutorial - creating a site

Pre-stuff

A few things to keep in mind as you create a site design:

Designing a proper site, I believe, is about wit. Does it capture the theme of what it's about through the colors, font, layout, and all other design elements? For example, dark colors and blood-splattered buttons may go well with a gothic or horror theme, but would they work on a site about alternative energy? I've found, the most elegant answer is oftentimes the most startlingly obvious one.

Need inspiration? Here are a few ideas: go to a museum, look through an art history book, go to a large city and look up at the buildings, go on a nature walk. Design is everywhere.

When creating a site, you need to keep your audience in mind. Are they likely to have high speed connections or dial up modems? These is no set page file size for either however, if you are expecting a high number of people on dial up modems, it is probably best to aim for a page that is no larger than about 70k total.

Consider the resolution that people will be viewing your site with. Unless you are designing for an audience with very old computers and monitors, a width that will look good at most monitor resolutions is 950 pixels wide.

The importance of site organization and navigation can not be overstated, however there are far too many variables involved with this to go into it here.

Designing a site ultimately breaks down into a lot of judgement calls as to what is appropriate to it specifically.

Creating the site

There are a lot of ways to design a site. This tutorial is just a collection of my own little tips and tricks.

A site can be designed using only code for the backgrounds and text colors. Using only code instead of images can save a lot of file size and download time and therefore has its advantages. I tend to like using images for the major design elements such as the backgrounds. For my own site, I'm less concerned about the download time overall but will combine both images and code for the final look.

One way to design a site is to create or change your graphic/image/background in a graphics program, then open your html/CSS editor and drop the images into the code, then view the page in your browser. This can get pretty tedious. Creating a site layout in Photoshop, however, is handy because you can see how the design will look as you go along.

Create a new file in Photoshop (or any other graphics program) that is 950 pixels wide X 800 pixels tall. Drop in graphics, text, or whatever until it is how you want it to look.

Below is a screenshot of my site's Photoshop file. I could also drop in the buttons and text to see how they look but won't for this example.

A note about image sizes:

Remember as you create your background, when it comes to image kilobyte size, smaller is always better. In general, the more variation there is between colors, the bigger the file size will be. I mention the following because when you are working with large images (such as a 950 pixels wide background) finding ways to reduce the final filesize can be really important. What this means is that less contrast between the colors keeps the file size down. With the above background, I achieved less contrast and lightened some of the layers by tweaking layer opacity. Below are some small scale examples.

150 pixel x 150 pixel black block, saved for web at jpg high = 429 bytes

150 pixel x 150 pixel white block, saved for web at jpg high = 429 bytes

150 pixel x 150 pixel gray and white striped block, saved for web at jpg high = 1.488 kilobytes

150 pixel x 150 pixel black and white striped block, saved for web at jpg high = 1.799 kilobytes

150 pixel x 150 pixel gray and white checked block, saved for web at jpg high = 3.042 kilobytes

150 pixel x 150 pixel black and white checked block, saved for web at jpg high = 5.874 kilobytes

Go to next page

www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK