Lezione dal corso UI Design
Ok, abbiamo capito che queste griglie vanno utilizzate e abbiamo visto insomma come superare anche la paura dello scrolling all'interno delle nostre pagine web.
Ma adesso vediamo come metterlo in pratica, quindi andiamo su Fig.
Ma ritorniamo sul nostro fa il film è ovviamente prima di impostare una griglia dobbiamo impostare la dimensione di è una tavola, quindi di un tram e quindi vi ricordo sempre andiamo qui sul fiume, il tour fra me e andiamo a prendere.
In questo caso io prendo questa misura standard, poi successivamente approfondiamo.
Qual è la misura giusta da cui partire? Adesso prendo mille qua il quaranta per mille e ventiquattro.
Questa è una tavola del mio lei outcome.
Ce le metto queste benedette griglie come ovviamente possono Quali tipi di griglie posso utilizzare? Se vado qui a destra all'interno della della mia paletta di proprietà, troverò una volta cliccato attenzione che se non clicco sulla tavola questa cosa ovviamente non viene fuori.
Troverò la voce degli out grid, basterà cliccare sul più per creare un nuovo tipo di griglia.
Le griglie sul film possono essere di tre tipi una griglia ovviamente orizzontale e verticale, quindi fatta proprio modulare così e si può partire da quella otto che è quella che dicevamo prima.
Una griglia fatta di colonne e una griglia fatta di righe dipende ovviamente da quello che dobbiamo fare é quello lo standard con cui si lavora è quello di lavorare con le colonne.
Ok, quindi mettiamo colonne, abbiamo detto utilizziamo quel framework di base che viene utilizzato moltissimo che Bootstrap Foundation e utilizziamo dodici colonne.
Questo vale per il desktop, mentre per il tablet abbiamo otto colonne per il mobile, quattro o due colonne.
Quindi mettiamo dodici colonne e l'altra, cosa che possiamo impostare oltre.
Ovviamente al colore della nostra griglia possiamo decidere se una griglia stretch quindi che si adatta a seconda della grandezza della tavola.
Quindi l'unico elemento fisso il butter, cioè la distanza delle colonne fissa.
Le colonne invece si adattano a seconda delle out.
Oppure possiamo lavorare con un'impostazione, diciamo fissa incollando diciamo così le la griglia o a sinistra o a destra o al centro.
Chiaramente, in questo contesto dobbiamo fare un po' piu' di calcoli matematici, perché non dando un valore flessibile alla colonna, dobbiamo derivare noi in maniera matematica, quindi diciamo che sappiamo mille e quattro e quaranta.
Forse mi sembra che sessantanove può essere una buona dimensione.
Il gutter si da trentadue di base sul bus tram può essere meglio centrata qui.
Ovviamente io so che per te, per professionalità che sessantanove è il numero delle colonie, la larghezza di una colonna.
Quando lavoriamo con un layout a dimensione fissa, però io vi consiglio di non usarlo quasi mai se non ne rarissimi casi e dopo vediamo quando vi consiglio sempre di utilizzare la versione stretch, lasciando però sempre un po' di margine ai lati.
Se stiamo lavorando con una risoluzione mille e quattrocento mille e quattro e quaranta, direi che è sessanta di margini possono essere più che sufficienti.
E poi appunto impostate quello che viene chiamato il cutter.
Questo è il primo modo di fare le griglie.
Vi faccio vedere cosa vuol dire che sia uno stretch.
Vuol dire che se adesso io riduco la tavola, come vedete le colonne si stanno riducendo di conseguenza.
Quindi com'è giusto che sia perché il nostro yacht deve essere il flessibile.
Rimetto la misura qui.
Ma come avete visto altre modalità di creare griglie? Per esempio un'altra è quella di creare rose.
Scusatemi delle righe, per esempio, mi può essere d'aiuto? Supponiamo che io voglio che la navigazione in alto sia sempre di ottanta pixel.
Invece di stare lì a mettere righelli nelle cose di questo tipo che milano fastidio creo una griglia solo con una riga orizzontale ancorata in alto come faccio? La cosa bella è che la posso aggiungere a questa che ho già creato, quindi vado qui sul più dico non griglia di otto pixel ma gli dico loro gli dico una adesso per comodità cambio colore in modo che noi possiamo vederla meglio.
Non gli dico stracciata ma le dico di essere ancorata in alto vedete che qui si inizia a vedere gli dico quante altre abbiamo detto tanta pixel.
Ecco qui che in questo modo ho creato un altro elemento di griglia all'interno del mio yacht altri elementi che mi possono aiutare.
Posso fare contro il gin ogni momento per andare a nascondere o visualizzare le mie le mie griglie.
Potrei fare la stessa cosa con una colonna a sinistra, quindi posso creare qui nelle out una nuova griglia gli dico colonne.
In questo caso mettiamola blu che si capisce un pochino meglio diro' sempre una colonna, gli dico che è ancorata a sinistra e gli do una dimensione questa volta mettiamo di tre centoventi immaginate quei classici esempi di dashboard dove abbiamo magari una cyber a sinistra e mi mi serve tenerla sempre fissa e magari una navigazione top sempre fissa di ottanta pixel.
Chiaramente in questo caso questa va un pochino a collidere con l'idea della griglia dodici, ma è solo per farvi vedere che abbiamo anche questa funzionalità.
La vado adesso a nascondere per non vederla, ma posso attivarlo in ogni momento.
La cosa buona è che se questo questa griglia io la vado a a salvare come una standardizzazione, me la ritroverò costantemente su tutto il mio all'interno del documento è mica male, perché vuol dire che ogni pagina nuova che creo ho già tutti questi riferimenti visivi progettati.
Come faccio a salvare questo asset di griglie messe insieme su fig? Ma vado su questi quattro puntini che è in qualche modo come dire la creazione di asset riutilizzabili all'interno del mio documento clicco sul più e gli vado a dire grigia backstop.
Ora questo è un elemento che chiamiamo standardizzato.
Vale a dire che se adesso io creo una nuova tavola di mille e quattro e quaranta per mille ventiquattro e voglio di nuovo utilizzare quel tipo di griglia.
Mi basta andare qui sullo yacht grid, sui quattro puntini e posso andare a riprendere la griglia di prima.
Non solo se mi rendo conto che qui voglio variare qualcosa, mi basterà andare su questo elemento, cliccare su questi concina che mi fa evitare e se per esempio supponiamo che io voglia cancellare la cyber di sinistra voglio aumentare per esempio l'lte zza della mia top bar.
Quando lo faccio chiaramente va a cascata questa modifica su tutti gli altri elementi.
Altra cosa importante.
Se invece non mi serve una serie di colonne di tuo bar ma io avevo solo magari due righe che mi fanno margine all'interno delle out e per esempio io questa tecnica uso sempre con il layout mobile dove preferisco lavorare con i margini che non con le colonne.
Allora possiamo utilizzare un altro trucco che figura ci mette a disposizione? Noi prendiamo in questo caso prendiamo una misura standard di the iphone, prendiamo l'undici pro x e vado a creare sempre una nuova grigia.
Non gli dico gli dico griglia ma gli dico colonne ne dico una metto un po' più scuro, metto accento così si vede un po' di più non gli dico non gli dico niente nello stretch lo lascio così.
Dico solo il margine.
Quanto margine voglio di questo layout mobile.
Beh, di base, se veramente vogliamo essere, come dire rispettosi delle linee guida, per esempio di Apple, dovrei mettere sedici Ok.
E gli dico che il Butter zero guardate qua.
Che cosa succede? Che questo diventano degli elementi di come come se fossero delle dei righelli delle guide non più delle colonne.
E ovviamente, avendo messo lo stretch sono fissi ogni volta che io al largo e chiudo la mia tavola, mi raccomando questo tenetelo sempre a mente progettare senza griglia e fare un po' harakiri.
Quindi questa è la prima base da cui cominciare quando iniziamo a lavorare con un file FIG.
Ma
Piccolo preambolo
1) sono utente fin dal suo lancio
2) quest’anno ho speso oltre 3000 ore sulla piattaforma con oltre 13 corsi
3) Pago di tasca mia l’abbonamento e non ho conflitto d’interessi
Esperienza
Quando Learnn è stato lnaciato ho deciso di abbonarmi perchè ho visto nella piattaforma una possibilità di affrontare argomenti di cui sono carente.
Mi occupo di IT ma non sono così miope da non capire che il digital marketing va conosciuto passando per chi lo pratica.
Ho avuto e avrò anche abbonamenti? Si
Perchè allora dici di iscriversi a questo servizio? Perchè a prescindere di quale servizio specialistico a cui ti abbonerari questa è la base. La base per tutti gli argomenti del digital Marketing oggi e in futuro visto che ogni settinaman escono corsi nuovi e vengono aggiornati, ampliati, approfonditi gli esistenti con gli stessie con nuovi docenti.
I docenti poi sono professionisti e hanno reale esperienza rendendo estremamente pratico applicare i concetti.
Ho una iniziativa nel non-profit e per riuscire, nel tempo libero, a non fare danni e a crescere mi serviva portermi aggiornare e capire come funzionano alcune parti del digital marketing con Learnn ci riesco, mi diverto e sopratutto posso delegare perchè ho capito come funziona quell’ambito.
Avere questo allo stesso prezzo di un abbonamento di streaming permette di ampliare la conoscenza in un ambito in cui troppi parlano senza padronanza.
Prendiamo come società Learnn perchè volevamo avere più il controllo della situazione su ciò che succedeva nel nostro dietro le quinte. Ci sembrava che il nostro venditore non fosse sul pezzo, dormisse sugli allori e non studiasse nuove strategie.
Dopo 1 settimana abbiamo eliminato il nostro “venditore”, ne abbiamo trovati altri validi nel sito con i quali collaboriamo, abbiamo acquisito competenze e abbiamo grazie alla competenza, un sacco di consapevolezza in più, dato che adesso lavoriamo solo online.
Uno degli investimenti migliori mai fatti, insieme ai 50k risparmiati (che non era un problema spendere, volevamo “solo” il lavoro fatto bene)
Learnn è la soluzione olistica alla formazione di imprenditori e professionisti. Professionalmente, essendo un Growth & Innovation Advisor, utilizzo la piattaforma per ampliare la vision e per rimanere sul pezzo grazie a imprenditori e professionisti di altissimo livello presenti al suo interno, che offrono il loro contributo in maniera a dir poco magistrale.
L’abbonamento Learnn permette di avere a disposizione un tool di formazione continua, sempre aggiornato su temi e trend professionali.
Uso Learnn per tenermi costantemente aggiornato sul mondo del digital marketing e per approfondire tutti quelli aspetti dove non sono verificale (sono dei specialist) e lo reputo molto utile per un infarinatura.
Piattaforma estremamente professionale e professionalizzante. Corsi di qualità, docenti anche di più e le risorse a disposizione sono veramente tante. Chiunque può formarsi qui, da chi parte da zero a chi ha già esperienza. La flessibilità nel seguire le lezioni è totale: ci sono lezioni fast per chi ha due minuti al giorno e corsi più strutturati per quando si ha più tempo. C’è anche una parte community da non sottovalutare: grazie alla rete di possibili contatti che hanno creato, io ho trovato lavoro come Digital Marketer!
Ho scoperto Learnn tramite una sponsorizzata IG! Mi si è aperto un mondo! Trovo tutti i corsi molto utili ed interessanti, complimenti a Luca ed a tutto il team Learnn
Learnn e’ tutto ciò che un imprenditore ha bisogno per formarsi ed avere una base solida nel mondo del digital marketing ma anche in tanti altri aspetti.
E soprattutto avere le consulenze 1to1 a pagamento sono un valore aggiunto incredibile non e’ il solito corsetto pre-registrato che poi ti abbandona a te stesso qui puoi confrontarti e secondo me e’ una cosa unica.
Learnn mi ha permesso di approfondire temi che stavo studiando all’università e mi ha fatto scoprire altri corsi che mi sono serviti molto all’inizio del mio percorso da freelance.
Ad oggi ho l’abbonamento annuale perché trovo sempre qualcosa di nuovo e interessante da approfondire.
Consiglio Learnn perché copre una vasta gamma di argomenti e permette di passare da tematiche di Growth alla User Experience passando per il GDPR e la psicologia.
Davvero molto interessante e sempre in espansione.
Ultimamente sono state inserite anche nuove funzionalità che la rendono una piattaforma veramente completa e super utile.
Grazie alla community si possono scambiare opinioni con altre persone che stanno studiando e poi ci sono gli esperti che hanno messo a disposizione anche degli slot a prezzi ragionevoli.
Ultimo ma non meno importante il prezzo che è veramente affrontabile anche per gli studenti universitari.
Luca e tutta la sua squadra hanno davvero fatto un ottimo lavoro, grazie.
Scoprire Learnn è stato un salto di qualità per la mia formazione personale. Con l’autorizzazione dell’azienda, ascolto corsi anche mentre lavoro: con una cuffietta sempre in ascolto e uno dei tre schermi esclusivamente dedicato.
Ritengo che Learnn sia una piattaforma che abbia una mission reale e vera. Si percepisce semplicemente dal prezzo super accessibile e dalla qualità elevata di quasi tutti i corsi.
Avendo completato più di 80 ore posso dire veramente grazie a tutto il team di Learnn che mi ha svoltato la formazione e svoltato a livello pratico il mio lavoro!
Il titolo della recensione sarebbe il Netflix della formazione ma sarebbe troppo da clickbait, però è quello che penso. Buon lavoro!
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 400 corsi, condividi i tuoi risultati, fai networking con otre 170.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.