Perfekt prototyper och avancerade mönster med Marvel

Sep 16, 2025

Hur

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

Med en kortare inlärningskurva än INVISION-app och helt nya designhanteringsverktyg för företagsgrupper finns det ingen bättre tid att utforska hur Marvel kan vara en snabb och enkel lösning för prototypa webb- och mobilapplikationer i lag.

Marvel hjälper lag att ta sina mönster (gjorda antingen i skiss eller förvåna själv) från skissad idé att inleda till testat koncept. Dess samarbetsverktyg uppmuntrar intressenterna inte bara att ha sitt uttalande utan att vara en del av designens arbetsflöde.

01. Skapa ditt första Marvel-projekt

Marvel's new design screen, indicating the locations of the buttons to create new designs. — När du väl har valt ditt projekt klickar du på en av två knappar för att starta designprocessen

Registrera dig på Marvel för att börja, där endast ditt namn och e-postadress krävs. Välj antingen designprojekt eller prototypprojekt. Ett prototypprojekt är när du laddar upp skärmar som du redan har utformat (vanligtvis i skiss). Ett designprojekt är när du börjar från början och du vill använda Marvels egna designverktyg för att skapa en Low Fidelity Mockup (det här är ett fantastiskt alternativ för snabb iteration och brainstorming).

Välj designprojekt, sedan ge det ett namn och välj sedan iPhone X och klicka på knappen Skapa projekt. Härifrån (vi ringer till projektet Dashboard härifrån), klicka på designknappen på vänster sida eller startknappen i mitten av fönstret.

02. Design Low Fidelity Prototyper

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Du kan använda och anpassa färdiga komponenter, som den här kameraskärmen

Vårt centrala mål är att visualisera våra idéer snabbt utan att slösa för mycket tid att oroa sig för vad det slutliga resultatet kommer att se ut. Härifrån kan vi skapa former, bilder, text, färdiga komponenter som flikstänger, och till och med hela fullskärmskomponenter som den här kamerans skärm (som valdes från den vänstra sidofältet och restyleras med höger sidofält).

Ritningsformer, skapa textlager och göra enkla visuella förändringar är ganska lätt även för en icke-designer, även om det är kryddat designers, kommer att älska hur snabbt de kan kasta en idé tillsammans och klicka på knappen Lägg till i projekt.

Även om du inte kan förvänta dig vektorritning, maskering och andra komplexa designverktyg, kommer det här gränssnittet ändå att känna sig ganska bekant om du är en skiss, Adobe XD eller Figma-användare (i själva verket kommer vi att diskutera att importera högre Fidelity-design från skiss om ett ögonblick). Vad du kan förvänta dig är att zooma, anpassas, gruppera, grundläggande visuella designverktyg, muskontroller som att dra, ändra storlek och rotera och några praktiska tangentbordsgenvägar.

03. Få feedback

Marvel är dock inte bara för designers. Även om det kan kräva att en designer skapar den slutliga designen i en industristandard designapp, ska idéer (och göra) från alla typer av intressenter (chefer, kunder, utvecklare och så vidare).

Oavsett vad din primära roll är i ett lag, det borde vara superlätt att säga: "Hej, kan det här vara en idé?", Och sedan visa det visuellt. Förundra POP Mobil app minskar inträdesbarriären ytterligare genom att föra dessa förenklade designverktyg till mobila enheter, eftersom, låt oss möta det, idéer kan komma till oss på de märkligaste tiderna. Idéer som skissas på papper kan konverteras till en interaktiv Marvel-skärm med hjälp av enhetskameran. Design måste vara en demokratiserad, där vem som helst kan säga utan att vara begränsad till att använda komplexa designapplikationer.

04. Integrera Marvel med skiss

Efter produktivt brainstorming av lågfidelitetsidéer med ditt lag, vill du mocka upp den första iterationen i din designapp av valet. Medan du helt kan ladda upp exporterade PNG-skärmar från någon designapp, är Sketch den rekommenderade appen eftersom det finns ett dedikerat sketch-plugin som automatiserar processen (och till och med läser designen så att den kan inspekteras av utvecklare senare). Photoshop Support för Design Handoff kommer senare, men Adobe är inte touting Photoshop för användargränssnitt design längre, eftersom det skapade Adobe XD.

Från instrumentpanelen klickar du på Inställningar och GT; Integreringar och gt; Sketch Plugin, ladda sedan plugin. När du har installerat, och din designfil öppnas, tryck på Sync Valda eller Synkronisera alla knappar i Marvel-fältet (det visas ovanför listan) för att börja välja ett Marvel-projekt för att synkronisera skärmarna i.

05. Prototyps interaktioner

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Dra-Välj regioner för att skapa hotspots för att länka från en skärm till en annan

