Complete Guide to Creating a Blog Website Layout

Details

Program: Adobe Photoshop CS4
Difficulty: Hard
Completion Time: 4 hours

Resources

paper texture - batboy
advent pro font - index-graphics
paranoid font - Loki design
mono icons - tutorial9
social icons hand drowned - The-Force
blank html template

Step 1 - Before we start/Perspective explained

I'm planning to use some hand-drawn elements on my design. It's kind of architectural drawings where perspective is pretty important aspect. So what perspective really is? It gives the flat image an illusion of third dimension. Makes graphic dynamic. Learning the basics of perspective will give you a great starter to manage a depth of field. Firstly, let's try to imagine a wall. Flat wall like this one. Notice the two green, parallel lines:

step-001[6]

Lines are parallel- I repeat for this is really important. Now we will try to duplicate a wall and try to make a corner.

step-001b[6]

What? Why? It is still flat. Well, I think we have to make some additional transformation.

step-001c[6]

And now it looks much better, right? Point your view on the lines. They aren't parallel now, but theoretically in one of dimensions of this image they are. They are parallel AND got their joint point EXIST in the infinity. It smells quite complicated at first, but just think about it for a while. The underestimation of this subject is really important. To help you I will present some other examples of parallel lines that actually aren't parallel from OURS point of view.

step-001d[6]

step-001e[6]

step-001f[6]

Step 2 - A bit of theory

I hope that you have fully understood that lines system. Actually, there are two types of perspective. Linear where the objects are smaller relatively to distance and one based on depth perception where objects that are really close are blurred and those far, far away are hazy.

step-002[6]

The connection of them is essential. Ok, now we will break a perspective into single parameters. First important thing, a horizon line. It is not always visible on the viewport but it should always be present in the scene to make a proper perspective. The horizon line is first thing that determines our point of view.

step-002b[6]

step-002c[6]

step-002d[6]

The second parameter is a joint point. It is my personal naming system so it could differ from what you have red in some drawing books or so. Anyway, it's not important, understanding the perspective plays here a main role. So if we will take a joint point under consideration... The very basic and easiest one is one-point perspective. And yes- it has only one point that is placed on the horizon line. Just imagine that you are in a huge cube and you are facing directly one of the inner walls. Vertical lines are parallel.

step-002e[6]

step-002f[6]

Now we can rotate our imaginary eyes in one axis so we will get two-point perspective. But still all vertical lines are parallel. The horizon line determines the level of our eyes. Don't fully connect the horizon line with a real horizon. We can look at the sky or even be in outer space and look on some planet. So the horizon line isn't perceptively determined, but our eyes are pointed in some direction. Ok, let's take a look at two-point perspective:

step-002g[6]

Here every object have it's joint points. But it is not said that there's only two joint points on the scene. Every object makes two parallel lines and their joint point position depend on it's rotation in relation to other objects. For now I suppose you will know and understand how the three-point perspective stands.

step-002h[6]

There are more complicated structures like five-point (so called hemispherical) or even six-point perspective (when we draw a 360 degree view) which is super hard to achieve and this is truly subject for advanced painters. Let's stick to the first two we learned about.

Step 3 - Sketching

I'm kind of old-school guy and before I will do anything in Photoshop I always try to make some sketches on paper. Try for yourself even if you are not pro drawers. Actually it doesn't matter- you just want to make a plan. It's like an escape from prison. Sorry for example, but if something had to be perfect, you had to have a solid plan where you considered a lot of options and choose best. Fly thru the colors in your head. Imagine how things could look like. It's not about details- we will take care of them in design process. It's about an idea. By the way- I'm not a big fan of grid systems. They came and now most of web layouts look the same. For me designing is not about placing boxes around that sticks to the lines. It's about composition, user experience when he see the website first time, usability and (the aspect killed by grid systems) originality. I'm not saying they are bad, they're just overused. So, next time when you will try to design some piece of web layout- craft a sketch.

step-003[6]

Also, as I said, we will need some architectural sketches. If you don't feel strong in that aspect or you just don't have a scanner- find some sketches around the internet. Surely there's tons of them. Or, you can use your knowledge about the perspective and try to craft your very own sketch. It is a lot of fun, believe me, and the final results can be pretty impressive. You can find a lot of detailed movies about step-by-step architectural sketches around the internet. Just follow one or two and then draw something by your own. Oh, start from simple shapes as I described above. Make some spheres and cubes. Combine them later into more complex objects. Have fun here.

Step 4 - A bit of design theory

Before you will draw a very first pixel of your design you have to remember about few things:

Your design should be elastic in size (in case of content changes)
Your design should be adapted to 15" screens (1024x768) / avoid horizontal scrollbars when they are unnecessary
Consider the good contrast between colors of fonts and background
Make user-friendly designs, where visitor don't have to spend five minutes to find a search form
Avoid using aggressive colors, visitor should feel comfortable while reading content
List all elements that must appear in design and arrange them
Give your best for every of your designs
Have in mind that after design process you (or someone else) will probably have to cut your layout
Architectural tip - design comes from usability (avoid tons of messy unnecessary stuff that distract visitor)
Stick to the standards (more or less, but try to- your design will be more intuitional, for example logo on the left top position)
Create some kind of route for your visitor to make him feel like on tour in museum; the path should be clear
What comes with above- make a clear navigation
Think about the aims of website
Think about advertising on website but do not make it too excessive
Consider the type of content on webpage
Minimize the number of type-faces
Think about future html elements like h1, p, a
Think about future CSS styles and JavaScript effects
Avoid splash screen pages. They could be beautiful but in most of cases they are useless
Feel like an inventor
Think about the viewer