Adesso abbiamo preso un po' confidenza con i tool sia PJ che fig, ma possiamo iniziare a vedere come fare un we're from, quindi che cos'è questo Wilson a partire da appunto le mappe funzionali che abbiamo deciso che ci saranno questi contenuti all'interno del nostro sito web nella nostra landing page e iniziamo a detta tagliare un po' meglio anche, diciamo gli oggetti che andranno in pagina.

Ci sono due modi anzi diversi modi per fare welfare uno e anche sufi gemme.

Ve lo faccio vedere al volo, poi vi faccio vedere meglio anche su Fig, ma su film.

Anche qui, se vogliamo, esiste un widget.

Basta andare qui e cercare Wolfram.

Ok? Anzi, scusatemi un plague lo lanciamo.

Okay.

Come vedete a questo plugin si apre ed ho una serie di ehmm di template già fatti, di quelli che si chiamano wireframe kit.

Sono dei kit già creati da altri con le classiche diciamo pattern standard che si trovano nel web, magari una galleria, una mail con il link per un video è una serie di item di liste.

Ovviamente non dobbiamo ogni volta ripartire a creare insomma no l'acqua calda.

Conosciamo già, quindi se possiamo utilizzare cose già fatte e ci aiutano a velocizzare il nostro lavoro.

Conviene farlo.

Questo Plague in particolare, ci dà la possibilità di scorrere tra diversi kit.

Se trattiamo di web abbiamo dei web.

Wilfrid, se trattiamo di mobili abbiamo mobile Wilfried.

Possiamo scegliere un kit che ci piace di più e che ci può aiutare a raccontare in maniera semplificata il flusso delle nostre pagine.

E possiamo, per esempio metterlo qui e comporre, per esempio, appunto, la Questo è veramente di altissimo livello, nel senso che non si capisce molto se non il fatto che questa è una pagina con dei contenuti.

E questo, per esempio, è semplicemente un form.

Ma abbiamo rapidamente già la rappresentazione, diciamo, archetipo di queste due di queste due pagine e poi le possiamo andare a collegare per creare quello che in gergo può essere definito un guaio, no? Quindi il contenuto insieme al flusso.

E questo è un tipo di Wilfred, ovviamente molto, molto ad alto livello.

Possiamo fare la stessa identica cosa, ovviamente anche sul film, però trattandolo ovviamente in maniera molto più dettagliata.

Vado su film adesso.

In realtà ci sono sempre semplicemente Questo è un file di Gemma.

Torno qui sulla mia home page, diciamo di sezione.

Basta andare qui sul mondo, dove cioè la voce community e vado sulla mia faccetta che indica la community che è riservata a me.

Cerco su community la parola chiave Wilf Rim e come vedete escono fuori una serie di kit già messi a disposizione da tantissime ehmm persone che hanno generato questi contenuti per la community.

Come vedete, ce ne sono di diversi livelli fatti, diciamo, più accurati, meno accurati.

Supponiamo che troviamo quello che ci piace, noi possiamo selezionarlo, andare a dire duplicate Ok, su quale profilo lo andiamo a selezionare? E una volta duplicato possiamo è diciamo, questo file è totalmente nostro e possiamo prendere degli elementi per creare il nostro Wilfried.

Quindi banalmente, dobbiamo andare a creare un menu.

Possiamo prendere questo oggetto, copiarlo adesso io credo magari una nuova pagina qui lo incollo e qui ho iniziato a creare il mio il menu del mio sito chiaramente ad alto livello, dove non ci sono ancora le voci dettagliate, ma sto facendo capire che lì ci sarà un menu.

Poi magari per esempio, mi interessa mettere un'apertura di pagina con un testo e due gol action.

Bene, questo template fa al caso mio prendo, lo copio e lo vado ad incollare qui fino a comporre pezzo pezzo tutta la pagina che mi può interessare qui, magari.

Che ne so, potrebbe essere una sezione con una call to action, magari un Iscriviti alla newsletter.

