Tip:
Highlight text to annotate it
X
I'm going to draw out the things I normally do and i'm going to use a white board
because it's easier to see on the camera Normally i do this on paper
four sheets of blank A4
copy paper
and I keep all the old versions so I can see how my thinking
developed on a certain thing
and
So the first thing i would do is on simply draw a big square and by the way
my drawing and writing is quite bad so keep that in mind. I'm a
programmer not a graphic designer
that's pretty unusual just right ok so
Ok so here's our home page
now one
simple thing you'll see on almost every website you visit
is you'll notice that the logo
is up in the
that top left hand corner. That's a standard thing you see in most websites
Another standard thing you'll see is there's a navigation bar or menu
Some people have it down the left hand side. Usually always see them across
the top aswell. You see it on Amazon and other sites with that
So this is going to be our navigation menu or Nav menu
and we can consider some of the pages we're going to have here
Almost every
site will have a contact page
let's write 'Contact' there
that almost everyone will have an About
so About and Contact are pretty standard
Other things you might have in there
let's say we're doing
a site for a business that sells bicycles
and so what we'll have are
mountain bikes
I'll shorten to m_t_b
and we'll have
electric bikes
because this is a very green country
and a green company. So we've got
mountain bikes, electric bikes, we've got about us and contact us.
So there some of the standard pages. So we've just drawn that in
Next thing to consider is what we're going to have
if this is pam it is the home page
we're going to a have a different design than if it's a main content page
so i mean by that is safe for example the contact page is going to have a
contact form
so if i were drawing the contact page and let's say it looked something
like this
Then underneath that it's got
it's got say
a google map over here
i'll write that in as
g-map
street lex for here
It's gonna have a phone numbers so
then an address
on their addresses is here
and then they've got this email contact form
and
email
subject
so and then
'message' here. You get the idea
So you can do this for
everyone of your pages so not just for example of the
contact page
do another page
so
the
for example for the about us page
the standard thing I do is
is
say okay this is the going to be the main content area
we're going to have some text here, lines like that. So we're gonna have
image here
some people do images draw something like that. Another image here
had have some more text here
What you can do is that for the main content pages
on your website
just to get a basic idea of how you're going to lay them out
You'll notice that i left this space blank this could be a sidebar of some
sort
maybe this has the latest stuff from your twitter stream
and or maybe its a list of all the pages on the website if you've loads of pages
or it could be the latest posts from your blog. Sidebars can do lots of
things. Instead of having the sidebar on the left
you could have the sidebar on right side Or you could have two sidebars
so lots of ways to lay this out
it's really useful if you take every page on your website. You've got your,
will draw it in here,
so we've got
we've got home
mountain bikes, electric bikes
about, contact and if you take every page on your website are at least in
the menu
and just draw it out on a sheet of paper
just to get the basic concepts down. The exact layout doesn't matter
You mightn't want your navigation bar there you might want it down the left
You might want to spent some time thinking about what to put in the footer your
of your website. There's lots of things you can do
The important thing is just get the the basic information down on paper