Moqups: Ein Überblick und ein Rückblick

Woher wissen Sie, dass eine Idee großartig oder schrecklich ist, ohne sie zu testen?

Wireframing, Mockups und Prototyping sind notwendige Bestandteile des digitalen Designs. Durch die Visualisierung Ihrer Konzepte können Sie Ihre Designs simulieren, verschiedene Benutzererfahrungen ausprobieren und verschiedene User Journeys und Flows testen, bevor Sie etwas live machen.

In der Vergangenheit mussten Designer ihre Entwürfe ausdrucken und dem Kunden ein PDF präsentieren. Heutzutage gibt es Tools, die Ihnen helfen, Designherausforderungen zu finden und zu lösen, bevor ein Design an die Öffentlichkeit geht. die ästhetischen und technischen Komponenten eines Entwurfs herausarbeiten; und testen Sie die Erfahrung vor allen anderen.

Sie werden auch Ihre Beziehung zum Kunden glätten – wenn er etwas vermutet (was er wird), können Sie das in der Anfangsphase bewältigen, anstatt später, wenn es zu spät ist, „Oh, das dachte ich mir…“ zu hören .

Moqups ist ein webbasiertes Designtool, mit dem Sie Wireframes, Mockups und Prototypen in einer einzigen Umgebung erstellen können. Sie können zwischen Projekten navigieren und Ihr Design von niedriger Wiedergabetreue (Anfangsstadien und grobe Skizzen) bis hin zu hoher Wiedergabetreue (gründlicher und detaillierter) ändern. In diesem Beitrag nehme ich es für eine Spritztour und zeige Ihnen, wie dieser Prozess bei jedem Schritt des Weges ist, einschließlich meiner letzten Gedanken am Ende des Beitrags.

Was kann man mit Moqups machen?

Es gibt eine Reihe von Designs, die Sie mit Moqups erstellen können: Diagramme, Flussdiagramme, Sitemaps, Wireframes, Mockups, Diagramme und Grafiken. Gehen wir sie durch.

Sie werden feststellen, dass ich hier nicht speziell über Prototyping spreche. Dafür gibt es einen Grund, den ich später anspreche.

Diagramme und Flussdiagramme

Nahezu jedes Webdesign-Projekt beginnt mit einem Diagramm, Flussdiagramm oder einer Sitemap, und die Teammitglieder neigen dazu, sie als Referenz zu verwenden. Mit Moqups können Sie alle möglichen Diagramme erstellen:

• Konzeptdiagramme
• Entscheidungsbäume
• Flussdiagramme mit Benutzerinteraktionen
• Flussdiagramme für Software-Workflows
• Gedächniskarten
• Sitemaps
• Anwendungsfalldiagramme

Mit Flussdiagramm-Schablonen können Sie bei allen Arten von Diagrammen einen Vorsprung erzielen. Sie können auch einen Diagram Extender verwenden, um einen Flow nach Bedarf zu entwickeln. Darüber hinaus können Sie das Aussehen des Diagramms ändern, um es anzupassen.

Wireframes und Mockups

Mit Wireframes kann Ihr Team zu Beginn eines Projekts Dinge wie Informationshierarchie, Seitendichte und Benutzerfluss herausfinden. Einfache Formen und Platzhaltertexte stehen stellvertretend für die fortgeschritteneren Designelemente, die Sie in Zukunft hinzufügen werden. Sie müssen sich noch nicht um Branding oder Design kümmern; Stattdessen müssen Sie sich nur um die Struktur und die wichtigsten Anforderungen der Website kümmern.

Mit Mockups kann Ihr Team in den ersten Phasen des Designs Feedback erhalten. Sie bauen auf der Skizze des Drahtmodells auf, um den Inhalt zu visualisieren und zu demonstrieren, wie es auf sehr einfache Weise funktioniert. Das Design wird in einen Kontext gesetzt, um es besser aussehen zu lassen und das Endergebnis zu visualisieren. Anstatt ein Design auf einer Seite zu sehen, können Kunden sehen, wie das Design auf ihrer Website oder App aussehen wird.

