|
Now that you have seen what's out there, and are suitably inspired,
it's time to design your own web site. To do this you need to
create a draft in Photoshop.
Click
here to see the draft I made in photoshop for my site, When
I was happy with the way it looked, I chopped each individual
item out, like the header and nav buttons and saved them separately,
ready to be put into Dreamweaver (the programme that you make
the actual website in). But first we will make our draft:
1.
Open New Photoshop File
Open
Photoshop and go to File > New and in the window under custom
select
800 x 600 as below:

That
will open a new document the right size and resolution for a
web site, we choose 800 x 600 because that's the most common
sized computer monitor in use, we want to design for the smaller
monitors so they can view our sites without scrolling.
2.
Header
This is a Header ^
The first
thing I normally create when starting a new website is the header,
which involves selecting a font and maybe an image or two to
go with it. Choosing a suitable font is important, it needs
to go with the style of website you want to create and obviously
be legible.
Having the header the way you want it gives you a good base
to design the rest of the site.
So if you haven't already: type in your site name, select the
font and position the header, left, right or centre?
3. Navigation buttons
<
These are navigation buttons, or a menu.
One
of the most important elements of your site, they need to be
easy to read and uniformly placed - as in the same place on
each page so your visitor doesn't get confused or lost, unless
that's what you want. Like the Header, select an appropriate
font and an image if you want it.
Do you
want each button to have a different image with it? Or each
button to have a different colour or to be identical?
At this stage don't worry too much about what the button will
say, you can just use the word 'button' if you want, all we
are doing is sorting out the look of the site, the naming of
pages and buttons can come later, and usually changes as the
site is being built.
Position the buttons on the page, the usual places are the left
side, right side
or up the top under
the header.
Here's some examples of the main placements for your menu:
Left
Nav | Right
Nav | Top
Nav
So
now you have your header and menu sorted, you've done the major
part of the design for your site, these are elements that do
not change throughout your site, the only thing that will change
is the content.
So
in summary the main points you need to remember when designing
and building your site are:
- Ease
of use for the user of your site
- A
suitable easy to read Header.
- Navigation
that stays in the same place throughout the site and is also
clear and easy to understand.
- The
structure of your site is uniform.
- The
three click rule, try to keep the click through's down to
three.
As I said
above after you have made the draft in photoshop, you would
then chop up the different parts, save each one, then get into
DreamWeaver and start to build the site - but that's another
lesson.
That's all.
www.danieltobin.com
Back
to the Top ^ |