Perfekte Prototypen und Hand-off-Designs mit Marvel

Sep 14, 2025

wie man

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

Mit einer kürzeren Lernkurve als Invision-App und brandneuen Design-Handoff-Tools für Enterprise-Teams gibt es keine bessere Zeit, um zu erkunden, wie Marvel eine schnelle und mühelose Lösung für Prototyping-Web- und mobile Anwendungen in Teams sein kann.

Marvel hilft bei Teams, ihre Designs mitzunehmen (entweder in Skizze oder Marvel selbst gemacht) von der skizzierten Idee bis zum ersten auf getesteten Konzept. Ihre kollaborativen Instrumente ermutigen die Interessengruppen nicht nur, um ihre Sprache zu sagen, sondern ein Teil des Design-Workflows zu sein.

01. Erstellen Sie Ihr erstes Marvel-Projekt

Marvel's new design screen, indicating the locations of the buttons to create new designs. — Wenn Sie Ihr Projekt ausgewählt haben, klicken Sie auf eine von zwei Tasten, um den Entwurfsprozess zu starten

Melden Sie sich bei Marvel an, um zu beginnen, wo nur Ihr Name und Ihre E-Mail-Adresse erforderlich sind. Wählen Sie entweder Designprojekt- oder Prototyp-Projekt. Ein Prototypprojekt ist, wenn Sie Bildschirme hochladen, die Sie bereits entwickelt haben (normalerweise in der Skizze). Ein Entwurfsprojekt ist, wenn Sie von Grund auf beginnen, und Sie möchten mit Marvels eigene Design-Tools einsetzen, um ein Mockup mit niedrigem Fidelity zu erstellen (Dies ist eine erstaunliche Option für schnelle Iteration und Brainstorming).

Wählen Sie Design-Projekt, dann geben Sie einen Namen, dann wählen Sie das iPhone X aus und klicken Sie auf die Schaltfläche Projekt erstellen. Von hier aus (wir nennen dies das Projekt Dashboard von hier aus hier aus), klicken Sie auf der linken Seite auf die Schaltfläche Design oder die Startdesign-Taste in der Mitte des Fensters.

02. Design mit niedrigem Fidelity-Prototypen

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Sie können bereitgestellte Komponenten verwenden und anpassen, wie dieser Kameratort

Unser Kernziel besteht darin, unsere Ideen schnell zu visualisieren, ohne zu viel Zeit zu verschwenden, um sich darüber zu kümmern, wie das endgültige Ergebnis aussehen wird. Von hier aus können wir Formen, Bilder, Text, fertige Komponenten wie Registerkarten und sogar ganze Vollbildkomponenten wie diesen Kamerabild (der aus der linken Seitenleiste ausgewählt und mit der rechten Seite ausgewählt wurde Sidebar).

Zeichnen von Formen, Textschichten erstellen und einfache visuelle Änderungen vornehmen, auch für einen Nicht-Designer, obwohl er gewürzte Designer lieben wird, wie schnell sie eine Idee zusammenwerfen können, und klicken Sie auf die Schaltfläche Zu Projekt hinzufügen.

Obwohl Sie keine Vektorzeichnung, Maskierung und andere komplexe Design-Tools erwarten können, fühlt sich diese Schnittstelle jedoch nicht vertraut, wenn Sie eine Skizze sind, Adobe XD- oder FIGHMA-Benutzer (Tatsächlich diskutieren wir den Import von High-Fidelity-Motiven in einem Moment). Was Sie erwarten können, ist Zoomen, Ausrichten, Gruppieren, grundlegende visuelle Design-Tools, Maussteuerungen, z. B. Ziehen, Größenänderung und Drehen und ein paar praktische Tastatur-Verknüpfungen.

03. Rückmeldung erhalten.

Marvel ist jedoch nicht nur für Designer. Obwohl es möglicherweise einen Designer benötigt, um das endgültige Design in einer Industrie-Standard-Design-App zu erstellen, sollten Ideen (und tun) von allen Arten von Interessengruppen (Manager, Kunden, Entwicklern usw.) stammen.

