10 strumenti di prototipazione indispensabili per i web designer

Per la maggior parte dei web designer moderni, la prototipazione è diventata parte integrante del processo creativo. In passato, avresti dovuto wireframe gli schizzi, quindi codificarli e solo dopo testare un prototipo. Questo è un sacco di lavoro e comporta una grande perdita di produttività. Fortunatamente però, oggigiorno puoi prototipare un'app o un sito web senza dover scrivere il codice tecnico per esso.

Riesci a immaginare di dover scrivere funzioni per ogni pulsante e transizione nella tua prossima app mobile? La quantità di tempo necessaria per fornire i prototipi ai tuoi clienti sarebbe esponenziale. Così è nata una nuova frontiera per gli strumenti di progettazione, e la maggior parte li conosce come "strumenti di prototipazione".

In sostanza, uno strumento di prototipazione può essere utilizzato per creare una "demo" funzionante della tua app o del tuo sito Web senza dover scrivere il codice principale. Piuttosto, puoi prima progettare la tua app, quindi applicare i principi di prototipazione per far sembrare funzionale quell'app.

È un ottimo modo per iniziare a presentare concetti ai tuoi clienti, ma anche per tenerli aggiornati frequentemente. Nella maggior parte dei casi, i clienti capiranno meglio come funzionerà la loro app e sembrerà che gli venga presentato costantemente un prototipo valido. E per questo post, ci concentreremo specificamente su tali strumenti.

Ricorda che la produttività ha un costo, quindi alcuni degli strumenti in questo post potrebbero richiedere un investimento nominale per un abbonamento. Tuttavia, sono disponibili anche opzioni gratuite e ne abbiamo coperte il maggior numero possibile.

InVision

Probabilmente il re degli strumenti di web design, InVision è sempre aggiornato con le ultime tendenze del settore. I loro strumenti e contenuti di progettazione sono ben riconosciuti nella comunità. E, soprattutto, InVision crea strumenti di progettazione come designer stessi, per i designer. Quindi, ottieni non solo funzionalità di prima classe, ma anche un'esperienza utente raffinata.

Studio è il prodotto su cui vorremmo attirare la tua attenzione perché Studio è ciò che offre la massima flessibilità nel reparto di prototipazione. È completamente integrato con strumenti di progettazione come Sketch, quindi puoi importare/esportare direttamente i file di progettazione tra entrambi gli strumenti.

Studio è nato dalle intuizioni acquisite lavorando a stretto contatto con alcuni dei migliori team di progettazione del mondo e trovando ispirazione nel modo in cui creano i prodotti più amati al mondo.

App In Vision

La caratteristica numero uno di Studio è il suo motore di animazione approfondito. Le animazioni compensano molti degli elementi dell'interfaccia utente nella moderna progettazione delle app, quindi essere in grado di riflettere stati così diversi in un prototipo è davvero rivoluzionario.

Non solo, InVision's Studio è stato creato per essere universalmente reattivo. Non è necessario ricreare lo stesso prototipo per dispositivi diversi. Invece, un design si adatterà naturalmente alle esigenze di diversi dispositivi, inclusi i computer desktop.

ProtoPie

I motivi per costruire prototipi sono molti, non solo incoraggiano il pensiero creativo, ma aiutano anche a costruire un prodotto migliore. Per uno strumento relativamente nuovo come ProtoPie, il loro viaggio può essere riassunto in una sola parola: potente . L'app è stata più volte riconosciuta come uno degli strumenti di prototipazione più avanzati ma semplici sul mercato.

E se questo non è abbastanza convincente, ecco i motivi per cui così tanti designer amano usare ProtoPie:

• Curva di apprendimento molto efficiente, registrati e inizia subito a costruire.
• Usa le funzionalità avanzate per aggiungere elementi di interazione profonda, comprese le animazioni dei gesti più conosciute.
• Sfrutta le variabili e le formule per implementare livelli di progettazione personalizzati. Aiuta ad aggiungere interazioni più autentiche.
• Trasforma i tuoi progetti da Sketch, Adobe XD o Figma in prototipi altamente interattivi in ​​ProtoPie e migliora l'intero flusso di lavoro.
  
• Disponibile per iOS e Android, così puoi testare i tuoi prototipi su qualsiasi dispositivo all'istante.

Non sorprende che aziende come Google, Reddit e Microsoft abbiano scelto questo come uno dei loro strumenti di progettazione essenziali. Il flusso di lavoro e la produttività sono sempre la massima priorità per qualsiasi team di progettazione e ProtoPie offre entrambi in modo efficace.

