Wireframes verwenden, um Ihren Entwicklungsprozess zu rationalisieren

Das Erstellen eines Drahtmodells ist einer der ersten Schritte, die Sie ausführen sollten, bevor Sie eine Website entwerfen.

Ein Wireframe hilft Ihnen , die Elemente und den Inhalt einer Website zu organisieren und zu vereinfachen und ist ein wesentliches Werkzeug im Entwicklungsprozess.

Ein Wireframe ist im Grunde eine visuelle Darstellung des Inhaltslayouts in einem Website-Design .

Der Drahtmodell fungiert als Prototyp, der die Platzierung von Seitenfunktionen wie Kopf- und Fußzeile, Inhalt, Seitenleisten und Navigation anzeigt.

Es gibt auch die Platzierung der Elemente in diesen Inhaltsbereichen an. Wenn Sie eine Website entwickeln möchten, die genau auf die Anforderungen des Kunden zugeschnitten ist und Projektrevisionen minimiert, hält wir Sie mit wireframing auf dem richtigen Weg.

Vorteile von Wireframing

Durch die Erstellung eines Drahtmodells erhalten der Kunde, der Entwickler und der Designer die Möglichkeit, die Struktur der Website kritisch zu betrachten und Änderungen frühzeitig vorzunehmen.

Wireframing bringt folgende wesentliche Vorteile:

Es gibt dem Kunden eine frühe Nahaufnahme des Site Designs (oder Re-Design).
Es kann den Designer inspirieren und zu einem flüssigeren kreativen Prozess führen.
Es gibt dem Entwickler ein klares Bild von den Elementen, die zum Codieren benötigt werden.
Es macht den Aufruf zum Handeln auf jeder Seite klar.
Es ist leicht anzupassen und kann das Layout vieler Bereiche der Website anzeigen.

Werkzeuge für die Drahtmodellentwicklung

Sie haben beim Erstellen eines Drahtmodells viele Werkzeuge zur Auswahl:

Handskizzen auf Papier sind immer ein guter Ausgangspunkt für jeden Designer. Es bietet eine schnelle und einfache Möglichkeit, sich zu konzentrieren und zu organisieren. Wenn Sie beim Skizzieren sehr präzise sind, können Sie dies sogar als endgültigen Drahtmodell verwenden. (Siehe Abbildung 1.)
Flowchart oder Mind-Mapping-Software , wie z Visio . Diese Software-Optionen enthalten vorgefertigte Elemente, mit denen Sie einfach Flussdiagrammdarstellungen Ihres Drahtmodells erstellen können.
Web-Prototyping-Software , wie z Glitschig oder Balsamiq . Tools wie diese wurden speziell für die Generierung von Wireframes entwickelt und verfügen über einfach zu bedienende Prototyping-Funktionen.
Grafiksoftware wie Photoshop oder Illustrator. Der Vorteil der Verwendung dieser Tools besteht darin, dass das Drahtmodell dann direkt in ein grafisches Modell des Website-Designs umgewandelt werden kann; Der Nachteil ist jedoch, dass Sie alle Elemente von Hand erstellen müssen.
(X) HTML- Wireframes sind fast wie tatsächliche Websites selbst. Sie können den Drahtmodell mit Code versehen, bevor Sie die Stile anwenden, oder Sie können ein vollständig gestyltes Layout mit hoher Wiedergabetreue erstellen, das dem endgültigen Design sehr ähnelt. (Siehe Abbildung 2.)

Letztendlich sollte der Entwickler oder Designer das von ihnen bevorzugte Werkzeug auswählen. Persönlich verwende ich Photoshop, weil ich die Art und Weise mag, wie es den Prozess organisiert und wie einfach ich die Datei in ein Modell umwandeln kann.

Drahtmodell Beispiel

Der Detaillierungsgrad eines Drahtmodells hängt von verschiedenen Faktoren ab, darunter: wie viel Richtung und Inhalt der Client bereitgestellt hat, wie komplex der Inhalt ist, wie weit er in dem Prozess ist und wie viele Details er enthalten soll .