Mi serve lo prendo e vado a comporre qui la mia, diciamo struttura macro di Wolfram.

Quindi posso farlo sia in questo modo prendendo elementi di gente che lo ha già fatto.

Oppure posso andare a creare.

È tutto ex novo.

Come posso fare? È molto semplice.

Iniziano a prendere confidenza con i tool proprio di progettazione all'interno di Fig.

Ma facciamo così per comodità mine creo un'altra pagina Will Efrem Custom Ok, ora attenzione.

Vedete che la pagina qui è azzurrina, è lo mutuata, diciamo dal vecchio file, e io posso in ogni momento andare a cambiare il background della mia pagina qui in alto, mettendo il colore che insomma, mi sembra adatto.

Questo voglio dire, non sempre bisogna utilizzare il grigio.

Se, per esempio state creando un'interfaccia Darhk, vi consiglio di lavorare sul dark anche come sfondo di spazio di lavoro, perché altrimenti il contrasto tra l'interfaccia che disegnate il vostro sfondo è troppo evidente e non riuscite a relazionarmi bene con con il colore, come vedete qui o uno spazio totalmente vuoto a mia disposizione per creare cos'é la prima cosa che devo andare adesso progettare è il mio, diciamo la mia pagina back stop di base.

Come vedremo poi, ovviamente noi progettiamo per diverse risoluzioni, perché quando si è prodotta per il progetto per il digitale non è che si progetta, è solo una pagina, è solo una dimensione, ma ovviamente si progetta in modo fluido.

Ma iniziamo comunque da quello che in gergo viene definito un break point.

Normalmente diciamo si puo' alle prime armi.

Iniziare a progettare dal desktop è sicuramente quello più facile, anche se poi andando avanti capirete che la progettazione mobile, forse quella migliore, partire dal mobile per poi andarsi ad allargare sul backstop.

Perché ovviamente se riuscirà a comunicare, a mettere tutti gli elementi sul mobile dove icons trent sono maggiori chiaramente sul desktop non avrete nessun problema, però vi consiglio di farlo quando avete avete avete preso un po' più di diciamo consapevolezza e di confidenza con la progettazione digitale.

Come si progetta una tavola backstop semplice si va qui sul sul tulle del tram o si può premere a of da tastiera e come vedete qui mi dà una serie di preset di fame.

Questi non sono altro che dimensioni gia' preimpostate di device o appunto touch point, che oggi sono disponibili più diffusi nel web.

Se gli devo fare un prodotto backstop, potrei partire per esempio da questo dex top mille qua e qua quattro e quaranta per mille ventiquattro che una delle misure più diffuse che ci sono oggi e da qui iniziare a progettare, faccio clic ed ecco qui che si apre la mia tavola di disegno.

Come vedete ha un'altezza finita limitata, ma sappiamo bene che nel web le cose si scrolla.

Hanno quindi quello che vi consiglio è ok una volta che abbiamo messo questa tavola la larghezza teniamo quella, ma non vi preoccupate che l'lte zza può essere variabile a secco.

Sono appunto dei contenuti che mettete.

Poi capiremo bene come progettare in modo che gli oggetti siano visibili già dal primo scrollo.

Questo fra me che abbiamo creato non è altro appunto che una tavola dove dentro metterò altri oggetti all'interno.

Ma quello che dobbiamo capire quando progettiamo config ma è che posso mettere fra me all'interno di altri fra me tutto nidificato.

Quindi se adesso, per esempio qui volessi disegnare un'area quella che chiamiamo la Hero images no.

Dove mettiamo un testo? É una call to action.

Non vado a disegnare un rettangolo.

No, vado a disegnare un fra me, cioè un contenitore che conterrà altre cose.

Questo è veramente cruciale per la nostra progettazione.

Io vado, prendo con questo qui proprio clicco e trascino.

Questa volta avevo sempre presente a disposizione, ma prendo e trascino il mio contenitore.