Egal, was Ihre Hauptrolle in einem Team ist, es sollte super leicht zu sagen sein: "Hey, könnte das eine Idee sein?", Und demonstrieren Sie dann visuell. Marvel's. POP Die mobile App reduziert die Einstiegsbarriere auch weiter, indem sie diese vereinfachten Design-Tools auf mobile Geräte mitzunehmen, da sie darüber stehen lassen, Ideen können in den seltsamsten Zeiten zu uns kommen. Ideen, die auf Papier skizziert wurden, können mit der Gerätekamera in einen interaktiven Marvel-Bildschirm umgewandelt werden. Das Design muss eine demokratisierte sein, wo jeder eine Ansprache haben kann, ohne die Verwendung komplexer Designanwendungen beschränkt zu sein.

04. Integrieren Sie Marvel mit Skizze

Nach produktiver Brainstorming mit niedrigem Fidelity-Ideen mit Ihrem Team möchten Sie die erste Iteration in Ihrer Design-App der Wahl verspotten. Während Sie exportierte PNG-Bildschirme von jeder Entwurfs-App vollständig hochladen können, ist die Skizze die empfohlene App, da ein dediziertes Skizzen-Plugin vorhanden ist, das den Prozess automatisiert (und sogar die Ladung des Designs, so dass sie später von Entwicklern inspiziert werden kann). Die Unterstützung von Photoshop-Support für Design-Handoff wird später kommen, jedoch tobt Adobe nicht mehr Photoshop für das Benutzeroberflächen-Design, da er Adobe XD erstellt hat.

Klicken Sie im Dashboard auf Einstellungen & GT; Integrationen & GT; Skizz-Plugin, dann Plugin herunterladen. Wenn Sie ihn installiert haben, und Ihre Entwurfsdatei öffnen, drücken Sie die ausgewählte Synchronisierung oder synchronisieren alle Tasten in der Marvel-Leiste (dies erscheint oberhalb der Ebeneliste), um mit der Auswahl eines Marvel-Projekts zu wählen, um die Bildschirme zu synchronisieren.

05. Prototyp-Wechselwirkungen.

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Drag-Select-Regionen, um Hotspots zum Verknüpfen von einem Bildschirm in einen anderen zu erstellen

Aber natürlich können wir keine Prototypen testen, wenn wir ihnen keine Interaktionen hinzugefügt haben, also machen wir das jetzt. Zurück zum Marvel Dashboard, in dem Sie die Bildschirme sehen, die wir synchronisieren, klicken Sie auf Ansicht eines der Bildschirme, um den Bildschirmmodus einzugeben.

Von hier aus können wir immer noch über die Bildschirme mit den linken und rechten Pfeilen auf beiden Seiten des Fensters navigieren. Klicken Sie auf Timer, um den Marvel-Zyklus durch die Bildschirme nach einer bestimmten Anzahl von Sekunden zu erhalten (nützlich für Präsentationen!), Oder klicken Sie auf keine Kommentare, um hinzuzufügen Ihr erster Kommentar oder Anmerkung auf dem Bildschirm.

Das erste, was Sie ansehen, ist der feste Header und die festen Fußzeilen-Tasten, die in der Nähe der oberen linken und unteren linken Ecken des Bildschirms auftreten. Diese Tasten sind dröstable und sie können auch verschoben werden, um den Cutoff-Bereich eines Header-Abschnitts zu markieren, der an der Spitze eines scrollable ViewPorts befestigt ist. Sie können auch die Textfelder in der oberen rechten und untere rechten Ecke verwenden, um diesen Wert manuell anzugeben.

Aber wie verbinden wir tatsächlich einen Bildschirm zum anderen? Einfach: Mit der Maus, ziehen Sie eine Region auf dem Bildschirm, auf der sich auf einen anderen Bildschirm verknüpfen soll (dies wird als "Hotspot" bezeichnet). Sobald Sie das getan haben, erscheint am unteren Rand des Fensters eine Schnittstelle, mit der Sie anpassen können, wo der Benutzer angenommen wird, einen Übergang, der während der Interaktion geschieht, und welche Geste erforderlich ist, um diese Interaktion zu aktivieren (Tippen, Swipe usw.) ).