Hier sind Beispiele für Wireframes, die mit verschiedenen Werkzeugen erstellt wurden und unterschiedliche Detail- und Farbstufen aufweisen:

Abbildung 1: Diese einfache Drahtmodellskizze für die Coastal Capital Partners-Website (jetzt umbenannt in Broad Reach Retail Partners) wurde verwendet, um grafische Modelle und schließlich das endgültige Design zu erstellen. Durch Mike Rohde .

Abbildung 2: Sehr low-fidelity HTML-Drahtmodell. Nützlich, um zu demonstrieren, wie eine Site aussehen wird, bevor das Styling hinzugefügt wird. Sehr hilfreich für sehbehinderte Benutzer.

Abbildung 3: Low-Fidelity-Drahtmodell für die Umarmungs-Haustier-Gemeinschaft , von Jesse Bennett-Chamberlain von 31Three .

Abbildung 4: Eine vorläufige Nachbildung eines Tools für soziale Konferenzen, das darauf basiert Tiddlywiki zur Verwendung bei Le Web 3. Die dazu gehörenden Notizen sind bei tiddeleweb.tiddlyspot.com . Drahtgitter von Phil Hawksworth.

Abbildung 5: Dieser basiert auf der fortgeschrittenen Nutzung eines Blog-Publishing-Systems (WordPress). Durch Mattheiu Mingassson oder Actside Internet Strategien und Beratung .

Abbildung 6: Ein Drahtgitter für die Umarmungs-Haustier-Gemeinschaft , von Jesse Bennett-Chamberlain von 31Three .

Abbildung 7: Ein Drahtgitter mit Farbe und Bildern. Autorenseite Drahtmodell nach Bokhandel .

Abbildung 8: Ein weiteres Drahtgitter mit Farbe. Von Mattheiu Mingassson von Actside Internet Strategien und Beratung .

Best Practices

Um optimale Ergebnisse zu erzielen, sollten Sie bei der Entwicklung eines Drahtmodells Folgendes beachten:

Einfachheit. Der Schlüssel ist, es einfach genug zu halten, um für den Kunden klar zu sein und für den Designer flexibel zu sein, aber detailliert genug, um den Programmierer zu führen. Wie bereits erwähnt, könnten Sie ein High-Fidelity-Drahtmodell erstellen, aber dies zu einem frühen Zeitpunkt im Entwicklungsprozess zu tun, könnte für den Kunden verwirrend sein, der es für einen endgültigen Entwurf halten könnte.
Arbeiten in Graustufen. Wenn Sie Elemente für ein Drahtmodell erstellen, empfiehlt es sich, in Graustufen zu arbeiten, damit Sie sich auf das Layout konzentrieren können, ohne vom Design abgelenkt zu werden. Wenn Sie ein vollfarbiges Logo erhalten haben, konvertieren Sie es auch in Graustufen. Um verschiedene Elemente zu unterscheiden und zu kategorisieren, zeigen Sie Formen und Umrisse in verschiedenen Graustufen an.
Verwenden Sie Wireframes in Verbindung mit einer Sitemap. Ein Drahtgitter ist eine visuelle Darstellung einer guten Sitemap, kein Ersatz. Eine Sitemap ist ein nützliches Werkzeug für jede Website und würde definitiv hilfreich sein, während des Entwicklungsprozesses darauf zu verweisen.
Konzentrieren Sie sich auf das gewünschte Ergebnis. Verstehen Sie genau, wie Ihr Kunde vor der Erstellung des Drahtmodells auf die Seite reagieren soll. Die Handlungsaufforderungen sollten durch das Betrachten des Drahtmodells sehr klar sein.
Erstellen Sie einen vollständigen Drahtgitterrahmen, wenn es sich um eine Website handelt. Dies ergibt die genaueste Darstellung der aktuellen Seite.
Planen Sie die Elemente, indem Sie den Inhalt im Voraus sichern. Im besten Fall hat Ihr Kunde Ihnen bereits die Elemente bereitgestellt, die auf jeder Seite erscheinen sollten, z. B. das Logo, Anzeigen, Flash- oder Video-Player, Funktionen, Navigationsabschnitte sowie Seitenleisten-, Kopf- und Fußzeilenelemente. Wenn Sie diese Informationen noch nicht haben, treffen Sie sich mit Ihrem Kunden und erhalten (oder erstellen) eine Sitemap. Wenn Sie vorhandene Elemente neu entwerfen, können Sie sie aus einer sorgfältigen Überprüfung der Website sammeln. Stellen Sie in diesem Szenario sicher, dass Sie zuerst mit Ihrem Kunden bestätigen, dass Sie keine Elemente hinzufügen oder entfernen müssen, da ein nicht klares Verständnis der Erwartungen den Prozess verlangsamen wird.

