My design workflow.

A lot of aspiring designers I know tend to ask me about my website design process, and I’m always cautious about how I share this, not because It’s some secret or some great process, but because my process may not work for them and it can potentially ruin the way a person works. If something’s not for you, it’s not for you. So, here I will share my simple work process, maybe someone might benefit from it, maybe someone might not.

1. The design process.

I’m not going to focus on this part because it would need a whole other post, but it mostly involves rough sketching, some basic UX  analysis and then Photoshop or Illustrator. From here, I just export the images using slices (Images only) and get to the coding.

2. The environment.

When I worked on windows I used:

• XAMPP for local testing.
• Notepad++ (With FTP Synchronize) for file editing and FTP synchronization.
• WinSCP for hosts that supported SFTP
• Firefox with Firebug and Web Developer for testing
• An army of browsers just in case something goes awry (with proper use of standards, it usually never does).
• PuTTY in case I need to do stuff via SSH.

Now I’ve switched to a mac, and Coda has replaced Notepad++ and WinSCP. So the environment changes a little:

• MAMP for local testing
• Coda for File editing, FTP/SFTP synchronization and SSH
• Firefox with Firebug and Web Developer for testing
• An army of browsers just in case something goes awry.
• Alkaline for testing windows browsers.

So now that the environment is ready, we can start working.

3. The HTML skeleton.

I start with an XHTML 1.1 skeleton. I usually have shortcut text associated to it so I don’t have to re-write it, but it goes something like this:

Now, let’s say for example I have a site with a header with a logo that links home, a menu, two columns, then a footer. A simple two column layout. The next thing I do is identify these boxes and post them. The structure looks something like this:

Some things of note:

• I used an anchor for the logo link.
• I used an unordered list for the menu.
• Divs for everything else.

Notice also, that I add a container for all the boxes. This is useful when I want to change the width of the columns or other properties. I also use another container for the body. Same reason.

Now we have a “working” website. It looks awful though.

3. The CSS

This is the real heavy lifting when it comes to website design. If you identify properly every section of your site in the HTML, chances are the rest of the time you spend modifying the design will be with the CSS file. Get used to it.

First I link the CSS file to my design, then I start with a very simple property:

Check all my CSS files and this is the first statement you’ll find. The thing is, different browsers have different defaults for margin and padding, and this can really screw up your design. So yeah.

Finally, I just style everything accordingly. Note that I style the unordered list and anchor as block elements.

There we go, that’s a styled static website. Everything in one file, everything in a simple method: Structure first, then style. After only a few minutes of CSS code, It ends up looking something like this:

(sorry for the truncated image. I’m too lazy to resize it).

4. Adding Code

Well this varies. If you’re using rails or cakePHP or some framework, then just convert this HTML to appropriate template files, it’s usually a trivial step. If doing custom code, I usually split this file into a header, a body and a footer file, depending on what changes constantly and what doesn’t. It ends up something like this:

So yeah, that’s how I build websites. Maybe it works for you, maybe it doesn’t, maybe you have some recommendations for me. What do you think? How do you do it?