ProtoIO

ProtoIO è uno di quegli strumenti che non solo ha un bell'aspetto sulla carta, ma è anche buono in un caso d'uso reale. Sebbene lo strumento si concentri sui prototipi, non c'è nulla che ti impedisca di usarlo anche per esigenze di progettazione web complete. Con le funzionalità vettoriali integrate, è facile creare animazioni con una complessa attenzione ai dettagli.

La parte migliore è che non devi fare troppo affidamento su te stesso. Ciò significa che ProtoIO viene fornito preconfezionato con molti modelli e stili preesistenti, quindi puoi applicarli rapidamente alla tua struttura di progettazione complessiva. In questo modo, puoi sperimentare la vera "prototipazione rapida" e risparmiare un sacco di tempo.

Ovviamente, se stai lavorando a grandi progetti, avrai la possibilità di scavare in profondità nei tuoi progetti. Se il tuo obiettivo principale è creare un'app il più realistica possibile (sotto forma di prototipo), questa app ti aiuterà a farlo in modo rapido e semplice. Vale la pena ricordare che ProtoIO si concentra su un'esperienza di editing basata sul Web, tuttavia è prontamente disponibile un'app offline.

Ecco alcune altre funzionalità che ti piacerà usare:

• Sfumature istantanee per non dover visitare siti esterni.
• Directory delle risorse che semplifica la gestione e l'organizzazione dei file di progetto.
• Crea gruppi e livelli e modificali tutti contemporaneamente per un'esperienza di flusso di lavoro davvero avanzata.
• Sincronizza tutti i tuoi progetti con Dropbox per avere accesso a file importanti ogni volta che ne hai bisogno.

Come con qualsiasi strumento, ci vorrà un po' di tempo per imparare i dettagli. Immediatamente, è possibile importare progetti da app come Sketch, Photoshop e XD. Puoi persino lavorare con file destinati alle app di realtà virtuale. Quindi, questo è un vantaggio definitivo.

Draftio

Che ne dici di uno strumento di progettazione che ti dia tutti gli elementi costitutivi per i prototipi fuori dagli schemi? Questa è la premessa per Draftium. Un'app eccezionale che si concentra sulla collaborazione in tempo reale tra il tuo team di progettazione. Una delle caratteristiche migliori di Draftium è la sua libreria di oltre 300 modelli.

Puoi letteralmente scegliere un modello preesistente e iniziare subito a costruire. I modelli sono divisi in categorie, che coprono praticamente tutti i settori conosciuti sul web. Dopo aver selezionato il modello, ogni elemento all'interno del modello viene separato come un blocco.

I blocchi possono essere modificati individualmente, inclusa la rimozione o l'aggiunta di elementi utilizzando nient'altro che un pannello delle impostazioni. E questo vale anche per l'aggiunta di animazioni, forme e altri elementi di design. Gran parte del flusso di lavoro è davvero drag & drop, che aumenterà la tua produttività di dieci volte il primo giorno.

Liberi professionisti, agenzie e designer di tutto il mondo stanno utilizzando questo strumento di progettazione dell'anno 2018 di Product Hunt per creare prototipi perfetti per le immagini.

Penso che l'utente ideale dovrebbe essere il nuovo team di designer e le agenzie che stanno cercando di snellire il loro processo di progettazione. Avere così tanta flessibilità nelle app è raro. E il fatto che tu possa applicare modelli globali è un enorme vantaggio in termini di tempo necessario per progettare app e siti Web per i tuoi clienti.

Giustino mente

Justinmind è un altro potente strumento di prototipazione per progetti mobili e desktop. Replica situazioni di vita reale coprendo aree come il design interattivo e dinamico. Quando si tratta di creare prototipi senza codice, Justinmind ha molto da offrire.

