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 TechnoRabbit » Sqetch: Illustrator Wireframe Toolkit Fr. 10. Sep 2010, 03:34

    […] Sqetch, an Illustrator Wireframe Toolkit >> Tags: Elementos de interfaz gráfica, inspiración, iPad, Navegador, plantillas, Smartphone […]

  2. Kommentar by Deepesh Chetariyil Fr. 10. Sep 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…

  3. Kommentar by Dave Bergschneider Fr. 10. Sep 2010, 14:09

    Nice & stylish wireframing kit but man did it take a while to render all those gaussian blurs.

  4. Kommentar by Dirk Fr. 10. Sep 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…

  5. Kommentar by Morgan Fr. 10. Sep 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?

  6. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | The best Tutorials Mo. 13. Sep 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. […]

  7. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | Webplus - web developer resource blog Mo. 13. Sep 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. […]

  8. Pingback by Free & Unique Illustrator Wireframe Toolkit: Sqetch | TekPages Mo. 13. Sep 2010, 12:19

    […] Sqetch is a free & unique Illustrator wireframe toolkit I built over time, consisting of several templates and elements. […]

  9. Kommentar by Dulce Mo. 13. Sep 2010, 17:23

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

  10. Kommentar by Dirk Mo. 13. Sep 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

  11. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) :Speckyboy Design Magazine Di. 14. Sep 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 […]

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

    […] An Illustrator Wireframing Toolkit […]

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

    […] An Illustrator Wireframing Toolkit […]

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

    […] An Illustrator Wireframing Toolkit […]

  15. Pingback by Sqetch - Illustrator Wireframe Toolkit | Blogzóna | VENTOSA kreatív stúdió Di. 14. Sep 2010, 12:31

    […] – Illustrator Wireframe Toolkit http://www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/ Könyvjelzők közé ezt az […]

  16. Pingback by Sqetch – A Stylish Illustrator Wireframe Toolkit | Appwebmaster Di. 14. Sep 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. […]

  17. Kommentar by Mohan Di. 14. Sep 2010, 16:55

    very useful toolkit, thanks

  18. Kommentar by LuckyMethod Di. 14. Sep 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.

  19. Pingback by Weekly Design News – Resources, Tutorials and Freebies (N.55) « Free UK Web Design Di. 14. Sep 2010, 21:31

    […] An Illustrator Wireframing Toolkit […]

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

    […] An Illustrator Wireframing Toolkit […]