Was ist ein Website-Drahtmodell und wie kann es Ihnen helfen, Ihre Website zu entwickeln?

Technisch gesehen ist eine moderne Website nicht nur eine Sache. Es handelt sich um eine komplexe Mischung interagierender Technologien wie HTML (das Markup, das Sie auf der Seite sehen), JavaScript (die Sprache, die in Ihrem Browser ausgeführt wird und die Interaktionen beeinflusst), CSS (die Sprache zum Einstellen des Erscheinungsbilds der Seite) und vieles mehr. Grundsätzlich ist eine Website jedoch eine Idee.

Wenn es sich um Ihre Website handelt, wissen Sie wahrscheinlich, was Sie tun sollen oder was die Benutzer daraus machen sollen. Vielleicht soll es ein einfacher Ort sein, um Informationen über Technologie zu finden; oder vielleicht sollte es erklären, warum du die beste Band oder Hundewanderer bist. Auf jeden Fall sollten Sie, lange bevor Sie sich mit HTML, CSS, JavaScript oder anderen spezifischen Webentwicklungstechnologien befassen müssen, eine klare Vorstellung davon haben, was Ihre Website tun soll und wie sie im Allgemeinen aussehen soll. Und Website-Wireframes sind der Weg, diese Idee zu festigen und zu kommunizieren.

Die Rückseite einer Serviette

Ein Website-Drahtmodell ist nur eine Skizze, wie Ihre Website aussehen soll. Es soll nicht hübsch sein und Sie brauchen nicht einmal Software, um es zu erstellen. Sie können sich einfach ein Stück Papier oder sogar eine Serviette schnappen und Element für Element in Ihrer Website blockieren. “Der Titel geht hier… und dann haben wir ein Navigationsmenü… oh, und hier kann ich ein Suchfeld eingeben.” Fügen Sie einfach einen Teil Ihrer Website zusammen, bis das Endergebnis ungefähr so ​​aussieht:

Wie Sie sehen, handelt es sich dabei nicht um Computercode oder etwas, das zu technisch oder komplex ist. Jeder kann sich diese kurze Skizze ansehen und sofort herausfinden, was er sieht. Und genau darum geht es bei Wireframes: Sie sind sehr schnell zu erstellen und leicht verständlich. Damit können Sie die wichtigen Dinge wie das Layout der Website, die Navigationsstruktur und die Platzierung von Anzeigen vorbereiten, bevor Sie eine einzelne Codezeile berühren. Und wenn Sie mit anderen Personen zusammenarbeiten, beispielsweise mit einem Programmierer oder einem Designer, können Sie sich alle darauf einigen, wie das Endergebnis aussehen wird. Dies kann eine Menge Verwirrung und doppelte Arbeit ersparen, insbesondere bei größeren Projekten.

Es ist wichtig zu beachten, dass im Drahtgitter oben keine Details vorhanden sind: Die Bilder neben den einzelnen Artikeln sind dies nicht “echt” Bilder, aber offensichtliche Platzhalter. Sogar der Artikeltext wird nicht ausgefüllt - es sind nur ein paar Zeilen. Sie können nicht sehen, wie das Farbschema aussehen wird - es ist alles nur Schwarzweiß. Dies ist, was ein Drahtgitter ist soll aussehen. Es handelt sich hierbei nicht um eine vollständige Darstellung der endgültigen Website, sondern nur um deren Geist oder Essenz, wenn Sie so wollen. Es ist nur das Wichtigste.

Tools für Wireframing

Wie ich bereits erwähnt habe, ist das beste Werkzeug für das Wireframing oft nur ein Blatt Papier und ein Stift. Wenn Sie sich von Ihrem Computer entfernen, können Sie wirklich klarer werden und sich auf das konzentrieren, was Ihre Website aussehen soll, ohne lästige Unterbrechungen oder das Lernen eines neuen Wireframing-Tools. Ein mathematisches Notizbuch (wie oben gezeigt) funktioniert in der Regel am besten, da Sie die Linien entlang der Linien verfolgen, ordentliche Rechtecke erstellen und die verschiedenen Teile Ihrer Website problemlos aneinander ausrichten. Schnappen Sie sich einen, einen Stift oder zwei, und trinken Sie eine Tasse Kaffee weit weg von Ihrem Computer. Sie erhalten eine klare Vorstellung davon, was genau Sie zu schaffen versuchen.

Allerdings ist manchmal Wireframing-Software erforderlich. Vielleicht arbeiten Sie als Teil eines Teams, das sich über das ganze Land oder die ganze Welt erstreckt, oder Sie schreiben einen Blogbeitrag über Wireframing. In diesen Fällen ist das manuelle Scannen von Wireframes keine sehr praktische Lösung. Hier sind einige kostenlose Software-Tools, die helfen können, wenn Sie Stift und Papier wirklich nicht verwenden können:

• Lumzy: Ein kostenloses Flash-basiertes Wireframing-Tool mit einer umfangreichen Objektbibliothek. Dies ist das Werkzeug, mit dem ich das Drahtgitter erstellt habe, das Sie oben sehen - es ist schnell und schmerzlos.
• QuirkTools Wires: Ein einfacheres Werkzeug ohne Ausrichtungsoptionen. Es ist jedoch nicht Flash-basiert.
• Spottdrossel: Ein kommerzielles Werkzeug, das jedoch einen begrenzten freien Plan hat.

Nicht nur für Websites

Sie haben dies wahrscheinlich selbst erkannt, aber es ist eine gute Anmerkung: Wireframes sind ein fantastisches Werkzeug für die Erstellung von Produkten, nicht nur einer Website. Vielleicht haben Sie eine ungefähre Idee für eine iPhone- oder Android-App oder sogar eine vollwertige Computeranwendung. In diesen Fällen sind Website-Wireframes von unschätzbarem Wert, um zu zeigen, wie alles aussieht, und können sogar dazu beitragen, dass die Leute Ihr Projekt auf verschiedene Weise unterstützen.

Haben Sie jemals selbst ein Drahtgitter erstellt? Beginnen Sie jetzt, nachdem Sie dies gelesen haben? Lass es mich in den Kommentaren wissen!

Bildnachweise: Zerknittertes Serviettenbild über ShutterStock, rotes Notizbuchbild über ShutterStock

Erfahren Sie mehr über: Webdesign, Webentwicklung, Webmaster-Tools.