Today we will get to know the design that will be used for the rest of the tutorials in this series. I put it together really quick(took me literally 5 minutes to put it together). I’ll have links at the bottom of this post for the download of the psd file. You will find that it’s all organized into head, content, footer. If you remember from my last few posts I talked about this concept of separating a website into these three basic parts.

Once you have the design ready, you have to cut it. When building a website you have a few options for placing the images into the page. You can have pictures repeat and you can make many of the graphics without exporting anything out from photoshop (or whatever program you use to design your websites) so you really need to think about what you need and how you will use it. Remember: the less images you have on you website, the fast it will load.

So here is the design I am supplying (click to enlarge):

It’s nothing fancy but it will do. Looking at this design, the first thing you will notice is that it is a column website (i.e. there’s a section going down the middle that has all the content as opposed to having it fit the window). How wide is it? Well if you download the psd file at the end of this post, you will find that it’s 1000px.

CUTTING THE GRAPHICS

Now that we have that, we should look at the graphics. I added some noise to the whole design so we can’t simply chose the color and make a div box with that color background. Anyway… The header and footer backgrounds extend left and right to infinity. Because of this, we can just cut out a small piece of it and repeat it in the x (horizontally). We may also want to include the shadow from those to make our lives simpler later so we will have to export them as PNGs (PNGs allow you to keep the transparency of graphics – If you would like a photoshop tutorial, ask).
The background can have a square picture repeating in the x and y. You don’t want to cut it too small because then the repetition will more noticeable.

MENU BUTTONS

When it comes to the menu buttons, you don’t want to just export them one by one. Doing it that way won’t allow you to easily add more later. Therefore we will just cut out the noise texture, repeat it x and y, use border-radius for the rounding and use box-shadow for the drop shadow. This way all you will need to do is duplicate the class and change the text in your code.

NOW LOOK AT THE FONT

It is courier new (with the exception of the logo which will be exported as a picture). This is important because courier new is a web-safe font so we won’t need to worry about people being able to see it correctly. You can’t just use any font because not all people have those fonts. Web-safe fonts are a list of fonts that all users are basically guaranteed to have. You can find the list all over google… just do a quick search
Let’s say there’s a font you want to use but it’s not a web-safe font… what do you do? Well there are quite a services online that allow you (with the help of some javascript magic) to use any font you like. Google has a free one but it’s a bit limited (better then the small web-safe font list though) here: http://www.google.com/webfonts. There are more around the web that give you a much bigger selection but they require the secret combination of numbers found in that plastic card you cary around.

The design is so simple that I think that just about covers it. Tomorrow we will start transferring the design into code.

Download:

simple_design_MattSich.zip