Men vi kan naturligtvis inte testa prototyper om vi inte har lagt till några interaktioner till dem, så låt oss göra det nu. Flytta tillbaka till Marvel Dashboard, där du får se skärmarna som vi synkroniseras, klicka på Visa på någon av skärmarna för att mata in skärmsläge.

Härifrån kan vi fortfarande navigera genom skärmarna med vänster och högerpil på vardera sidan av fönstret, klicka på Timer för att ha Marvel Cycle genom skärmarna efter ett visst antal sekunder (användbart för presentationer!) Eller klicka på Inga kommentarer att lägga till Din första kommentar eller anteckning på skärmen.

Förmodligen det första du kommer att märka är den fasta rubriken och fasta sidfotsknapparna som visas nära de övre vänstra och nedre vänstra hörnen på skärmen. Dessa knappar är dragbara och de kan också flyttas för att markera cutoff-regionen hos en rubriksektion som ska hållas fast på toppen av en rullbar visningsport. Du kan också använda textfälten i det övre högra och nedre högra hörnet för att ange detta värde manuellt.

Men hur länkar vi faktiskt en skärm till en annan? Enkelt: Med musen, dra-Välj en region på skärmen som är att länka till en annan skärm (det här kallas en "hotspot"). När du har gjort det kommer ett gränssnitt att visas längst ner i fönstret som gör att du kan anpassa var användaren tas till, eventuell övergång som händer under interaktionen och vilken gest som krävs för att aktivera den interaktionen (tryck, svep etc ).

Och naturligtvis kan vi använda dessa prototyperverktyg även på lågfidentitetsmockups. Faktum är att det rekommenderas att du gör, hela tiden med kommentarfunktionerna för att diskutera och upprepa.

06. Avlämna design till utvecklare

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 gör det enkelt för design och utvecklare att arbeta med varandra

När ditt lag behåller fullt förtroende för den slutliga designen, valideras med hjälp av kommentarer och användarprovningsverktyg, är det dags att överlämna det till utvecklarna som då kan inspektera och koda. Det är viktigt att komma ihåg att en designer inte är "klar" när designen överlämnas och att designers och utvecklare alltid ska kommunicera i harmoni för att övervaka utvecklingen tills dess slutförd. Utvecklaren kan också ha några frågor, så de kommentarerna ska fortfarande vara väldigt aktiva.

Tryck på Play-knappen och klicka sedan på Handoff i det nedre vänstra hörnet för att öppna designhanteringsgränssnittet. Härifrån kan utvecklare klicka på designelementen och inspektera de enskilda stilerna som gör dem vad de är, med hjälp av sidofältet på höger sida (mycket som inspektionsgränssnittet i Sketch, Figma eller Adobe XD). Den enda skillnaden här är att utvecklare kan klicka på knappen Kopiera för att kopiera stilarna som kod till urklippet.

Denna artikel publicerades ursprungligen i utgåva 301 av netto, världens bästsäljande tidning för webbdesigners och utvecklare. köpa Utgåva 301 eller Prenumerera på nätet .

Få mer inblick i iterativ prototypning

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby ger sitt samtal upptäcka hur iterativ prototyptestning hjälper dig att skapa en vinnande design, varje gång på Generera New York från 25-27 april 2018

När de flesta företag behöver skapa en ny webbdesign, börjar processen vanligtvis med pitchingidéer, flyttar till design, sedan utveckling, och går sedan live. Men vad händer om det inte fungerar? Det är mycket tid, ansträngning och pengar att spendera bara för att ta reda på att en idé utförd dåligt.

Lyckligtvis, i hennes prat på Generera New York från 25-27 april 2018 Marisa Morby, forskningschef på Clearhead, visar dig ett bättre sätt att skapa och validera nya mönster som är snabbare, lättare och billigare än den traditionella designprocessen med iterativ prototypning och testning.

Generera New York äger rum från 25-27 april 2018. Få din biljett nu .

Relaterade artiklar:

10 TOP PROTOTYPING TOOLS
De 18 bästa wireframverktygen
Hur man undviker prototypa fallgropar

Perfekt prototyper och avancerade mönster med Marvel

01. Skapa ditt första Marvel-projekt

02. Design Low Fidelity Prototyper

03. Få feedback

04. Integrera Marvel med skiss

05. Prototyps interaktioner

06. Avlämna design till utvecklare

Få mer inblick i iterativ prototypning

Hur - Mest populära artiklar

Hur man undviker en Amazon Prime Day 2020 misslyckas

Skapa texturer med mönsterstämpelverktyget

Hur man modellerar konceptkonst i Cinema 4D

Hur man skulpterar ett tecken i VR

Måla ett original Tarot-kort

Hur man väljer rätt prototypverktyg

Branding Pros delar hur de spikar märke

Skapa ett tecken med stiliserad realism

Kategorier