In this multi-part series, I’ll show you my personal approach on webdesign.

I’ve got very basic skills in HTML and CSS and no skills at all in PHP. But I’ve got a background in graphic design (kind of).

This series wil show you the process of developing a website with wordpress from the basic idea over design and coding of a custom WordPress Theme to the final product.

The Grid

As a starting Point I use the 960 Grid, a pre-defined design pattern, that makes coding much easier and  ensures a clean an consisten layout. It is basically a system of rows and gutters that enables us to position our content easily.
960 Grid

The Mock-up

First we need to develop the basic layout. We just arrange the design roughly on the screen to get an idea about the structure of our content. I used Cacoo for the mock-up. It’s a free tool, with important advantages compared to photoshop:

  1. pre-defined website elements
  2. limited design tools – so you can focus on the structure
  3. it’s inside the cloud – yeah 😉

I came up with these 3 basic layouts:

          

  1. Homepage with Slider, an about text, social links and featured works / blog entries
  2. Portfolio overview wit short text
  3. Project details with description and slideshow