This is a great resource for understanding the wire-frame. What it is and how to create your own. We will be using illustrator to create our wire-frames.


Steps to create Your wire-frame:

  1. Create an illustrator file with the width of 1024px and height of 2000px
  2. Create a 12 column grid system with 20px margins that fills entire art board
  3. On a new layer create your screen simple boxes with labels that represent sections of your screen design
  4. Duplicate art board 2 times and create 3 variations (or possible layout solutions) for each page on your site
  5. safe as a pdf and upload to your blog