Erstellen Sie in der für Sie passenden Reihenfolge

Das Schöne an Moqups ist, dass Sie zwischen Ihren Wireframes und Mockups hin und her springen können, wie Sie möchten – und Sie müssen nicht unbedingt eines vor dem anderen erstellen. Sie können beispielsweise auf traditionelle Weise mit einem Wireframe und dann einem Mockup beginnen. Sie können dann zum Wireframe zurückkehren, um Optimierungen vorzunehmen, die Sie bei der Bewertung des Mockups erkannt haben. Oder Sie können zuerst ein Mockup erstellen und dann zur Wireframing-Phase wechseln, um die Details herauszufinden. Sie können das Mockup auch komplett überspringen und einen Low-Fidelity-Prototyp aus einem Wireframe erstellen.

Diagramme und Grafiken

Wenn Sie Ihrem Team, Ihren Kunden oder Investoren Informationen visuell präsentieren möchten, können Sie mit Moqups alle Arten von Diagrammen und Grafiken erstellen:

• Flächendiagramme
• Balkendiagramme
• Säulendiagramme
• Donut-Charts
• Liniendiagramme
• Kreisdiagramme

Moqups-Funktionen

Hier sind die Hauptfunktionen von Moqups, gefolgt von einer kurzen Liste der zusätzlichen Vorteile.

Integrierte Bibliothek mit Grafiken und Schriftarten

• Die integrierte Bibliothek enthält Tausende von Symbolsätzen. Es gibt auch gebrauchsfertige Schablonen, die für beliebte Anwendungsfälle entwickelt wurden, sowie benutzerdefinierte Schablonen-Kits für das Design mobiler Android- und iOS-Apps.
• Objekte ausrichten, skalieren, drehen oder stylen. Sie können Elemente auch massenhaft bearbeiten, gruppieren, sperren und umbenennen. Präzise Anpassungen können mit benutzerdefinierten Hilfslinien, Rastern und Linealen vorgenommen werden.
• Google Fonts ist integriert, sodass Sie aus Hunderten von Schriftarten wählen können. Mit erweiterten Steuerelementen können Sie den Text an Ihre Designs anpassen. (Möchten Sie lernen, wie man die besten Schriftarten für Logos auswählt? Wir haben einen Artikel dazu.)

Organisieren Sie Ihre Projekte

• Ziehen Sie Ihre Seiten per Drag-and-Drop, um sie neu anzuordnen oder in Ordnern zu organisieren.
• Das Seitenbedienfeld erleichtert das Durchsuchen und Navigieren in Ihren Ordnern.
• Mit Masterseiten können Sie Änderungen automatisch auf alle verknüpften Seiten anwenden.

Integrationen und Zusammenarbeit

• Moqups verfügt über Integrationen mit Tools wie Dropbox, Google Drive und Slack.
• Dank der Cloud kann Ihr Team zusammenarbeiten, während es aus der Ferne arbeitet (und hier gibt es weitere Möglichkeiten für Ihr Team, auch zu chatten).
• Erhalten Sie Feedback direkt zum Design selbst und nehmen Sie Änderungen vor, ohne verschiedene Versionen aneinander senden zu müssen.

Mehr Funktionen

• Einfach zu bedienender Drag-and-Drop-Editor (Anfänger können eine Lernkurve erleben, aber es ist kein Hauptfach)
• Laden Sie Ihre eigenen Bilder hoch
• Einrastende Ausrichtung beim Aneinanderreihen von Elementen
• Skalieren ohne Qualitätsverlust
• Exportieren Sie Ihre Arbeit als PDF oder PNG

Moqups verwenden

