eleqtriq

Sqetch Wireframe Toolkit

Sqetch is a little Illustrator-toolkit I built over time, consisting of several templates and elements:

It evolved one by one as an answer to several problems I encountered related to wireframing:

Like many designers I frequently experienced that clients did not understand my wireframes. More than once they were not able to distinguish between a layout and a wireframe. Suddenly I found myself debating about colors and font-sizes, when it would have been appropriate to talk about processes and information-architecture instead.

Presenting wireframes can be arduous. Sometimes you must go through countless screens with slight variations of one single situation. This requires a lot of discipline by the designer as well as the client.

Even experienced clients often react disappointed or bored to wireframes. Clients want us designers to "wow" them. Wireframes do a bad job at wowing anybody. Using Omnigraffle or keynote doesn't help either. Some clients do not understand the labour that is involved and think we are overpaid. I remember a client who actually told me he would prefer to do the wireframing himself, as he saw no reason to "pay a designer for pushing some boxes around in word".

As a consequence I began to create high-quality versions of my hand-drawn wireframes and use them in client-presentations. The hand-crafted, artistic component helped circumvent many of the problems described above. Unfortunately it came for a price: labour-intensiveness. Drawing a lot of variants of one screen is much more time-consuming than making changes in a digital document.

Therefore I began transferring my drawings to illustrator. And after some time a little wireframe-toolkit had evolved, which you can download here. For maximum flexibility everything was created with vectors, no bitmap in sight. Every element can be scaled without loss of quality, every single stroke can be edited separately, to adapt the look of a sketch as ever you like. Colors are in CMYK for easy printing. And if you are a CS5 user you will be pleased to find out that all symbols are attached to a 9-slice scaling grid.

The font in use is Nymph's Handwriting, a beautiful font from talented Lauren Thompson, which you can download from her blog. And as you are already there you should take a look at her other fonts, it's worth it.

Download of sqetch is free and you are allowed to use the toolkit in commercial projects. Anyway, should you use it on a website or in a printed publication I expect you to give me credit and link to www.eleqtriq.com (respectively mention the internet-address in printed publications). If this shouldn't be possible for some reason, contact me and we work something out. Happy wireframing!

Update! Thanks to Jakub and Smashingmag for linking. Anyway, as traffic increased over the last few hours I decided to test a mirror server. If you experience problems, please send me a note in the comments.

Download Toolkit
Trackback

80 Responses to “Sqetch, an Illustrator Wireframe Toolkit”

  1. Pingback by TechnoRabbit » Sqetch: Illustrator Wireframe Toolkit Fri Sep 10th, 2010, 03:34

    […] Sqetch, an Illustrator Wireframe Toolkit >> Tags: Elementos de interfaz gráfica, inspiración, iPad, Navegador, plantillas, Smartphone […]

  2. Comment by Deepesh Chetariyil Fri Sep 10th, 2010, 13:49

    its something new for me relating to what you’ve said here but it sure did catch my interest and now i cant wait to check it out on a whole…

  3. Comment by Dave Bergschneider Fri Sep 10th, 2010, 14:09

    Nice & stylish wireframing kit but man did it take a while to render all those gaussian blurs.

  4. Comment by Dirk Fri Sep 10th, 2010, 17:14

    Yes, that’s the drawback of Illustrator-effects. It works flawless on my macbook, but depending on your configuration it can bring your machine to its knees…

  5. Comment by Morgan Fri Sep 10th, 2010, 23:12

    I’ve been trying for a couple of days to get this downloaded to try out but no luck. Do you have another link available to try?

  6. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | The best Tutorials Mon Sep 13th, 2010, 10:38

    […] Sqetch is an Illustrator Wireframe Toolkit, consisting of several templates and elements: Browsers, iPad, Smartphone, GUI Elements and Form Elements. Download of sqetch is free and you are allowed to use the toolkit in commercial projects. […]

  7. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | Webplus - web developer resource blog Mon Sep 13th, 2010, 11:16

    […] Sqetch is an Illustrator Wireframe Toolkit, consisting of several templates and elements: Browsers, iPad, Smartphone, GUI Elements and Form Elements. Download of sqetch is free and you are allowed to use the toolkit in commercial projects. […]

  8. Pingback by Free & Unique Illustrator Wireframe Toolkit: Sqetch | TekPages Mon Sep 13th, 2010, 12:19

    […] Sqetch is a free & unique Illustrator wireframe toolkit I built over time, consisting of several templates and elements. […]

  9. Comment by Dulce Mon Sep 13th, 2010, 17:23

    Awesome toolkit… very stylish. Thanks for sharing it. It came in handy!

  10. Comment by Dirk Mon Sep 13th, 2010, 21:57

    Hello Morgan, you can get it from may shared Dropbox-folder, if you have a Dropbox-account: https://www.dropbox.com/link/17.f6cU9pykXN?k=8f1f925272011f09a0dfaf7d37fc076c

  11. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) :Speckyboy Design Magazine Tue Sep 14th, 2010, 10:05

    […] an Eerie Underwater Composition in PhotoshopHow to make a robot character in Adobe IllustratorAn Illustrator Wireframing ToolkitOffice Vector IconsQuality Control – Turn WordPress Ticketing SystemFree “Flash/Landing […]

  12. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) · rogdykker Tue Sep 14th, 2010, 10:17

    […] An Illustrator Wireframing Toolkit […]

  13. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) · rogdykker Tue Sep 14th, 2010, 10:17

    […] An Illustrator Wireframing Toolkit […]

  14. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) | The best Tutorials Tue Sep 14th, 2010, 10:34

    […] An Illustrator Wireframing Toolkit […]

  15. Pingback by Sqetch - Illustrator Wireframe Toolkit | Blogzóna | VENTOSA kreatív stúdió Tue Sep 14th, 2010, 12:31

    […] – Illustrator Wireframe Toolkit http://www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/ Könyvjelzők közé ezt az […]

  16. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | Appwebmaster Tue Sep 14th, 2010, 15:14

    […] Sqetch is an Illustrator Wireframe Toolkit, consisting of several templates and elements: Browsers, iPad, Smartphone, GUI Elements and Form Elements. Download of sqetch is free and you are allowed to use the toolkit in commercial projects. […]

  17. Comment by Mohan Tue Sep 14th, 2010, 16:55

    very useful toolkit, thanks

  18. Comment by LuckyMethod Tue Sep 14th, 2010, 20:06

    The set is pretty stylish, I’m not sure it’s practical to use in the day to day, it really stresses my machine and it looks a bit fussy to update because there’s so much going on in each element. Don’t get me wrong, this template is BEAUTIFUL, I just can’t imagine using it daily. I can see myself using it to polish one or two pieces of wireframe and post it on my site for portfolio purposes though (to make it look interesting to the casual visitor), it’s just a great template. Thanks for your work.

  19. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) « Free UK Web Design Tue Sep 14th, 2010, 21:31

    […] An Illustrator Wireframing Toolkit […]

  20. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) « UKWDS! Wed Sep 15th, 2010, 02:17

    […] An Illustrator Wireframing Toolkit […]