Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Grundlagen der User Experience: Basiswissen

Scribbeln und Wireframing

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Stift und Papier sind einfaches, billiges und effektives Werkzeug, um Webseiten zu planen. Auch Zeichenprogramme sind eine wertvolle Hilfe, die Struktur Ihrer Seiten anzulegen, ohne dass Sie Grafiker oder Programmierer dazu brauchen.
06:32

Transkript

Scribblen und Wireframing dabei dreht sich alles darum, dass Sie anfangen zu skizzieren, bevor Sie an die Umsetzung gehen. Das heißt, Sie legen fest, wie sieht denn meine Website aus, wie sind die Seiten aufgebaut, bevor Sie irgendein Design machen in Photoshop oder im Grafikprogramm, bevor Sie irgendeinen Seitencode programmieren. Wichtige Begriffe hierbei sind das Scribble, das bedeutet Gekrakel und das ist die einfachste Form dieser Skizzen. Ein Wireframe, das wird skizziert in eine Software und da geben Sie schon relativ stark vor, wie die Website später aussehen soll, zumindest in der Anordnung und in der Größe der Elemente. Bei einem Mockup sind Sie schon eine Stufe weiter. Das ist eine High-Fidelity-Skizze, das heißt, eine Skizze, die schon relativ nah am Endprodukt ist, die schön gestaltet ist normalerweise statisch und eben nicht interaktiv. Ein Papierprototyp, das ist eine Seiten-Skizze, die Sie auf Papier machen und mit der können Sie schon testen, das heißt, die können Sie Testpersonen vorlegen und damit arbeiten lassen. Und ein Prototyp schließlich, der kann am Ende auch interaktiv sein, der wird in HTML programmiert und damit kann man dann schon richtig fertige Tests machen, wie die Website später funktionieren wird. Beim Scribble auf Papier, da überlege ich mir zum Beispiel, wie möchte ich dann meine Website machen. Ich sage jetzt mal, ich habe eine moderne Website, die ist sehr lang, mache ich einen großen Rahmen Ich habe hier vorne oben mein Logo. Das steht vielleicht noch ein zusätzlicher Text dazu. Und ich fange dann an hier die Seite nach und nach aufzubauen. Ich habe hier vielleicht eine Überschrift. Ich möchte hier ein Bild haben. Hier noch ein Bild. Die Bilder bekommen Bildunterschriften. Ich möchte hier ein großes Bild, das vielleicht so als Karussell funktionieren soll, das heißt, der Benutzer soll hier die Möglichkeit haben Bilder durchzuwechseln. Dann habe ich hier nochmal einen Textblock. Hier vielleicht noch einen größeren Textblock. Und am Ende möchte ich hier nochmal ein Abschlussbild haben und dann unten ganz am Ende habe ich hier nochmal vielleicht ein paar Links. Sie sehen, so entsteht ganz schnell eine Skizze, wo ich eine Idee festhalten kann, wie denn eine Seite aussehen könnte. Das hilft mir selber, wenn ich alleine daran arbeite einfach mal ein paar Ideen zu generieren, ein paar Möglichkeiten auszuprobieren und das hilft vor allem im Team, das man da seinen verschiedenen Vorstellungen wirklich visualisiert und feststellt, ne, man hat eigentlich eine ganz andere Vorstellung davon, wie die Seite aussehen soll. Wenn Sie das Ganze dem Kunden präsentieren wollen, dann ist so ein Geschmier, das heißt so was Scribble und Gekrakel und so sieht es bei mir aus. Wenn Sie das präsentieren wollen, dann sollten Sie vielleicht sich überlegen, ob Sie nicht mit einer App arbeiten. Ich finde es sehr schön, weil die unterstützen Sie, die Striche etwas gerader zu machen. Das heißt, wenn ich jetzt hier anfange zu skizzieren, ich wähle dann hier meinen Kugelschreiber und zeichne im Schwarz. Ich fange an hier so ganz grob das ähnlich aufzubauen wie auf dem Papier auch. Ich kann vielleicht hier manche Dinge in einer anderen Farbe noch darstellen, was hier sehr einfach geht. Dann noch etwas breitere Stifte wählen, wenn ich möchte. Ich kann dann hier nach und nach meine Seite aufbauen. Und je nachdem, wie erfahren Sie sind in Zeichnen und wie gut die Software ist, die Sie verwenden, sehen die Sachen dann da natürlich nochmal ein bisschen nach mehr aus als das, was ich auf dem Papier aufgescribbelt habe. Ein weiterer Vorteil ist, das lässt sich leichter korrigieren und wiederverwenden. Ich konnte auch mit Bleistift zeichnen, aber das sieht meistens nicht so gut aus, das Papier knickt oft. Also in den meisten Fällen empfehle ich eben für die ersten schnellen eigenen Ideen Papier zu nehmen, was auch bei Meetings super ist, wenn der Kunde vielleicht mit dabei sitzt. Das alles zusammen Zeichen, das ist eine wunderbare Sache. Wenn Sie aber wirklich was produzieren wollen, was weitergegeben wird an den Auftraggebern, an andere Leute im Team, die nicht dabei sind, dann bietet sich eher an, am Tablet zu zeichnen oder auch am PC, wenn Sie möchten. Die nächste Stufe sind dann die Wireframes. Das ist ein Wort, was natürlich aus dem Englischen kommt. Wireframes ist ein Drahtgittermodell eigentlich, wo Sie ein Produktprototyp mit basteln, aber das Ding sieht ja auch schon so nach ziemlich drahtig aus und daher wird das eben auch verwendet für Wireframes. Die sind die nächste Stufe, die sind detaillierter, die sind konkreter und die entstehen fast immer am PC oder am Tablet. Und damit bekommen Sie ein besseres Gefühl dafür, wie groß die einzelnen Elemente wirklich später dann sind auf dem Bildschirm. Es ist viel näher an der grafischen Umsetzung und Sie haben aber nicht den Aufwand schon echtes Design zu machen. Wenn ich mir jetzt das hier mal angucke, ich sehe mir jetzt am iPad an, wie so ein Wireframe da entstehen kann. Ich verwende hier OmniGraffle. Ich habe schon einen kleinen Teil vorbereitet. Man sieht hier auch, das sind alles eben so Kästen , die hier ähnlich wie bei der Handskizze aufgezogen werden. Die kann ich hier jetzt in so einem Programm dann natürlich auch kopieren und hier wieder einsetzen. Da geht alles natürlich auch ein bisschen schneller von der Hand. Wenn ich das alles sehr exakt haben möchte, dann kann ich auch viel leichter nachträglich hier noch Größen ändern oder Dinge da eben in anderer Form anpassen und so kann ich relativ schnell eben eine Seitenskizze machen, die schon relativ nah dran ist, an den, wie die Website später aussehen soll und kann das meinem Designer naher in die Hand drücken. Wenn es fertig ist, kann das dann zum Beispiel auch so aussehen. Das ist jetzt hier so eine Mischung mit angezeichneten Elementen und Elementen, die schon sehr genau die Größe vorgeben. Sie erkennen hier so die klassische Aufteilung einer Website mit der Seitenleiste, wo Werbung drin oft ist oder Zusatzinformation, weitere Kästen. Mit dieser Skizze sind Sie eben schon sehr nah dran am endgültigen Design. Alle Beteiligten wissen dann schon relativ genau, wie die Website aussehen wird, aber es ist noch nichts da, was an Farbe, an Schriften, an gestalterischen ästhetischen Elementen sozusagen hier vorgegeben ist. Das heißt, es ist alles noch offen und Sie vermeiden in der Phase auch Diskussionen darüber: Ist das Blaue jetzt eigentlich schön? Jeder weiß, hier dieses Grau, so soll die Website natürlich nicht aussehen, sondern Sie wird später schön ästhetisch gestalten sein und ein so ein Wireframe kann sehr unterschiedlich gestaltet werden in sehr unterschiedlichen Stilen. Und das halten Sie aber alles noch offen, das kommt erst im nächsten Schritt.

Grundlagen der User Experience: Basiswissen

Lernen Sie UX-Methoden kennen, mit Hilfe derer Sie herausfinden, was Ihre Nutzer wollen, Struktur und Oberfläche vorab testen und Usability-Tests erfolgreich einsetzen.

1 Std. 7 min (18 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!