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.
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:
- pre-defined website elements
- limited design tools – so you can focus on the structure
- it’s inside the cloud – yeah 😉
I came up with these 3 basic layouts:
- Homepage with Slider, an about text, social links and featured works / blog entries
- Portfolio overview wit short text
- Project details with description and slideshow