Website-Scribble erstellen: vom Kritzel zum Wireframe

Ein Scribble ist die schnellste Art, ein Seitenlayout zu prüfen, bevor Sie Zeit in Farben, Schriften oder Code stecken. Der häufigste Fehler beim Website-Bau: Man öffnet sofort Figma oder WordPress, verliert sich in Details – und merkt erst spät, dass die Struktur nicht trägt. Mit einer groben Skizze klären Sie in Minuten, welche Inhalte wohin gehören und wie Besucher durch die Seite geführt werden. Nach dieser Anleitung skizzieren Sie eine Seite in unter zehn Minuten, kennen die gängigen Skizzier-Symbole und wissen, wann Papier reicht und wann sich ein Tool wie Excalidraw oder Figma lohnt.

Scribble, Wireframe, Mockup: der Unterschied

Diese Begriffe werden oft vermischt, meinen aber unterschiedliche Detailgrade (Fidelity):

• Scribble – handgezeichnet, grob, in wenigen Minuten erstellt. Es geht nur um Anordnung und Hierarchie, nicht um Aussehen. Kästchen und Striche genügen.
• Wireframe – aufgeräumte, meist digitale Version des Scribbles. Graue Blöcke, echte Beschriftungen, korrekte Proportionen, aber weiterhin ohne Farben und finale Typografie.
• Mockup – das Wireframe mit Farben, Schriften, Bildern und Markenlook. Sieht aus wie die spätere Seite, ist aber statisch.
• Prototyp – klickbares Mockup, mit dem sich Abläufe testen lassen.

Der Sinn dieser Reihenfolge: Fehler früh und billig korrigieren. Ein Kästchen zu verschieben kostet zehn Sekunden, eine fertig gestaltete Sektion umzubauen mehrere Stunden. Das Scribble steht ganz am Anfang dieser Kette.

Was Sie vor dem ersten Strich brauchen

Zeichnen Sie nicht ins Blaue. Drei Dinge sollten vorher klar sein:

1. Ziel der Seite in einem Satz. Beispiel: „Der Besucher soll einen Beratungstermin anfragen.“ Jede Sektion muss auf dieses Ziel einzahlen.
2. Inhaltsinventar (Content Inventory). Sammeln Sie alle Bausteine, die auf die Seite sollen: Überschriften, Textblöcke, Bilder, Formulare, Buttons, Kundenlogos, Preise. Am einfachsten als Liste in einem Dokument.
3. Seitenstruktur (Sitemap). Legen Sie fest, welche Seiten es gibt und wie sie zusammenhängen – etwa Start, Leistungen, Über uns, Blog, Kontakt. Erst danach skizzieren Sie einzelne Seiten.

Wer diese Vorarbeit überspringt, skizziert Platzhalter und muss später alles neu ordnen. Details zur Gesamtstruktur finden Sie unter Website erstellen.

Material für die Papier-Variante

Für das schnelle Skizzieren reicht wenig: Bleistift oder Fineliner, Radiergummi und liniertes oder kariertes Papier. Wer regelmäßig scribbelt, druckt sich Vorlagen mit einem angedeuteten Browserrahmen oder Smartphone-Umriss aus – das erspart das Zeichnen des Geräterahmens und hält die Proportionen realistisch. Kariertes Papier hilft, Spalten und Abstände sauber auszurichten.

In sechs Schritten zum Scribble

1. Ziel oben notieren

Schreiben Sie das Seitenziel als Überschrift auf das Blatt. So prüfen Sie bei jeder Sektion, ob sie wirklich nötig ist.

2. Mobile zuerst skizzieren

Beginnen Sie mit der schmalen Spalte fürs Smartphone, nicht mit dem breiten Desktop-Layout. Auf einer Breite von rund 375 Pixeln passt nur das Wichtigste – dieser Zwang zwingt zur Priorisierung. Was auf dem Handy funktioniert, lässt sich anschließend auf den Desktop verteilen. Umgekehrt scheitert es oft, weil zu viel gleichzeitig gedacht wurde. Dieses Prinzip nennt sich Mobile First; mehr dazu unter responsives Webdesign.

3. Sektionen von oben nach unten anordnen

Stapeln Sie die Inhaltsblöcke in der Reihenfolge, in der der Besucher sie lesen soll. Eine typische Startseite:

• Header mit Logo und Navigation
• Hero: eine klare Aussage plus ein Handlungsaufruf (Call-to-Action)
• Nutzenblöcke oder Leistungen
• Sozialer Beweis: Referenzen, Bewertungen, Logos
• Wiederholter Call-to-Action
• Footer mit Kontakt, Impressum, Rechtlichem

4. Auf den Desktop übertragen

Übernehmen Sie dieselbe Reihenfolge und verteilen Sie die Blöcke auf mehr Breite. Orientierung gibt ein 12-Spalten-Raster bei rund 1140 Pixeln Inhaltsbreite – ein verbreiteter Standard, den auch Bootstrap nutzt.. Denken Sie an den sichtbaren Bereich ohne Scrollen (Above the Fold): Hier gehört die wichtigste Botschaft hin.

