DRAHTMODELL-EDITOR

NinjaMock enthält alle typischen Schablonen für Web- und Mobile-Wireframing.

Unsere Schablonen sehen skizzenhaft aus - als wären sie von Hand gezeichnet. Dies liegt daran, dass es den Menschen hilft, sich auf die Interaktion und den Inhalt in Ihrem Drahtmodell zu konzentrieren, anstatt auf Farben, Stil, detailliertes Layout und andere Aspekte der Wiedergabetreue.

Die Schablonen sind in einer Toolbox im linken Bereich der Anwendung organisiert und nach Typ und Verwendung gruppiert. Wir unterstützen derzeit verschiedene Arten von Projekten (z. B. iOS, Android, Windows Phone usw.) und für jeden Projekttyp enthält die Toolbox die Schablonen, die Sie benötigen.

(Android, iPhone, iPad, Windows Phone, Microsoft Surface, Webseiten und Freihand)

Symbole und Bilder

Drahtmodelle sind ohne Symbole und Bilder nicht vollständig. In NinjaMock stehen Ihnen viele praktische Optionen zur Verfügung, um Ihre Benutzeroberfläche so zu gestalten, dass sie diese visuellen Elemente enthält.

Eingebettete Symbole

Unsere eingebetteten Symbole verwenden den gleichen handgezeichneten Stil wie die übrigen Schablonenelemente, sodass Ihr gesamtes Drahtgitterdesign ein einheitliches Erscheinungsbild aufweist.

Die eingebetteten Symbole unterscheiden sich je nach Projekttyp. Zum Beispiel ähneln sie in Android- und iPhone-Drahtgitterprojekten den echten Symbolen der jeweiligen Plattform, haben aber immer noch ein skizzenhaftes handgezeichnetes Aussehen.

Die eingebetteten Symbole sind Vektoren. Sie können die Größe ändern und sogar die Füllungen und Striche ändern, ohne an Qualität zu verlieren.

IconFinder

Wenn Sie unter unseren eingebetteten Symbolen nicht finden, was Sie brauchen, haben wir auch eine direkte Integration mit IconFinder. Suchen Sie einfach auf der Registerkarte IconFinder im NinjaMock-Drahtmodell-Editor nach Symbolen, ohne jemals gehen zu müssen.

Bitte beachten Sie, dass die IconFinder-Symbole keine Vektoren sind und Sie ihre Füllungen oder Striche nicht ändern können.

Ihre eigenen Dateien

Haben Sie Symbole oder Bilder auf Ihrem Computer, die Sie in Ihrem Projekt verwenden möchten? Laden Sie einfach Ihre visuellen Assets in Ihren persönlichen Speicher auf unseren Servern hoch und Sie können sie in jedem Projekt verwenden. Wir stellen derzeit jedem Benutzer 500 MB freien Speicherplatz zur Verfügung.

Sie können Bilddateien direkt von Ihrem Desktop auf den NinjaMock-Drahtmodell-Editor ziehen und dort ablegen. Diese Dateien werden automatisch auf Ihren persönlichen Speicherplatz hochgeladen.

Bilder aus dem Web

Haben Sie das perfekte Symbol oder Bild gefunden, das Sie für Ihr Projekt im Web benötigen? Kein Problem, kopieren Sie einfach den Link zur Datei und fügen Sie ihn ein, und Sie können ihn verwenden, ohne ihn auf unsere Server hochzuladen.

Stellen Sie nur sicher, dass dieses Bild nicht von jedem Ort entfernt wird, an dem Sie es finden.

Sie können ein Bild direkt aus einem geöffneten Browser per Drag & Drop auf die NinjaMock-Designoberfläche ziehen. Wir fügen das Bild automatisch hinzu, indem wir auf die URL des Bildes verweisen.

Manuell gezeichnete Symbole

Manchmal ist es bequemer, ein eigenes Symbol zu erstellen, wenn Sie nichts finden, was Ihren Bedürfnissen entspricht. Mit den leistungsstarken Vektorbearbeitungswerkzeugen von NinjaMock können Sie schnell selbst ein Symbol erstellen.

Befolgen Sie diese 3 einfachen Schritte, um Ihr eigenes Symbol zu erstellen:

1. Verwenden Sie beliebige Vektorbearbeitungswerkzeuge, um das zu zeichnen, was Sie benötigen.
2. Wählen Sie die neu gezeichneten Elemente aus.
3. Klicken Sie mit der rechten Maustaste und wählen Sie Auswahl exportieren nach -> Meine Bilder....

