Search: Style Sheets: style1  style3  style4  RSS: RSS Feed

 

Twitter Updates

follow me on Twitter

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.


software-design sketching prototyping   |  Posted:07.21.09

 

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

Houses are quite expensive and not everyone is able to buy it. However, loan are invented to aid people in such kind of situations.
posted by Griffith34Kathleen  |    

I must say that's an intriguing approach to this issue. Still I am not definite about it now. No doubt we share the opinion and I really enjoy reading your article. research paper help
posted by greg  |    |  

Thank you for this great resource ! Unfortunately, I can't download more than 5Mo of your file. It seems to be corrupted... :(
posted by Olivier  |    

This problem requires a distinct way of thinking. If I have made myself clear, you will understand my original meaning. I am not definite about it now. You are very precise about facts you share.
posted by robert  |    |  http://writing-services.org/

*Comment:
*Name:
URL
 
*Re-enter Captcha:

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

© 2009 Matthew Rea Design. All rights reserved.   |   HOME ABOUT WORK CONTACT