I fondatori di aziende tecnologiche stanno utilizzando queste 5 risorse per costruire il loro primo prototipo

Mi chiamo Marina Chernyshova e sono una product designer e mentore. Nel mio articolo precedente, " Hai poco budget? Usa queste metodologie di progettazione per creare il tuo primo MVP senza un designer a tempo pieno ,” Ho descritto perché, secondo me, le startup in fase iniziale non hanno sempre bisogno di un designer a tempo pieno e come approcciare la progettazione del primo prototipo da un punto di vista teorico. In questo articolo, vorrei invitarvi a guardare il lato più pratico. Condivido le fonti utili che i fondatori e i primi imprenditori tecnologici possono utilizzare per costruire il loro primo prototipo.

Se hai l'interesse e il tempo per progettare completamente il tuo prodotto da solo, allora ti consiglio di imparare Figma. Figma è un software di progettazione basato su cloud che viene utilizzato principalmente per disegnare, progettare e prototipare idee prima di una fase di sviluppo del progetto. Con questo strumento, i designer possono lavorare insieme per creare i layout, aggiungere immagini, sperimentare colori e caratteri e molto altro, tutto tramite un browser web. Figma è uno strumento potente ma allo stesso tempo molto facile da usare e molto utile per la comunicazione tra tutti i membri del team.

Oltre a Figma, è molto comodo usare FigJam e Figma Slides. FigJam è uno strumento di lavagna progettato specificamente per il lavoro di squadra collaborativo. Consente ai team di collaborare in tempo reale, visualizzare idee e fare brainstorming insieme. Figma Slides è uno strumento di presentazione su misura per i designer e i loro team. FigJam e Figma Slides sono adatti a chi usa già Figma per avere tutti i tuoi design, lavagne e presentazioni in un unico ecosistema.

Wireframe (struttura a reticolo)

I wireframe sono rappresentazioni visive schematiche approssimative di un prodotto digitale, come un sito web, un'app o un'interfaccia software. Nel mio articolo precedente ho spiegato cos'è lo User Flow: è un diagramma visivo che traccia il percorso che un utente compie attraverso un prodotto o un sito web per realizzare un'attività o un obiettivo specifico*.* Sulla base dello User Flow puoi creare la prima versione semplice dei wireframe.

I wireframe sono necessari per comprendere la struttura del prodotto prima che tu o il tuo team iniziate a progettare il prodotto. Aiutano i team ad allinearsi sui requisiti, mantenendo le conversazioni di progettazione UX focalizzate e costruttive senza essere distratti dalle sfumature del design come colori, font e icone.

I wireframe possono essere realizzati in modo molto diverso, possono essere molto dettagliati e poco dettagliati. Di seguito alcuni esempi di base:

• Immagine a sinistra (interfaccia utente tipo wireframe con blocchi di contenuto)
• Immagine a destra (interfaccia utente ad alta fedeltà con grafici e componenti dettagliati)

Consiglio di iniziare con la soluzione più semplice possibile: disporre le schermate principali con intestazioni e pulsanti approssimativi e non preoccuparsi troppo dei testi.

Se si lavora in Figma, le cornici possono essere create immediatamente in dimensioni realistiche tramite i modelli.

Per creare wireframe più dettagliati con elementi di interfaccia più realistici, puoi utilizzare risorse Figma già pronte per il wireframing, risparmiando molto tempo (ad esempio questa biblioteca ).

A questo punto, puoi già creare un prototipo senza prestare attenzione alle piccole cose come colori o font e mostrarlo a uno dei tuoi amici. Se si tratta di un'app mobile, puoi aprire il link dal tuo telefono per renderlo più realistico. È importante verificare che ci siano tutte le transizioni necessarie tra tutte le schermate e che un utente possa tornare indietro o annullare l'azione.

Librerie di componenti già pronte

Non c'è bisogno di progettare tutto da zero. È molto utile esplorare le risorse già pronte nella community Figma che puoi usare per progettare il tuo prodotto.

Ci sono molte librerie disponibili in Figma come Material UI. Queste librerie contengono molti elementi utili, che vanno da un set di icone a pagine già assemblate.

Gli elementi solitamente contengono già tutti gli stati (stati di passaggio del mouse e selezionati, avvisi, descrizioni ecc.). Intere astrazioni dell'interfaccia possono essere assemblate da piccoli componenti, ad esempio, una finestra di dialogo modale con pulsanti e tabelle all'interno. Oltre agli elementi stessi, potrebbero esserci istruzioni su come usarli correttamente con margini, spaziature ecc. Queste librerie hanno sviluppato componenti e persino interi layout che gli sviluppatori possono usare.

Se necessario, puoi aggiungere i tuoi elementi in futuro. Ad esempio, se hai bisogno di alcuni grafici, puoi prenderli da un'altra libreria. Se hai bisogno di un elemento non standard, puoi progettarlo da zero e aggiungerlo alla libreria con tutti gli stati.

Risorse grafiche pronte all'uso

Qualsiasi prodotto può apparire molto più maturo e ponderato grazie a una grafica bilanciata e ben progettata: illustrazioni, icone, animazioni, ecc.

Non è necessario perdere altro tempo su questo, qui puoi usare anche set già pronti. Ci sono molti set di questo tipo in diversi stili e colori. Si possono trovare anche in Comunità Figma O Comunità spline se ti piace la grafica 3D. Spesso i set più grandi sono pagati per uso commerciale, ma sono abbastanza accessibili.

Queste risorse possono essere utilizzate non solo all'interno del tuo prodotto, ma anche per i tuoi materiali di marketing, immagini di social network e pitch deck. Puoi trovare vari modelli di presentazione e modificarli a seconda del tuo stile.

Riferimenti e ispirazione

Esistono diverse piattaforme che raccolgono flussi di utenti e screenshot di diversi prodotti, come flussidipagina.com O mobbin.com . Puoi esplorarli per l'analisi della concorrenza o semplicemente per ispirazione. Sono davvero utili quando stai lavorando su una funzionalità particolare e sai che è un modello UX diffuso come il check-out o il salvataggio di un elemento nei preferiti. Puoi sfogliarli per categorie o cercare una determinata funzionalità tramite parole chiave.

Lavorando su un'esperienza utente fluida, è sempre meglio affidarsi a soluzioni esistenti perché sono chiare e familiari agli utenti. Anche se stai lavorando su funzionalità innovative, puoi sempre usare pattern simili nel significato da un'altra area.

Conclusione

Al giorno d'oggi il mercato digitale è piuttosto competitivo e gli utenti hanno esperienza in buone UX e UI. È meglio non trascurare questo aspetto nemmeno nella fase iniziale dello sviluppo del prodotto come un inutile spreco di tempo in "decorazioni", ma cercare di usarlo come un vantaggio competitivo.

A mio parere c'è un equilibrio tra la totale mancanza di design e molto tempo speso per il design perfetto di ogni schermata. Una UX fluida può essere raggiunta grazie alla semplificazione e all'evitamento di passaggi e azioni non necessari, e un'interfaccia utente accettabile può essere molto semplice ma attraente.

La cosa principale è non esitare a usare soluzioni già pronte e non saltare passaggi prima della progettazione come la creazione del flusso utente. In questo caso, il rischio di commettere un errore o di perdere tempo è notevolmente ridotto, il che farà risparmiare risorse e non influirà sulla motivazione.