Ihre Vektorzeichnung wird nun als wiederverwendbares Bild in Ihrem persönlichen Bereich auf unseren Servern gespeichert. Ab sofort können Sie dieses Bild als Symbolquelle verwenden. Im folgenden Beispiel sehen Sie ein manuell gezeichnetes Symbol, das im Tab-Leistenelement des iPhones verwendet wird:

Video-Unterstützung

Ninjamock ermöglicht es Ihnen, externe Videos in Ihren Projekten zu verwenden, indem Sie einfach die URL hinzufügen, unter der das Video gespeichert ist. Ninjamock unterstützt Videos von Youtube, Vimeo, Dailymotion und Rumble. Oder Videodateien in Formaten wie MP4, WEBM und OGG.

Emoji-Unterstützung

In Ninjamock können Sie Standard-Emojis in Ihren Projekten verwenden, die in der Größe verändert und an beliebigen Stellen in Ihren Projekten platziert werden können.

Custom stencils

Wenn Sie keine Schablone finden, die Sie benötigen, können Sie sie direkt im NinjaMock-Drahtmodell-Editor selbst erstellen. Sie können Ihre eigenen wiederverwendbaren Elemente aus einer beliebigen Auswahl von Objekten erstellen, die Sie auf der Entwurfsoberfläche erstellen.

Benutzerdefinierte Schablonen sind derzeit nur in dem Projekt verfügbar, in dem sie erstellt wurden.

So erstellen Sie Ihre eigene wiederverwendbare Schablone:

1. Erstellen Sie alles, was Sie benötigen, indem Sie vorhandene Schablonen verwenden und/oder einzigartige Elemente zeichnen (übrigens haben wir leistungsstarke Vektorbearbeitungswerkzeuge).
2. Wählen Sie alle Elemente aus, die Sie in Ihre benutzerdefinierte Schablone aufnehmen möchten.
3. Rechtsklick, wählen Assets -> In Asset umwandeln.

Die neu erstellte Schablone wird der Gruppe "Meine Assets" unten in der Toolbox hinzugefügt und Sie können sie jetzt auf jeder Seite im aktuellen Projekt verwenden.

Sie können die Schablone jederzeit ändern (Rechtsklick, wählen Sie Assets -> Asset bearbeiten) und Ihre Änderungen werden auf alle Instanzen der Schablone in Ihrem gesamten Projekt angewendet.

Vector graphics

Der NinjaMock-Drahtmodell-Editor bietet leistungsstarke integrierte Vektorbearbeitungswerkzeuge. Neben einfachen Elementen wie Linien, Kreisen und Rechtecken enthält NinjaMock Wireframe Editor auch einen Freihandstift und ein Stiftwerkzeug (mit Unterstützung für Bezier-Kurven) zum Erstellen von Formen jeglicher Art.

Die Vektorbearbeitungswerkzeuge befinden sich in der Werkzeugpalette auf der linken Seite der Zeichenoberfläche.

Wie funktionieren Zeichenwerkzeuge?

Zeichenwerkzeuge (Linie, Rechteck, Ellipse, Stift und Bleistift) funktionieren etwas anders als die übrigen Schablonen. Um mit dem Zeichnen einer Form zu beginnen, wählen Sie einen Startpunkt, halten Sie die linke Maustaste gedrückt und bewegen Sie die Maus zum gewünschten Endpunkt. Lassen Sie die linke Maustaste los, wenn die Form fertig ist. Das Zeichenverhalten ist sehr ähnlich zu den Werkzeugen, die Sie vielleicht von anderen professionellen Zeichenanwendungen kennen.

Wenn sich herausstellt, dass Ihre Form die falsche Größe hat, machen Sie sich keine Sorgen - Sie können sie später jederzeit ändern, entweder indem Sie die Größe mit der Maus ändern oder indem Sie im Eigenschaftenbereich Anpassungen vornehmen.

Beginnen wir mit den einfachen Zeichenwerkzeugen:

Linienwerkzeug

Mit einem Linienwerkzeug können Sie ... ta-ta! - zeichne eine Linie.

Verknüpfung: L Schlüssel.

Um eine gerade Linie zu zeichnen, halten Sie beim Zeichnen die Umschalttaste gedrückt. Dann rastet das Werkzeug in Schritten von 15 Grad ein, um Sie zu unterstützen.

Das Linienwerkzeug erzeugt skizzenhafte Linien. Die Anwendung zeichnet einen komplexen Pfad hinter den Kulissen, wodurch die Linie handgezeichnet aussieht. Wenn Sie eine nicht skizzenhafte (vollständig gerade) Linie benötigen, können Sie unser Stiftwerkzeug verwenden oder Ihre Linie in einen Pfad konvertieren.

