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

80 Responses to “Sqetch, an Illustrator Wireframe Toolkit”

  1. Comment by Jip Wed Sep 8th, 2010, 15:47

    Very stylish! I like it already!

  2. Comment by Colin Wed Sep 8th, 2010, 16:05

    Dirk, Your toolkit looks great. Much more refined (yet sketchy) than elements you can do in keynote or omnigraffle. Nice work. One of the things I have found I can’t achieve working in illustrator is speed. Keynote is king for me, and pretty easy to learn for a newbie. Does wireframing in illustrator only make sense if you have 5 years of experience working in Ai every day?

  3. Comment by HTeuMeuLeu Wed Sep 8th, 2010, 16:14

    This is very nice, thanks a lot for this toolkit ! I don’t know if I’d use it, I prefer coding wireframes directly in HTML, but it’s a great look anyway. Do you have any real projects examples you’ve made using this toolkit ?

  4. Comment by Rolando Peralta Wed Sep 8th, 2010, 16:52

    fantastic toolkit! thanks a lot for sharing it.

  5. Comment by Jaz Wed Sep 8th, 2010, 16:57

    Hey! Nice initiative… I’m new to wireframing. But as I do a lot of project management, I have to be polyvalent! It will surely help me out to achieve my projects… Thanks!

  6. Comment by Dirk Wed Sep 8th, 2010, 17:32

    Hello Colin, I’m Glad that you like it!
    Regarding wireframing, 90% of Illustrator’s functionality is definetely overhead. Anyway I don’t think that you need 5 years of experience. A few weeks tinkering and you will be able to get things done. But it’s only an option, there are some great tools out there that can be learned much quicker. :)

    Anyway I’ve worked with Freehand and then Illustrator for a long time already, so it’s quite comfortable for me (even though I do miss Freehand *sigh*)

  7. Pingback by An Illustrator Wireframing Toolkit | eleqtriq « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit Wed Sep 8th, 2010, 18:42

    […] An Illustrator Wireframing Toolkit | eleqtriqeleqtriq.com […]

  8. Pingback by Sqetch Illustrator wireframe toolkit | 家儒的筆記 Wed Sep 8th, 2010, 19:02

    […] 大家可以按這裡到原 post 下載。 This entry was posted in Web Design and tagged illustrator, prototype. Bookmark the permalink. ← 在奇摩Yahoo!的日子 […]

  9. Pingback by Sqetch Illustrator wireframe toolkit | 當代科技 Wed Sep 8th, 2010, 22:02

    […] 大家可以按這裡到原 post 下載。 […]

  10. Comment by fasalsalam Thu Sep 9th, 2010, 09:00

    fantastic toolkit! thanks a lot for sharing it.

  11. Comment by pixelnibbler Thu Sep 9th, 2010, 12:51

    This is great! Been trying to find the time to do something similar myself. You just saved me a load of hassle :)

    Any objections to me using this to skin a flash based interactive wireframing kit?

  12. Comment by Dirk Thu Sep 9th, 2010, 13:16

    Hi Pixelnibbler, use it as you like. If you put your flash online, it would be nice if you put a link to this site somewhere. Looking forward to see your work :)

  13. Pingback by An Illustrator Wireframing Toolkit | eleqtriq : Popular Links : eConsultant Thu Sep 9th, 2010, 14:23

    […] original post here: An Illustrator Wireframing Toolkit | eleqtriq 8 September 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next […]

  14. Pingback by An Illustrator Wireframing Toolkit | eleqtriq » Web Design Thu Sep 9th, 2010, 14:25

    […] An Illustrator Wireframing Toolkit | eleqtriq […]

  15. Comment by patowc Thu Sep 9th, 2010, 14:31

    This is the kind of fantastic thing that makes Internet useful for the World. I cannot remember the many times I was thinking about “templates” for absolute idiots (like me in design).

    Thanks a lot.

  16. Comment by pixelnibbler Thu Sep 9th, 2010, 14:54

    will do if and when

  17. Comment by bradleygirl Thu Sep 9th, 2010, 17:27

    Brilliant. Thanks so much!

  18. Comment by pakeras Thu Sep 9th, 2010, 19:27

    Nice! Thanks a lot! :D

  19. Comment by Ralph Thu Sep 9th, 2010, 20:55

    Thank you for your nice work. I will test it later.

  20. Comment by Benoit Meunier Thu Sep 9th, 2010, 22:26

    Wow. Just… wow.