First Step

Starting something like a website design is pretty intimidating if you’re just dipping your toes into the process. It’s quite a chore to even gather up the courage to make that first foray. I’d consider myself to be pretty new to this, but I’ve learned quite a bit and I hope you can take something of use from my (definitely not vast) experiences.

The first step I take in creating just about anything like a website design is to visualize it. In the case of creating templates, I like to get things down on paper. It’s one thing to see the ideas in your head, but with something as complex as site design, it’s essential to get things down permanently so you don’t forget things or become inconsistent in the implementation. So for the Amalgam theme I’m currently (still) working on, I had drawn up this visual plan before I opened up my first blank coding window.

Planning for Amalgam

Don’t be scared to get your ideas down on paper. While you may think you don’t really know exactly what you want yet, you needn’t worry. After all, it’s just a rough draft and you can easily change anything you don’t like or improve certain elements. It’s just a guideline so you know generally what you’re aiming for in that final product. Chances are, as you progress through the design, you’ll realize that certain things won’t work or something else would work better. Add these to your initial plan so you’ll be updated as to what should be done.

One of the things I like to do with web design it to actually write in the hierarchy of the divs in this initial plan, which are essentially containers that hold your page content. You can then style these with CSS.

Next is the actual coding. I find it easiest to write in the more essential html elements like title, head and body first. Then I write in my major div containers. Start a very simple CSS template with those basic div styles. I find it helpful to start off all the div styling with borders, so I can tell if things are nested properly or are laid out as I want. After that, it’s a matter of filling in the rest of the ‘meat’ of the page design.

That’s a very basic overview of how I generally start any web page, not just a WordPress template. I’ll discuss WordPress a little more specifically later.

[tags]beginner web design[/tags]