Rectangle tool

Mit einem Rechteckwerkzeug können Sie ... trommelwirbel - zeichne ein Rechteck.

Verknüpfung: R Schlüssel.

Um das Seitenverhältnis der Form zu sperren, halten Sie beim Zeichnen die Umschalttaste gedrückt.

Das Rechteck-Werkzeug erzeugt ebenso wie das Linienwerkzeug skizzenhafte Formen. Wenn Sie ein nicht skizzenhaftes Rechteck benötigen, können Sie unser Rechteckwerkzeug verwenden oder Ihr Rechteck in einen Pfad konvertieren.

Ellipse-Werkzeug

Mit einem Ellipsenwerkzeug können Sie Ihren Projekten großartig aussehende Ellipsen hinzufügen.

Verknüpfung: C Schlüssel.

Um das Seitenverhältnis der Form zu sperren, halten Sie beim Zeichnen die Umschalttaste gedrückt.

Werfen wir einen Blick auf unsere erweiterten Vektor-Tools:

Stiftwerkzeug

Mit einem Stiftwerkzeug können Sie beliebige Arten von Polylinien und Polygonen erstellen.

Verknüpfung: P Schlüssel.

Der Stift ist nützlich, um eine schnelle Skizze einer Form zu erstellen (Kontrollpunkte hinzuzufügen), bevor Bezier-Kurven mit dem Pfadbearbeitungswerkzeug angewendet werden. Sie können auch Bezier-Kurven hinzufügen, während Sie Ihre Kontrollpunkte hinzufügen, indem Sie einfach ziehen, während Sie einen Punkt hinzufügen.

Tipps zur Verwendung des Stiftwerkzeugs:

Um einem vorhandenen Pfad einen Punkt hinzuzufügen, wählen Sie das Zeichenstift-Werkzeug aus und klicken Sie auf eine beliebige Stelle auf dem Pfad, um einen weiteren Punkt hinzuzufügen.

Um einen Punkt von einem Pfad zu entfernen, wählen Sie das Zeichenstift-Werkzeug und klicken Sie auf den vorhandenen Punkt, den Sie entfernen möchten.

Um ein Polygon zu schließen, fügen Sie einfach Ihren letzten Punkt direkt über dem ersten Punkt hinzu. Der Mauszeiger ändert sich, um anzuzeigen, dass das Polygon jetzt geschlossen wird.

Path edit tool

Mit dem Pfadbearbeitungswerkzeug können Sie jeden vorhandenen Pfad ändern, unabhängig davon, wie er erstellt wurde – ob mit Stift, Bleistift oder einem anderen Vektorbearbeitungswerkzeug.

Verknüpfung: A Schlüssel.

Das Pfadbearbeitungswerkzeug ist nützlich, um Anpassungen an Ihren Pfaden vorzunehmen, z. B. Punkte zu verschieben und Bezier-Kurven zu bearbeiten.

So erstellen Sie eine Kurve mit dem Pfadbearbeitungswerkzeug:

1. Bewegen Sie die Maus über den Pfadpunkt, den Sie in einen Kontrollpunkt für eine Kurve umwandeln möchten.
2. Halten Sie die Alt-Taste (Wahltaste auf dem Mac) gedrückt und "ziehen" Sie den Mauszeiger zu einer beliebigen Seite, weg von dem Punkt, während Sie nach unten klicken.
3. Kurvenanpassungsgriffe werden angezeigt (blaue Punkte, die in der Abbildung mit einer dünnen Linie verbunden sind). Verwenden Sie diese Griffe, um die Kurve nach Bedarf anzupassen.
4. Sie können eine Kurve auch wieder in eine normale abgewinkelte Ecke konvertieren, indem Sie bei gedrückter Alt-Taste auf den Kontrollpunkt klicken.

Pencil tool

Mit dem Bleistiftwerkzeug können Sie beliebige Freihandzeichnungen erstellen.

Verknüpfung: Y Schlüssel.

Stellen Sie einfach sicher, dass Sie gute Handzeichnungsfähigkeiten haben :-) Ein Wacom-Board oder ein anderes Zeichentablett kann nützlich sein, wenn Sie das Stiftwerkzeug verwenden.

Handwerkzeug

Sie können das Handwerkzeug verwenden, um die Designoberfläche zu schwenken. Dies ist praktisch, wenn Sie einen hohen Zoomfaktor angewendet haben und empfindliche Bildlaufanpassungen vornehmen müssen, um die Dinge sichtbar zu machen.

