Kennt ihr das, wenn ihr eine neue Idee habt, aber nicht so richtig wisst, wo ihr anfangen sollt? Eine gute Möglichkeit, um diese anfängliche Blockade zu beheben, ist es, sich einfach erstmal Skizzen anzufertigen. "Skizzen, das heißt, man muss zeichnen können! Aber ich kann gar nicht zeichnen!", mag sich der eine oder andere nun denken. Aber gerade das ist der Punkt von Skizzen - jeder kann sie machen, da sie nur das Prinzip der Ideen verdeutlichen sollen, anstatt ein hochwertiges Kunstwerk zu sein.
Es gibt sogar verschiedene Arten von Skizzen, und spezielle Techniken, die für das Anfertigen solcher extrem nützlich sind. Ein paar davon möchte ich euch vorstellen, inklusive Ideen, die ich damit "gesketcht" habe.
Ein toller Vorteil solcher Sketches ist, dass man einfach schnell Überlegungen darstellen kann, und wenn sie sich als doch nicht so gut herausstellen, sie super schnell wieder verwerfen kann - immerhin hat man im Normalfall nicht viel Arbeit in diese kleine Skizze gesteckt. Fehler kann man auch einfach behalten, die gehören dazu. Da ich selbst Besitzerin einer Art Grafik-Tablett bin, beziehen sich die Tipps hauptsächtlich auf solche, die man gut mit digitalen Techniken umsetzen kann. Meine Kenntnisse beziehe ich aus (1).
Beispiele für Skizzen-Arten
- Storyboard
- Wireframe
- Hybrid Sketches
Nützliche Techniken
- Photo Tracing
- Templates nutzen!
- Strichmännchen verwenden
- Passende Kamera-Shots auswählen
- Aktionen und Bewegungen hervorheben
Photo Tracing
So simpel, und trotzdem kommt man nicht immer drauf. Hat man etwas aus der realen Welt, was man gerne bildlich für seinen Sketch verwenden möchte, muss man nicht viel Zeit damit verbringen, seine Zeichenkünste soweit hochzuschrauben, dass man jedes beliebige Objekt zeichnen kann.
Man nehme ein Foto, schraube dessen Alpha-Kanal mit einem beliebigen Bildbearbeitungsprogramm (ich empfehle z.B. Gimp (2), da kostenlos und trotzdem viele Funktionen) stark runter, sodass es fast transparent ist, und zeichne einfach die wichtigsten (!!) Konturen nach. Auf Papier ist dies alternativ auch als "abpausen" bekannt, z.B. aus der Grundschule.
Als Beispiel seht ihr hier, wie ich mit dieser Technik aus einem Foto, wie ich mein Handy mit beiden Händen halte, ein Template für die weitere Benutzung erstellt habe. Womit wir zum nächsten Punkt kommen.


Die Templates
Solltet ihr eure Skizzen auf Papier anfertigen, ist dieser Punkt weitestgehend irrelevant. Hierfür ein Tipp um euch selbst auszutricksen: Nutzt dickere Stifte, anstatt einen dünnen Bleistift - dann kommt ihr nicht in Versuchung, zu viele Datails einzubringen. Templates sind quasi Vorlagen, die ihr immer wieder verwenden könnt. Meine Templates helfen mir außerdem dabei, die Dimensionen (z.B des Smartphones) richtig einschätzen zu können, statt z.B. direkt den geplanten Bildschirminhalt auf ein leeres Blatt Papier zu zeichnen.
Hier eine Auswahl meiner Templates:
![]() |
![]() |
![]() |
![]() |
Doch nun zu einer Auswahl an Techniken und ein paar meiner Ideen!
Storyboard
Beim Storyboard skizziert man, wie der Name schon sagt, eine kleine Story. Sinn hierbei ist es, darzustellen, in welcher Reihenfolge aktionen ablaufen sollen. Wo wir beim Thema Aktionen sind - bei Aktionen oder Bewegungen lohnt es sich, sie z.B. farblich hervorzuheben. Ich habe dieses Prinzip genutzt, um ein Smartphone-Spiel, das ich eventuell entwickeln wollte, zu skizzieren. Die Reihenfolge kann sich aus der Anordnung ergeben, oder aber auch durch Pfeile o.Ä. angegeben werden. Wenn auf ein Detail aufmerksam gemacht werden soll, bietet es sich an, z.B. die Nahansicht (close-up) zu verwenden. Ich habe hier versucht, eine Art "Zoom"-Effekt darzustellen.

Wireframe
Wireframes eignen sich besonders gut, um Interfaces darzustellen - was soll passieren, wenn man mit welchem Menüpunkt wie interagiert? Ich denke, am einfachsten ist dieses Prinzip zu verstehen, wenn man es einfach einmal gesehen hat. Mein Wireframe bezieht sich ebenfalls auf mein geplantes Smartphone-Spiel.

Hybrid Sketches
Bei hybriden Sketches bezieht man Fotos der realen Welt mit ein, und erweitert sie um seine Skizzen. Diese Technik habe ich z.B. verwendet, um eine AR-App darstellen zu können - ich wüsste auch nichts, was besser dafür geeignet wäre, immerhin basieren beide Konzepte darauf, die reale Welt durch etwas irreales zu ergänzen.

ein weiteres Sketch-Beispiel
Was ich noch hervorheben möchte ist, dass man wirklich darauf achten sollte, unwichtiges wegzulassen. Mir fiel das anfangs ziemlich schwer, und ich habe erst gemerkt, dass es zu viel war, als ich am Ende erstaunt auf die vergangene Zeit geschaut habe..
In diesem Beispiel ist es z.B. total egal, was im Regal steht, und solange die Person weit genug weg ist, reichen einfache Konturen. Das wird erst relevant, wenn es zur Nahaufnahme kommt - hier, um darauf hinzuweisen, dass die Person eine Brille auf hat, mit der sie beim Anblick eines Artikels sofort Stern-Bewertungen und Kommentare sehen kann. Aufbauend darauf kann sie sich dann zum bestbewertetsten Produkt im Laden führen lassen. Hierfür eignet sich ein Perspektivenwechsel auf die Vogelperspektive.

Sketching Makes You Think and Work Faster"Sketching lässt dich schneller denken und arbeiten"
Sketches Can Look Bad and Still Work Wonderfully"Sketches können schlecht aussehen und trotzdem wundervoll funktionieren"
Literaturverweise
(1) Sketching User Experiences - Workshop(2) Gimp-Website
(3) Zitatherkunft und weitere Infos zu Wireframes