Tool-Tipp

Wireframe-CSS macht WordPress zum Prototyping-Tool

Drahtmodelle gehören zu den Best Practices im Webdesign. (Grafik: Shutterstock)

Dieser Tool-Tipp ist ein Segen für alle Designer, die eine WordPress-Seite für ihre Kunden bauen müssen. Wireframe-CSS wird den Kundenkontakt deutlich vereinfachen – mit Sicherheit sogar.

Wenn es nach dem Kunden geht, fängt die Erstellung der Website mit der Optik an. Er will schnell schicke Typografien, bunte Bilder und überhaupt alles sehen, was dem Auge schmeicheln soll. Der Designer will und sollte so indes auf keinen Fall vorgehen.

Erst das Ziel, dann die Struktur – später die Optik

Denn die wichtigsten Fragen rund um die zu erstellende Website drehen sich zu Beginn überhaupt nicht um Schriften, Bilder und Farben. Vielmehr muss zunächst das Ziel definiert werden. Danach kommt die Frage nach der Struktur und damit auch die Frage nach den Inhalten, allerdings zunächst in abstrakter Form.

Wenn wir so weit sind, können wir ein Drahtmodell (Wireframe) der Website erstellen. Zunächst werden wir das ganz klassisch skizzieren, also mit Stift und Papier arbeiten. Relativ schnell werden wir aber an den Punkt kommen, an dem das Drahtmodell Interaktion benötigt, um von uns selbst und vom Kunden gut erfasst werden zu können.

Für diesen Schritt im Projekt gibt es spezialisierte Lösungen. Wer will, nutzt dazu ein Design-Tool wie Figma, Invision Studio oder Adobes XD. Tauglich wäre sogar das gute alte Powerpoint oder Apples Keynotes-Präsentator.

Wireframe-CSS macht aus jeder WordPress-Seite ein Drahtmodell

Wer aber fest im WordPress-Sattel sitzt, könnte diese Zusatz-Tools überflüssig machen und direkt ein Drahtmodell im CMS bauen. Das kann sich auch bei Projekten empfehlen, die relativ klein und mit entsprechend geringem Budget ausgestattet sind.

Genau zu diesem Zweck hat Kirsten Schelper von den Netzialisten das Projekt Wireframe-CSS ins Leben gerufen. Das besteht im Wesentlichen aus einem CSS, das alle Elemente, die das eigentliche Design ausmachen, also Schriften, Farben und Bilder, durch eine schematische Darstellung ersetzt.

Wireframe-CSS. (Screenshot: t3n)

So bleibt die Website voll bedienbar, aber optisch unverbindlich. Der Kunde sieht seine geplante Website, wird aber davon abgehalten, dieses Bild oder jene Schriftart zu beurteilen und die Besprechung künftig nur noch um dieses Detail kreisen zu lassen.

Besonders geeignet ist der Einsatz des Wireframe-CSS da, wo der Kunde bereits eine WordPress-Seite hat, die es umzuarbeiten gilt. Hier hat sogar der Designer einen Vorteil, denn er sieht die Struktur der bestehenden Seite auch selbst klarer, wenn sie nicht durch konkrete Inhalte verschleiert ist.

WordPress-Plugin aktiviert Wireframe-Darstellung

Für die einfache Verwendung in WordPress hat Kirsten Schelper ihr Wireframe-CSS in ein Plugin gepackt und auf GitHub bereitgestellt. Hier findet ihr auch die eigentliche CSS-Datei neben den SCSS-Rohdaten.

Die Funktionsweise ist einfach: Ist das Plugin aktiviert, wird die Website als Wireframe dargestellt. Ist es deaktiviert, werden die tatsächlichen Inhalte gezeigt. So könntet ihr etwa bei aktiviertem Plugin Dummy-Inhalte nach und nach gegen echte austauschen und das Projekt so in Ruhe aufbauen, ohne bei jedem neuen Text oder Bild direkt den Kunden am Telefon zu haben.

Das Plugin arbeitet nach Aussagen der Entwicklerin mit allen WordPress-Standard-Themes zusammen. Es sollte grundsätzlich auch mit anderen Themes funktionieren. Hat aber ein Theme-Entwickler ein sehr umfangreiches eigenes CSS beigestellt, kann es möglich sein, dass ihr im Wireframe-CSS einige Klassen ergänzen müsst.

Passend dazu: WordPress: Diese 15+ Plugins bohren deinen Gutenberg-Editor auf

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Dennis Smith

schöner Artikel! Für Anfänger absolut hilfreiches Plugin!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung