Beginning Web Development : Planning Basics

So I got all excited with my plan to build a test page and do a tutorial and I forgot the planning phase of the website.  Silly me.

Planning is kind of important and should be one of the first things you do.  Planning the site can be really simple, it was for the test page.  It can be complicated as you become more advanced and need the site to do different things.

Since the test site is super simple, I sketched out a layout on some paper and colored it in with some crayons.  I want to see the basic layout and know when I have finished designing the site.  When we start adding more complicated code to the page we will plan out the code.

Today it is just planning the layout.  Scratch paper, a pen, and crayons are just fine.  You can be more professional and build it in MS Powerpoint, Adobe Photoshop, or a free variant.

My quick website layout. I have three ideas on what I want the layout to be. I can also try out some coloring schemes.

My quick website layout. I have three ideas on what I want the layout to be. I can also try out some coloring schemes.

I sketched out three quick layout ideas.  I am discarding the one on the bottom right.  It is to “different” which can lead to low popularity of the site.  The other two are quite common layouts and will not alienate any viewers. We can easily try out both styles with our CSS file and not make any major alterations to the HTML code.

I have a personal preference to have the navigation bar on the left side of the page.  Especially when there are not going to be any other secondary columns.  The body section seems ridiculously large without a smaller secondary column.

On the other hand we are going to have a portfolio and it will be a bit cramped if you do not have that little bit of extra width.  I think we will go with option 2, top right.

The other nice thing about sketching out the layout is we can try color combinations.  We can get a sense of what things will look like with different colors.  I like the way that the body looks white, and the green to blue gradient for the back ground.  I think that the nav bar should probably be white also, so it does not disappear between the banner and the body of the email.  The footer of this site does not have anything very special in it.  I am going to leave the background clear so you can see the background behind it.

There is my quick and dirty post about planning.  Don’t be like me and forget to do it!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s