Comments on: Creating a Website Wireframe in Illustrator

By: Carl

Carl — Sun, 05 Feb 2012 00:57:19 +0000

Hey thanks a lot, I’ve heard people using IL for wireframes but haven’t found a useful tutorial!

By: Task Flows and Wireframing | Jay Vaglio

Task Flows and Wireframing | Jay Vaglio — Thu, 05 Jan 2012 19:16:45 +0000

[...] using InDesign Wireframing using InDesign 2 Wireframing using Illustrator Wireframing using Photoshop 960 Grid System 11 Free UI Kits for iPhone and iPad Wireframing [...]

By: Cornel

Cornel — Sat, 31 Dec 2011 16:51:04 +0000

Verry usefull wireframes. Now I can make my customers understand my projects.

By: Task Flows and Wireframing | f11_gd410

Task Flows and Wireframing | f11_gd410 — Thu, 15 Sep 2011 12:07:15 +0000

[...] with Software Wireframing using InDesign Wireframing using InDesign 2 Wireframing using Illustrator Wireframing using Photoshop 960 Grid [...]

By: Mike Sinkula

Mike Sinkula — Sun, 11 Sep 2011 23:01:47 +0000

Choose “Custom” and type the size in yourself.

By: Bob

Bob — Sun, 11 Sep 2011 22:59:49 +0000

But you cannot create a custom size web document of this size!! there are only three size preset sizes for web.

By: bgb76

bgb76 — Sat, 10 Sep 2011 11:32:52 +0000

Woh! This was what i was looking for.

Wireframe using Adobe Illustrator cs5 i just downloaded for wireframing purpose.

Thanks yaar,
bgb76

By: 6 Illustrator Related Web Design Tutorials | DesigningTips.com

6 Illustrator Related Web Design Tutorials | DesigningTips.com — Sun, 21 Aug 2011 19:25:52 +0000

[...] Wire-frame Designing for Website in Illustrator: The design tutorial will take you through the process of making a document of Website Wire-frame with the support of Adobe Illustrator. Tags: adobe illustrator, design styles, design tutorials, featured, graphic design tips [...]

By: John Clark

John Clark — Fri, 15 Jul 2011 17:41:45 +0000

Very interesting post. It is pretty neat to be able to create wireframes in Illustrator – and it’s even possible to do likewise using Excel or even PowerPoint (although I wouldn’t really recommend it – you’d be ‘fighting the tool’ too much).

What’s particularly neat is the way you’ve been able to create a grid system, which is something even the dedicated wireframing tools (such as Balsamiq) don’t do (as far as I can recall). That said, depending on your needs, a dedicated tool can make a lot of sense and quickly pay for itself (as it can be lots quicker to create conceptual designs by using pre-made UI elements for instance).

If you’re interested, I interviewed the creator of Balsamiq just the other day – you’d be more than welcome to come visit my prototyping blog (http://softwareprototyping.net) and the Peldi interview is here: http://softwareprototyping.net/interview-peldi-balsamiq/ )

Great stuff, Mike!

By: Mike Sinkula

Mike Sinkula — Thu, 14 Jul 2011 07:14:43 +0000

It’s a CS3 thing when you choose a web document.

By: Nirman

Nirman — Thu, 14 Jul 2011 05:52:06 +0000

How did you bring up the GREEN CROP MARKS? I am not getting any.

I am using Ai CS5

By: J. Patrick Lalley

J. Patrick Lalley — Thu, 19 May 2011 01:09:25 +0000

Fantastic article! Thanks Mike!

By: Zach Curtis

Zach Curtis — Thu, 02 Dec 2010 05:08:30 +0000

Great article. I really appreciate you giving such detail and screenshots to get me going!

By: Cristian Pascu

Cristian Pascu — Fri, 26 Nov 2010 23:58:28 +0000

Hey, you can also try a tool like http://www.flairbuilder.com that comes with a built in set of interactive controls and support for master pages and CSS grids. I hope you’ll like it!

Cristian

By: 13 fantastic Illustrator web design tutorials | Garmahis

13 fantastic Illustrator web design tutorials | Garmahis — Wed, 27 Oct 2010 18:33:59 +0000

[...] Creating a website wireframe in Illustrator This Illustrator tutorial will show you how to easily and quickly create website wireframes which are used in the process of designing the content layout. [...]

By: odzież damska

odzież damska — Wed, 06 Oct 2010 10:47:53 +0000

You are professional.

By: Mike Sinkula

Mike Sinkula — Sat, 25 Sep 2010 08:14:58 +0000

You are welcome.

By: Wilson

Wilson — Wed, 25 Aug 2010 23:18:13 +0000

Thanks for the tutorial. I’ve never really done wireframes other than through really rough, un-detailed hand sketches, so this helped get me going.

By: Allana

Allana — Sun, 11 Jul 2010 23:49:00 +0000

I just found this AMAZING demo on grid-based design from Line25 (of course).
http://line25.com/tutorials/design-build-a-grid-based-web-design-with-css

By: Leslie Strom

Leslie Strom — Thu, 03 Jun 2010 04:36:34 +0000

http://webdesign-sketchbook.com/free-download/

Here’s a grid system sketch template….

By: Allana

Allana — Sun, 25 Apr 2010 18:02:50 +0000

i came across these sketching and wireframing PDF’s on smashing today, I;m thinking they might be helpful for sketching ideas out :
http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/

By: Max

Max — Sat, 13 Feb 2010 16:15:11 +0000

Thank you to Mike for the initial wireframe resource file which I’m using both for 105, 114 and 170 (So it’s doing triple duty today!) and to Adam Funk (honk!) for pointing out the wireframes library.

Thanks so much guys!
-Max

By: adam funk

adam funk — Thu, 04 Feb 2010 03:53:52 +0000

Some folks out there tend to use the same types of shapes and elements for all their wireframes. This guy has collected all his ‘usual suspects’ into a symbol library in illustrator. He shares it with the rest of the world here… http://www.johnnynines.com/2009/03/wireframe-symbols/

By: Billy

Billy — Thu, 21 Jan 2010 22:56:52 +0000

The straight dope!

By: Coach Ockislong

Coach Ockislong — Mon, 18 Jan 2010 05:12:13 +0000

Phew! That was quite a tutorial!