Alles, was Sie über Modelle, Drahtmodelle und Prototypen wissen müssen

Seite 1 von 3: Drahtgitter

Die Unterscheidung zwischen verschiedenen Phasen des Entwurfsprozesses kann verwirrend sein, insbesondere wenn die Terminologie so locker verwendet wird. Aber das ist keine Entschuldigung für einen Designer, den Unterschied nicht zu kennen.

Während es unschuldig genug erscheinen mag, ist die Bezeichnung eines Modells als Drahtmodell wie die eines Tischlers, der einen Hammer als Schraubenzieher bezeichnet. Und nicht zu wissen, wie man einen Lo-Fi-Prototyp herstellt, ist wie ein Chirurg, der nicht weiß, wo er schneiden soll.

Wireframes, Modelle und Prototypen sind die Werkzeuge eines Designers



Drahtgitter, Modelle und Prototypen sind die Werkzeuge des Designerhandwerks

Dies sind die Handwerkszeug eines Designers und sollten daher von innen und außen erlernt werden. Also, wenn Sie lernen möchten, wie man erstellt Website-Modelle , lerne das Beste Drahtgitterwerkzeuge oder Meister Rapid-Prototyping Du bist am richtigen Ort.

In diesem Artikel werden die Grundlagen erläutert: Was jeder kann, warum er nützlich ist, einige gängige Methoden zum Erstellen und sogar einige bewährte Methoden. Und wir werden damit beginnen, ihre Namen richtig zu machen. Verwenden Sie das Dropdown-Menü oben, um zu der gewünschten Seite zu navigieren.

Wireframe => Mockup => Prototyp

Also, was ist der verdammte Unterschied? Während dies keineswegs das einzige Verfahren zum Entwerfen einer Website oder App ist, folgt der traditionelle Entwurfsprozess diesen drei Schritten.

Es ist eine grobe Vereinfachung, ohne die unzähligen Variablen dazwischen zu berücksichtigen, aber für unsere Zwecke, die Grundlagen zu erklären, ist es eine gute Grundlage. Im Allgemeinen korreliert dies mit der Wiedergabetreue, die normalerweise steigt, wenn Sie sich vorwärts bewegen.

Auch dies ist eine übermäßige Vereinfachung und keine in Stein gemeißelte Regel. Zum Beispiel manchmal überspringen Modelle und Schon früh einen Lo-Fi-Prototyp erstellen ist das Beste für Ihr Projekt. Alternativ können Sie einem von Designer Steven Bradley favorisierten Prozess folgen, in dem Sie Fortschritte machen von Wireframes zu Mockups und fertig im Code .

Da wir wissen, dass es nicht gerade einen „besten“ Prozess gibt (nur den richtigen), wollen wir untersuchen, wie jede Art von Design aussieht.

01. Wireframes

Wireframes sind wie die Blaupause Ihres Designschemas. Sie erstellen sie frühzeitig, normalerweise im ersten Schritt (oder im zweiten, wenn Sie lieber zuerst skizzieren möchten), und widmen Zeit ausschließlich der Beantwortung wichtiger Fragen zu Layout, Struktur und Organisation, bevor das Team visuelle Details wiederholt.

Aus diesem Grund sind Drahtgitter mit geringer Wiedergabetreue. Es gibt eine Zeit und einen Ort für alles, und die visuellen und technischen Details sollten später festgelegt werden, nachdem Format und Struktur verfestigt sind.

Foto von Zeichnungen und Stiften auf dem Schreibtisch

Bild mit freundlicher Genehmigung von Benoît Meunier

Das heißt nicht, dass sich Drahtgitter überhaupt nicht mit Grafiken befassen sollten - Sie benötigen nur genügend Details, um das Gesamtlayout und den erforderlichen Platz für Elementkategorien (wie Seitenleiste, obere Navigation, Fußzeile, Hauptinhalt usw.) zu visualisieren.