Und natürlich können wir diese Prototyping-Tools auch bei Mow-Fidelity-Mockups verwenden. In der Tat ist es empfohlen, dass Sie alle dabei tun, um die kommentierenden Funktionen zu diskutieren und wiederherzustellen.

06. Abgabe von Designs an Entwickler

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Design-Handoff erleichtert das Design und Entwickler, um miteinander zu arbeiten

Wenn Ihr Team das vollständige Vertrauen in das endgültige Design behält, validiert mit den Kommentierungs- und Benutzer-Test-Tools, ist es an der Zeit, es an die Entwickler zu übergeben, die dann inspizieren und codieren können. Es ist wichtig, sich daran zu erinnern, dass ein Designer nicht "erledigt" ist, wenn das Design übergeben wird, und dass Designer und Entwickler immer in Harmonie kommunizieren sollten, um die Entwicklung bis zur Fertigstellung zu überwachen. Der Entwickler kann auch einige Fragen haben, sodass diese Kommentierungsfunktionen immer noch sehr aktiv sind.

Drücken Sie die Wiedergabetaste, klicken Sie dann in der unteren linken Ecke auf Übergabe, um die Design-Handoff-Schnittstelle zu öffnen. Von hier aus werden Entwickler in der Lage, auf die Gestaltungselemente klicken und die einzelnen Stile inspizieren, die sie dazu bringen, was sie unterscheiden, verwenden die Seitenleiste auf der rechten Seite (ähnlich der Inspektorschnittstelle in der Skizze, Figma oder Adobe XD). Der einzige Unterschied besteht darin, dass Entwickler auf die Schaltfläche Kopieren klicken können, um die Stile als Code in die Zwischenablage zu kopieren.

Dieser Artikel wurde ursprünglich in Ausgabe 301 von Net, dem weltweit besten Verkaufsmagazin für Webdesigner und Entwickler, veröffentlicht. Kaufen Ausgabe 301. oder Net abonnieren .

Erhalten Sie mehr Einblick in ein iteratives Prototyping

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby zeigt, dass ihr Gespräch entdeckt, wie iterativer Prototyp-Tests Ihnen dabei helfen, ein gewinnendes Design zu schaffen, jedes Mal bei Generieren von New York vom 25. bis 27. April 2018

Wenn die meisten Unternehmen ein neues Webdesign erstellen müssen, beginnt der Prozess in der Regel mit Pitching-Ideen, bewegt sich zu Design, dann Entwicklung und geht dann live. Aber was ist, wenn es nicht funktioniert? Das ist viel Zeit, Mühe und Geld, um es auszugeben, um herauszufinden, dass eine Idee schlecht ausgeführt wurde.

Zum Glück in ihrem Gespräch bei Generieren Sie New York vom 25. und 27. April 2018 , Marisa Morby, Leiter der Forschungsleiter bei CleareheH

Generieren Sie New York, findet vom 25. bis 27. April 2018 statt. Holen Sie sich jetzt Ihr Ticket .

Zum Thema passende Artikel:

10 Top-Prototyping-Tools
Die 18 besten Wireframe-Tools
So vermeiden Sie Prototyping-Fallstricke

Perfekte Prototypen und Hand-off-Designs mit Marvel

01. Erstellen Sie Ihr erstes Marvel-Projekt

02. Design mit niedrigem Fidelity-Prototypen

03. Rückmeldung erhalten.

04. Integrieren Sie Marvel mit Skizze

05. Prototyp-Wechselwirkungen.

06. Abgabe von Designs an Entwickler

Erhalten Sie mehr Einblick in ein iteratives Prototyping

wie man - Die beliebtesten Artikel

Compositing in Animation: Lernen Sie die Grundlagen

17 Tipps zum Zeichnen von Manga-Gesichtern

Wie zeichnet man einen Hund

Wie man Federn zieht

Wie man Tieraugen veranschaulicht

Wie man digital in ZbrushCore digital skulpt

Erstellen Sie ein niedriges Poly-Tapeten in C4D

Perspektive erstellen, indem Sie Ihre Texturen in Photoshop verziehen

Kategorien