Egal, ob Sie eine mobile App oder Desktop-Software entwerfen möchten oder einfach nur versuchen, eine Website zu erstellen. Mit dem Erstellen von UI-Mockups können Sie die ersten visuellen Elemente Ihrer zukünftigen Projekte erstellen und dem Kunden die Designidee besser vorstellen.
Das Erstellen von UI-Mockups unterscheidet sich von Wireframing. Wireframing ist wie das Erstellen einer Blaupause für Ihr Haus oder Ihr Engineering-Projekt, während das Erstellen eines Mockups mit dem tatsächlichen kreativen Design (endgültigen Erscheinungsbild) des Hauses für die Kunden einhergeht.
Der Zugriff auf ein praktisches Mockup-Tool hilft Ihnen in der UI-Designphase und beschleunigt den gesamten Prozess.
Es gibt keinen Mangel an UI Mockup-Tools. Bei so vielen Optionen kann es jedoch verwirrend werden, welche Option Sie zuerst verwenden sollten.
Egal, ob Sie ein Profi sind, der sein aktuelles Arsenal mit weiteren Elektrowerkzeugen ausstatten möchte oder ein Anfänger, der zum ersten Mal Mockup bei der Gestaltung seiner Hände versucht, dieses Handbuch wird Ihnen einige der besten Werkzeuge für die Erstellung von UI-Mockups für 2019 vorstellen.
- 1
MockFlow
- Preis - Kostenloser, begrenzter / Premium-Monatsplan für 19 $ - 14 USD pro Benutzer und Monat
MockFlow ist eine Cloud-basierte Premiumlösung, die Wireframe-, Prototyping- und UI-Mockup-Tools für Einzelpersonen und Organisationen bietet. Es ist sowohl als Gratis- als auch als Premium-Paket erhältlich und kann auch auf Ihrem PC verwendet werden.
Die Preisgestaltung ist in Jahres- und Monatspläne unterteilt. Verglichen mit den Jahresplänen sind die Monatspläne nicht nur teuer, sondern auch einige Funktionen fehlen. Auf Jahresplänen erhalten Sie nicht nur einen fairen Rabatt, sondern erhalten auch 3 Monate kostenlosen Service, Offline-Zugriff und Power-Ups.
Um das Tool verwenden 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 Prüfer pro Projekt, eine begrenzte Auswahl an Apps und keinen Support. Der kostenlose Account vermittelt jedoch eine gute Vorstellung von der Verwendbarkeit 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 Docs, Slack, JIRA und anderen verwenden.
MockFlow bietet sechs grundlegende Funktionen, nämlich WireFrame und UI-Mockups, Sitemap, StyleGuide, DesignCollab, Annotate Pro und Website Pro. Um UI-Mockups zu erstellen, verwenden Sie die erste WireFrame-Option im Dashboard und klicken Sie auf das + -Symbol.
Beginnen Sie mit der Auswahl der Plattform, für die Sie das Modell erstellen möchten, z. B. für iOS-Geräte, Smartwatches, Websites, Microsoft-Apps usw.
Das Bearbeitungs-Dashboard ist ebenfalls auf 6 Registerkarten aufgeteilt. Auf der Registerkarte "Elemente" können Sie vordefinierte Objekte wie z. B. Mobiler Rahmen, Symbole, Hintergrundbilder, Menüregisterkarten, Checkout-Optionen und mehr ziehen und ablegen. Sie können auch einfach von einer leeren Seite aus starten, wenn Sie möchten.
Die Objekte können mit einem einfachen Doppelklick weiter angepasst werden. Sie können mehrere Elemente zusammenfassen, um die Benutzeroberfläche einfacher zu bewegen und zu skalieren.
Weitere Registerkarten im Editor sind Seiten, um mehrere Seiten für dieselbe App zu erstellen, Registerkarte Bilder, Registerkarte Fluss, um den Status der Projekte hinzuzufügen und zu überprüfen, Speichern und Registerkarte Hochfahren, um weitere Apps und Vorlagen hinzuzufügen.
MockFlow ist ein hervorragendes Multifunktionswerkzeug zum Erstellen von UI-Mockups und mehr. Die Prämienpläne sind jedoch für ernsthafte Benutzer gedacht, die mindestens die Hälfte der angebotenen Funktionen nutzen können.
Versuchen Sie es mit MockFlow
- Lesen Sie auch: 10 beste kostenlose 3D-Design-Software für Anfänger und Fortgeschrittene
- 2
Balsamiq
- Preis - Kostenlose 30-Tage-Testversion / Online-Version ab 9 $ pro Monat / Offline-Version ab 89 $ unbefristete Lizenz
Balsamiq ist eine moderne Cloud-basierte Lösung für UI-Designer und -Entwickler, die ein schnelles, zugängliches kollaboratives Wireframing bietet. Wenn Sie eine Offline-Lösung bevorzugen, hat Balsamiq diese Lösung ebenfalls abgedeckt.
Balsamiq bietet zwei Versionen des Tools an, eine Online- und eine Offline-Desktop-App für Mac- und Windows-Computer. Die Offline-Version ist ein einmaliger Kauf, der für einen einzelnen Benutzer $ 89 kostet. Die Online-Version beginnt bei 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 Benutzern nutzen.
Die Registrierung für das kostenlose Testkonto ist einfach, erfordert jedoch eine Bestätigung der E-Mail durch die Benutzer. Wenn Sie fertig sind, erstellen Sie Ihren Platz und geben Sie ihm einen Namen. Fahren Sie dann mit dem Erstellen Ihres ersten Projekts fort.
Der Projekteditor verfügt über eine sehr einfache und benutzerfreundliche Oberfläche. Alle Eigenschaften sind auf der Symbolleiste gut verteilt. Die Seiten oder Wireframes werden auf der linken Seite angezeigt. Sie können mehrere Seiten hinzufügen, indem Sie auf das + -Symbol oben klicken.
Sie können mit dem Ziehen und Ablegen einer Vorlage in den Editor beginnen oder mit den grundlegenden Bearbeitungswerkzeugen ganz von vorne beginnen. Verwenden Sie die Option Weitere Steuerelemente, um nach weiteren Vorlagen und Symbolen aus der Bibliothek zu suchen. Die Balsamiq-Bibliothek bietet von Desktop-Anwendungen und -Diagrammen bis hin zu Hardware- und Layout-UIs alles, was Sie benötigen, um Mockup und Wireframes mit Leichtigkeit zu erstellen.
Um die Objekteigenschaften zu ändern, wählen Sie das Objekt aus, und die entsprechenden Optionen werden im rechten Fensterbereich 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 Neulinge hilfreich.
Balsamiq ist ein hervorragendes Werkzeug und mit Offline- und Online-Software-Suite zweifellos eines der besten in der Branche. Kombinieren Sie dies mit einer kostenlosen 30-Tage-Testversion, und Sie haben genug Zeit, um das Tool zu testen, bevor Sie einen Kauf tätigen.
Versuchen Sie es mit Balsamiq
- Lesen Sie auch: 8 atemberaubende Software zum Erstellen von Broschüren und Regeln des Marketingspiels
- 3
MockPlus
- Preis - Kostenlose Testversion / 59 $ pro Jahr Einzellizenz / 199 $ unbefristete Lizenz / Teamplan beginnt bei 299 $ pro Jahr
Für alle, die ein flexibles Werkzeug zum Erstellen von Modellen und Prototypen für jede Bildschirmgröße und Plattform suchen, ist MockPlus eine gute Wahl. Es ist eine Offline-Anwendung und ist für Windows-, Mac-, Android- und iOS-Geräte verfügbar.
MockPlus wird von einigen führenden Namen in der Tech-Branche verwendet, darunter Microsoft und IBM. Es gibt eine 7-tägige kostenlose Testversion, um das Tool vor dem Kauf zu testen.
Die Benutzeroberfläche von MockPlus ist übersichtlich und sieht modern aus. Es bietet viel Platz und stört den Arbeitsbereich nicht mit unnötigen Werkzeugen. Es hat auch eine Option mit mehreren Fenstern, um die Software in mehreren Fenstern zu verwenden, um die Produktivität zu steigern.
Sie können interaktive Prototypen auf einfache Weise erstellen, indem Sie einfach vorgefertigte Komponenten per Drag & Drop in den Editor ziehen. Die Bibliothek ist mit über 3000 Symbolen und fast 200 vorgefertigten Komponenten ausgestattet, damit Sie alle Drag & Drop-Funktionen nutzen können.
Die Prototypen können sofort mit dem von der App generierten QR-Code getestet werden. Darüber hinaus können die Projekte im Internet veröffentlicht werden, um Kommentare von Kunden und Teammitgliedern zu erhalten, indem sie einen Weblink zum Prototyp freigeben.
MockPlus zeichnet sich durch seine Funktionen aus. Die Funktionen und Funktionen dieser Prototyping-Software machen es zu einem idealen Werkzeug für UI- und UX-Designer, unabhängig von ihrem Fachwissen.
Laden Sie MockPlus herunter
- Lesen Sie auch: 9 reichhaltige Software zum Erstellen interaktiver Zeitleisten auf dem PC
- 4
Moqups
- Preis - Kostenlose Testversion / Start bei $ 19 pro Monat - Persönlicher Plan
Moqups ist eine Cloud-basierte Web-App, mit der Sie Wireframes, Mockups, Diagramme und Prototypen erstellen und in Echtzeit mit anderen Teammitgliedern zusammenarbeiten können.
Es ist ein Premium-Tool mit persönlichen und Team-Accounts. Für die kostenlose Testversion müssen Sie ein Konto registrieren und bietet 5 MB Speicherplatz mit einem auf 300 Objekte beschränkten Projekt.
Die Benutzeroberfläche ähnelt MockFlow, die Werkzeuge und das Layout sind jedoch unterschiedlich. Nachdem Sie ein neues Projekt erstellt haben, können Sie Elemente von der Registerkarte Schablone ziehen und ablegen.
Sie können dem Projekt weitere Seiten hinzufügen, Gliederungen anpassen, Vorlagen erstellen, Bilder hochladen und Bilder hinzufügen, in der umfangreichen Bibliothek mit Symbolen blättern und dem Projekt Kommentare hinzufügen.
Die Objekte können bearbeitet werden, um die Größe zu ändern, zu drehen, auszurichten und zu formatieren. Die Gruppierungsfunktion macht es einfach, mehrere Objekte für eine einfachere Bewegung zusammenzufassen.
Wenn das Mockup fertig ist, können Sie es in Google Drive, Dropbox oder das lokale Drive-In-Format PNG, PDF oder HTML Ihres Computers exportieren.
Moqups ist ein einfach zu bedienendes Werkzeug zum Wireframing und zum Erstellen von Diagrammen und Modellen in kürzester Zeit. Melden Sie sich für das kostenlose Konto an und nutzen Sie das Tool, um herauszufinden, ob es Ihren Anforderungen entspricht.
Versuchen Sie es mit Moqups
Fazit
Ob Sie ein professioneller UI-Designer oder nur ein Anfänger sind, es ist wichtig zu wissen, mit welchen Tools Sie UI-Mockups erstellen können. Wenn Sie nur nach einem Wireframing-Tool suchen, würde ich Ihnen empfehlen, Wireframes.cc auszuprobieren.
Es handelt sich um eine webbasierte App mit minimalistischem Design und einer Handvoll Funktionen zum Erstellen einfacher und effektiver Wireframes 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 einfaches kostenloses Konto ohne Einschränkungen, um den Einstieg zu erleichtern.
Sie können einige Zeit mit jedem dieser Tools verbringen, bevor Sie sich für eines entscheiden, das die meisten Kontrollkästchen in Ihrer Liste mit Mustern enthält.
Da wir wissen, dass kein einziges Werkzeug die Bedürfnisse aller erfüllen kann, haben wir versucht, die besten Werkzeuge für die Erstellung von UI-Mockups einzubeziehen, die die meisten Anforderungen der Designer erfüllen.
Teilen Sie uns Ihre Lieblingsmodell- und Wireframing-Software mit oder wenn Sie der Meinung sind, dass wir in den folgenden Kommentaren eine sinnvolle Alternative aus dieser Liste ausgeschlossen haben.