Verknüpfung: H Schlüssel. Alternativ können Sie die Leertaste gedrückt halten und die linke Maustaste verwenden, um das Handwerkzeug vorübergehend zu aktivieren. Dies ist nützlich, wenn Sie ein anderes Werkzeug (z. B. Stift) verwenden und scrollen müssen, ohne den Stift zu deaktivieren. Lassen Sie einfach die Leertaste los und der Stift wird wieder zum aktiven Werkzeug.

Geometrische Formen

In unserer Toolbox finden Sie viele weitere häufig verwendete Vektorformen.

Diese Formen werden in allen Projekttypen angezeigt (die anderen Schablonen in der Toolbox sind für einen Projekttyp spezifisch).

Gemeinsame Eigenschaften von Vektorobjekten

Alle unsere Vektorobjekte werden mit einem gemeinsamen Satz von Eigenschaften unterstützt – Strichpinsel, Strichbreite und Füllpinsel (falls zutreffend).

Dies gibt Ihnen die Flexibilität, schnell eine Form in einem Stil zu zeichnen, der zum Rest Ihres Designs passt.

Kopieren und Einfügen

Sie können Elemente einfach zwischen Seiten oder Projekten kopieren und einfügen. Sie können innerhalb desselben Drahtgitterprojekts kopieren und einfügen oder aus einem Projekt kopieren und in ein anderes Projekt einfügen, das in einem anderen Tab, Fenster oder sogar in einem anderen Browser geöffnet ist.

Wählen Sie einfach die Elemente in Ihrem Design aus, die Sie kopieren möchten, und verwenden Sie die Tastenkombination Strg + C (Cmd + C auf dem Mac) auf Ihrer Tastatur, um sie in die Zwischenablage zu kopieren.

Um die Elemente einzufügen, die sich jetzt in Ihrer Zwischenablage befinden, navigieren Sie einfach zu der Seite im Projekt, in die Sie sie kopieren möchten, und drücken Sie die Tasten Strg + V (Cmd + V auf dem Mac) auf Ihrer Tastatur. Das ist es! Die eingefügten Elemente werden nun an die neue Position kopiert.

Aus Sicherheitsgründen funktioniert das Kopieren zwischen Browser-Registerkarten nur bei Verwendung von Tastaturkürzeln. Es funktioniert nicht über das Kontextmenü, das mit dem Rechtsklick aktiviert wurde.

Grafiken einfügen

NinjaMock unterstützt Ihren Workflow auch dann, wenn Sie mit High-Fidelity-Designs in anderen Grafikanwendungen wie Adobe Photoshop arbeiten. Auch wenn Sie mit den Konzeptions- und Wireframing-Phasen Ihrer Designarbeit fertig sind, können Sie NinjaMock dennoch problemlos verwenden, um Ihren Workflow fortzusetzen, indem Sie Ihre pixelgenauen Designs in NinjaMock einfügen. Dies macht es Ihnen leicht, Ihre ausgefeilten visuellen Designs an Ihre Mitarbeiter, Stakeholder und Kunden zur Rückmeldung und Genehmigung zu verteilen. Keine schweren E-Mail-Threads oder überladenen Dateifreigaben mehr für Ihre Designprüfungen!

Wenn Sie mit Ihrem Mockup-Design in der Grafikanwendung Ihrer Wahl fertig sind, müssen Sie nur noch den Kopierbefehl der Anwendung verwenden, um die dort vorhandenen Designs zu kopieren, zu NinjaMock zurückzukehren und dann Ihre Grafiken mit dem in NinjaMock einzufügen Strg + V (Cmd + V auf Mac) Tastenkombination. Sie müssen sich nicht mehr darum kümmern, Ihre Designarbeiten als Bilddateien aus der Grafikanwendung zu speichern oder zu exportieren! Sie können auch die Zwischenablagefunktion Ihres Betriebssystems verwenden, um die gewünschten Grafiken zu kopieren. Auf einem Mac können Sie beispielsweise die Tastenkombination Cmd + Strg + Umschalt + 4 verwenden, um das Auswahlrechteck zum Kopieren der Zwischenablage zu öffnen, die Auswahl so zu ziehen, dass sie zu dem passt, was Sie kopieren möchten, und sie dann in NinjaMock einzufügen.

Transparenz wird nicht unterstützt. Transparente Bereiche in den Visualisierungen, die Sie aus anderen Anwendungen kopieren, werden mit einem weißen Hintergrund gerendert.

Aufgrund bestimmter Einschränkungen wird diese Art des Einfügens derzeit im Firefox-Browser nicht unterstützt.

Zusammenarbeit

