Also, as I said, we will need some architectural sketches. If you don't feel strong in that aspect or you just don't have a scanner- find some sketches around the internet. Surely there's tons of them. Or, you can use your knowledge about the perspective and try to craft your very own sketch. It is a lot of fun, believe me, and the final results can be pretty impressive. You can find a lot of detailed movies about step-by-step architectural sketches around the internet. Just follow one or two and then draw something by your own. Oh, start from simple shapes as I described above. Make some spheres and cubes. Combine them later into more complex objects. Have fun here.

Step 4 - A bit of design theory

Before you will draw a very first pixel of your design you have to remember about few things:

• Your design should be elastic in size (in case of content changes)
• Your design should be adapted to 15" screens (1024x768) / avoid horizontal scrollbars when they are unnecessary
• Consider the good contrast between colors of fonts and background
• Make user-friendly designs, where visitor don't have to spend five minutes to find a search form
• Avoid using aggressive colors, visitor should feel comfortable while reading content
• List all elements that must appear in design and arrange them
• Give your best for every of your designs
• Have in mind that after design process you (or someone else) will probably have to cut your layout
• Architectural tip - design comes from usability (avoid tons of messy unnecessary stuff that distract visitor)
• Stick to the standards (more or less, but try to- your design will be more intuitional, for example logo on the left top position)
• Create some kind of route for your visitor to make him feel like on tour in museum; the path should be clear
• What comes with above- make a clear navigation
• Think about the aims of website
• Think about advertising on website but do not make it too excessive
• Consider the type of content on webpage
• Minimize the number of type-faces
• Think about future html elements like h1, p, a
• Think about future CSS styles and JavaScript effects
• Avoid splash screen pages. They could be beautiful but in most of cases they are useless
• Feel like an inventor
• Think about the viewer

These are just my personal opinions, but often exist as a good manners of web design.

Step 5 - Creating a new document

First of all we have to think about sizes. It is important to place guides easy way without a lot of math stuff. We will start with 980px wfide document to make it fit on 1024px screens. We will also consider borders of design- in this case I took 20px each side. At last leave 20px for text margins each side. So, go to File>New and create a new document as shown below. Remember: It does not matter what you will type into resolution input. You can type 500 as well as 0,02. The screens are made of pixels and this is the only measurement. It is the other case if you would like to make your website printable, but in most of cases it is unnecessary to make printable designs- instead it is common to make CSS styles specially for print. The height should be something like 3000px. It is fair enough to make a design preview. Later on we can easily modify this value.

Go to the View > New guide twice time and add one guide vertically in position 0px, and one in 100% (which is equal to 900px in this case).

Those were a guides for text margins. Now we will add them to document size and also add the inner guides for border. Head to the Image > Canvas Size and type the following: