App-Design kann eine etwas schreckliche Aufgabe sein, besonders wenn Sie Anfänger sind oder mit einem neuen Designer arbeiten. Die Terminologie der verschiedenen Produktionsphasen neigt dazu, zusammenzufallen und austauschbar verwendet zu werden. Für Unternehmen ist es entscheidend, dass Sie wissen, was jede Phase beinhaltet, um zu wissen, was Sie von Ihrem Designer erwarten können. Designer sollten Wireframe, Mockup und Prototyp verstehen, um ihre berufliche Reputation zu sichern und das zu liefern, was vom Kunden verlangt wird. Hier ist, was Sie wissen müssen.
Wireframes
Die meisten Leute lernen in der Schule die Struktur des Gliederung. Es gibt ein Hauptthema und dann werden die Variablen aufgeführt, um dem Papier eine Form und Ordnung zu geben. Es werden wirklich keine Details gezeigt. Sie stellen einfach Ihre Ideen in logischer Reihenfolge dar, damit Sie sie später formulieren können. Wireframing ist ziemlich wie Gliederung. Es ist die sehr grundlegende Hülle des Web- oder App-Designs. Hier erhalten Sie das Layout und die Ordnung konzeptualisiert. Beachten Sie, dass dies die Konzeption der Seite ist und nicht die konkretisierte Form der Seite. Einfache Kästen für Grafiken, Platzhalter für Text und Quadrate für Navigation können verwendet werden.
Beachten Sie, dass einige Wireframes verschiedene Grade an Detailgenauigkeit haben. Einige haben nur die Umrisse eines Kastens mit einem X darin für Bilder, während andere detaillierte Beschreibungen dessen enthalten, was sich in dem bestimmten Bereich befinden wird. Obwohl es viele Wireframing-Tools auf dem Markt gibt Balsamiq ist unser Favorit.
Mock-Up
Dies ist der zweite Schritt für App-Designer. Das Mock-up ist eine statische Darstellung der App, die verwendet wird. Während das Wireframe das Layout der App zeigt, die entwickelt werden soll, gibt das Mock-up dem potenziellen Kunden die Ästhetik und visuellen Details an ihrer richtigen Stelle. Es ist ein poliertes Bild. Beachten Sie, dass Mock-ups nicht interaktiv sind. Das bedeutet nicht, dass Sie (oder Ihr Kunde) nur den ersten Bildschirm sehen sollten. Mock-ups sollten so aufgebaut sein, dass alle Bildschirme gesehen werden, aber in einer Art von Storyboard-Flüssigkeit.
Prototyping
Der Hauptunterschied zwischen dem Mock-up und dem Prototyp ist Benutzerinteraktion und -erfahrung. Während das Wireframe eine Reihe von Formen und etwas allgemeinen Text war und das Mock-up detaillierte Ästhetik, ist der Prototyp so nah wie möglich an das Design, minus ein paar Anpassungen des Codes und Layouts. Es ist für den Kunden gedacht, sich ein Gefühl für die App zu verschaffen. Testen und erneutes Testen der Website oder der App ist entscheidend für einen guten Prototypen. Aufgrund der Interaktionsvariable dieses Schritts müssen Designer grundlegende (und je nach Komplexität des Projekts manchmal umfangreiche) Kenntnisse in HTML, XHTML, CSS, Java und PHP verstehen.
Es ist wichtig, dass sowohl Kunden als auch Designer verstehen, dass der Prototyp nicht das fertige Produkt ist. Jedoch ist Prototyping die letzte Phase, da es uns einen anklickbaren frühen Version des Produkts bringt, der an Benutzer/Partner/Investoren präsentiert werden kann.
Kunden sollten bedenken, dass die Zeiteinteilung für das Prototyping im Vergleich zu Mockup oder Prototype umfangreicher ist. Glücklicherweise können Sie mit KFG International Ihr Prototyp innerhalb von 48 Stunden fertigstellen! Änderungen an einer App oder einem Webdesign-Prototyp sind keine „schnellen Fixes“, aber sie erfordern immer noch viel weniger Aufwand als Änderungen am MVP-Produkt.
Werkzeuge für den Handwerk
Wie Sie sehen können, gibt es einige Variablen zu berücksichtigen, wenn Sie entweder einen Wireframe, ein Prototyp oder ein Mock-up erstellen oder kaufen. Falls Sie eines dieser Layouts erstellen möchten, benötigen Sie die richtige Software und Kenntnisse, um dies zu tun.
Wireframes, die einfachste und billigste der drei Optionen, können erstellt werden unter Verwendung von Balsamiq, Pencil and Paper oder einem beliebigen Computerprogramm, das grundlegende Formen und Text erlaubt. Es wird empfohlen, etwas Sophistizierteres als das Standard-Paint-Programm zu verwenden (bevorzugt ein Programm mit Ausrichtungstools).
Mock-ups erfordern, dass Sie über die Fähigkeit verfügen, Bilder zu bearbeiten, Grafiken zu ändern, Text zu verändern und komplexe Designs zu erstellen. Die Industriestandard-Software dafür ist Sketch, Figma oder Adobe-Produkte. Wissen wise sollten Sie die Grundlagen von UI und UX verstehen, damit Sie das beste vorgeschlagene Layout erhalten können.
Prototyping erfordert ein ganz anderes Set an Werkzeugen. Wo Sie Photoshop, Illustrator oder eine fortgeschrittene visuelle Software benötigen, brauchen Sie auch die Mittel zum Codieren. Sketch, Axure, und InVision sind einige der Programme, die Sie verwenden können. Es gibt auch andere Programme dort draußen, und Sie werden ermutigt, etwas zu finden, das Ihren Bedürfnissen entspricht.
Bei jeder Gestaltung oder Layout sollte der Designer das Wireframe, Mock-up oder Prototyp in verschiedenen Browsern testen. Das bedeutet nicht, dass die Website oder die App live sein muss. Vorschau-Modi sind in der Regel in Software verfügbar, und wenn sie es nicht sind, ist Cloud-Vorschau verfügbar. Fachkräfte werden ermutigt, ihre Wireframes, Mock-ups und Prototypen in verschiedenen Browsern zu testen und anzusehen, um Benutzerfreundlichkeit und Konsistenz sicherzustellen.
Zusammenfassung
Obwohl es Ähnlichkeiten zwischen den drei verschiedenen Begriffen gibt, sind sie nicht austauschbar, und daher sollten Kunden und Käufer die Verpflichtungen und Erwartungen verstehen, die auf die Bestellung gelegt werden. Beim Erstellen Ihres Website- oder App-Designs ist es immer vorteilhaft, am Bodenniveau zu beginnen und sich dann zu den komplexeren Aspekten vorzuarbeiten. Beginnen Sie mit einem Wireframe, dann machen Sie ein Mock-up und lassen Sie einen Prototyp erstellen, um die beste Präsentation des zukünftigen Produkts oder Dienstes zu erhalten.