5. Leseführung markieren

Menschen scannen Seiten in vorhersehbaren Mustern. Bei textlastigen Seiten dominiert das F-Muster (Blick oben links beginnend, dann nach unten), bei aufgeräumten Landingpages eher das Z-Muster. Platzieren Sie Ihren Call-to-Action dort, wo der Blick ohnehin hinwandert, und zeichnen Sie mit einem Pfeil ein, wie der Besucher geführt wird.

6. Feedback einholen und iterieren

Zeigen Sie das Scribble jemandem und lassen Sie die Person erklären, was sie zuerst sieht und wohin sie klicken würde. Weichen Antwort und Absicht ab, verschieben Sie Blöcke – auf Papier in Sekunden erledigt. Erst wenn die Struktur überzeugt, gehen Sie ins digitale Wireframe.

Skizzier-Konventionen, die jeder versteht

Ein Scribble muss lesbar sein, nicht schön. Halten Sie sich an einige verbreitete Symbole:

• Bild oder Grafik: Rechteck mit einem Kreuz (X) darin.
• Text: waagrechte Striche; eine dicke Linie steht für eine Überschrift, mehrere dünne für Fließtext.
• Button: Rechteck mit abgerundeten Ecken und einem kurzen Wort.
• Formularfeld: schmales Rechteck mit Beschriftung davor.
• Navigation: kleine Kästchen oder Striche in einer Reihe im Header.
• Video: Rechteck mit Play-Dreieck.

Wichtig: Verwenden Sie keinen echten, ausformulierten Text und keine „Lorem ipsum“-Absätze. Beides lenkt die Aufmerksamkeit weg von der Struktur. Striche als Platzhalter sind Absicht.

Tools: von Papier bis Figma

Papier ist für die erste Runde unschlagbar schnell. Für digitale Scribbles und Wireframes haben sich diese Werkzeuge bewährt:

• Excalidraw – kostenlos und ohne Login nutzbar, mit bewusst „handgezeichnetem“ Look. Ideal, um die Papier-Skizze zu digitalisieren, ohne dass sie zu fertig wirkt.
• tldraw – schnelles Zeichnen direkt im Browser, für einzelne Boards ohne Kosten nutzbar.
• Balsamiq – auf Wireframes spezialisiert, mit skizzenhafter Optik und fertigen UI-Bausteinen. Kostenpflichtig nach der Testphase.
• Figma mit FigJam – Standard im professionellen Umfeld. FigJam eignet sich fürs grobe Scribbeln, Figma selbst für saubere Wireframes und den Übergang ins Design. Ein kostenloses Konto genügt für den Einstieg.
• Whimsical / Miro – gut, wenn Sitemap, Flow und Wireframe im selben Board entstehen sollen.

Eine praktikable Kette: Papier fürs erste Kritzeln, Excalidraw zum Teilen im Team, Figma für das Wireframe, aus dem später das Design wächst. Alles direkt in Figma zu starten funktioniert auch – dann sollten Sie sich aber bewusst zurückhalten und nicht schon Farben wählen.

Typische Fehler und wie Sie sie vermeiden

• Zu früh zu detailliert. Wer im Scribble schon Farben und Fonts festlegt, diskutiert über Nebensache, statt die Struktur zu klären. Lösung: bewusst grau und grob bleiben.
• Desktop zuerst. Führt fast immer zu überladenen Handy-Layouts. Lösung: mit der schmalen Spalte anfangen.
• Kein klares Seitenziel. Ohne definiertes Ziel wird jede Sektion gleich wichtig – und damit keine. Lösung: das Ziel oben notieren und jede Sektion daran messen.
• Echte Texte im Scribble. Verleiten dazu, über Formulierungen statt über Layout zu reden. Lösung: Platzhalter-Striche.
• Navigation vergessen. Das Scribble zeigt eine Seite, aber nicht, wie man dorthin kommt. Lösung: vorab die Sitemap zeichnen.

FAQ

Reicht Papier, oder brauche ich sofort ein Tool? Für die erste Runde reicht Papier und ist meist schneller, weil nichts vom Denken ablenkt. Ein digitales Tool lohnt sich, sobald Sie die Skizze mit anderen teilen, versionieren oder direkt ins Wireframe überführen wollen.

Wie lange sollte ein Scribble dauern? Für eine einzelne Seite wenige Minuten bis maximal eine Viertelstunde. Dauert es länger, arbeiten Sie vermutlich schon an Details, die in dieser Phase noch nicht wichtig sind. Lieber mehrere schnelle Varianten als eine perfekte.

Muss ich zeichnen können? Nein. Ein Scribble besteht aus Kästchen, Strichen und einem Kreuz für Bilder. Lesbarkeit zählt, nicht Ästhetik – die kommt erst im Mockup.

→ Mehr zum Thema: Alle Artikel unter Website erstellen