Web Page Wireframes with Adobe Illustrator

I use Adobe Illustrator to mockup my web site designs. I prefer to use Illustrator because Illustrator is designed to create layouts, whereas Photoshop is not designed to create layouts (in my opinion).

I found an excellent post on how to create a web mockup with Illustrator; however, I created a bunch of these mockups for you and saved them as Adobe Illustrator files. The following are some example screenshots:

You will find theĀ Illustrator wireframes in the attached zip file. You should be able to download these files, unzip them, then open them up in Adobe Illustrator. The mockup objects are locked in the first layer. To edit them, you will want to unlock the layer.

I have added slices to all the wireframe areas and you only need to divide them up further to match your design or export for web and devices as they are sized now. You will find the slices in the bottom template layer, and you only need to unlock the slices layers to edit slice sizes and placement with the slice selection tool.

You can also download a PDF file of all the wireframes. They do not have slices, but you can print and draw out your design. Forget napkin drawings forever!

This entry was posted in Design, Web Design and tagged . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">