Tutti i nuovi progetti iniziano selezionando il loro tipo (Wireframe e Prototipo, quindi puoi selezionare il tipo di modello con cui desideri lavorare. Justinmind copre interfacce come Web, iOS e Android. E sì, importando i file di progettazione esistenti da altri strumenti è anche una possibilità.

Non siamo solo appassionati del nostro prodotto, ma di tutto ciò che serve per offrire ai nostri utenti la migliore esperienza possibile. Lavoriamo sodo per fornire a tutti i clienti Justinmind in tutto il mondo un servizio di supporto eccezionale.

Personale di Justinmind

Successivamente, vorrei portare alla tua attenzione un'altra funzionalità fantastica e integrata. Questo si chiama "Libreria dell'interfaccia utente". In sostanza, questa libreria include migliaia di widget che puoi applicare ai tuoi progetti in tempo reale. I widget sono costituiti da elementi come Messaggi, Menu, Media e altro. In altre parole, dimentica di dover progettare un menu hamburger perché puoi semplicemente scegliere tra elementi dell'interfaccia utente preesistenti.

Quindi, per riassumere, non c'è dubbio nella mia mente (nessun gioco di parole!) Che Justinmind sia tra i re delle soluzioni di prototipazione. Oltre alla sua versatile tavolozza di funzioni, farai anche parte di una vivace comunità di designer. Ed è sempre una buona cosa.

Asso

Finora, abbiamo studiato alcuni strumenti di prim'ordine, ma c'è ancora molto da fare. E Axure è il nostro prossimo strumento sulla lista. Questa piattaforma molto rinomata si è affermata come un kit di wireframing leader. Ma sta anche facendo passi da gigante nel reparto di prototipazione. E forse in modi più tecnici rispetto a qualsiasi altro software menzionato in questo articolo.

Naturalmente, questo avrà un costo. Se desideri sfruttare tutto il potenziale di Axure, imparare un po' di codice sarà un must. Ma poi di nuovo, se il tuo team lavora in modo coerente su progetti di grandi dimensioni, probabilmente hai già designer front-end disponibili.

Una volta capito, sarai in grado di trarre pieno vantaggio da funzionalità come le interazioni dinamiche e la gestione del flusso. In sostanza, se il tuo progetto richiede molto "percorso dell'utente", questo strumento è tra i migliori per aiutarti a personalizzare mappe di viaggio sofisticate in tutti i tuoi progetti.

Ecco alcune altre caratteristiche degne di nota:

• Che tu stia creando diagrammi, percorsi del cliente o wireframe, Axure RP ti aiuta a documentare i problemi e a mettere tutti d'accordo.
• Ricevi notifiche sulle ultime modifiche e discussioni tramite e-mail, Slack o Microsoft Teams.
• Lavora con progetti ad alta e bassa fedeltà.
• Crea al volo interazioni complesse come Accesso utente e Anteprima multimediale.

Al momento, Axure è disponibile per sistemi Windows e macOS. Inoltre, i tuoi primi 30 giorni sono a casa (periodo di prova). Dovrebbe essere un tempo più che sufficiente per lavorare su diversi progetti e capire dove Axure è adatto alle tue esigenze.

corniciaio

È un po' pazzesco guardare il panorama del web design moderno. Solo negli ultimi 3 anni, la maggior parte dei siti Web si è allontanata da qualsiasi tipo di sensazione "statica". E questo include temi per piattaforme come WordPress. Quindi sembra che tutti abbiano imparato un po' di JavaScript. E, di conseguenza, le possibilità del design si sono aperte proprio come farebbe un vaso di Pandora.

Ma chi si lamenta? Più siamo, meglio è. Avere accesso a diversi strumenti e software è fondamentale per il successo. Alcuni fanno le cose meglio di altri, mentre alcuni marchi innovano oltre la norma. Uno di questi marchi è Framer, che senza dubbio ha causato molte chiacchiere nella comunità dei designer.

Abbiamo lanciato Framer quattro anni fa per creare un modo semplice per consentire alle persone di dare vita ai loro progetti statici con il codice. Ora Framer è un vero e proprio strumento interattivo di progettazione, prototipazione e collaborazione apprezzato dai team di Dropbox, Pinterest, Twitter e altro ancora. E abbiamo appena iniziato.

Framer, Inc.

Se hai mai usato Sketch, allora Framer si sentirà terribilmente simile. In senso buono, ovviamente. L'interfaccia utente perfettamente perfezionata di Framer è difficile da trascurare. La creazione di nuovi layout, l'aggiunta di nuovi elementi e l'implementazione di animazioni sono fluidi. Un segno di grande esperienza utente.

Sebbene Framer fornisca una gestione integrata delle interazioni, funziona benissimo anche insieme a React. Una nota libreria JavaScript per il bootstrap delle interfacce utente. Ti avvicina molto per farti sentire come se avessi il controllo delle cose.

Studio Origami

Facebook potrebbe non avere la massima reputazione nel dipartimento di sicurezza, ma sicuramente sa come costruire un software robusto. E Origami Studio ne è un altro esempio. Originariamente progettato per uso interno, Origami è ora disponibile per tutti gratuitamente. Una volta installato e funzionante, è un'assoluta gioia lavorare con esso.

Facebook ha investito molto per rendere Origami il più facile da capire possibile. Pensa a video, documentazione e ispirazione dalla community. Dovresti essere in grado di avere il tuo primo prototipo animato pronto in pochi minuti dall'utilizzo dell'app.

I progetti di Origami Studio possono anche essere trasformati in presentazioni separate. Quindi, se devi presentare un rapporto di progettazione il venerdì pomeriggio, questo strumento semplificherà l'intero processo. Penso che sia anche uno di quei rari strumenti della nostra lista che si concentrano esclusivamente sull'aspetto della prototipazione. Forse è una buona cosa?

Alva

Alva è uno strumento di progettazione visiva emergente basato su componenti di codice. È stato sviluppato come strumento open source, quindi puoi sia controllare il codice del progetto che inviare richieste o problemi di pull.

Quindi, la principale differenza tra gli altri strumenti sarà la funzionalità dei componenti del codice. Tali componenti dovranno essere forniti dal tuo team di sviluppatori. Il che non dovrebbe essere un problema per le agenzie più grandi.

Inizia con un set minimo di componenti per disegnare concetti e scorrere velocemente il tuo team per creare e arricchire componenti, perfezionare la progettazione e l'implementazione e comporre un prototipo funzionante e vivente.

C'è anche la possibilità di implementare file di progettazione da strumenti come Figma e Photoshop. Con ulteriore supporto aggiunto in futuro. Se dovessi riassumerlo in poche parole, Alva sta cercando di semplificare il processo di utilizzo e riutilizzo dei componenti esistenti per la prototipazione rapida.

Come marchio, potresti seguire una guida allo stile di progettazione simile, quindi, essendo in grado di archiviare e riutilizzare i componenti del tuo codice, migliorerai significativamente la produttività del tuo team.

Fase

Phase è probabilmente il prodotto più fresco di questa carrellata. In effetti, l'app è disponibile solo come "accesso anticipato" ma verrà rilasciata ad un certo punto nel 2019. Il primo annuncio è arrivato nel 2018, in cui il team ha spiegato qual è la loro visione e com'è la tabella di marcia. In tutta franchezza, questo sembra un ottimo strumento di web design da aggiungere al tuo repertorio.

L'obiettivo è rendere Phase un kit universale per un'accurata progettazione del prodotto. Esistono pochissimi strumenti sul mercato con tale copertura, quindi sarà una bella aggiunta al flusso di lavoro di qualsiasi designer.

Commentando maggiormente la funzionalità, Phase afferma: "Riteniamo che la verità sia che dopo anni di presunti progressi, abbiamo ancora essenzialmente a che fare con strumenti di progettazione di stampa. Certo, abbiamo incollato una o due cose su di loro, ma le loro fondamenta sono essenzialmente le stesse. Meritiamo di meglio. È ora che i nostri prodotti finalmente si evolvano davvero. “ .

Negli ultimi due paragrafi dell'annuncio, il team di Phase ha sollevato l'argomento del codice. Come in, codice utilizzato come mezzo per progettare. In genere, è il contrario. Utilizzi gli strumenti per progettare un layout, quindi chiedi a uno sviluppatore di codificarlo per te. Bene, con Phase, ci sarà molta più enfasi sulla scrittura del codice come mezzo per realizzare un progetto.

Ciò garantisce molta più flessibilità e sicuramente adattabilità a diversi dispositivi. Quando costruisci qualcosa sulla base di uno "schermo" piuttosto che di una "pagina", diventa molto più facile trapiantare il tuo design su molti mezzi diversi, inclusi i dispositivi Internet of Things.

Conclusione

Chiaramente, le scelte per eccellenti app di prototipazione di web design sono abbondanti. E penso che fosse importante discutere anche di alcune scelte meno note e emergenti. Come sai, il web design si sta evolvendo molto rapidamente in questo momento.

Le possibilità della tecnologia moderna sono estremamente ampie, il che significa che la creazione di design unici e interessanti non è più limitata a poche persone selezionate. Pertanto, gli strumenti e le app elencati per questo post riflettono cambiamenti così rapidi e dovrebbero fornirti ampie risorse per affrontare le esigenze del tuo prossimo progetto con la massima precisione.

Se hai domande o hai bisogno di aiuto, faccelo sapere attraverso i commenti e faremo del nostro meglio per accontentarti.