Die Grundidee hinter Wireframing ist die Kommunikation Ihrer Ideen. Teilen Sie Ihre Arbeit mit Ihrem Team oder Ihren Kunden, um sofortiges Feedback zu erhalten und sicherzustellen, dass alle über den Fortschritt des Projekts auf dem Laufenden sind.

Teilen

Mit einem einzigen Klick können Sie Ihr Drahtgitterprojekt mit jedem teilen. NinjaMock generiert automatisch einen speziellen geheimen Link (z. B. "ninjamock.com/s/some-code "), mit dem Sie dann Ihr Projekt öffnen und anzeigen können.

Die Personen, mit denen Sie diesen Link teilen, benötigen kein NinjaMock-Konto. Dies ist besonders nützlich, um Ihre Arbeit an Ihre Kunden zu senden, die keine Wireframing-Tools verwenden. Auch wenn Ihre Kunden kein NinjaMock-Konto haben, können sie die Designs und Kommentare anzeigen und sogar eigene Kommentare zu Ihrem Projekt hinzufügen.

Wenn jemand, der kein NinjaMock-Konto hat, einen Kommentar zu Ihrem Wireframe- oder Mockup-Design hinterlässt, wird der Kommentarautor als "Shadow Ninja #some-number" angezeigt. Dies ist ein spezielles temporäres Konto, das wir im laufenden Betrieb speziell für Nichtkunden erstellen, wenn sie Kommentare hinzufügen.

So beginnen Sie mit der Freigabe Ihres Projekts:

1. Klicken Sie in der oberen Navigationsleiste auf die Schaltfläche Teilen.
2. Klicken Sie auf die Schaltfläche "Freigabe starten".
3. Senden Sie den automatisch generierten Link an wen Sie möchten.

Um die Freigabe Ihres Projekts zu beenden, klicken Sie einfach im selben Dialogfeld auf die Schaltfläche "Freigabe beenden". Ihr geheimer Link funktioniert nicht mehr, bis Sie wieder mit dem Teilen beginnen.

Teilweises Teilen

Es ist üblich, dass Sie Ihren Kunden nur einen bestimmten Teil Ihres Drahtgitterprojekts zur Verfügung stellen möchten, ohne dass sie Zugriff auf Abschnitte erhalten, die noch nicht abgeschlossen sind. Vielleicht möchten Sie weiter am nächsten Teil des Projekts arbeiten, während Sie darauf warten, dass sie das fertige Material überprüfen. Mit unseren Seitenstatus können Sie ganz einfach steuern, welche Seiten geteilt werden und welche nicht.

In der obigen Abbildung werden nur Seiten mit dem Status "Entwurf abgeschlossen" oder "Genehmigt" freigegeben. Jeder, der den geheimen Link verwendet (einschließlich Sie selbst, wenn Sie ihn testen möchten), sieht keine Drahtgitterseiten, die als "In Bearbeitung" gekennzeichnet sind.

Startup page

Um verschiedene Abläufe in Ihrem Drahtmodell zu testen, ist es oft nützlich, eine bestimmte Seite auszuwählen, auf der Ihre Prüfer Ihre Designs anzeigen sollen. In NinjaMock können Sie die Startseite direkt im Freigabedialog festlegen.

Die Startseite wird im Projekt selbst gespeichert. Dies bedeutet, dass Sie die Startseite jederzeit ändern können, ohne Tonnen verschiedener geheimer Links an Ihre Kunden zu senden. Jeder, der über den geheimen Link auf Ihr Projekt zugreift, beginnt auf derselben Startseite.

Öffnen auf mobilen Geräten

NinjaMock-Projekte können auch auf Tablets und Smartphones geöffnet werden, sodass Sie sehr bequem sehen können, wie Ihre Drahtmodell- und Modelldesigns auf bestimmten Geräten angezeigt werden!

Arbeiten Sie als Team

Es reicht manchmal nicht aus, ein Projekt zur Überprüfung freizugeben und Kommentare zu erhalten. Mit NinjaMock Wireframe Editor können Sie Ihren Arbeitsbereich freigeben und in Echtzeit mit Ihrem Team zusammenarbeiten. Laden Sie Ihre Geschäftspartner und Kollegen ein, sich Ihrem Projekt anzuschließen, und weisen Sie ihnen Berechtigungen zu, damit sie direkt Beiträge leisten können.

Jeder kann eingeladen werden, an Ihrem gemeinsamen Arbeitsbereich zu arbeiten. Versenden Sie einfach Einladungen und wenn Ihre Einladungen noch kein Konto haben, erstellen sie in Sekundenschnelle ein eigenes Konto. Eine weitere großartige Sache ist, dass sie ihre eigenen verfügbaren Projekte nicht verbrauchen, wenn sie sich Ihren anschließen! - und keine Sorge - Sie sind der Chef und entscheiden, welche Privilegien Ihre Mitarbeiter für jedes Ihrer Projekte haben.

