Web Design Mock Up in Illustrator

The majority of my work is for print, but also I occasionally create the look for websites as well. This will just be done to comp/mock up stage ready for someone else to code (though I am learning). What I have always found surprising is that when you hear of people creating web design mockups you usually hear them talk about Fireworks or Photoshop not Illustrator. I don’t know how to use Fireworks, I do use Photoshop but would never really think of it as a program for creating visuals in – for elements of a visual, yes, but not for planning, experimenting and designing visuals as a core program.

Whenever I have created web design mock ups I have always used illustrator, it’s quick and flexible allowing for rapid moving about of elements. If at the end you want to, you can export Illustrator to photoshop keeping all the layers intact. I was quite pleased to find a tutorial that leads you through the process of creating web design mock ups in illustrator and then how to use the image slices in you web designs. I had never realised Illustrator allowed you to create slices, name them and output them all for web. It then talks you through using these image slices to create a template in XHTML and CSS.

Take a look at this tutorial, its made for creating Drupal templates, but parts 1,2 and 3, on creating a mock up in illustrator and then slicing it up and then creating XHTML and CSS templates are useful for any web design.