Graustufen vs. Farbe

Beim Erstellen eines Drahtmodells hilft die Arbeit in Graustufen, den Fokus auf die Hauptfunktion des Prozesses zu legen, nämlich das Layout und nicht das Design zu finalisieren (siehe Abbildung 3). Ein weiteres Risiko, in Farbe zu arbeiten, besteht darin, dass der Client das Drahtgitter für das endgültige Modell missversteht.

Die Farbe kann sich jedoch als nützlich erweisen, wenn der Ort jedes Handlungsaufrufs angezeigt wird. Da eine Seite mehrere Handlungsaufforderungen enthalten kann, ist es wichtig, sie zu priorisieren. Wireframes können dabei helfen zu bestimmen, auf welchen Handlungsaufruf der Benutzer zuerst aufmerksam wird.

Ich habe kürzlich an einem Projekt mit einem sehr lebendigen Logo gearbeitet, das in diesem Fall der erste Aufruf zum Handeln war, da es sich um ein neu eingeführtes Magazin handelte.

Wenn Sie Farbe verwenden, können Sie leichter feststellen, ob bestimmte Elemente den primären Handlungsaufruf überfordern. Dieser Prozess fällt nach wie vor in den Bereich des Wireframing und nicht des Mockupdesigns, da die Elementpositionen noch bestimmt werden.

Die Farbe kann nach und nach zum Drahtmodell hinzugefügt werden, während das Projekt fortschreitet. Dies ist effizienter als das Vorantreiben von Modellen, bevor die Position der Elemente gesperrt wird. Grafische Software kann Ihnen dabei helfen, direkt zu einem Modell zu wechseln, wenn Sie fertig sind.

Was man vermeiden sollte

Wie andere Aspekte Ihres Entwicklungsprozesses kann auch das Drahtbild seine Fehler haben, wenn es nicht richtig ausgeführt wird. Hier sind einige Tipps, was zu vermeiden ist, um die effektivsten Ergebnisse zu erzielen:

Zu viel passiert auf der Seite. Lassen Sie reichlich weißen Raum, damit das Design nicht zu beschäftigt oder überladen erscheint.
Betonung auf Farbe und Design. Wireframing dient zur Festlegung des Layouts und der Position von Elementen. Obwohl ein Drahtmodell das Design beeinflussen kann, würde das Hinzufügen von Grafiken und Farben wahrscheinlich nur von seinem Zweck ablenken.
Zu viel Detail. Sie können später immer mehr Details hinzufügen, aber wenn Sie am Anfang zu viel eingeben, kann der Client den Drahtmodell für das endgültige Modell verwirren.

Wenn Sie mehr über Drahtgitter erfahren möchten, Wireframe-Magazin ist eine großartige Ressource, die Samples teilt, Techniken diskutiert und Probleme im Zusammenhang mit der Informationsarchitektur löst.

Die Erstellung eines Drahtmodells für die Website Ihres Kunden stellt ein effektives Kommunikationsmittel für alle Beteiligten dar.

Selbst die Erstellung eines einfachen Drahtmodells spart auf lange Sicht Zeit und vereinfacht den Entwicklungsprozess für Designer, Entwickler und Kunden.

Geschrieben exklusiv für WDD von Eric Shafer.

Verwenden Sie Drahtgitter für Ihr Design? Was sind die besten Möglichkeiten, effektive Wireframes zu erstellen?

Design Web-Design Wireframes