03-19-2011, 12:16 PM
Hey everybody, this is part one of a tutorial requested by our fellow member Mr. Che. In this series you will learn how to design and code a basic layout.
Disclaimer:
Before you complain about the design, remember that this tutorial is to show you the basics. This is not a step by step tutorial on how to create a godly layout. That takes creativity and is all on you. This tutorial should get you headed in the right direction though.
Web Design Elements
When It comes to web design you can basically break in down into 3 parts. Thereâs the layout, color theory, and typography. Lets take a minute to explain each one.
The Layout:
The layout is simply the arrangement in which in which you place the boxes, header, navigation bar, etc. Generally most people follow the same old layouts. That usually looks something like this:
![[Image: layout.png]](http://crypticgfx.com/tutorials/basic/layout.png)
Color Theory:
Color theory is nothing more than using colors that look well together. Wikipedia defines it:
Typography:
Typography is the art of arranging the text. This is one of the most important parts of designing a layout. The typography can make of break the layout pretty easy. We'll get into this more as we go on.
As a whole, all three of these elements work together to create a nice looking layout. These three work as a team, if one isnât up to par with the rest it takes a toll on the whole layout.
960gs:
960gs is a tool most designers use these days. It's simply a template of evenly spaced columns. This helps you keep your layout aligned, and your proportions right. Download it. To install it simply open it, unlock the layers, drag it to your document, and center it.
Creating the layout + Colors:
Generally when I design a layout I do everything at once, but for the tutorial I think it will be easier if I do the layout+colors and typography separate. Since this layout is very basic Iâm not going to give you a step by step tutorial, but instead explain what I did for each section of the layout. Lets take a look at the layout I created.
![[Image: layout2thumb.png]](http://crypticgfx.com/tutorials/basic/layout2thumb.png)
As you can see the layout has a header/navigation bar, a welcome message area, a sidebar, a main content area, and a footer section. Hereâs an overview of how I created each section.
The Background:
I simply filled layer one with the color #cbcbcb. I then created a new layer and grabbed the marquee tool. With the marquee tool I set it to a fixed size of 960px by 100%. I filled this selection #e0e0e0. Next I opened up blending options on this layer and added a 1px white stroke, and some grey outer glow.
The Header / Navigation Bar:
For this section I grabbed the marquee tool with a fixed size of 960x75px. I created a new layer and filled the section #313131. After I did that I opened up blending options and added a lighter grey gradient, and some drop shadow.
The Welcome Section:
For this section I filled a 960x200px #199de7. I then added a lighter gradient and drop shadow (in blending options), and placed the box 1px below the header/navigation.
The Content Area / Sidebar:
For this section I grabbed the rectangle tool and made a big white box on the right hand side (leaving some grey space on the left to act as the sidebar). I then created a new layer and drew a 1px grey line to divide the two sections a little better.
The Footer:
For the footer I did the same exact thing we did for the header. The only difference is that this section is 100px in height rather than 75px.
The Typography:
Now itâs time to add some text. When adding text to a web design you generally have to limit yourself to the basic fontâs that come on every computer. You know, times new roman, arial, arial narrow, lucida grande, Helvetica, etc. The reason being is because if someone goes to your page and they donât have the font you used they wont be able to see the text. There are methods around this such as sIRF and cufon, but Iâm not going to get into that for this tutorial. Letâs take a look at all the text I added:
![[Image: typographythumb.png]](http://crypticgfx.com/tutorials/basic/typographythumb.png)
Font Used:
For this layout I used two different fonts. I used Arial Narrow (bold) for all the headings, and Lucida Grande for all the paragraphs.
The Header:
For this I used Arial Narrow. The word cryptic is regular and the color #80d4ff, and GFX is bold and used white as its color. The size of this text is 30pt.
The Navigation:
This text is simply Arial Narrow and White. The size is 18pt, and there are 6 spaces in between each word.
The Welcome Box:
The heading is Arial Narrow (bold, color: white, size: 28pt). The paragraph is Lucida Grande (color: white, size: 14pt). I also added a 1px dark blue drop shadow to all the text in this section. This makes it much more readable.
The Sidebar:
Arial Narrow (bold) was used for the heading (size 24pt, color #363636). For the links I used Lucida Grande (size: 14pt, color: 363636). I also upped the line height to 23pt.
The Main Content:
For the heading I used Arial Narrow (bold, color: #007abd, size: 28pt). The paragraph uses the same exact text used in the sidebar links.
The Footer:
The footer text is simply Lucida Grande (color: white, size: 14pt). This text is centered.
Disclaimer:
Before you complain about the design, remember that this tutorial is to show you the basics. This is not a step by step tutorial on how to create a godly layout. That takes creativity and is all on you. This tutorial should get you headed in the right direction though.
Web Design Elements
When It comes to web design you can basically break in down into 3 parts. Thereâs the layout, color theory, and typography. Lets take a minute to explain each one.
The Layout:
The layout is simply the arrangement in which in which you place the boxes, header, navigation bar, etc. Generally most people follow the same old layouts. That usually looks something like this:
Color Theory:
Color theory is nothing more than using colors that look well together. Wikipedia defines it:
Quote:In the visual arts, color theory is a body of practical guidance to color mixing and the visual impacts of specific color combinations.You can buy a bunch of books on color theory, but honestly all you need is your eyes. I'm sure most of you can tell when two colors go well together. This is no different than picking out your outfit for the day.
Typography:
Typography is the art of arranging the text. This is one of the most important parts of designing a layout. The typography can make of break the layout pretty easy. We'll get into this more as we go on.
As a whole, all three of these elements work together to create a nice looking layout. These three work as a team, if one isnât up to par with the rest it takes a toll on the whole layout.
960gs:
960gs is a tool most designers use these days. It's simply a template of evenly spaced columns. This helps you keep your layout aligned, and your proportions right. Download it. To install it simply open it, unlock the layers, drag it to your document, and center it.
Creating the layout + Colors:
Generally when I design a layout I do everything at once, but for the tutorial I think it will be easier if I do the layout+colors and typography separate. Since this layout is very basic Iâm not going to give you a step by step tutorial, but instead explain what I did for each section of the layout. Lets take a look at the layout I created.
![[Image: layout2thumb.png]](http://crypticgfx.com/tutorials/basic/layout2.png)
As you can see the layout has a header/navigation bar, a welcome message area, a sidebar, a main content area, and a footer section. Hereâs an overview of how I created each section.
The Background:
I simply filled layer one with the color #cbcbcb. I then created a new layer and grabbed the marquee tool. With the marquee tool I set it to a fixed size of 960px by 100%. I filled this selection #e0e0e0. Next I opened up blending options on this layer and added a 1px white stroke, and some grey outer glow.
The Header / Navigation Bar:
For this section I grabbed the marquee tool with a fixed size of 960x75px. I created a new layer and filled the section #313131. After I did that I opened up blending options and added a lighter grey gradient, and some drop shadow.
The Welcome Section:
For this section I filled a 960x200px #199de7. I then added a lighter gradient and drop shadow (in blending options), and placed the box 1px below the header/navigation.
The Content Area / Sidebar:
For this section I grabbed the rectangle tool and made a big white box on the right hand side (leaving some grey space on the left to act as the sidebar). I then created a new layer and drew a 1px grey line to divide the two sections a little better.
The Footer:
For the footer I did the same exact thing we did for the header. The only difference is that this section is 100px in height rather than 75px.
The Typography:
Now itâs time to add some text. When adding text to a web design you generally have to limit yourself to the basic fontâs that come on every computer. You know, times new roman, arial, arial narrow, lucida grande, Helvetica, etc. The reason being is because if someone goes to your page and they donât have the font you used they wont be able to see the text. There are methods around this such as sIRF and cufon, but Iâm not going to get into that for this tutorial. Letâs take a look at all the text I added:
![[Image: typographythumb.png]](http://crypticgfx.com/tutorials/basic/typography.png)
Font Used:
For this layout I used two different fonts. I used Arial Narrow (bold) for all the headings, and Lucida Grande for all the paragraphs.
The Header:
For this I used Arial Narrow. The word cryptic is regular and the color #80d4ff, and GFX is bold and used white as its color. The size of this text is 30pt.
The Navigation:
This text is simply Arial Narrow and White. The size is 18pt, and there are 6 spaces in between each word.
The Welcome Box:
The heading is Arial Narrow (bold, color: white, size: 28pt). The paragraph is Lucida Grande (color: white, size: 14pt). I also added a 1px dark blue drop shadow to all the text in this section. This makes it much more readable.
The Sidebar:
Arial Narrow (bold) was used for the heading (size 24pt, color #363636). For the links I used Lucida Grande (size: 14pt, color: 363636). I also upped the line height to 23pt.
The Main Content:
For the heading I used Arial Narrow (bold, color: #007abd, size: 28pt). The paragraph uses the same exact text used in the sidebar links.
The Footer:
The footer text is simply Lucida Grande (color: white, size: 14pt). This text is centered.