Lezione dal corso UX Design
Una volta validato il welfare, è arrivato il momento che tutti aspettavamo quello di realizzare il prototipo, ossia la rappresentazione realistica del nostro prodotto per creare un prototipo.
Ci sono tanti tool che possono esserci utili.
Uno dei tour più in voga al momento è sicuramente Fig, ma consiglio di utilizzare Fig, ma per il nostro esercizio, perché ci dà anche una versione gratuita e quindi iniziare un po' a sporcarsi le mani con questo tipo di tool.
Questo tipo di tulle, che sono molto diffusi ormai da qualche anno a questa parte, in realtà sono molto simili nel funzionamento, quindi imparare ad utilizzare Fig, ma non ci preclude la possibilità in futuro di cambiare tool e andare verso uno che magari più rispetto alle nostre esigenze.
Altri tool utili per creare prototipi sono sketch e addobbi XD, ma ci sono anche tanti designer, un po' nostalgici che continuano a realizzare i prototipi con Photoshop.
L'importante è avere la possibilità di inserire le informazioni e i contenuti in maniera realistica, quindi inserire immagini, avere la possibilità di regolare in maniera puntuale le altezze, le dimensioni, le spaziature, eccetera.
Sarebbe molto riduttivo insegnare a realizzare un prototipo perché servono tantissime informazioni per farne una ad hoc.
Proveremo però a realizzarne una semplice la prima cosa da fare è andare a prendere il wolfram e vedere come la struttura del nostro prodotto.
Iniziamo con la home page.
La nostra homepage dovrà essere così.
Per comodità faccio uno screenshot, ma volendo cioè la possibilità anche di esportare una borsa intera da Miro per evitare di fare un po' avanti indietro metto il mio wireframe accanto al prototipo che sto per andare a creare per questioni di velocità.
Io ho già preparato il prototipo perché la fase di prototipazione scoprirete che una fase molto lenta, una fase in cui ci sta soffermarsi a pensare, ci sta sperimentare e soprattutto controllare che tutto sia consistente e coerente con il resto dell' interfaccia è possibile iniziare a creare una prima scherma armata e i tirare su quella per definire delle linee guida.
Ad esempio creando l'interfaccia.
Mi sono resa conto che c'erano degli elementi che potrebbero essere utili per la navigazione, come ad esempio la ricerca di una pianta tra quella che è la lista, in quanto io mi aspetto che ci sono persone anche avendo visto la harvey a cui hanno risposto gli utenti che hanno più di dieci piante.
Quindi per semplificarci la vita, gli permetto di cercarla, di filtrare tra tutte quelle che hanno inserito in.
Inoltre, ho anche deciso di cambiare il modo in cui rappresento il bottone di aggiunta pianta.
Mi sono resa conto mentre stavo facendo i miei esercizi di lui e quindi stavo provando a capire in che modo strutturare la che il bottone inserito all'interno delle mie piante risultava essere poco visibile, dato che questa è un'azione molto importante, perché se non inserisco le piante all'interno della mia app non avrò nulla.
Ho deciso di creare un bottone che maggiormente primo piano realizzando questi componenti.
Io ho definito anche delle linee guida.
Tutti i bottoni primari all'interno del mio prodotto per essere consistenti dovranno essere realizzati esattamente in questo modo i dem.
Quando vado a realizzare un componente come questa card, che è praticamente il touch point per arrivare alla scheda della pianta, devo realizzare andando a definire degli standard.
Tutte le carte all'interno della mia interfaccia dovranno essere consistenti con quella che ho creato.
Se avranno quindi la stessa funzionalità rappresentare un'immagine e un testo é un'area cliccabile dovranno essere esattamente come questa.
Se invece avessero degli scopi diversi o delle informazioni diverse rappresentate.
Possiamo prendere questa come base come linea guida e andare a realizzare una che però sia consistente con quest'ultima.
Di certo all'interno dell'interfaccia dobbiamo cercare di mantenere quanto piu' il contenuto minimalista, come definito nelle politiche di Nils.
Il contenuto, quando ricco di componenti che non sono fondamentali, rischia di far andare l'utente in overload cognitivo.
Quindi disegnare un'interfaccia che sia minimalista, che sia delicata, che sia priva di componenti che non servono, è il primo passo per rendere un prodotto usabile.
Ho quindi preso dai welfare me le altre schermate che possono essere utili per la definizione del prodotto finale realizzato, quindi anche la schermata di visualizzazione della pianta e dei suoi dettagli e soprattutto realizzato alcuni casi d'uso.
Ad esempio, nel momento in cui le informazioni da me precedentemente inserite nella pianta non fossero corrette, ho rappresentato il flusso dove l'utente cliccando su modifica va ad eseguire le azioni per cambiare delle informazioni all'interno della scheda della pianta.
Idem rappresentato in che modo i messaggi di controllo verranno visualizzati e in che modo si vedrà la famosa notifica che mi avvisa del fatto che devo innaffiare la mia pianta un'altra schermata realizzata è quella dell'aggiunta di una nuova pianta.
Idealmente vanno realizzate tutte le schermate utili per rappresentare un flusso, dato che Mockup prototipo saranno la documentazione che hi-tech utilizzeranno per andare a sviluppare il prodotto e quanto più riusciamo ad essere esaustivi possibile, meglio è problema a costruire insieme un prototipo in una prima fase abbozzata.
Possiamo semplicemente andare a realizzare tutti i componenti in maniera un po', anche disordinata, per fare un po' di brainstorming e capire in che modo vogliamo andare a rappresentare il prodotto in una seconda fase.
Andremo poi a organizzare il contenuto in maniera scalabile in maniera intuitiva, ma per ora siamo in una fase ancora produttiva, dove non sappiamo ancora che direzione prendere.
Sappiamo che il nostro luogo è questo e abbiamo avuto indicazioni al brand su quali sono i colori da utilizzare che sono questi tre.
La prima cosa da fare è creare una lavagna bianca, un art board Fig.
Ma è molto famoso per gli shorts.
Possiamo fare potenzialmente tutte le azioni possibili attraverso la tastiera.
Premendo a possiamo realizzare un nuovo art board.
Se non abbiamo idea di quale risoluzione utilizzare, possiamo scegliere tra quelle che ci mette a disposizione Fig.
ma nel nostro caso è sicuramente un device mobile, quindi scelgo un iPhone che diciamo è un po' datato, ma neanche troppo l'iphone undici Viene creato un art board e della tela bianca dove posso iniziare a creare il mio prototipo? Possiamo trascinare gli elementi all'interno della schermata.
Possiamo giocare con le immagini Fig, ma è davvero molto flessibile per quanto riguarda la composizione di nuovi di nuove schermate.
Ma se siete alle prime armi con i prototipi e volete delle basi modificabili, potete tranquillamente cercare online degli esempi di già preconfezionati, prendendo magari quegli esempi e modificandoli un po'.
Potete fare esercizio con Fig, ma nella fase di benchmarking abbiamo analizzato dei competitor.
Possono essere loro la guida per andare a realizzare il nostro primo prototipo? Nel nostro caso proviamo a fare un prototipo molto semplice e inseriamo un'immagine.
Inseriamo un testo.
Potete sia trascinarlo dal menu come potete fare tutte le altre azioni da menu e dalla sai bar oppure premere ti sulla tastiera.
Ciao, io sono un testo.
Il momento in cui andate a scrivere un testo, avete nella side bar tutte le opzioni possibili per andarlo a modificare e questo vale per qualsiasi asset inserite su Fig, ma selezionando l'immagine io tutte le opzioni che mi permettono di manipolarla in qualche modo.
Quello che consiglio di guardare sempre la side bar quando selezionate qualcosa e andare un pochino a giocare con quelle che sono le funzionalità che offre Fig.
Ma proviamo a inserire un bottone Realizziamo un bottone semplicemente con un rettangolo.
É un testo per inserire un rettangolo o lo trasciniamo dal menù così oppure prendiamo R sulla tastiera.
Selezioniamo un rettangolo.
Voglio farlo dello stesso verde che il brand mi ha dato come linea guida.
La proprietà del rettangolo è di poter essere colorato.
Selezioniamo questo contagocce che ci permette di andare a selezionare un colore e abbiamo il nostro box all'interno con la T Creiamo un testo ricca.
Mi abbiamo la possibilità, come anche per altri tool di di grafica, di ordinare gli elementi in base a delle funzionalità già predefinite.
Vogliamo centrare il tutto orizzontalmente e verticalmente e in questo modo abbiamo qualcosa di potenzialmente cliccabile un bottone.
Quello che consiglio, quindi è di controllare gli altri prodotti.
In che modo hanno organizzato il loro contenuto? All'interno di una schermata, di scaricare dei prototipi già fatti per fare della pratica con Fig.
ma nel momento in cui siamo soddisfatti delle operatività.
Quindi banalmente abbiamo giocato e ci siamo esercitati con le funzionalità di Fig.
Ma andare a creare il prototipo secondo le regole che ci siamo dati, quindi prendendo il welfare che abbiamo costruito, che a sua volta segue la i flussi del Flow chart e andare a costruire un prototipo che abbia esattamente quelle caratteristiche.
Insegnanti molto preparati, esperienza positiva, metodo di spiegazione semplice ed efficace, soprattutto trasuda passione. Sono pienamente soddisfatta
Nel panorama dei corsi online, dire che è il miglior connubio tra prezzo e qualità, sarebbe riduttivo. La qualità dei docenti e dei corsi è la più elevata che abbia incontrato fino ad ora.
Learnn è un piattaforma su cui si possono trovare e acquisire delle basi solide sul tema scelto.
Queste basi ti permetteranno di affrontare percorsi avanzati, studi di approfondimento che potrai fare con chi vuoi o per conto tuo.
Se vuoi studiare un argomento ma non sai da dove iniziare e trovi che in giro sul web ci sia tanta confusione, inizia da Learnn.
Nel giro di una settimana, studiando attentamente, noterai un’enorme differenza sulle sue skills rispetto a prima.
Io ho fatto principalmente i corsi Google Ads, Analitycs e chat gtp con Simone, e sono di un livello stratosferico.
Moltissima formazione, che spazia in tutti i settori del digitale ad un costo super accessibile. La formazione è di alto livello
Sono oramai 11 mesi che sono con learn, mi trovo benissimo e soprattutto grazie ai loro corsi, sto migliorando le mie conoscenze e le sto mettendo in pratica continuamente!
Ritengo Learnn una delle migliori piattaforme di formazione.
Valore totale: ★★★★★
Qualità corsi: ★★★★★
Esperienza web/app: ★★★★★
Assistenza clienti: ★★★★★
Qualità / prezzo: ★★★★★
Learnn è l’unica piattaforma ad offrire una formazione orizzontale su diversi ambiti del mondo digital. Viene costantemente aggiornata con nuovi corsi. É in continua espansione e all’interno c’è una community pazzesca.
Sono dentro a Learnn dal primo giorno e vedere la loro crescita è davvero d’ispirazione. La qualità dei corsi e dei professionisti è indiscutibile il tutto a un prezzo super accessibile. La cosa che più apprezzo di Learnn sono le persone, team e community, legati da una mission forte e chiara. Solo un grande grazie per questa super azienda!
Sono da un mese sulla piattaforma e dopo il primo mese di prova, in cui ho portato a casa un bel corso, ho deciso di fare l’abbonamento annuale. È stata davvero un’ottima scoperta, consigliata tra l’altro da un’eccellente professionista, Milah Prinzi, con la quale mi sono formata. Consiglio vivamente la piattaforma a chi svolge lavori nel settore digitale e vuole tenersi sempre aggiornato e performante, e a chi vuole iniziare a formarsi.
Tanto, tanto, tanto valore, su argomenti e temi che spaziano in qualsiasi ambito del Digital. Quello che si trova all’interno di Learnn, altrove, altri enti formatori sarebbero capaci di farselo pagare svariate migliaia di euro. E non esagero! La community un Plus non da poco attraverso cui ci si può confrontare con altre persone con interessi simili! Rimpiango solo di aver scoperto Learnn troppo tardi e di aver buttato via molti soldi altrove prima in corsi estremamente costosi e dal dubbio (o quantomeno moderato) valore!
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 300 corsi, condividi i tuoi risultati, fai networking con otre 150.000 professionisti/e e oltre 700 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 700 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email, no carta richiesta.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri corsi senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
Si, le nostre certificazioni vengono rilasciate al completamento dell’80% di ogni corso dopo il superamento di un quiz di 10 domande.
La certificazione potrà essere condivisa sul proprio profilo personale Learnn e sui proprio profili LinkedIn e CV.
Le nostre certificazioni sono riconosciute da centinaia di aziende che formano i loro team su Learnn e queste aziende assumono abitualmente dentro alla nostra piattaforma.
Iscrivendoti a Learnn avrai accesso ad una community con 150.000 professionisti dove potrai confrontarti, fare networking e trovare nuove opportunità.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.