Complete Guide to Creating a Blog Website Layout

Complete Guide to Creating a Blog Website Layout
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
These are just my personal opinions, but often exist as a good manners of web design.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13

Create Dot Grid Art in 1 Click
Sponsored

Turn any photo into a dot grid artwork with these Photoshop actions. You'll get great results with dots that change size. They get larger in brighter areas and smaller in darker areas. Free download available.

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

  1. 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

Leave a Reply

Your email address will not be published.

cross