Last week we started talking about making your web pages in
Photoshop before you code them for the web. If you have not read
that, you may want to do that now.
We got as far as to make some sketches of ideas
that you might have. At this point don't throw anything away.
Some of your ideas will work great, some of them will be
terrible. Right now you just want to get them down. Let's move
on to step 2.
Step 2:
Now start to think about how you are going to get your sketches
from the paper into the computer. First thing you need to do is
decide what width you want to make your pages. We talked a
little bit about this last week. I make mine 750 pixels wide.
There is a way to determine what percentage this will be later,
if you decide that you are going to lay your pages out with
percentages rather than pixels. We will talk about that in a few
steps.
First you need to gather all the stuff you need.
If you need photos, get those. Find the fonts that you want
etc... Then you can really begin to design your pages in
Photoshop. Begin to lay the page out exactly as you want to have
it online. Create your headers, your text areas, your navigation
etc... If you need to put some text in a text area just to see
how it looks, you can do that now also. Use the font you want to
use in your HTML text, try some different colors etc...
You will undoubtedly find that you make
revisions as you go. You want to balance the page nicely.
Remember that navigation is important, but you want to integrate
it nicely within your pages. Make the navigation easy to find,
but you don't have to design around it. Try your best to make it
part of the artistic whole. This isn't easy and it takes
practice, but it is really important. Nobody wants to go to a
site where they can't find the navigation. But nobody wants to
look at a site that is designed around the navigation. It's just
boring to do. So keep that in mind.
Remember also that your page will be longer that
it is wide (for the most part). This isn't always true, but for
most documents it is. So make sure that your page is not too
length dependent on the design aspect. For example, if you have
everything within a box that is 500 pixels in height, you are
going to be limited to that in the future. When you start to get
a ton of content, it will stop working. Try to think ahead. When
you design the page, think about having it look good both when
it is a short page that does not scroll at all vertically, to a
page that scrolls a long way vertically.
Here's a little trick that I like to do. It
sounds hokey but it works really well for me. Once you have your
layout done, close it and leave it alone for a few hours or a
day. When you go back to open it, do so with your eyes closed.
Wait until you know it has loaded completely on to the screen
and open your eyes. Listen to how you "feel" about the page.
What does it convey? How do your eyes move around the screen? Is
there any areas that are too "heavy" and not enough negative
space? Is it too empty, with too much negative space? And most
importantly, how does it make you react. If you have a smile of
pride on your face, you are on the right track! If you think it
is terrible, you aren't.
Play around with tweaking and changing some
stuff and then repeat the process. You will find that over time,
the page emerges as a real work of art.
Next week we move on to Step 3. |