Questo adesso lo capiremo meglio poi in un secondo momento.

Ma è fondamentale per poi vincolare gli oggetti all'interno della pagina questo contenitore che ho appena fatto che chiameremo Hiro mi raccomando, nominiamo tutto che puo' esserci molto d'aiuto quando il file inizia a diventare cospicuo e questo sarà il contenitore delle cose che metterò nella parte di apertura.

Come vedete è trasparente, ma vi basterà andare qui a destra nella sezione film, cliccare e dargli un colore per identificarlo.

Io lavoro quando faccio un welfare, come vedete anche l'esempio di prima sempre su una monocromia, perché il fine del Wilfred è quello di comunicare l'assetto dei contenuti.

Ma non deve esserci nessun vincolo grafico.

Questo perché poi chi si concentra sulla analizzare i contenuti e le funzionalità.

Poi se vede due colori, due fonti belle messe lì, inizia a criticare o come dire, a focalizzarsi su quello e non sul vero obiettivo del welfare, cioè decidere quali saranno i contenuti.

Quindi faccio questo e dopodiché iniziò a mettere degli elementi in pagina.

Appunto, magari inizio m' anche molto è un welfare di essere molto, come dire grezzo.

Se devo mettere il logo posso mettere un quadratino grigio.

Se devo mettere delle voci di menu, possono anche essere qui altrettanto.

Tre voci grigie, tre rettangoli grigi giusto per far capire, posso magari mettere qui un testo più grande che chiamero' testo, testo di apertura.

Questo magari lo possiamo fare un pochino più più grande.

Ok anche questo facciamolo più grigio in modo che il nero non non disturbi, diciamo la nostra vista.

Ingrandiamo ancora un po', ok? E poi magari sotto potrei mettere dato che non ho un cuore.

I miei contenuti li devo diciamo prendere.

Potrei iniziare anche qui a disegnare dei piccoli rettangoli, nick, e stanno ad indicare che qui ci sarà una parte di di testo da definire insieme a chi farà il kopi, poi magari posso mettere qui un pulsante, magari lo mettiamo bianco che risalta di piu' con scritto col tuo action.

Ok, posso selezionare questi due oggetti insieme, raggrupparli con il tasto destro oppure facendo May la G ed ecco qui che ho fatto la prima parte del mio wireframe.

Ci sta dicendo che appena apriro' il mio sito internet avrò un titolo di apertura, un sottotitolo, una call to action e posso andare avanti così per tutte le altre sezioni.

Quindi posso prendere magari questo Vedete che il fatto che l'ho messo dentro questo questo con territorio mi aiuta facilmente ad applicarlo lo posso duplicare? Posso togliere gli elementi che non mi servono quando sono dentro un tram e devo fare piu' click successivi per entrare dentro e cancellare le cose.

Ok, qui potrei mettere per esempio qui c' è la funzionalità numero uno del mio servizio, magari con un testo, un po' più piccolo.

Qui ovviamente non ci andiamo troppo a focalizzare sull'estetica come vi dicevo prima.

Okay, dispongo solo un po' gli elementi qui.

Magari metto semplicemente un rettangolo per rappresentare che qui ci andrà un'immagine un'illustrazione qualcosa di simile e posso fare la stessa identica cosa andando sempre a copiare e dirgli che qui magari posso invertire gli elementi facendo così qui metterò la funzionalità due e via dicendo.

Questo perché in questo modo, appunto, sto creando un wilfred ad alto livello per iniziare a dare come dire in pasto il mio prodotto digitale.

A chi deve creare i contenuti.

Questo è diciamo, il primo approccio per appunto è procedere poi per un welfare che definiremo meglio ad alta definizione.

Questo è quello che possiamo chiamare.

Lo fai quindi a bassa fedeltà e poi si può fare un ulteriore livello di specifiche per arrivare a un welfare ai fai.

E adesso vi spiego come fare.