Ideation: Visuelles Denken und Ideenfindung

Bedienoberflächen zeichnen – Scribbles

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Scribbles sind schnelle Skizzen von Benutzeroberflächen mit Stift und Papier. Sie helfen dabei, schnell ganz unterschiedliche Ideen auszuprobieren und sich selbst und Kollegen vor Augen zu führen, wie die fertige Anwendung aussehen könnte.
09:42

Transkript

Ob Sie eine Website erstellen, eine App oder eine andere digitale Anwendung, am Ende steht immer etwas, dass Ihre Nutzer vor allen Dingen über die Augen wahrnehmen. Auch deshalb beginnen sehr viele Anwendungen mit Handzeichnungen, sogenannten Scribbles, und es geht rasend schnell, so konkrete Ideen zu entwickeln. Sie kommen auf viel mehr unterschiedliche Ansätze, als wenn Sie nur darüber sprechen oder schöne Texte schreiben. Für die Gestaltung gibt es keine Vorgaben. Sie können sich echt austoben. Ein Scribble, das schafft etwas konkretes. Das Foto muss zum Beispiel an einer bestimmten Position platziert werden, die Reihenfolge der Inhalte auf der Seite muss festgelegt werden, die relative Größe der Textbereiche zueinander muss stimmen. Sie merken so schnell, wenn Sie etwas doch noch nicht zu klar vor Augen hatten, wie gedacht, oder noch wichtiger, dass andere im Team etwas anderes vor Augen hatten. Gegenüber ausgefallten Darstellungen der geplanten Anwendungen, wie etwa mit Photoshop, haben Scribbles vor allen Dingen zwei Vorteile. Erstens: Sie entstehen sehr schnell. Das ist gut, um viele unterschiedliche Ideen zu entwickeln. Zweitens: Es sieht jeder, dass ein Scribble kaum grafische Vorgaben macht. Niemand wird Sie fragen, warum die Linie Schwaz ist, oder sagen, dass er Blau nicht mag. Außerdem haben andere wenig Hemmungen Änderungen vorzuschlagen oder eigene Ideen einzubringen. Am besten greifen Sie selbst zum Stift und zeigen ihnen, was Sie gerne anders hätten. Bei einer Website, da beginnen Sie normalerweise mit der Startseite und machen da das erste Scribble. Bei einer App beginnen Sie mit dem Screen von dem aus man die meisten Funktionen erreicht, den die Nutzer die meiste Zeit sehen. Dann macht man bei einer Website noch ein-zwei wichtige Unterseiten. Bei einem Shop zum Beispiel die Kategorie-Seite und die Produktdetail-Seite. Vielleicht aber auch schon den Warenkorb und den Weg zur Kasse, dem Check Out. Beste Vorgaben gibt es hier nicht. Zeichnen Sie alles, was wichtig ist und alles, was eventuell bei der Umsetzung nicht ganz klar ist. Wie groß sollte ein Scribble sein? Und das kommt ganz drauf an. Wollen Sie schnell viele neue Ideen, dann zeichnen Sie eher klein, 2 Zentimeter breit, 3 hoch, das ist eine gute Größe für HTML-Seiten oder Apps, sowie wir das hier sehen. Kommt Ihnen das klein vor? Das ist es auch. Der Vorteil ist eben, Sie sind sehr schnell, wenn Sie sowas zeichnen. Erstellen Sie einfach mal fünf-sechs Ideen. Fangen Sie mit der offensichtlichen an und machen Sie einfach weiter. Wie beim Brainstorming denen Sie nicht groß nach, ob die Ideen gut sind, sammeln Sie erstmal. Das geht auch super in der Gruppe. Zehn Minuten stille Arbeit reichen, und jeder zeichnet einfach mal ein paar Mini-Scribbles. Danach gehen Sie rum und lassen sich alle erklären. In einer halben Stunde haben Sie so schnell 10-20 unterschiedliche Ansätze. Die besten entwickeln Sie dann weiter zu etwas größeren Scribbles. Im Download-Bereich finden Sie auch Vorlagen, mit denen manche gern arbeiten. Da sind dann etwa die Umrisse eines Smartphones oder das Browserfenster vorgezeichnet. Die müssen Sie dann nur noch mit Inhalt füllen. Als Beispiel kann das so aussehen. Und es gibt auch fertige Blöcke, die Sie kaufen können, da haben Sie diese ganzen Sachen dann auch schon vorgezeichnet, hier sogar mit Pixelmassen, Smartphone-Ansicht, können Sie kommentieren, auf der Rückseite haben Sie das Ganze auch noch mal in der Tablet-Ansicht und Smartphone quer. Glücklicherweise von der Bildsprache her zeichnet man Kästchen, um anzudeuten, das hier ein Bild kommen soll. Das sieht dann einfach so aus, ganz normales Kästchen. Da kommt ein Kreuzchen rein. So bekommen die Kästchen mehr visuelles Gewicht als ganz ohne Inhalt. Auch wenn Sie super zeichnen können, halten Sie sich nicht damit auf den Bildinhalt zu zeichnen, schreiben Sie in jedem das Scribble, das zu sehen ist. Das geht viel schneller und es lenkt weniger ab. Eine Ausnahme ist vielleicht eine Seite, auf der ein Bild oder ein Icon das zentrale Element ist. Dann können Sie das grob skizzieren. Texte, die schreiben Sie nur für die Überschriften der ersten und vielleicht der zweiten Ebene. Das heißt, wir sagen hier zum Beispiel hier "Produkte", und es kommt auch gar nicht unbedingt drauf an, das man es lesen kann, und die meisten Texte, die symbolisiere ich einfach, indem ich hier so ein paar Linien drunter mache. Damit deute ich an, das sind jetzt hier meine Textblöcke, die haben ungefähr die Länge von vier Zeilen. Ich kann natürlich auch hier so Schlangen machen, aber das sieht nie so wahnsinnig elegant aus, außerdem ist es sehr schwierig hier die Schlangen ungefähr an dieselbe linke und rechte Kante auszurichten. Farbe brauchen Sie bei Scribble nur manchmal. Es dauert ein bisschen länger, sieht aber auch oft ein bisschen professioneller aus. Was ich gerne manchmal mache ist, dass ich zum Beispiel diese Bilder hier entweder mit einem grauen Marker ausfülle, geht dann auch ziemlich fix, und ich habe dem Ganzen dann auch noch mal ein bisschen mehr visuelles Gewicht gegeben oder ich kann einzelne Bereiche mit Schatten versehen, vielleicht zum Beispiel auch hier mit so Texten machen oder mit andeuten, dass das irgendwie stärker gestaltete Texte sein sollen. Vor allen Dingen, wenn Scribbles weitergegeben werden an Leute, die nicht dabei waren, wie das entstanden ist, dann sorge ich dafür, dass die nach ein bisschen was aussehen. Einfach deshalb, weil dann klar wird, dass das ernsthafte Dokumente sind, da ist viel Hirnschmalz reingeflossen. Es besteht sonst immer die Gefahr, dass die Scribbles eine wichtige Aufgabe nicht erfüllen: Den Beteiligten frühzeitig klar machen, wie die Anwendung aussehen soll und Ihre Kritik oder Zustimmung dafür zu bekommen. Damit Ihre Elemente schön auf den Seiten angeordnet sind, hilft Ihnen ein Gestaltungsraster. Ein Raster, das ist ein regelmäßiges Netz von Führungslinien, an denen Sie Ihre Elemente ausrichten. Gestaltungsraster, English, Grids, die sind aus der Gestaltung nicht mehr wegzudenken. Ob Zeitschriften, Websites oder Apps, kein professioneller Designer arbeitet ohne Raster. Raster für Screendesign haben oft zwölf Spalten. Warum jetzt gerad zwölf? Zwölf lässt sich ohne Rest durch viele andere Zahlen teilen, Das heißt, Sie können auf der Seite ein, zwei, drei, vier, sechs oder zwölf gleich breite Elemente anordnen und habe nie krumme Werte oder ungleiche Abstände oder Größen. Sehr praktisch. Beim Scribblen, da können Sie ein Blatt mit Raster unter Ihr Papier legen, dann scheint das durch und Sie können die Objekte dann ausrichten. Noch lieber nutze ich persönlich hier mein ganz spezielles Rasterlineal. Das ist einfach nur ein Ausdruck auf dem ich mir ein zwölfer Raster hier angelegt habe, es sind zwölf Kästchen hier drauf. Und mit denen kann ich direkt, ohne was vorzeichnen zu müssen, meine Elemente hier in der richtigen Größe anlegen, ich sage zum Beispiel hier, möchte da einen Bildkasten haben, Nutze hier die Kante, die untere Kante als Führungslinie auch, damit kriege ich eine schön grade Linie, sage, dazwischen ist Platz für Text, hier kommt noch mal ein weiteres Bildelement rein, hier die Größe, wenn ich es richtig schön machen will, schiebe ich das hier so nach oben und kann dann hier die Linie auch schön gerade machen und wenn ich darauf achten, dass hier mein Papier immer schön parallel zu der Kante von dem Block ist, dann bin ich auch sicher, dass die Linien senkrecht sind beziehungsweise waagerecht in dem Fall. Muss jetzt hier ein bisschen schauen, aha, das habe ich zu kurz gezeichnet, kann noch ein bisschen runtergehen, bis die Linie kommt, da kommt sie, verlängere die hie noch so ein bisschen, sieht immer ein bisschen schöner aus, wenn die Linie zu lang ist, als wenn sie zu kurz ist, außerdem habe ich den Vorteil, dann kommt Sie hier eben schon raus und ich sehe, wie weit ich zeichnen muss und kann dann hier meinen Kasten vollenden. Und mit der Technik kann ich eben hier ganz viel, sehr schnell meine Elemente auf der Seite anordnen. Alles passt, ich muss nichts vorzeichnen, ich muss keine Linien mit Bleistift ziehen, ich brauche keine Ausdrucke von irgendwelchen Formularen. Alles einfach sehr schnell und quick and dirty zu machen. Diese Vorlage zu Ausdrucken, die finden Sie im Download-Bereich zu dem Training natürlich wieder. Haben Sie aber mal keine Zeit, dann kann es sogar noch schneller gehen, wenn Sie einfach ein weißes Blatt Papier nehmen. Weißes Blatt Papier, das können Sie einfach falten, und damit haben Sie ganz ohne Lineal oder nachmessen auch schon in wenigen Handgriffen ein vierer Raster parat. Ist schon mal besser als nichts, weil man tut sich gar nicht so leicht hier die Abstände richtig einzuschätzen auf dem leeren Blatt. Ich kann aber auch noch viel einfacheren Trick machen, nämlich ich fange hier an, einfach meine Linien zu zeichnen und zeichne die so ein bisschen auf das Blatt drauf. Und dann sage ich, dieses Element hier, das soll so groß werden und habe hier auf meinem Blatt gleich die Breite von diesem Kasten angelegt. Und wenn ich sage, okay, das soll jetzt genau die Breite von diesem Kasten wieder weiter nach rechts wandern, mache hier ein kleines Strichchen und sehe genau, wie breit jetzt hier dieses Element werden muss. Kann hier auch noch mal anlegen, damit das auch wirklich hier eine parallele Linie ist. Ja, mache auch hier schöne parallele Linien mit der Hilfe von der Blattkante. Und damit habe ich ganz ohne irgendwas ausgedrucktes oder irgendwelche Vorbereitungen sichergestellt, dass alle meine Elemente gleich groß werden. Mit diesen wenigen Tricks haben Sie schon das Werkzeug, um schnell und sauber Scribbles für Apps und Websites zu erstellen.

Ideation: Visuelles Denken und Ideenfindung

Lernen Sie, mit visuellem Denken an neue Lösungsansätze zu kommen. Jens Jacobsen zeigt Ihnen dafür die notwendigen Fertigkeiten am Whitboard.

2 Std. 40 min (33 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!