I’ll be honest, I recently got introduced to “the grid.” Now, I know it’s an open term, and I’m still learning, but, HEY!, I’m trying here. I made a simple template to help me start out with designs. So, to help out my fellow designers, I’ve put it up for a free download. Digg, retweet, and stumble.

A quick, couple of notes. One, when you first open the document, you will need to use hot keys to enable the grid. Also, I have put down what I think is a good preset for a grid. I recommend grideline every: 50, and subdivisions: 5.

If you have questions about the content in this PSD or a general question, please visit my contact page.

Now let me apply that to design. When creating a site, it’s important to have consistent padding and margining. Now, if you’re not familiar with those terms, lets start with the basics. Let’s imagine we have a box. The amount of space inside the box is a term called padding. The amount of space separating from elements outside of it is known as margining. It can get confusing at times, but in thinking of it in terms of the box, it shouldn’t fail you.

So, let’s take a look at a recent design of mine. Notice how in between each element of the site I’ve put 20 pixels of space. My site is breathing well! Also, if you take a look at the amount of space in each container, you can notice it has a consistent padding of 20 pixels. Whether your margining is 10 pixels or 50 pixels, just make sure it is the same as the other elements surrounding. Notice that I have a sidebar on the left which has a padding for each element of 10 pixels. Since the sidebar has different content, it will add a good amount of contrast.

Check out the grid feature in Adobe’s Photoshop to further help you in succeeding in the consistency of padding and margining.

For starters, try finding a nice headline font.  Something that you can use for BIG headlines.  You’ll want this to be BOLD, but of course readable.  The second font I typically pick is my main body content.  This is the type you’ll see mostly.  The last font I usually have different from the other two would be my testimonials or quotations.  

Saving an image or stylesheet near by with these new elected typefaces will help remind you to keep the font to a minimum of three!

“A harmonious uniformity or agreement among things or parts.”

I believe keeping everything consistent gives a better feel of uniform and appeals to be more structured and formated. So with that being said, here we go!

It’s very simple to start. Take the buttons you have on your website. Sometimes you’re not sure on the capitalization. This is exactly what recently happened at my work, and we found ourselves running into a few different types of buttons. I created a sheet and printed a few copies and posted them around the office.

Now I’m not saying you should use the exact capitalization I use, but decide what you think looks best and stay with it. Make use of your printer and have it up as a reminder.

As I was saying, it’s really tough keeping my blog up to date.  I’m currently working on more than I can handle.  It’s crazy and stressful, but I LOVE it.  Creating is the most exciting thing for me, so I like to take on a lot of projects.  So I would like to apologize for the lack of updates.  I do this about once a year.  Hehe.

One of the biggest projects I’m working on is the revamp of SickAnimation.com.   We’ve planned a January 1st release on that site.  It should be pretty exciting.  I’ve implemented some really flashy elements into this site.  I’m currently learning a lot of fun jQuery tricks, so look out for that site.

The other project I’m working on that I really can’t say much about is It’s A Fav.  If you want to stare at a coming soon page, check out www.itsafav.com That is a personal project and I’m also shooting for January 1st.

Other than that, work my friend.  Work.