Ich steige gleich ein, um Ihnen von meinen Erfahrungen mit Moqups zu erzählen. Es ist viel los – es ist nicht verwirrend, es gibt einfach eine Menge – also werde ich über die Features sprechen, mit denen ich gespielt habe und die ich für cool oder nützlich hielt. Am Ende des Artikels werde ich Ihnen meine allgemeinen Gedanken und Gefühle zu Moqups mitteilen, einschließlich der allgemeinen Nachteile und derer, für wen es am besten geeignet ist.

Erste Schritte mit Moqups

Die Einrichtung mit Moqups ist super einfach, und ich schlage vor, dass Sie mit dem kostenlosen Konto beginnen (ich erzähle später im Abschnitt Preise darüber, was dazu enthalten ist).

Erstellen eines Designs

Der Drag-and-Drop-Editor gefällt mir sehr gut. In einigen Editoren klicken Sie auf ein Element und es erscheint sofort im Projekt, und dann kann es lästig sein, es loszuwerden. Moqups gibt mir das Gefühl, ein wenig mehr Kontrolle darüber zu haben, was ich hinzufüge, und lässt mich die Optionen erkunden, ohne mir Sorgen machen zu müssen, dass ich versehentlich auf etwas klicke und es hinzufüge, ohne es zu merken. Wenn Sie ein Element in Ihr Projekt ziehen, können Sie außerdem sehen, wie es aussehen wird, und es dann wieder zurücksetzen, wenn Sie es nicht möchten.

Arbeiten mit einem Design

Wenn Sie mit der Maus über die verschiedenen Elemente in Ihrem Design fahren, wird eine blaue Umrandung angezeigt, die Ihnen die verschiedenen Seitenelemente anzeigt. Um mit einem Element zu arbeiten, klicken Sie darauf, um es auszuwählen. Auf der rechten Seite öffnet sich ein Menü mit benutzerdefinierten Optionen.

Projektfarben

Ich mag den Teil „Projektfarben“ des Farbwählers. Dies machte es einfach, die Farbe des Herzens in der oberen linken Ecke mit der Farbe des Textes abzugleichen.

Elemente als Vorlagen speichern

Eine hilfreiche Funktion von Moqups besteht darin, dass Sie Elemente als Vorlagen speichern und sie dann einfach unverändert zu anderen Seiten hinzufügen können. Das ursprüngliche Design wird beibehalten – Farbe, Größe usw. Dies trägt dazu bei, Kontinuität in Ihrem Design zu schaffen.

Zusammenarbeitsfunktionen

Wenn Sie ein Google Drive-Nutzer sind, werden Kommentare so aussehen und verhalten, wie Sie es gewohnt sind. Das Hinzufügen eines Kommentars ist super einfach, und Sie können den Kommentar vor oder nach dem Schreiben verschieben, damit seine Platzierung sinnvoll ist.

Wenn Sie jedoch viele Mitarbeiter und Kommentare haben, kann dieser kleine Kommentarbereich schnell außer Kontrolle geraten. Vielleicht möchten Sie für Ihr Team eine Regel erstellen, nach der Kommentare als gelöst markiert werden, wenn sie nicht mehr benötigt werden.

Moqups-Preise

Mit dem kostenlosen Plan können Sie ein Projekt mit bis zu 200 Objekten erstellen. Dies ist bei der Wahl zwischen der Arbeit mit einem leeren Dokument und der Verwendung einer Vorlage zu berücksichtigen. Ich habe mich für die Landing Page Wireframe-Vorlage entschieden, die sofort 125 der 200 Objekte aufgebraucht hat. Ich kann natürlich einige Objekte löschen, aber für manche Leute kann es sinnvoller sein, bei Null anzufangen.

Das einzige, wofür der kostenlose Plan gut ist, ist das Ausprobieren von Moqups, denn die Chancen stehen gut, dass Sie nicht nur ein Projekt entwerfen müssen. Die Preise beginnen bei 13 USD pro Monat und werden jährlich gezahlt. Mit jedem Plan können Sie unbegrenzt Projekte erstellen und unbegrenzte Objekte verwenden. Die Hauptüberlegung ist also, wie viele Personen Moqups verwenden werden.

