Unabhängig davon, ob Sie eine mobile App, eine Desktop-Software oder einfach nur eine Website entwerfen möchten, durch die Erstellung von UI-Mockups können Sie die ersten visuellen Darstellungen Ihrer zukünftigen Projekte erhalten und die Gestaltungsidee dem Kunden auf eine bessere Weise präsentieren.

Das Erstellen von UI-Mockups unterscheidet sich vom Wireframing. Wireframing ist wie das Erstellen eines Entwurfs für Ihr Haus oder Ihr Ingenieurprojekt, während das Erstellen eines Mockups das eigentliche kreative Design (endgültige Erscheinungsbild) des Hauses für die Kunden beinhaltet.

Der Zugriff auf ein praktisches Mockup-Tool hilft Ihnen in der Entwurfsphase der Benutzeroberfläche und beschleunigt den gesamten Prozess.

An UI-Mockup-Tools mangelt es nicht. Bei so vielen Optionen kann es jedoch verwirrend sein, welche Sie zuerst verwenden sollten.

Egal, ob Sie ein Profi sind, der sein aktuelles Arsenal mit Elektrowerkzeugen ausstatten möchte, oder ein Anfänger, der sich zum ersten Mal mit Mockup-Design befasst, in diesem Handbuch werden Ihnen einige der besten Tools zum Erstellen von UI-Mockups im Jahr 2019 vorgestellt.

Was sind die besten Tools zum Erstellen von UI-Modellen?

MockFlow

• Preis - Free Limited / Premium $ 19 Monatsplan - $ 14 pro Benutzer pro Monat Jahresplan

MockFlow ist eine erstklassige Cloud-basierte Lösung, die Wireframe-, Prototyping- und UI-Mockup-Tools für Einzelpersonen und Unternehmen bietet. Es gibt sowohl kostenlose als auch Premium-Pakete und es kann auch auf Ihrem PC verwendet werden.

Die Preise sind in Jahres- und Monatspläne unterteilt. Im Vergleich zu Jahresplänen sind die Monatspläne nicht nur teuer, sondern lassen auch einige Funktionen aus. Auf Jahrespläne erhalten Sie nicht nur einen fairen Rabatt, sondern auch 3-monatigen kostenlosen Service, Offline-Zugriff und Power-Ups.

Um das Tool nutzen zu können, müssen Sie sich mit einem kostenlosen Konto anmelden. Mit den kostenlosen Konten können Sie in jeder App ein Projekt erstellen, zwei Überprüfer pro Projekt, eine begrenzte Auswahl an Apps und keinen Support. Das kostenlose Konto vermittelt jedoch einen guten Eindruck von der Benutzerfreundlichkeit von MockFlow.

MockFlow bietet Offline-Zugriff auf Windows- und Mac OS-Computern. Mit den MockFlow-Erweiterungen können Sie das Tool mit Apps wie Microsoft Office, Google Chrome, Google Text & Tabellen, Slack, JIRA und anderen verwenden.

MockFlow verfügt über sechs Grundfunktionen, nämlich WireFrame- und UI-Modelle, Sitemap, StyleGuide, DesignCollab, Annotate Pro und Website Pro. Verwenden Sie zum Erstellen von UI-Mockups die erste WireFrame-Option im Dashboard und klicken Sie auf das Symbol +.

Beginnen Sie mit der Auswahl der Plattform, auf der Sie das Modell für iOS-Geräte, Smartwatches, Websites, Microsoft-Apps usw. erstellen möchten.

Das Bearbeitungs-Dashboard ist ebenfalls auf 6 Registerkarten aufgeteilt. Auf der Registerkarte "Element" können Sie vorgefertigte Objekte wie mobile Rahmen, Symbole, Hintergrundbilder, Menüregisterkarten, Checkout-Optionen und mehr ziehen und ablegen. Wenn Sie möchten, können Sie auch einfach von einer leeren Seite aus beginnen.

Die Objekte können mit einem einfachen Doppelklick weiter angepasst werden. Sie können mehrere Elemente gruppieren, um das Verschieben und Skalieren der Benutzeroberfläche zu vereinfachen.

Weitere Registerkarten im Editor sind "Seiten", um mehrere Seiten für dieselbe App zu erstellen, "Bilder", "Fluss", um Projekte hinzuzufügen und den Status zu überprüfen, "Speichern" und "Hochfahren", um weitere Apps und Vorlagen hinzuzufügen.

MockFlow ist ein hervorragendes Mehrzweckwerkzeug zum Erstellen von UI-Mockups und mehr. Aufgrund der Premium-Angebote ist es jedoch nur für ernsthafte Benutzer gedacht, die mindestens die Hälfte der angebotenen Funktionen nutzen können.

