iProspect Logo

Workflow im Web Design ein kleines Lexikon Teil 1

Diverse Begriffe wie Scribble, Skizze, Wireframe, Mockup, Layout und Reinzeichnung können einen Laien, aber auch manchen eingefleischten Designer verwirren. Aber was haben Scribble, Skizze und Co. zu bedeuten und wo liegen die Unterschiede? In folgendem Beitrag nehmen wir diese Begriffe genauer unter die Lupe und chronologisieren sie entsprechend dem Design-Workflow.

Scribble

Bei dem Wort "Scribble" (="Kritzelei", "Schmiererei" oder "unsauber Geschriebenes") handelt es sich um eine eingedeutschte Begrifflichkeit aus der Werbebranche sowie dem Kunst-Bereich. Man bezeichnet damit einen meist per Stift auf Papier umrissenen bzw. angedeuteten Grobentwurf.

Ein Scribble dient lediglich der Ideenfindung und steht im Unterschied zur Skizze am absoluten Anfang eines Projekts. Er kann also völlig frei von Regeln und Richtlinien erstellt werden. Grundlegender Zweck eines Scribbles ist es, schnell und unkompliziert Ideen und deren elementare Darstellung grafisch umzusetzen und plausibel zu machen. Es kann also auch sehr gut während einer Brainstorm-Phase genutzt werden. Außerdem kann die Verwendung von Scribbles auch zur Unterstützung der internen Kommunikation beitragen. Abb.1: Beispiel für einen Scribble Beispielbild eines Scribble
Skizze / Rohlayout

Die Skizze ist sozusagen das Update zum Scribble und unmittelbarer Vorläufer des Mockup und/oder Wireframe. Hierbei kommt es, wie beim Scribble, weniger auf die Genauigkeit an. Zweck ist es eher, Ideen möglichst schnell grafisch festzuhalten. Auf die Proportionen zwischen den auf dem Rohlayout enthaltenen Objekten sollte hingegen aber Wert gelegt werden. Auch der Kontrast bzw. die Farbigkeit sollte hierbei nicht zu kurz kommen.

Seit geraumer Zeit ist es auch möglich, durch diverse Grafikprogramme, am Computer erstellte Skizzen in Hand gezeichnete Scribbles umzuwandeln. Eine gute Skizze kann ggf. auch als Vorlage für den Kunden eingesetzt werden. Abb.2: Kombination aus Skizze und Wireframe Bild einer Kombination aus Skizze und Wireframe
Wireframe

"Wireframe" (= "Drahtgitter") ist eine Begrifflichkeit aus der Informationstechnik.

Ursprünglich hat man lediglich im Computer Aided Design erschaffene Objekte als Wireframes bezeichnet. Hier werden z. B. statt (farbiger) Pixelflächen nur die Kanten der Objekte gezeichnet und ggf. noch Hilfslinien eingefügt, um einerseits aufzuzeigen, dass es sich um Flächen handelt, andererseits um eine plastische Wirkung zu erhalten. Das dadurch entstehende Gitternetz ist der Grund für den Namen "Wireframe". Im Webdesign werden häufig Piloten von beispielsweise Websites, Bannern oder Flyern, die sich in einem sehr frühen konzeptionellen Stadium befinden, als Wireframe bezeichnet. Hier gibt es zwei Arten des Ebengenannten: der statische und der dynamische Wireframe. Bei Ersterem werden grundlegende Elemente (z. B. Navigation, Bereich für Header/Content/Footer etc.) auf einer einzigen Seite dargestellt. Von dynamischen Wireframes spricht man, wenn einzelne, statische Wireframes zu einem interaktiven Ganzen zusammengefügt werden und somit einen ersten funktionierenden Prototypen einer Website darstellen. Aber egal, um welche Art Wireframe es sich handelt, ist lediglich eine sehr einfache bzw. rudimentäre Darstellung einzelner Grafikelemente notwendig, da hierbei die Konzeption und nicht um das Design im Vordergrund steht.  
Mockup

Der Begriff "Mockup" wird in mehreren Bereichen bzw. Berufsgruppen verwendet (z. B. Konsumgüterindustrie, Softwareentwicklung oder Zahntechnik). Ursprünglich wurden Attrappen mit diesem Begriff belegt. Im Design-Bereich werden heutzutage maßstabsgetreue Modelle oder Nachbildungen, die zu Präsentationszwecken verwendet werden, als Mockups bezeichnet. Häufig werden hier auch die Begriffe "Wireframe" und "Mockup" synonym verwendet.

Abb.3: Beispiel für ein Mockup Beispielbild eines Mockup
(Rein-)Layout

Unter dem Begriff "Layout" versteht die konkrete Visualisierung eines Konzepts bzw. einer Idee. Das dadurch entstehende Bild vermittelt dem Kunden oder allg. dem Auftraggeber bzw. den Personen, die nachfolgend z. B. für die technische Umsetzung zuständig sind, einen Eindruck, wie beispielsweise der spätere Webauftritt auszusehen hat.

Das Layout dient außerdem als Entscheidungsgrundlage für weitere Schritte (Änderungen, Erweiterungen etc.). Der textuelle Content wird in der ersten Erstellungsphase häufig nur als Fülltext (Lorem-Ipsum) eingefügt und erst später (bei der technischen Umsetzung oder erst durch den Kunden nach der letztendlichen Fertigstellung) eingefügt. Abb.4: Beispielbild für ein Layout Beispielbild für ein Layout
Reinzeichnung

Die Phase der Reinzeichnung findet man ausschließlich im Print-Bereich. Diese beginnt nach der Freigabe des finalen (Rein-)Layouts. Hier werden drucktechnisch notwendige Parameter eingestellt. Dazu zählen unter anderen Beschnittzugabe, Farbmanagement, Setzen von Schnittmarken oder Trapping. Die Reinzeichnung stellt also normalerweise das Ende des grafischen Gestaltungsprozesses im Printbereich dar.

 

Ein Design/Konzeptions-Workflow sieht also der Reihe nach so aus: Am Anfang eines Projektes steht meist ein handgezeichnetes Scribble (Brainstorm-Ergebnis). Im Anschluss daran wird aus diversen Scribble-Entwürfen eine konkrete Computer-Skizze. Wireframe und Mockup kommen meist alternativ zur Skizze zum Einsatz und dienen dem Grafiker als Basis für das Reinlayout.