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 Russ Johnson 11/04/2010

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

  2. Comment by Kevin 11/07/2010

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

  3. Comment by Hoby 11/18/2010

    Very cool, thanks.

  4. Comment by Jhon 12/08/2010

    Thanks man! It’s beautiful!

  5. Comment by Carla Castro 12/12/2010

    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.

  6. Comment by Dirk 12/12/2010

    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

  7. Comment by Carla Castro 12/14/2010

    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!

  8. Comment by D 01/17/2011

    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?

  9. Comment by Dirk 01/18/2011

    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

  10. Comment by Steve 03/08/2011

    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

  11. Comment by Yago 03/31/2011

    Lovely! Thanks buddy

  12. Comment by smith 04/20/2011

    i can’t open in illustrator cs3, why

  13. Comment by J. 05/13/2011

    Very nice illustrations and thank you very much for sharing!

  14. Comment by Safaa 05/28/2011

    Very nice, I’ll try it out
    Thanks

  15. Comment by hass 06/06/2011

    love the aesthetic! thx for sharing

  16. Comment by noel saw 09/27/2011

    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

  17. Comment by Nancy Shaw 10/02/2011

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

  18. Comment by Bruno 10/25/2011

    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.

  19. Trackback by Hauk IT - Web Consulting 10/29/2011

    Hallo…

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

  20. Comment by JET 11/03/2011

    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.