Probieren Sie MockFlow aus

• Lesen Sie auch: 10 besten kostenlosen 3D-Design-Software für Anfänger und Fortgeschrittene

Balsamiq

• Preis - Kostenlose 30-Tage-Testversion / Online-Version ab 9 US-Dollar pro Monat / Offline-Version ab 89 US-Dollar für eine unbefristete Lizenz

Balsamiq ist eine moderne Cloud-basierte Lösung für UI-Designer und -Entwickler, die ein schnelles, zugängliches und kooperatives Wireframing bietet. Wenn Sie eine Offline-Lösung bevorzugen, hat Balsamiq diese ebenfalls abgedeckt.

Balsamiq bietet zwei Versionen des Tools an, die Online- und die Offline-Desktop-App für Mac- und Windows-Computer. Die Offline-Version ist ein einmaliger Kauf, der für einen einzelnen Benutzer 89 US-Dollar kostet. Die Online-Version kostet 9 US-Dollar pro Monat und Benutzer mit Platz für zwei Projekte.

Glücklicherweise können Sie sich kostenlos anmelden und die Web-App 30 Tage lang kostenlos mit unbegrenzten Wireframes und unbegrenzten Benutzerangeboten nutzen.

Die Anmeldung für das kostenlose Testkonto ist einfach, die Benutzer müssen jedoch die E-Mail-Adresse bestätigen. Erstellen Sie anschließend Ihren Space und geben Sie ihm einen Namen. Erstellen Sie dann Ihr erstes Projekt.

Der Projekteditor verfügt über eine sehr einfache und benutzerfreundliche Oberfläche. Alle Eigenschaften sind schön auf der Symbolleiste verteilt. Die Seiten oder Wireframes werden auf der linken Seite angezeigt. Sie können mehrere Seiten hinzufügen, indem Sie oben auf das Symbol + klicken.

Sie können zunächst eine Vorlage in den Editor ziehen und dort ablegen oder mit den grundlegenden Bearbeitungswerkzeugen von vorne beginnen. Verwenden Sie die Option Weitere Steuerelemente, um nach weiteren Vorlagen und Symbolen in der Bibliothek zu suchen. Von Desktop-Anwendungen und Diagrammen bis hin zu Hardware- und Layout-Benutzeroberflächen bietet die Balsamiq-Bibliothek alles, was Sie zum einfachen Erstellen eines Modells und eines Wireframes benötigen.

Um die Objekteigenschaften zu ändern, wählen Sie das Objekt aus. Die entsprechenden Optionen werden im rechten Bereich angezeigt.

Die Entwickler können Kunden zu einer Präsentation einladen, indem sie einen Link per E-Mail senden. Sie können auch Ihre Teammitglieder zum Projekt hinzufügen und jedem Teammitglied eine Rolle zuweisen.

Darüber hinaus bietet Balsamiq die Integration mit Geschäftsanwendungen wie Google Drive, Confluence und Jira. Die UI-Designressourcen auf der Website sind sowohl für erfahrene als auch für neue Benutzer hilfreich.

Balsamiq ist ein ausgezeichnetes Tool und mit Offline- und Online-Software-Suite zweifellos eines der besten im Geschäft. Wenn Sie dies mit einer kostenlosen 30-tägigen Testversion kombinieren, haben Sie genügend Zeit, das Tool vor dem Kauf zu testen.

Probieren Sie Balsamiq

• Lesen Sie auch: 8 umwerfende Software zum Erstellen von Broschüren und zum Regeln des Marketing-Spiels

MockPlus

• Preis - Kostenlose Testversion / 59 USD pro Jahr Einzellizenz / 199 USD für eine unbefristete Lizenz / Team-Plan ab 299 USD pro Jahr

Für diejenigen, die ein flexibles Tool zur Erstellung von Mockups und Prototypen für jede Bildschirmgröße und Plattform suchen, ist MockPlus eine gute Wahl. Es ist eine Offline-Anwendung und für Windows-, Mac-, Android- und iOS-Geräte verfügbar.

MockPlus wird von einigen der führenden Namen der Technologiebranche verwendet, darunter Microsoft und IBM. Sie können das Tool 7 Tage lang kostenlos testen, bevor Sie einen Kauf tätigen.

Die Benutzeroberfläche von MockPlus ist übersichtlich und sieht modern aus. Es bietet viel Platz und überfüllt den Arbeitsbereich nicht mit unnötigen Werkzeugen. Es gibt auch eine Option für mehrere Fenster, mit der die Software in mehreren Fenstern verwendet werden kann, um die Produktivität zu steigern.

