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. 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.

  21. 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 [...]

  22. 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…

  23. 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.

  24. 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…

  25. 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?

  26. 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. [...]

  27. 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. [...]

  28. 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. [...]

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

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

  30. 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

  31. 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 [...]

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

    [...] An Illustrator Wireframing Toolkit [...]

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

    [...] An Illustrator Wireframing Toolkit [...]

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

    [...] An Illustrator Wireframing Toolkit [...]

  35. 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 [...]

  36. 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. [...]

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

    very useful toolkit, thanks

  38. 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.

  39. 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 [...]

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

    [...] An Illustrator Wireframing Toolkit [...]

  41. Pingback by Sqetch: Wireframing-Toolkit für Illustrator « Kreativrauschen Wed Sep 15th, 2010, 09:01

    [...] Sqetch ist ein Haufen Vorlagen für Illustrator, mit dem man leichter Wireframes/Mock-Ups basteln kann. Klingt praktisch. Ist kostenlos. [...]

  42. Pingback by Linkdump vom Di, 14. September 2010 bis Mi, 15. September 2010 Links synapsenschnappsen Wed Sep 15th, 2010, 09:09

    [...] An Illustrator Wireframing Toolkit | eleqtriq – (Tags: Wireframe dev Webdesign ) [...]

  43. Comment by Hari Wed Sep 15th, 2010, 16:51

    Looks very nice. I would love to try out. I tried to download the zip but cannot open it. Do you have an alternate download?
    thanks for sharing.

  44. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | Programming Blog Wed Sep 15th, 2010, 20:32

    [...] web resources 15 Sep 2010  Powered by Max Banner Ads Sqetch is an Illustrator Wireframe Toolkit, consisting of several templates and elements: Browsers, iPad, [...]

  45. Pingback by Sqetch, o Illustrator | Criaturas /blog Thu Sep 16th, 2010, 02:38

    [...] impressas, seja dado o devido crédito ao seu autor e, com um link para http://www.eleqtriq.com.Leiam aqui tudo sobre esta aplicação e se vos interessar podem fazer o download nessa mesma página.Temas:online apps Share:« [...]

  46. Comment by Zet Thu Sep 16th, 2010, 21:39

    Love it! Thank you for making this available to all of us out there having the same exact issue!

  47. Comment by Neil Mon Sep 20th, 2010, 19:50

    Looks interesting and I would like to play with it, but I’m having the same issues. The file downloads but will not unarchive.

  48. Comment by Dirk Tue Sep 21st, 2010, 00:59

    I will send you an invite to a shared dropbox-folder

  49. Comment by poorpaddy Tue Sep 21st, 2010, 05:47

    Love it! Would like to see some other versions like for Fireworks, Photoshop etc.

  50. Comment by Robalot Wed Sep 22nd, 2010, 16:52

    The WinRar file is giving me the following error: ! C:\Documents and Settings\rmjordan\Desktop\sqetch.zip: Unexpected end of archive

  51. Comment by Tony Thu Sep 30th, 2010, 12:56

    Absolutely stunning mate, thanks for sharing.

  52. Comment by Lauren Thu Sep 30th, 2010, 20:39

    Thanks so much for the kind words and linking me… I am honored that you used my humble font for this. <3

  53. Comment by Dirk Thu Sep 30th, 2010, 22:03

    Hi Lauren, your welcome! Thanks for sharing your beautiful fonts :)

  54. Comment by eric Tue Oct 5th, 2010, 22:11

    Love the design but the zip file appears to be empty when downloaded. Is there another file? thanks!

  55. Comment by Dirk Tue Oct 5th, 2010, 23:51

    Hi Eric, I will send you an invite to a dropbox shared-folder.

  56. Comment by eric Wed Oct 6th, 2010, 00:56

    got it, Dirk. thank you. great tool (and layout)!

  57. Comment by tzs007 Mon Oct 18th, 2010, 23:46

    flawless!

  58. Comment by Theo Mon Nov 1st, 2010, 19:57

    Really awesome thanks a lot !

  59. Pingback by Ultimate Guide to Website Wireframing | Designer Brisbane blog Wed Nov 3rd, 2010, 06:11

    [...] Sqetch [...]

  60. Comment by Germo Wed Nov 3rd, 2010, 10:15

    Really inspiring one! Thanks!

  61. Comment by Russ Johnson Thu Nov 4th, 2010, 16:58

    Really great work! It would be really nice if these elements could be used in Balsamiq Mockups.

  62. Comment by Kevin Sun Nov 7th, 2010, 21:45

    I use iMockups on the iPad which is a great little app. Wireframing really helps when understanding a clients needs. Great post.

  63. Comment by Hoby Thu Nov 18th, 2010, 03:11

    Very cool, thanks.

  64. Comment by Jhon Wed Dec 8th, 2010, 15:17

    Thanks man! It’s beautiful!

  65. Comment by Carla Castro Sun Dec 12th, 2010, 17:13

    I’ll use it on my final year project; when someone get to pains to do such a good job and share it, the least I can say is thanks you. Very good and so stylish, Dirk.

    Thanks and keep the good work having fun on the way.

  66. Comment by Dirk Sun Dec 12th, 2010, 21:59

    Hi Carla, great that sqetch is useful for your final year project. Hope you’ll post it somewhere on the web when you’re finished :)

    Cheers, Dirk

  67. Comment by Carla Castro Tue Dec 14th, 2010, 16:42

    It will be posted in the web, yes; PDF format as the report for the final year project should be and I’ll send you a link, to see them into context. That will be not as earlier as April! This is so much hard work! At least, instead of insipid mock ups (in word or photoshop), yours are simply what is required encompassed with the lack of time that all other assignments take from the project itself. Thanks! I’ll try to be good.

    Thank you again!

  68. Comment by D Mon Jan 17th, 2011, 19:10

    I’d like to try out the Sketch toolkit but the link isn’t working. Is there another location that it can be downloaded from?

  69. Comment by Dirk Tue Jan 18th, 2011, 20:33

    D.., try again, the link *should* work. If you still have problems, contact me via eMail or webform and I will send you an invite to a shared dropbox.
    Cheers, Dirk

  70. Comment by Steve Tue Mar 8th, 2011, 09:27

    Wow,

    working in this job for ages but never seen such a great work for free! Thanks a lot for sharing it to the world!

    Best..
    Steve

  71. Comment by Yago Thu Mar 31st, 2011, 10:02

    Lovely! Thanks buddy

  72. Comment by smith Wed Apr 20th, 2011, 12:08

    i can’t open in illustrator cs3, why

  73. Comment by J. Fri May 13th, 2011, 13:38

    Very nice illustrations and thank you very much for sharing!

  74. Comment by Safaa Sat May 28th, 2011, 01:54

    Very nice, I’ll try it out
    Thanks

  75. Comment by hass Mon Jun 6th, 2011, 20:45

    love the aesthetic! thx for sharing

  76. Comment by noel saw Tue Sep 27th, 2011, 23:11

    Great tool kit! I think the key to using Illustrator for prototyping is turning on “Smart Guides” which will help snap stuff fairly quickly to other elements on the page. – Noel Saw

  77. Comment by Nancy Shaw Sun Oct 2nd, 2011, 05:11

    These are beautiful, can’t wait to try them.

  78. Comment by Bruno Tue Oct 25th, 2011, 11:53

    Like Robalot The WinRar file is giving me the following error: ! C:\Documents and Settings\rmjordan\Desktop\sqetch.zip: Unexpected end of archive. Any idea why? Maybe you could send me an invite to a shared dropbox, if you please. I’d appreciate it.

  79. Trackback by Hauk IT - Web Consulting Sat Oct 29th, 2011, 04:28

    Hallo…

    Ihre Seite gefällt mir! Schönes Design und sehr übersichtlich… Mit freundlichen Grüßen…

  80. Comment by JET Thu Nov 3rd, 2011, 07:30

    Thanks so much for offering this up to people developing their concepts. it has really made presenting some ideas to my own projects REALLY professional looking. It enhances the vision of what the project look and feel should be. BEST: D.