Accentsconagua
Share
Diamo un'occhiata ad alcuni strumenti di prototipazione disponibili per i web designer oggi, in nessun ordine particolare:
Dapprima le idee alle parti interessate e ai clienti possono sembrare semplici, ma quando le cose diventano difficili abbiamo bisogno di strumenti che aiutino ad accelerare il processo di feedback. Il web sta diventando più complicato per i progettisti front-end, con richieste sempre più interattive. Azioni come strisciamento e trascinamento sono solo la punta dell'iceberg, e capire come si combina l'intero puzzle è dove si trova la vera arte della prototipazione.
Per definizione, un "prototipo" è un primo esempio costruito per testare concetti specifici. Un prototipo viene utilizzato per valutare e migliorare un sistema per ottenere una migliore comprensione del progetto nel suo insieme. Lavoriamo tutti sui progetti ogni giorno e alcuni sono molto più complicati di altri, ma quando è il momento di chiedere uno strumento per aiutare gli aiuti nella catena alimentare di feedback?
Alcuni sostengono che il codice è molto più rapido all'inizio, ma ci sono momenti in cui il tempo è meglio speso usando un prototipo invece di spendere tempo ingegneria qualcosa che potrebbe cadere rapidamente sul ciglio della strada. Il prototipo invita a feedback sull'interazione e sul posizionamento. È un wireframe interattivo che offre ai clienti una migliore comprensione del modo in cui il progetto si adatta ai loro utenti.
Altre volte, la prototipazione prima della codifica può aiutare a migliorare il progetto identificando eventuali casi limite che potrebbero essere stati ignorati.
Quando ci chiediamo dove questo si inserisce oggi nel paesaggio, possiamo sicuramente attribuire la domanda sempre crescente di movimento. Le interfacce stanno diventando organismi viventi con contenuti interattivi. Le interazioni semplici possono essere tagliate e asciugate per spiegare verbalmente, ma in altri contesti aiuta a prendere in considerazione il modo in cui un'interazione può essere attivata e più clienti richiedono di vedere la dimostrazione dei concetti prima di disconnettersi. È importante, ora più che mai, avere un'idea su dove girare quando dovrebbe sorgere la necessità di un prototipo.
Con così tanti strumenti disponibili sul mercato, quale dovresti usare? Diamo un'occhiata.
FramerFramer presta la familiarità del montaggio visivo con la flessibilità del codice, offrendo un flusso di lavoro continuo integrato dall'anteprima del dispositivo, dal controllo della versione e dalla condivisione semplicistica. Un'app che aiuta a esplorare nuovi modelli di interazione per creare app rivoluzionarie. Inserisci i dati dalla tua API preferita, acquisisci input da parte dell'utente reale per testare e lavora con utenti e feedback reali. Importa la grafica direttamente da Sketch, Photoshop o Figma.
Sebbene Framer possa apparire come se fosse usato esclusivamente per le app mobili, può essere sfruttato anche per progetti non app o utilizzato come libreria autonoma. Quando si utilizza solo la libreria Framer JS, si evita completamente l'IDE. Essenzialmente è un framework JavaScript open source per la prototipazione rapida. Definisci animazioni e interazioni, completa di filtri, fisica primaverile, effetti 3D e altro ancora. Sebbene CoffeeScript non sia richiesto, i documenti utilizzano CoffeeScript e IDE.
Dovrebbe essere noto che Framer non è pensato per essere utilizzato per creare animazioni pronte per la produzione.
@UXDesignDad @framer Hey Andre! Framer è uno strumento di prototipazione per Mac. Quindi nessuna app di produzione 😁
- Krijn Rijshouwer (@krijnrijshouwer) 2 febbraio 2017
Poiché Framer ha il suo concetto di livelli ed è piuttosto pesante dal punto di vista del codice, non è possibile utilizzarlo in semplici DOM (esistenti) come si potrebbe fare con GreenSock. Infatti, mette la propria tela nel DOM e tutte le animazioni vengono eseguite all'interno di quella tela.
Adobe XDDisegna, riutilizza e remix grafica vettoriale e raster per creare wireframe, layout di schermo, prototipi interattivi e risorse pronti per la produzione tutti provenienti dalla stessa app. Lavora con strumenti potenti come Repeat Grid creati appositamente per XD e con livelli, simboli e strumenti penna per la progettazione UX. Aggiungi interazioni utilizzando una varietà di animazioni per creare transizioni tra schede artistiche per simulare il flusso della tua app / sito web.
I clienti possono fare commenti direttamente sui tuoi prototipi quando condividi direttamente e visualizzare i progetti in tempo reale su dispositivi reali. I disegni possono essere regolati e aggiornati automaticamente su tutte le piattaforme. Passa facilmente da wireframing, visual design, interaction design, prototyping, anteprima e condivisione, il tutto in un unico potente strumento.
Mentre XD è ancora un prodotto beta, resta da vedere se resterà nel futuro prevedibile. Puoi leggere ulteriori informazioni sulle funzionalità rilasciate qui per rimanere informato su cambiamenti e miglioramenti imminenti. Abbiamo persino pubblicato una serie di 15 parti che copre tutti gli strumenti essenziali di cui hai bisogno per iniziare a progettare e prototipare con Adobe XD:
Adobe After EffectsAfter Effects non è specificamente uno strumento di prototipazione per siti Web e applicazioni (anche se è ancora possibile farla franca), ma aiuta il prototipo di movimento per coloro che cercano un modo per comp / animazioni mockup per i client. Crea grafica animata per video o crea effetti di animazione per il Web. Ecco un grande articolo su Tuts + di Charles Yeager:
Controlla anche questa serie di dieci parti su Tuts + chiamata Welcome to After Effects.
Adobe Animate CCAdobe Animate è un'evoluzione di Flash Professional. È uno strumento che include funzionalità quali timeline, fotogrammi chiave, opzioni di esportazione abbondanti, supporto per librerie JavaScript di terze parti, regolazioni della posizione della videocamera e molto altro. Sebbene sia rivolto più verso gli animatori, non farti ingannare nel pensare di non poterlo usare per altri bisogni. Ricorda che gli strumenti fanno quanto vuoi e sono limitati solo dalla tua immaginazione. Utilizzalo per i wireframe dei siti Web, i test di animazione per le app e altro ancora. Puoi leggere sul funzionamento interno di Adobe Animate in questo articolo dal tuo vero:
Prototipo artigianaleCostruisci prototipi hi-fi con i tuoi veri e propri file di design. Craft fa parte della famiglia Invision; una società che acquisisce molti strumenti (come Macaw e Easee) in questi giorni da entità esterne.
Craft Prototype è un potente set di strumenti che consente di progettare con dati reali, creando guide di stile in un clic. Con il prototipo puoi fare il lavoro direttamente da Sketch; tutto in uno spazio. Con il mirroring in tempo reale sul tuo telefono puoi testare immediatamente i prototipi di design. Quando sei pronto per condividere, puoi pubblicare il tuo lavoro direttamente su Invision per ottenere un feedback immediato dai clienti e dai portatori di interesse. Ti consente persino di prototipare con una maggiore fedeltà al movimento, offrendoti una timeline per adattarsi visivamente usando i fotogrammi chiave. Genera HTML e CSS, codice swift nativo e documentazione per il tuo sviluppatore. Guarda questo breve video che spiega Anteprima Craft 2.0 - Prototype in Sketch su Vimeo.
PrincipioPrincipio semplifica la progettazione di interfacce utente animate e interattive. Se stai progettando il flusso di un'app multi-schermo, o nuove interazioni e animazioni, Principle ti consente di creare disegni dall'aspetto sorprendente. L'app appare molto simile all'interfaccia utente di Sketch, che include altri aspetti familiari per l'allineamento, la creazione di schede artistiche e le connessioni dello schermo, oltre a anteprime in tempo reale. Fai clic su livelli di animazione per approfondire i fotogrammi chiave e regolare le curve di andamento personalizzate proprio come faresti con altri strumenti di animazione. Principio ti dà la libertà di sperimentare senza limitarti a transizioni predefinite, inoltre puoi anche importare tavole da disegno da Sketch.
L'app Principle Mirror per iOS consente ad altri utenti di visualizzare i tuoi disegni sul proprio dispositivo. Durante la progettazione, puoi interagire istantaneamente collegando il tuo dispositivo al computer o esportare un'applicazione Mac standalone che gli altri possano visualizzare.
AtomicoAtomic è un'app web-based che si integra con Sketch, che consente di importare progetti da lì o in qualsiasi luogo a tua scelta. Portare progetti in Atomic è semplice; usa il potente plug-in di Sketch o trascina elementi dal tuo strumento di progettazione preferito.
Atomic ha strumenti di disegno e layout integrati per progettare da zero o costruire su disegni importati. Collega rapidamente i tuoi progetti utilizzando una gamma di gesti e transizioni per dispositivi mobili o desktop. Usa CSS personalizzati per applicare stili aggiuntivi ed esporta anche i tuoi CSS da condividere con altri sviluppatori. Maggiori informazioni sulle funzionalità di Atomic sul loro sito web.
ProtoCrea animazioni sofisticate per qualsiasi modello di interazione con la timeline facile da usare con Proto. L'app viene fornita con un set completo di librerie UI come iOS9, Material Design, Windows 10 e altro. I disegni possono essere importati usando il plug-in Sketch o Photoshop; importali a strati e sincronizzati con Dropbox. Esporta risorse UI direttamente. Anteprima dei prototipi nel browser o nei dispositivi utilizzando l'app di proto per IOS o Android. Condividi con i clienti o i membri del team per collaborare e generare feedback. Proto si integra con i principali strumenti di test degli utenti per ottenere feedback e informazioni approfonditi.
Scopri di più sulle sue funzionalità sul sito Web di Proto.
JustinmindJustinMind è un prodotto basato su app per trasformare semplici prototipi in prototipi interattivi per iOS e Android e creare wireframe web e mobili. Approfitta delle librerie UI precostruite, incorpora HTML e documenti in tutto ciò che il tuo cuore desidera. Gli account a pagamento consentono a più utenti di interagire simultaneamente con lo stesso prototipo rendendo il feedback semplice da ottenere. Ha anche una vasta libreria di widget preesistenti adattati al modello di dispositivo selezionato per il tuo progetto. Elementi come pulsanti interattivi, checkbox, elenchi e persino layout di parallasse sono a tua disposizione.
Se sei nuovo in questo strumento, troverai tantissimi tutorial e video guidati per tutti, dal principiante all'esperto. Sebbene offra un piano gratuito per le capacità di condivisione del browser, devi eseguire l'upgrade a un account a pagamento per la collaborazione tra i membri del tuo team. Con JustinMind Prototyper puoi importare immagini da qualsiasi strumento di progettazione o direttamente dal tuo browser web e trasformarle in entusiasmanti e avvincenti prototipi web con lo strumento "hotspot immagine". Esporta il tuo prototipo in un documento HTML completamente funzionante e rendilo facilmente disponibile per la visualizzazione in qualsiasi browser web.
Origami è costruito e utilizzato dai designer di Facebook ed è stato utilizzato per creare app come Instagram, Messenger e Paper. Copia qualsiasi cosa da Sketch e incolla i livelli nativi in Origami Studio. Regola rapidamente, aggiungi comportamenti e anima qualsiasi proprietà del livello senza tornare indietro. Lo strumento offre ai progettisti una serie di gesti e animazioni di transizione comuni ai pattern dell'interfaccia utente.
Origami offre funzionalità utili per la prototipazione interattiva con plugin per Sketch e Photoshop e una libreria di documentazione completa di forum.
Esiste una funzione "Esporta su codice" che ti consente di convertire il tuo design visivo in esempi di codice scritto per iOS, Android o web. Non è possibile condividere direttamente prototipi con individui che operano su dispositivi diversi dal proprio, sebbene sia possibile visualizzare in anteprima i propri prototipi con Origami Live, disponibile per Android e iOS. Consulta le esercitazioni per ulteriori informazioni sul sito Web Origami.
FlintoFlinto per Mac è uno strumento basato su app che consente di creare qualsiasi cosa, da semplici prototipi di tap-through a prototipi completi con interazioni. Non ci sono programmazione o scadenze; è uno strumento di prototipazione per i designer al centro. Posiziona oggetti e componenti dove desideri. Le transizioni possono essere semplici o complesse e le transizioni sono riutilizzabili. Hai un controllo preciso su ogni livello, incluso l'allentamento primaverile o cubico-bezier.
Usa il "progettista del comportamento" per creare micro-interazioni che esistono all'interno di una schermata. Questo è perfetto per cose come gli effetti dei pulsanti, i commutatori, le animazioni in loop e le animazioni basate su scroll.
Anche aggiungere aree di scorrimento agli schermi è facile; selezionare i layer e fare clic sul pulsante "scroll group". È possibile modificare una varietà di opzioni, creare gruppi di scorrimento di impaginazioni, nidificare i gruppi di scorrimento e persino creare animazioni basate su scorrimento.
Tutte le modifiche apportate a Flinto per Mac possono essere testate immediatamente nella finestra di anteprima o sul tuo iPhone o iPad connesso a WiFi utilizzando l'app gratuita di visualizzazione iOS.
L'app visualizzatore iOS di Flinto è gratuita nell'App Store per essere scaricata da chiunque, quindi puoi inviare i tuoi file Flinto a chiunque desideri condividere con.
WebFlowWebflow è un'altra app basata sul Web che viene eseguita direttamente nelle ultime versioni di Chrome e Safari. Ciò significa che è attualmente ottimizzato in quei browser, tuttavia il codice prodotto ha un supporto cross browser.
"Crea siti web dinamici e reattivi senza scrivere codice. Avvia con un clic e goditi l'hosting più veloce e affidabile sul web. Esporta codice pulito e semantico da distribuire agli sviluppatori. "
Webflow è fortemente focalizzato su animazioni web, interazioni e progettazione web reattiva. Interactions 2.0 è in arrivo e offrirà un maggiore controllo per le animazioni e le interazioni tra punti di interruzione (spesso i designer di un punto di dolore esprimono), e ovviamente la facilità di costruire visivamente rispetto a un proxy di codice.
Per darti un assaggio delle possibilità del flusso di lavoro, controlla questa demo dal vivo che può essere visualizzata anche in Webflow o controlla il codice prodotto in questa demo di CodePen. È anche utile avere un assaggio dell'interfaccia utente in questo video.
La qualità del codice che viene prodotta è semantica, leggibile e facile da usare se la esporti e la usi esternamente o la spegni a uno sviluppatore. Ecco alcune dimostrazioni che mostrano il codice prodotto.
Attualmente Interactions V1 è disponibile e Interactions 2.0 includerà più personalizzazioni con animazioni di tipo parallasse e interattività costruite visivamente; animazioni basate sulla posizione del cursore / live-scroll. Webflow spera di lanciare la beta molto presto, quindi Interactions 2.0 sarà una grande parte dell'interfaccia e una grande ragione per molti progettisti e sviluppatori di utilizzare Webflow.
Grazie a Waldo Broodryk di Webflow che ha avuto il tempo di rispondere a molte delle mie domande e condividere le sue demo e conoscenze.
L'editor basato su browser Marvel ti consente di collegare tutti i tuoi progetti insieme, aggiungere gesti e transizioni per rendere il prototipo un vero e proprio app o sito web. Crea prototipi per iPhone, iPad, desktop, Apple TV, Apple Watch e Android.
Marvel ha caratteristiche come la collaborazione, i commenti e la progettazione nel tuo browser con "Canvas", inoltre puoi aggiungere immagini usando Photoshop, Sketch o carta e penna. Gli utenti possono fare clic e trascinare per creare hotspot interattivi su progetti che reagiscono quando vengono cliccati o toccati. Marvel ha altre fantastiche funzionalità come un plug-in di Sketch e persino uno strumento iOS. L'app per iOS ora include Canvas (menzionato in precedenza), lo strumento di progettazione rapida di Marvel che consente di creare prototipi di app da zero. Questa app include anche Iconfinder e Unsplash che ti forniscono un database epico di oltre un milione di foto e icone da incorporare nei tuoi progetti.
Marvel offre anche ruoli utente, organizzazione del progetto tramite cartelle, sincronizzazione di progetti da Google Drive, opzioni per incorporare video e audio da YouTube, Spotify, Vimeo e SoundCloud.
Luogo: generatore di mockupPlaceit è un generatore di mockup; uno strumento online che consente di incorporare i propri progetti (che si tratti di progettazioni dell'interfaccia utente, loghi, altre risorse di branding) in ambienti di presentazione. Ad esempio, potresti avere un design di app che desideri posizionare all'interno di un iPhone su un tavolino o sovrapporre il tuo logo sulla maglietta di un modello.
Forse ti piacerebbe anche vedere i tuoi disegni incorporati in video come questo:
Design dell'interfaccia utente incorporato nel video di presentazione di PlaceitCon quasi 3.000 modelli e conteggi, Placeit è sicuro di avere ciò che stai cercando.
Indipendentemente dallo strumento che decidi di utilizzare, scegli quello più adatto a te e quello che ritieni più comodo. Lascia un commento qui sotto se hai avuto esperienza con uno degli strumenti menzionati per aiutare gli altri a cercare di decidere a quale strumento rivolgersi. Spero che questo articolo ti aiuti a ottenere più informazioni e ad arrivare a una decisione istruita quando arriva il momento di scegliere.
Un ringraziamento speciale a queste persone per il loro contributo, condivisione delle conoscenze e opinioni durante la mia ricerca:
