|
A while back somebody asked me a simple
question. "I want to make images for my web pages, but what size
do I make them?" I remember having this same problem when I was
first starting to lay pages out. How big do I make my header?
What is a good width for a navigation area at the side of my
page? How big should I make my text areas? My answer was also
simple. Lay it all out in Photoshop first.
The concept is really simple. If you want to
make your pages artistic, make them pieces of art first. Lay
them out into web pages later. That doesn't mean you can turn an
abstract rendition directly into an interface, although it
doesn't mean you can't either. With some forward thinking and
careful planning, you can make your web pages 10 times as good,
in less time than you ever have.
To start let's talk about the web page size and
screen resolutions. Now most people that are going to look at
your site are going to be doing it with a screen that has an 800
x 600 pixel resolution. So if you make your pages 1024 pixels
wide, these people will have to scroll sideways to view your
pages. Let me tell you the first rule of web design... never
make people scroll sideways. Sometime it is going to happen...
but if you make them scroll more than a few pixels, they are
going to leave! So just don't do it. I like to make my pages
about 750 pixels wide.
Now keep in mind, that the best pages will fit
any screen resolution. So when you comp your pages, keep this in
mind. The way this works is that you design HTML formatting into
your pages. Stop feeling like HTML is hindering your artistic
ability and start using it to your advantage. Learn the
limitations and work well with what is left. When you do this,
you can have part of your art be HTML. A good example of this is
when designers make rounded edges on boxes in a web page. We
only make the very corners of the box graphic outside of HTML.
The rest is done with HTML. This helps you to minimize
bandwidth. An even better example is when browsers that are
resized, change their size of the page to fit the screen
perfectly. You do this by cutting your pages apart and making
all the possible measurements of table cells etc... in
percentages rather than in actual pixel sizes. Restrict your use
of actual pixel sizes only to the areas where it is absolutely
necessary. We will talk more about this later.
Now rather than go through a whole lesson in web
design theory, I'd rather show you how to lay your pages out in
Photoshop first. I have included a reduced version of my current
website that I took from the original PSD file. Think of it as a
blueprint for a building. You don't just go out and start
building houses. You have to plan, plan, plan. Once you are
done, you build.
Step 1: Sketching.
The very first thing you want to do to get started designning
your pagess, is to sketch out some ideas on paper. Yeah... real
paper that comes from a tree. Do this late at night in a smoky
bar or cafe. Actually, this isn't necessary, but being in a
place where you can get inspired helps tremendously. Jot down as
many ideas as you can. Don't be disappointed by your complete
lack of ability to draw with a ballpoint pen on a napkin. It
really isn't important. Remember learning about brainstorming
back in elementary school? Well this is when you can put it to
good use. After a while, you may come to be able to put ideas on
the screen as you are thinking of them, but don't do that for as
long as you can stand it. I do a lot of sketching at school
(when I should be listening to lectures), and late at night
(when I should be sleeping). Once you have some skecthes done,
it's time to move on to Step 2.
Step 2 will have to come next week. In the
meantime, jot down some ideas. Don't throw anything away at this
point. |