Wie wir in beschrieben haben Der Leitfaden zum Wireframing Aus diesem Grund enthalten Drahtgitter häufig Platzhalter für spätere Grafiken in Form von Quadraten mit den X- oder Bare-Bone-Versionen der später kommenden Symbole.

Leistungen

Wie oben erwähnt, ermöglicht es Wireframes dem Team, sich ausschließlich auf die Gesamtentscheidungen zu konzentrieren, bevor es auf die Details eingeht. Die Vorteile von Drahtgittern sind die gleichen wie bei Umrissen für jedes Medium: Sie bieten die Möglichkeit, vor dem Vorwärtsgehen richtig zu planen, und verringern das Risiko, dass Sie zurück verdoppeln müssen, weil etwas übersehen wurde.

Darüber hinaus können Wireframes als Ergebnis mit dem gesamten Team geteilt werden, sodass alle auf derselben Seite sind. Wenn Sie ein spezielles Wireframing- oder Prototyping-Tool verwenden, können verschiedene Teammitglieder dasselbe Dokument ändern oder kommentieren, was die Zusammenarbeit von Anfang an fördert.

Foto der UI-Skizze

Bild mit freundlicher Genehmigung von Shawn Campbell

Darüber hinaus können Wireframes Stakeholdern gezeigt werden, die frühzeitig Ergebnisse sehen und mögliche Änderungen aufdecken möchten, bevor sie Zeit damit verschwenden, sie weiterzuentwickeln.

Methoden

Aufgrund der geringen Wiedergabetreue von Drahtgittern gibt es mehr praktische Methoden zum Erstellen als bei den anderen Phasen. Schauen wir uns einige an.

Skizzierung

Der altmodische Weg. Zeichnen Sie einfach auf Papier, was Sie denken, und lassen Sie sich nicht zu sehr von den Details festhalten. Dies ist in Ordnung für ein schnelles Drahtmodell in einer Situation wie Brainstorming, aber es kann problematisch sein, diese Skizzen mit dem gesamten Team zu teilen, und sie können leicht falsch interpretiert werden. Wenn Sie eine methodische und strukturierte Art des Skizzierens bevorzugen, empfehlen wir Ihnen dringend geschichtetes Skizzieren .

Grafikdesign-Software

Wenn die Verwendung von Software wie Photoshop oder Sketch für Sie genauso selbstverständlich ist wie das Skizzieren auf Papier, sollten Sie dies tun. Diese Option erfordert jedoch eine angeborene Kenntnis des Programms und es fehlt die Fähigkeit, Interaktionen hinzuzufügen, die von einigen bereitgestellt werden Wireframing-Apps .

Präsentationsprogramm

Wenn Sie speziell für eine Präsentation ein Drahtmodell erstellen, können Sie es in Software wie PowerPoint oder Keynote erstellen. Die Folienstruktur erleichtert das Nachdenken über Ihr Design in Bezug auf Seiten, aber auch diese Option ist nicht interaktiv. Präsentationssoftware ist jedoch sehr vertraut, da die meisten von uns irgendwann Powerpoint oder Keynote verwendet haben.

Design-Software

Heutzutage gibt es Software speziell für Wireframing und darüber hinaus wie UXPin, Axure, Omnigraffle und Moqups. Die Vorteile hierbei sind optimierte Funktionen für das Wireframing, wie die Drag-and-Drop-Benutzerfreundlichkeit und die einfache Möglichkeit, mit wenigen Klicks Interaktivität hinzuzufügen. Der Nachteil ist, dass einige mehr kosten als andere. Während Balsamiq kostenlos ist, fehlen ihm die interaktiven Funktionen von Axure, Omnigraffle und UXPin.

Die Methode ist nicht so wichtig, solange sie den Anforderungen und Einschränkungen des Projekts entspricht. Wichtig ist, dass Sie eine verlässliche Vorstellung vom gesamten Projekt haben, bevor Sie zu den akribischeren Phasen übergehen.

Nächste Seite: Alles, was Sie über Modelle wissen müssen

  • 1
  • zwei
  • 3

Aktuelle Seite: Drahtgitter

Nächste Seite Modelle