Webdesign-Tutorial: Erste Schritte mit Wireframes

Folgen Sie meinem Tutorial 5 Schritte für ein erfolgreiches Website-Design, das Sie durch 5 wesentliche Schritte eines Website-Designprozesses führt, um Ihre Produktivität zu steigern. Auf den 3. Schritt, die Wireframes, gehe ich ausführlich ein.

In diesem Leitfaden erfahren Sie, was Sie über Wireframes wissen müssen, warum und wie Sie sie in Ihrem Workflow verwenden sollten.

Definition

Drahtmodell (n.)
“Ein einfacher visueller Leitfaden, der verwendet wird, um das Layout grundlegender Elemente in einer Webschnittstelle vorzuschlagen.”
(Quelle: Wiktionary)

Wireframes sind von unschätzbarem Wert, um alle auf dem gleichen Stand zu halten. Entwickler verwenden Wireframes, um sich ein klares Bild von den Elementen zu machen, die sie programmieren müssen, Architekten präsentieren Pläne vor dem Bau eines Hauses, Business-Analysten verwenden Wireframes, um die Geschäftsregeln und Interaktionsanforderungen visuell zu unterstützen, Business-Stakeholder überprüfen Wireframes, um sicherzustellen, dass Anforderungen und Ziele erfüllt werden werden durch die Gestaltung erfüllt.

Die meisten erfolgreichen Designer strukturieren ihr Projekt auf die eine oder andere Weise, sei es, indem sie es auf einem Blatt Papier skizzieren oder detaillierte Strukturen auslegen.

Geben Sie hier die Bildbeschreibung ein

Verwendung von Wireframes

Warum sollte ich Wireframes verwenden?

Kurz gesagt, jeder verwendet Wireframes. Das tue ich, und in diesem Beitrag werde ich erklären, warum Sie das auch tun sollten. Einige Leute denken, dass sie zeitaufwändig sind, warum sollten Sie sich die Mühe machen, mehr Arbeit zu schaffen? Aber in Wirklichkeit ist es das komplette Gegenteil. Sie sparen tatsächlich Zeit.

Ein Wireframe ist die Blaupause Ihrer Website. Der Hauptzweck besteht darin, dem Kunden vor dem Design zu zeigen, wie die Website strukturiert wird. Denken Sie daran, dass Kunden normalerweise damit beschäftigt sind, ihr eigenes Geschäft zu führen. Sie wollen etwas Sauberes und Lesbares, um schnell zu erfahren, was sie verpasst haben.

Was passiert, wenn ich keine Wireframes verwende?

Nehmen wir an, Sie haben nicht mit Wireframes begonnen. Stattdessen sind Sie in Photoshop gesprungen und haben eine schöne, gut gestaltete Homepage erstellt. Dem Kunden gefiel es im Allgemeinen, aber er mochte nicht, wie der Abschnitt „Über“ auf der linken Seite ist, er möchte ihn auf der rechten Seite. Außerdem gefiel ihm nicht, wie die Navigationsleiste, an der Sie das ganze Wochenende gearbeitet haben, aussieht. Sie müssten die Korrekturen vornehmen, jede Ebene einzeln verschieben, was viel Arbeit und Zeit erfordert. Hier ist das Problem, Sie haben mit dem falschen Fuß angefangen.

Indem Sie eine einfache Website-Struktur erstellen, können Sie jede Elementplatzierung schnell ändern, um die Bedürfnisse Ihrer Kunden zu erfüllen. Sie können genau klären, was auf den verschiedenen Seiten Ihrer Website enthalten sein muss, auch wenn es nur eine schnelle Skizze auf einem Schmierpapier ist.

Wireframes vs. Prototypen vs. Mockups

Bevor wir weiter ins Detail gehen, lassen Sie uns die Dinge klarstellen. Wireframes, Mockups und Prototypen werden oft synonym verwendet, sind aber nicht dasselbe.

Drahtgitter