Wenn Sie kein Designteam sind, möchten Sie das Creative Team-Paket. Je mehr Personen Sie hinzufügen, desto geringer sind die Kosten pro Benutzer. Wenn Sie beispielsweise 50 Benutzer haben, betragen die Kosten 3 US-Dollar pro Benutzer, also insgesamt 149 US-Dollar pro Monat (jährlich bezahlt).

Einige mögen der Meinung sein, dass die Preise von Moqups sehr hoch sind, während andere denken, dass es zu teuer ist. Es hängt davon ab, wie oft Sie es verwenden und welchen Wert Sie daraus ziehen.

PS Mit dem kostenlosen Plan ist keine Kreditkarte erforderlich – wenn Sie es testen möchten und dann entscheiden, dass es nichts für Sie ist, müssen Sie nicht daran denken, vor der Belastung zu kündigen.

Moqups Schwachstellen

• Der größte Nachteil von Moqups ist, dass Sie es nicht offline verwenden können. Auf der anderen Seite ist die Tatsache, dass es browserbasiert ist, für einige Leute sehr praktisch.
• Wenn Sie erweiterte Anforderungen an das Prototyping haben oder wählerisch bei Funktionen sind, ist dies wahrscheinlich nicht das richtige Tool für Sie.
• Ich habe Rezensionen gelesen, die besagen, dass Moqups verzögert sein können, lange zum Laden brauchen und sogar unerwartet heruntergefahren werden können, aber ich habe nichts davon erlebt. Es ist jedoch etwas, das Sie im Auge behalten sollten, wenn Sie Rich Content hinzufügen und zusätzliche Seiten erstellen. Ich hatte keine Fotos oder Videos in meinem Design, also hat das vielleicht geholfen, die Dinge schnell zu machen. Wenn Ihre Projekte viele reichhaltige Elemente enthalten, nutzen Sie den kostenlosen Plan, um ihn zu testen.

Für wen ist Moqups am besten geeignet?

Moqups eignet sich hervorragend für Nicht-Entwickler, um in den ersten Phasen der Projektplanung zu konzipieren. Beispielsweise kann ein Geschäftsinhaber oder Projektmanager seine Idee dem Entwicklungs- und Designteam mitteilen, das dann fortgeschrittenere Methoden verwendet, um das eigentliche Produkt oder ein High-Fidelity-Rendering zu erstellen.

Moqups ist besonders nützlich für Mockups und Wireframing, aber es ist nicht so stark, wenn es um Prototyping geht. Moqups hat nicht annähernd so viele Funktionen wie andere Prototyping-Tools, und auch Styling-Elemente können nicht so vielfältig angepasst werden wie Tools von Mitbewerbern. Es wird kaum auf ihrer Website erwähnt.

Abschließende Gedanken

Insgesamt habe ich Moqups gerne verwendet – und ich wünschte, ich hätte es bei der Gestaltung meiner Website gewusst, weil es viel realistischer ist als das Stift- und Papierdesign, das ich skizziert habe. Es funktionierte so, wie es angeblich funktioniert, und selbst mit vielen Optionen war nichts zu schwierig herauszufinden. Wenn Sie jemals mit irgendeiner Art von Grafikdesign-Tool gearbeitet haben – und ich vermute, Sie haben es –, wird es nicht schwer sein, dieses zu erlernen. Sie können es zum ersten Mal verwenden und ein Projekt bis zum Ende des Tages (oder zum Ende der Stunde) beenden, und dann können Sie zurückgehen und alle Optionen erkunden, die Sie beim ersten Mal verpasst haben.

Der Sinn von Visualisierungstools besteht darin, ein Endprodukt zu erhalten, oder? Schauen Sie sich unser Divi-Design-Schaufenster mit Arbeiten aus unserer großartigen Community an.

Ausgewähltes Bild über Visual Generation / shutterstock.com