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