Ein Wireframe ist eine Low-Fidelity-Darstellung einer Webseite, die die Grundelemente der Seite zeigt. Sie sind nicht interaktiv und zeigen nicht viele Details, schaffen aber ein einfaches Design, das das Projekt leitet. Sobald es interaktiv wird, wird es zu einem Prototyp.

Prototyp

Ein Prototyp ist eine detailliertere interaktive Darstellung des Endprodukts. Prototyping bedeutet, ein Modell der Website zu erstellen, bevor Sie die eigentliche Website erstellen. Prototyping ermöglicht es Ihnen, das Endprodukt zu testen, bevor Sie Zeit oder Geld für Code aufwenden.

Modelle

Ein Mockup ist eine statische Designdarstellung, in der die Corporate Identity durch Farbe, Typografie und visuellen Stil angewendet wird. Mockups sind leichter verständlich als abstrakte Wireframes und schneller zu erstellen als Prototypen.

Geben Sie hier die Bildbeschreibung ein

Hier ist eine schöne Tabelle, die die Differenzierung zwischen Wireframe, Prototyp und Mockup zeigt.
(Quelle: www.quickfocus.com)

Elemente eines Wireframes

Was gehört in ein Wireframe?

Denken Sie an allgemeine Elemente, wenn Sie jede Webseite planen: Kopfzeile, Fußzeile, Seitenleiste und Inhaltsbereiche. Denken Sie dann an zusätzliche Elemente: Navigationsleisten, Widgets, Schaltflächen.
Sobald Sie eine Vorstellung von den Elementen haben, können Sie jetzt mit der Erstellung Ihres Drahtmodells beginnen.

Alle Elemente im Wireframe werden normalerweise angezeigt und organisiert, um Folgendes zu berücksichtigen:

Inhalt

Was genau wird auf dieser Seite angezeigt?

Struktur

Wie werden die Elemente dieser Seite zusammengesetzt?

Hierarchie

Wie werden diese Elemente in Positionierung, Beschriftung und Größe angezeigt?

Funktionalität

Wie werden diese Elemente zusammenarbeiten?

Verhalten

Wie interagieren diese Elemente mit dem Benutzer?

Geben Sie hier die Bildbeschreibung ein

Das obige Diagramm zeigt die geschichteten Elemente einer Webseite.
(Quelle: Jesse James Garret, Die Elemente der Benutzererfahrung)

Was nicht in ein Wireframe aufgenommen werden sollte

Grafische Elemente

Wireframes sollten keine Designelemente enthalten, da dies den Zweck der Wireframes beeinträchtigen würde. Aus diesem Grund sollten sie ohne die Verwendung von Farbe, Grafiken oder Typografie erstellt werden.

Schauen Sie sich den Text selbst an

Dummy-Text sollte nicht in einem Wireframe verwendet werden. Verwenden Sie stattdessen aus Gründen der Übersichtlichkeit echten Text.

Tatsächliches Design

Wireframes sollten nicht das endgültige Aussehen der Seite bestimmen. Es sollte zeigen, wie die Seite funktionieren wird, nicht wie die Seite aussehen wird.

Arten von Wireframes

Welche Arten von Wireframes sollten Sie also bauen? Benötigen Sie eine handgezeichnete Skizze auf einem Blatt Papier? Oder einen etwas formelleren, saubereren Plan? Es hängt alles vom Zweck Ihres Wireframes ab.

Grundsätzlich gibt es zwei Arten:

Skizzenhaft

Einige Leute denken, dass ein skizzenhaftes Drahtmodell für den Kunden irgendwie attraktiver ist, es zeigt ihnen, dass dies ein fortlaufender Prozess ist, dass sie die Elemente und Platzierungen kritisieren und frei manipulieren können.

Geben Sie hier die Bildbeschreibung ein

Digital

Der digitale Typ verleiht ein formelleres und raffinierteres Aussehen. Dieser geht noch einen Schritt weiter, indem er einige grundlegende Designelemente durch das Drahtgitter verwendet.
Es ist nah an einer Ebene von Mockups, wo es dem Kunden ein Gefühl dafür vermittelt, wie die Website aussehen wird, insbesondere für Kunden, denen es schwer fallen könnte, sich das fertige Produkt mit einem skizzenhaften Drahtmodell vorzustellen.

