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 Russ Johnson Do. 4. Nov 2010, 16:58

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

  2. Kommentar by Kevin So. 7. Nov 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.

  3. Kommentar by Hoby Do. 18. Nov 2010, 03:11

    Very cool, thanks.

  4. Kommentar by Jhon Mi. 8. Dez 2010, 15:17

    Thanks man! It’s beautiful!

  5. Kommentar by Carla Castro So. 12. Dez 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.

  6. Kommentar by Dirk So. 12. Dez 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

  7. Kommentar by Carla Castro Di. 14. Dez 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!

  8. Kommentar by D Mo. 17. Jan 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?

  9. Kommentar by Dirk Di. 18. Jan 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

  10. Kommentar by Steve Di. 8. Mär 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

  11. Kommentar by Yago Do. 31. Mär 2011, 10:02

    Lovely! Thanks buddy

  12. Kommentar by smith Mi. 20. Apr 2011, 12:08

    i can’t open in illustrator cs3, why

  13. Kommentar by J. Fr. 13. Mai 2011, 13:38

    Very nice illustrations and thank you very much for sharing!

  14. Kommentar by Safaa Sa. 28. Mai 2011, 01:54

    Very nice, I’ll try it out
    Thanks

  15. Kommentar by hass Mo. 6. Jun 2011, 20:45

    love the aesthetic! thx for sharing

  16. Kommentar by noel saw Di. 27. Sep 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

  17. Kommentar by Nancy Shaw So. 2. Okt 2011, 05:11

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

  18. Kommentar by Bruno Di. 25. Okt 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.

  19. Trackback by Hauk IT - Web Consulting Sa. 29. Okt 2011, 04:28

    Hallo…

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

  20. Kommentar by JET Do. 3. Nov 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.