Complete Guide to Creating a Blog Website Layout

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.

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.

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

These are just my personal opinions, but often exist as a good manners of web design.

2 comments on “Complete Guide to Creating a Blog Website Layout”

android development in chennai says:

September 30, 2013 at 1:37 am

awesome post!
thanks for sharing..

Carl says:

May 15, 2013 at 2:23 am

Dzięki za tutka. Muszę przyznać że fajnie wygląda ale przy 8 latach doświadczenia wszystko można zrobić :)

BTW:

Czemu mnie nie dziwi że w komentarzach pojawia się flame ? ;d