Create A Website: Sketching Out Your Site

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


Add a Comment

Your email address will not be published. Required fields are marked *