Ein Wireframe ist die Skizzierung einer ersten idee, wie die Webseite konzeptionell aussehen soll, oder in den Worten von Dr. Web:
Ein Wireframe ist ein Gitter, das der Webdesigner in der Planungsphase über eine Webseite legt, um zu definieren, in welchem Planquadrat sich unterschiedliche Bereiche einer Website befinden. Durch einen Wireframe gliedert man so Bereiche mit Text und solche mit Abbildungen.
Ein paar Beispiele sind klarer als Worte.
Für ein Wireframe reicht Papier und Bleistift, PowerPoint geht auch und es gibt natürlich auch spezialisierte Software dazu.
Wozu brauche ich ein Wireframe?
Das Wireframe ist die erste Version deiner Webseite. Ohne dir Gedanken über konkrete Bilder und Farben machen zu müssen hilft es dir zu visualisieren, welche Elemente auf deiner Webseite vorkommen (z.B. grosse Bilder, viel Text, ein Video, eine Produktebeschreibung usw). Ein Wireframe ist vergleichbar mit dem ersten groben Bauplan für ein Haus.
Das Wireframe hilft dir auch Inhalte zu priorisieren. Anhand der Kästchen wird dir sehr schnell bewusst, dass nicht beliebig viele Kästchen zuoberst auf einer Homepage platz haben.
Es ist nicht nötig für jede Seite ein Wireframe zu machen. Für kleine Seiten sind zwei vollkommen ausreichend: eines für die Startseite und eines für die Inhaltsseiten. Für einen Shop zum Beispiel wären minimal eine Startseite, eine Inhaltsseite sowie eine Produkteseite angebracht.
Im weiterführenden Designprozess wird ein Wireframe weiter entwickelt, bis schlussendlich draus ein fertiges Design entsteht. Ein Wireframe hat daher verschiedene Detailstufen und wieviele Detailstufen du durchläufst hängt schlussendlich davon ab, wie individuell das Design sein soll, was wiederum vom Budget abhängt.