Sie können auf einfache Weise interaktive Prototypen erstellen, indem Sie vorgefertigte Komponenten in den Editor ziehen und dort ablegen. Die Bibliothek ist mit über 3000 Symbolen und fast 200 vorgefertigten Komponenten ausgestattet, um Ihnen den Einstieg in die Drag-and-Drop-Funktionalität zu erleichtern.

Mit dem von der App generierten QR-Code können die Prototypen sofort getestet werden. Darüber hinaus können die Projekte im Internet veröffentlicht werden, um Kommentare von Kunden und Teammitgliedern zu erhalten, indem ein Weblink zum Prototyp freigegeben wird.

MockPlus zeichnet sich durch seine herausragende Leistung aus. Die Merkmale und Funktionen dieser Prototyping-Software machen sie zu einem idealen Werkzeug für Benutzeroberflächen- und UX-Designer, unabhängig von deren Fachwissen.

Laden Sie MockPlus herunter

• Lesen Sie auch: 9 Software mit zahlreichen Funktionen zum Erstellen interaktiver Zeitleisten auf dem PC

Moqups

• Preis - Kostenlose Testversion / Beginnt bei $ 19 pro Monat - Persönlicher Plan

Moqups ist eine cloudbasierte Webanwendung, mit der Sie Drahtmodelle, Modelle, Diagramme und Prototypen erstellen und in Echtzeit mit anderen Teammitgliedern zusammenarbeiten können.

Es ist ein Premium-Tool mit persönlichen und Team-Konten. Die kostenlose Testversion erfordert die Registrierung eines Kontos und bietet 5 MB Speicherplatz für ein Projekt, das auf 300 Objekte begrenzt ist.

Die Benutzeroberfläche ähnelt MockFlow, die Tools und das Layout unterscheiden sich jedoch. Nachdem Sie ein neues Projekt erstellt haben, können Sie Elemente aus der Registerkarte Schablone ziehen und ablegen.

Sie können dem Projekt weitere Seiten hinzufügen, Konturen anpassen, Vorlagen erstellen, Bilder hochladen und hinzufügen, in der umfangreichen Symbolbibliothek navigieren und dem Projekt Kommentare hinzufügen.

Die Objekte können zum Ändern der Größe, Drehen, Ausrichten und Stylen bearbeitet werden. Die Gruppierungsfunktion erleichtert das Gruppieren mehrerer Objekte, um die Bewegung zu vereinfachen.

Sobald das Mockup fertig ist, können Sie es in das lokale Drive-In-PNG-, PDF- oder HTML-Format von Google Drive, Dropbox oder Ihrem Computer exportieren.

Moqups ist ein einfach zu bedienendes Tool für Drahtgitter, mit dem Sie in kürzester Zeit Diagramme und Modelle erstellen können. Melden Sie sich für das kostenlose Konto an und probieren Sie das Tool aus, um festzustellen, ob es Ihren Anforderungen entspricht.

Probieren Sie Moqups

Fazit

Egal, ob Sie ein professioneller UI-Designer oder ein Anfänger sind, es ist wichtig zu wissen, welche Tools zum Erstellen von UI-Mockups verwendet werden müssen. Wenn Sie nur ein Wireframing-Tool suchen, empfehle ich Ihnen, Wireframes.cc auszuprobieren.

Es handelt sich um eine webbasierte App mit minimalistischem Design und einer Handvoll Funktionen zum Erstellen einfacher und effektiver Drahtmodelle für Apps oder Websites. Immerhin ist mehr nicht immer besser.

Für UX / UI-Designer, die nach funktionsreichen Mockup-Tools suchen, sollten Sie jedoch alle oben empfohlenen Tools ausprobieren. Alle diese Tools bieten eine kostenlose Testversion oder ein kostenloses Basiskonto ohne Einschränkungen, um Ihnen den Einstieg zu erleichtern.

Sie können einige Zeit mit jedem dieser Tools verbringen, bevor Sie sich für das Tool entscheiden, das die meisten Kontrollkästchen in Ihrer Must-Have-Liste aktiviert.

Da wir uns der Tatsache bewusst sind, dass nicht ein Tool jemals alle Anforderungen erfüllen kann, haben wir versucht, die besten Tools für die Erstellung von UI-Mockups zu integrieren, die die meisten Anforderungen der Designer erfüllen.

Teilen Sie uns Ihre bevorzugte Mockup- und Wireframing-Software mit, oder wenn Sie der Meinung sind, dass wir in den Kommentaren unten eine Alternative in dieser Liste ausgeschlossen haben.