Zugriffsrollen

Berechtigungen für den Arbeitsbereich werden mit der dem Benutzer zugewiesenen Rolle definiert. In NinjaMock gibt es vier Rollen: Eigentümer, Administrator, Designer und Prüfer.

Wer kann was?

Besitzer - ist der Benutzer, der Ordner und Projekte erstellt. Der Eigentümer hat die volle Kontrolle über das Projekt. Der Eigentümer lädt Mitarbeiter ein und weist ihnen Rollen zu. Jedes erstellte Projekt wird auf die Anzahl der verfügbaren Projekte des Eigentümers angerechnet.

Administrator - hat die volle Kontrolle über Ordner und Projekte und kann andere Mitarbeiter einladen. Die Projekte werden nicht auf die Anzahl der verfügbaren Wireframe- und Mockup-Projekte für das eigene Konto des Administrators angerechnet.

Designer - wie zu erwarten, arbeiten Designer im Projekt. Dieser Benutzer kann jedoch keine anderen Benutzer und ihre Rollen verwalten. Das Projekt wird auch nicht auf die Anzahl der verfügbaren Projekte für das eigene Konto des Designers angerechnet.

Gutachter - die Rolle mit den wenigsten Berechtigungen ist der Prüfer. Wie der Name schon sagt, können sie das Projekt anzeigen und kommentieren, aber nicht im Projekt entwerfen und Modelle ändern. Außerdem können Prüfer andere Benutzer und ihre Rollen nicht verwalten. Das Projekt wird nicht auf die Anzahl der verfügbaren Projekte für das eigene Konto des Gutachters angerechnet.

Einen Arbeitsbereich freigeben

Das Teilen des Projektarbeitsbereichs war noch nie so einfach: Klicken Sie einfach im Projekteditor auf die Teamoption.

Sie können die Arbeitsbereichsfreigabe auch über Ihre Liste der Drahtmodell- und Modellprojekte auf der Seite MEINE PROJEKTE starten, indem Sie die Option Team auf Projekt-, Ordner- oder Kontoebene verwalten verwenden.

Wenn Sie Einladungen zum Teilen Ihres Arbeitsbereichs senden, können Sie vorhandene NinjaMock-Benutzer hinzufügen oder neue Benutzer einladen, ein eigenes NinjaMock-Konto zu erstellen und Ihrem Projekt beizutreten.

Sie können so viele Mitarbeiter hinzufügen, wie Sie möchten.

Team verwalten

Als Projektverantwortlicher haben Sie die volle Kontrolle über Ihre Wireframe- und Mockup-Projekte.

Mit dem NinjaMock-Drahtmodell-Editor können Sie Benutzerrechte sowohl auf Projekt-, Ordner- als auch auf Kontoebene festlegen. Weisen Sie Ihren Mitarbeitern so viel oder so wenig Macht über das Projekt zu, wie Sie möchten: Machen Sie sie zum Administrator, Designer oder Reviewer.

Das Verwaltungsteam arbeitet auf drei verschiedenen Ebenen: Konto, Ordner oder Projekt. Fügen Sie die Berechtigungen hinzu und passen Sie die Zugriffsrechte und Berechtigungen vollständig an. Berechtigungen, die auf der untersten Ebene festgelegt sind, haben immer Vorrang.

Zugriff auf den freigegebenen Arbeitsbereich

Wenn jemand einen Projektarbeitsbereich mit Ihnen teilt, erhalten Sie eine E-Mail mit einem Link zum Zugriff auf das Projekt. Wenn Sie noch kein NinjaMock-Konto haben, werden Sie aufgefordert, eines zu erstellen. Das dauert nur Sekunden!

Zusammen mit dem Projektzugriff erhalten Sie bestimmte Berechtigungen: Administrator, Designer oder Reviewer. Diese Berechtigungen werden Ihnen vom Kontoinhaber erteilt.

Greifen Sie von einem Ort aus auf den Arbeitsbereich aller Projekte zu (Ihren oder für Sie freigegebenen): Meine Projekte. Wechseln Sie zwischen Konten, um auf ihre Projekte zuzugreifen.

Neben dem Projektzugriff können Sie Zugriff auf Ordner- oder Kontenebenen erhalten. Auf diese Weise haben Sie die gleichen Rechte für alle Projekte im Ordner oder für das gesamte Konto.

