eleqtriq

Sqetch Wireframe Toolkit

Sqetch ist ein kleines Illustrator Toolkit das ich im Laufe der Zeit entwickelt habe. Es besteht aus den folgenden Komponenten:

Es entstand nach und nach als Reaktion auf diverse Probleme, denen ich im Zusammenhang mit Wireframes begegnet bin.

Wie viele Designer musste ich häufig erleben, dass meine Wireframes vom Kunden nicht verstanden wurden, weil es ihm schwerfiel, zwischen Layout und Wireframes zu unterscheiden. Unvermittelt diskutierte ich über Schriftgrößen und Farben, wo eigentlich über Funktionsabläufe, Prozesse und Informationsarchitektur gesprochen werden sollte.

Die Präsentation von Wireframes ist anstrengend. Unter Umständen muss auf unzähligen Screens in immer neuen Varianten ein- und dieselbe Situation erkundet werden. Das stellt stellt hohe Ansprüche an die Disziplin von Designer und Kunde.

Selbst erfahrene Kunden reagieren bei der Präsentation von Wireframes oft enttäuscht oder gelangweilt. Kunden erwarten von uns Designern den "Wow"-Effekt. Wireframes sind nicht dazu angetan irgendjemanden zu "wowen". Die Verwendung von Omnigraffle oder Keynote verleitet den Kunden eher dazu anzunehmen, dass er uns überbezahlt. Einmal musste ich mir von einem Kunden erklären lassen, die Wireframes wolle er selbst anfertigen, um ein paar Boxen in Word zu zeichnen brauche er schließlich keinen Designer.

Aus dieser Erfahrung heraus fing ich irgendwann damit an, von meinen handgezeichneten Wireframes hochwertige Versionen zu erstellen und diese dann zu präsentieren. Das handwerkliche, künstlerische Element, das dadurch ins Spiel kam, half viele der beschriebenen Fallen zu umgehen. Leider um den Preis eines neuen Problems: Arbeitsintensität. Immer neue Varianten ähnlicher Situationen von Hand zu zeichnen ist nunmal aufwändiger als von einem Wireframe mehrere Varianten am Bildschirm zu erstellen.

Deswegen begann ich nach und nach meine Zeichnungen nach Illustrator zu übertragen. Es entstand ein kleines Wireframe-Toolkit, welches ich hier zum Download anbiete. Für höchstmögliche Flexibilität wurden alle Zeichnungen in Vektoren angelegt, kein Bitmap weit und breit. Deswegen kann jedes Element ohne Qualitätsverlust skaliert werden. Jeder Strich ist einzeln editierbar, somit kann der Look den individuellen Vorstellungen angepasst werden. Damit alles hochauflösend ausgedruckt werden kann, sind die Farben in 4C angelegt. Und wenn Ihr mit Illustrator CS5 arbeitet werdet Ihr zu schätzen wissen, dass alle Symbole mit einem 9-Slice Skaling-Grid versehen wurden.

Bei dem verwendeten Font handelt es sich um Nymphs Handwriting einen Font der talentierten Lauren Thompson, den Ihr Euch von ihrem Blog laden könnt. Und wenn Ihr schonmal da seid solltet Ihr auch ihre anderen Fonts anschauen, es lohnt sich!

Download ist umsonst und ihr dürft das Toolkit auch in kommerziellen Projekten verwenden. Bei Publikationen auf Webseiten oder in gedruckter Form erwarte ich allerdings eine Quellenangabe und einen Link zu eleqtriq.com (bzw. Nennung der Internetadresse bei gedruckten Publikationen). Sollte das aus irgendeinem Grund nicht möglich sein, kontaktiere mich und wir überlegen uns was. Have Fun!

Update! Vielen Dank an Jakub und Smashingmag fürs Linken. Der Traffic nahm in den letzten Stunden drastisch zu, weswegen ich mich jetzt entschlossen habe einen Mirror auszutesten. Wenn Ihr Probleme beim Download habt, einfach einen Kommentar senden.

Download Toolkit
Trackback

80 Kommentare zu „Sqetch, ein Illustrator Wireframe Toolkit“

  1. Kommentar by Jip Mi. 8. Sep 2010, 15:47

    Very stylish! I like it already!

  2. Kommentar by Colin Mi. 8. Sep 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. Kommentar by HTeuMeuLeu Mi. 8. Sep 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. Kommentar by Rolando Peralta Mi. 8. Sep 2010, 16:52

    fantastic toolkit! thanks a lot for sharing it.

  5. Kommentar by Jaz Mi. 8. Sep 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. Kommentar by Dirk Mi. 8. Sep 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 Mi. 8. Sep 2010, 18:42

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

  8. Pingback by Sqetch Illustrator wireframe toolkit | 家儒的筆記 Mi. 8. Sep 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 | 當代科技 Mi. 8. Sep 2010, 22:02

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

  10. Kommentar by fasalsalam Do. 9. Sep 2010, 09:00

    fantastic toolkit! thanks a lot for sharing it.

  11. Kommentar by pixelnibbler Do. 9. Sep 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. Kommentar by Dirk Do. 9. Sep 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 Do. 9. Sep 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 Do. 9. Sep 2010, 14:25

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

  15. Kommentar by patowc Do. 9. Sep 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. Kommentar by pixelnibbler Do. 9. Sep 2010, 14:54

    will do if and when

  17. Kommentar by bradleygirl Do. 9. Sep 2010, 17:27

    Brilliant. Thanks so much!

  18. Kommentar by pakeras Do. 9. Sep 2010, 19:27

    Nice! Thanks a lot! :D

  19. Kommentar by Ralph Do. 9. Sep 2010, 20:55

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

  20. Kommentar by Benoit Meunier Do. 9. Sep 2010, 22:26

    Wow. Just… wow.