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. Pingback by Sqetch: Wireframing-Toolkit für Illustrator « Kreativrauschen Mi. 15. Sep 2010, 09:01

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

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

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

  3. Kommentar by Hari Mi. 15. Sep 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.

  4. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | Programming Blog Mi. 15. Sep 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, […]

  5. Pingback by Sqetch, o Illustrator | Criaturas /blog Do. 16. Sep 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:« […]

  6. Kommentar by Zet Do. 16. Sep 2010, 21:39

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

  7. Kommentar by Neil Mo. 20. Sep 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.

  8. Kommentar by Dirk Di. 21. Sep 2010, 00:59

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

  9. Kommentar by poorpaddy Di. 21. Sep 2010, 05:47

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

  10. Kommentar by Robalot Mi. 22. Sep 2010, 16:52

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

  11. Kommentar by Tony Do. 30. Sep 2010, 12:56

    Absolutely stunning mate, thanks for sharing.

  12. Kommentar by Lauren Do. 30. Sep 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

  13. Kommentar by Dirk Do. 30. Sep 2010, 22:03

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

  14. Kommentar by eric Di. 5. Okt 2010, 22:11

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

  15. Kommentar by Dirk Di. 5. Okt 2010, 23:51

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

  16. Kommentar by eric Mi. 6. Okt 2010, 00:56

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

  17. Kommentar by tzs007 Mo. 18. Okt 2010, 23:46

    flawless!

  18. Kommentar by Theo Mo. 1. Nov 2010, 19:57

    Really awesome thanks a lot !

  19. Pingback by Ultimate Guide to Website Wireframing | Designer Brisbane blog Mi. 3. Nov 2010, 06:11

    […] Sqetch […]

  20. Kommentar by Germo Mi. 3. Nov 2010, 10:15

    Really inspiring one! Thanks!