Projekte, die für Sie freigegeben wurden, wirken sich nicht auf die Projektzahl Ihres eigenen Plans aus.

Gemeinsam arbeiten

Zusammenarbeit an einem Projekt bedeutet, dass alle Benutzer auf den Projektarbeitsbereich zugreifen und abhängig von ihren Berechtigungen zum Projekt beitragen können.

Alle Änderungen und Verschiebungen werden dem Rest des Teams in Echtzeit angezeigt und auf dem Server gespeichert.

Kommentare

NinjaMock Wireframe Editor bietet eine intuitive und vertraute Möglichkeit, Kommentare zu einzelnen Wireframes zu hinterlassen und deren Status zu verfolgen.

Die Kommentare sind spezifisch für die Seite, auf der sie hinterlassen werden. Wenn eine Seite gelöscht wird, sind die entsprechenden Kommentare nicht mehr sichtbar.

Unsere Kommentare werden in Echtzeit synchronisiert, sodass Sie das Projekt nicht erneut öffnen oder aktualisieren müssen, um die neuesten Kommentare zu erhalten!

Kommentare hinzufügen

Neue Kommentare können entweder im Kommentarbereich auf der rechten Seite der Designoberfläche hinzugefügt werden oder indem Sie einfach mit der rechten Maustaste auf eine beliebige Stelle auf dem Drahtgitter klicken und im Popup-Menü "Kommentar hinzufügen" auswählen.

Wir haben keine Einschränkungen, wer Kommentare hinterlassen oder bearbeiten kann. Jeder, der Ihr Projekt öffnet, kann Kommentare hinzufügen, bearbeiten oder sogar löschen.

Kommentarblasen

Jeder Kommentar wird durch ein blaues Sprechblasensymbol auf der Designoberfläche dargestellt. Innerhalb der Sprechblase wird eine eindeutige Kommentarnummer angezeigt.

Sie können die Blase frei auf der Designoberfläche bewegen, um dem Betrachter zu helfen, zu verstehen, auf welches Drahtgitterelement sich der Kommentar bezieht.

Doppelklicken Sie auf das Sprechblasensymbol, um den Kommentar anzuzeigen oder zu bearbeiten.

Tracking comment status

Wenn ein Kommentar aufgelöst wurde, ist das Sprechblasensymbol ausgegraut und der Kommentar wird im Kommentarbereich an das Ende der Liste verschoben. Dies hilft Ihnen, sich auf die aktiven (ungelösten) Kommentare zu konzentrieren, die oben in der Kommentarliste angezeigt werden.

Um zu überprüfen, ob im gesamten Projekt ungelöste Kommentare vorhanden sind, verwenden Sie die ALLER wechseln Sie oben im Kommentarbereich. Auf diese Weise sehen Sie Kommentare für alle Seiten und nicht nur für die aktuelle Seite.

Klicken Sie auf ein Kommentar-Sprechblasensymbol und Sie werden direkt zu der Seite weitergeleitet, auf der dieser Kommentar hinterlassen wurde. Die Bildlaufposition wird ebenfalls so angepasst, dass dieses Sprechblasensymbol in der Mitte des Bildschirms positioniert ist.

E-Mail-Benachrichtigungen

NinjaMock Wireframe Editor bietet auch automatische E-Mail-Benachrichtigungen, wenn neue Kommentare oder Antworten hinzugefügt werden.

Als Eigentümer des Projekts erhalten Sie Benachrichtigungen über Kommentare von allen Prüfern.

Die Rezensenten erhalten jedoch nur Benachrichtigungen für die Kommentarthreads, an denen sie teilnehmen, wenn sie ein registrierter NinjaMock-Benutzer sind. Nicht-NinjaMock-Nutzer, die über den geheimen Link auf das Projekt zugreifen und Kommentare hinterlassen, werden nicht benachrichtigt.

Seitenstatus

Möglicherweise möchten Sie den Fortschritt Ihrer Arbeit verfolgen, um zu verstehen, wie nahe das Projekt der Fertigstellung ist. Im NinjaMock Wireframe Editor können Sie und Ihre Prüfer den Status einzelner Seiten steuern.

Jede einzelne Seite kann einen der folgenden Status "In Bearbeitung" (Standardstatus), "Entwurf abgeschlossen" und "Genehmigt" haben.

Alle Änderungen am Status einer Seite erfolgen manuell. Wir haben keine komplexen Workflows implementiert, die vorschreiben, wer zu welchem Zeitpunkt einen Status ändern kann. Stattdessen haben wir uns entschieden, es einfach und flexibel zu halten; Jeder Benutzer, der Zugriff auf Ihr Projekt hat, kann jederzeit jeden Status ändern.