Geben Sie hier die Bildbeschreibung ein

Es gibt Dutzende von Techniken, um ein Drahtmodell zu erstellen, die von einfachen Skizzen bis hin zu einem fast fertigen Drahtmodell mit hoher Wiedergabetreue reichen.

Für welche Tools Sie sich entscheiden, hängt von Ihren persönlichen Vorlieben und den Projektanforderungen ab. Einige suchen nach einfachen schnellen Techniken, andere bevorzugen High-Fidelity-Mockups, auch wenn es vom Projektumfang her etwas mehr Zeit in Anspruch nimmt.

Jedes Tool hat seine Vor- und Nachteile, es gibt kein „bestes“ Tool für Wireframing. Es ist alles, was Sie gerne verwenden und was für Sie funktioniert.

Illustrator und inDesign

Illustrator ist zum Zeichnen geschaffen, und inDesign ist ein Programm für Seitenlayout und Dokumentation. Technisch gesehen können diese beiden zusammen ein großartiges Wireframe-Tool ergeben.

Warum beides? Erstens unterstützt Illustrator nicht mehrere Seiten und Musterseiten, InDesign jedoch schon. Außerdem bietet inDesign keine Zeichnungen und Symbolbibliotheken, Illustrator jedoch schon.

Wenn Sie Illustrator für die meisten Bildschirmillustrationen verwenden, können Sie daher InDesign verwenden, um alles zusammenzuführen und Verhaltensnotizen hinzuzufügen.

Geben Sie hier die Bildbeschreibung ein

Balsamico

Balsamiq Mockups ist auf die Erstellung skizzenhafter Wireframes spezialisiert. Es ist einfach zu bedienen, intuitiv und kann Sie im Handumdrehen zum Laufen bringen.

Obwohl es nicht kostenlos ist, gibt es eine kostenlose Testversion.

Geben Sie hier die Bildbeschreibung ein

wireframe.cc

wireframe.cc ist ein sehr einfaches und minimales Wireframing-Tool für Websites und mobile Apps. Es hat auch eine kostenlose 7-Tage-Testversion.

Geben Sie hier die Bildbeschreibung ein

HTML/CSS

Wenn HTML und CSS in Ihrer Fertigkeitsliste stehen, können Sie etwas Code einrichten und Ihre Bilder verlinken. Es ist ein kostengünstiges Tool zum Wireframen Ihrer Website und bietet sogar eine Reihe von Frameworks.

Das Erstellen von HTML-Wireframes kann Ihren Prozess vom Beginn des Wireframes bis zu dem Punkt, an dem Sie die Genehmigung des Kunden erhalten, zeitaufwändiger machen. Es kann jedoch die zusätzliche Kommunikation und Arbeit nach der Genehmigung Ihrer Wireframes reduzieren, da der Entwurf bereits erstellt wurde.

Geben Sie hier die Bildbeschreibung ein

Es gibt viele andere gute Wireframes-Tools im Web, wie zum Beispiel: uxpin, OmniGraffle, MockFlowetc…

Fazit

Egal für welche Technik Sie sich für Wireframe entscheiden, Sie werden feststellen, dass Wireframing ein entscheidender Teil Ihres Design-Workflows ist. Solange Sie Ihrem Kunden von Anfang an eine visuelle Struktur geben, können alle Diskussionen oder Missverständnisse, die während Ihres Projektumfangs auftreten könnten, durch Rückgriff auf das Wireframe gelöst werden. Sie vermitteln Ihrem Kunden ein professionelles Image.

Wenn Sie mit Drahtmodellen beginnen, werden Sie auch viel sicherer sein, wenn Sie Ihre Photoshop-Datei tatsächlich öffnen und mit dem Entwerfen beginnen.

In meinem nächsten Artikel werde ich Sie durch ein Tutorial für Ihren nächsten Schritt führen: Stilkacheln.

Bleib dran!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *