Sketchy Illustrator wireframes


About half of my time as a UI designer goes into making application wireframes that end up in various powerpoint presentations, low-fi prototypes, GUI specs, and User Stories documents. I'm a big fan of sketchy wireframes since they have the advantage of appearing unpolished (so that users and managers do not think they are final), but they also allow the UI designer to accurately depict the application controls, available screen space, and can generally translate well to higher-fidelity designs if needed.

In the past, I've dabbled with various tools to create screen mockups and designs, however, I keep coming back to Illustrator; partly because it's what I'm most comfortable with, but it also fits well into my workflow. Over the past couple of years, I've spent a lot of time creating wireframes, and I've finally gotten around to making a GUI library of sorts - basically just assembling some of the generic controls, windows, and dialogs that are used in the making of the application sketches. So for those of you using .ai to create wireframes, I'm posting a file that will (hopefully) be helpful in future definition and design efforts.

Sketchy Illustrator wireframes (.ai file, 17Mb)
I would also like to credit Gabe Zentall for putting out his GUI Interface Library which I used for many years before eventually building my own...Elements are (somewhat) grouped into layers, as well as symbols. Look for updated versions in the future. Please use as you see fit, credit it appreciated.

article comments

Comments

Wow. Very cool. Thanks! I also used Gabes.. but making the switch now. Love the temperance, un-fixed reaction I haev to the sketch style. Many many thanks
posted by Jim  |    |  http://www.sentient.sprocket.co.nz

I was just about to start creating a library of these for myself and then I found yours. Wonderful!
posted by Jenn  |    

You should check out OmniGraffle as a tool for that unused MacBookPro of yours :) Killer software for prototyping and wireframing. I use it regularly and it's save hours on site maps, wireframes, app screens, etc. http://www.omnigroup.com/applications/OmniGraffle/
posted by creativereason  |    |  http://www.creativereason.com

@Tejas: All the various elements are located in separate layers within the Illustrator file....
posted by Matt  |    

Looks like there's only one page saying what this document is for. I am not a gr8 user of Illustrator, am I missing other pages that has GUI elements?
posted by Tejas  |    |  http://www.ditindia.com

Thanks for the share!
posted by Cheap Nike Air Max W  |    |  http://blockeng.com/images/Cheap-Nike-Air-Max-Whol

*Comment:
*Name:
URL

allowable tags:<a>, <b>, <i>