Der Seitenstatus wird in Echtzeit synchronisiert, sodass Sie Ihren Browser nicht aktualisieren müssen, um den neuesten Status für eine Seite anzuzeigen.

Projektübersicht

Um den Status für ein gesamtes Drahtmodell- oder Modellprojekt anstelle einer bestimmten Seite anzuzeigen, können Sie die Webseite Projektübersicht verwenden. Sie können darauf zugreifen, indem Sie auf "Übersicht" klicken.

Die Übersichtsseite enthält Details zu allen Seiten in Ihrem Projekt, z. B. den Seitenstatus und die Anzahl der ungelösten Kommentare.

Nach PDF/PNG exportieren

Das Exportieren in PDF und das Ausdrucken auf Papier ist nach wie vor ein wesentlicher Bestandteil des Wireframings. Viele Ideengeber drucken ihre Wireframes aus und hängen sie an Bürowänden auf; Einige nutzen sie zur Inspiration, andere diskutieren die Entwürfe als Gruppe und fügen Kommentare direkt an der Wand hinzu.

Im NinjaMock Wireframe Editor unterstützen wir diese Praxis, indem wir Ihnen die Möglichkeit geben, Ihre Wireframes mit Seitenlinks und Seitenkommentaren zu exportieren. Auf diese Weise können Sie die Interaktion Ihres Designs auch auf Papier steuern.

Wenn Sie exportieren und Kommentare einschließen, fügen wir alle Seitenkommentare neben der Drahtgitterseite hinzu.

Die Kommentare haben die gleichen eindeutigen Kommentarnummern wie in der Designoberfläche von NinjaMock.

In HTML exportieren

Sie können Ihre Projekte auch als HTML exportieren. Durch den Export als HTML können Sie die Dateien auf Ihren Computer herunterladen oder sie Ihrem eigenen Webserver hinzufügen, um bequem darauf zuzugreifen und sie zu speichern. Dies kann nützlich sein, um Ihre Projekte mit Ihren Partnern und Kunden zu teilen.

HTML-Prototypen bieten eine interaktivere Erfahrung bei der Vorschau Ihrer Arbeit, indem Sie beispielsweise Text eingeben und Kontrollkästchen markieren können.

Projektmanagement

Wir möchten die Dinge im NinjaMock Wireframe Editor organisiert halten. Wir bieten bequeme Möglichkeiten, Seiten in Ihren Projekten zu gruppieren, und wir ermöglichen Ihnen auch, Ihre Projekte in Ordnern zu organisieren - genau wie die Dateien auf Ihrem Computer.

Seitengruppen

Wenn Ihr Projekt wächst und schwieriger zu navigieren ist, ist es hilfreich, Ihre Seiten in Gruppen aufzuteilen. Sie können sie beispielsweise nach ihren jeweiligen Bereichen in Ihrem Anwendungsdesign gruppieren. zB Anmeldeseiten, Einstellungsseiten usw. – oder wie Sie möchten.

Eine Seitengruppe ist einfach eine benannte Gruppe von Seiten (eine Seite kann sich jeweils nur in einer Gruppe befinden). Sie können beliebig viele Gruppen erstellen, Seiten zwischen Gruppen verschieben oder innerhalb einer Gruppe sortieren.

Um Seitengruppen zu erstellen, erweitern Sie den Seitenbereich, indem Sie auf das entsprechende Symbol in der oberen rechten Ecke des Bereichs klicken.

Project folders

Denken Sie einen Moment über die Dateien auf Ihrem Computer nach. Wenn Sie zu viele Dateien haben und es schwierig wird, das zu finden, was Sie möchten, erstellen Sie einfach Ordner und verschieben die Dateien darin, oder?

Wir haben die gleiche Erfahrung in NinjaMock reproduziert; Sie können Projektordner erstellen, verschiedene Drahtmodell- und Modellprojekte in Ordnern ablegen, Ordner in andere Ordner verschieben usw. Dies ist eine bequeme und vertraute Möglichkeit, Ihre Arbeit zu organisieren.

So verschieben Sie ein Projekt (oder einen Ordner) in einen Ordner:

1. Markieren Sie das Element in der Projektliste (bewegen Sie den Mauszeiger darüber).
2. Klicken Sie auf "Verschieben..." Textverbindung.
3. Wählen Sie den Zielordner aus und klicken Sie abschließend auf die Schaltfläche Verschieben.

Um den Ordner im Popup zu erweitern oder zu reduzieren, klicken Sie auf das graue Ordnersymbol.

Kurzanleitung - zum Drahtmodell-Editor