Lezione dal corso Web Design e Webflow
Ok, ora passiamo a come effettivamente prendere il nostro file FIG, ma iniziare a definire un attimo é come fare il passaggio tra una parte e l'altra.
Ci sono delle degli elementi che hanno in comune che Winslow, ma sono due strumenti molto diversi l'uno dall'altro, fake, ma è uno strumento che vi permette di costruire un'interfaccia solo ed esclusivamente trascinando elementi all'interno del vostro canvas.
Prendendo il vostro mouse prendo un quadrato n'e' mettendoci sopra degli elementi.
Purtroppo questo su White non lo puoi fare, o meglio lo puoi fare, ma rischi davvero di avere degli elementi inconsistenti e degli elementi difficili poi da controllare.
Quindi abbiamo però delle somiglianze superfluo.
C' è un elemento che si chiama Navigator, che poi vedremo in dettaglio e dall'altra parte noi suo Fig.
Ma abbiamo la parte di livelli, quindi come vedete il Navigator va a indicare quello che sono i livelli all'interno di Wexler in questo caso sono semplicemente una sezione sotto l'altra a destra quello che io è più o meno la stessa cosa, nominato comunque come quello che troviamo a sinistra, ovvero body alla base e poi sotto abbiamo tutti diversi componenti, ma in giro una punto zero frase Tex, title filter, tex, title features, ex title, eccetera, eccetera eccetera.
Quindi diciamo che anche se alcuni nomi non sono gli stessi, ci sono sempre più o meno gli stessi elementi.
Da una parte all'altra in questo modo io sono sicuro che la traslazione tra film sia molto più simili di quello che potrebbe essere normalmente a destra invece vediamo quello che il pannello di definizione, delle, delle attività, delle degli stili che possiamo dare, delle proprietà che possiamo dare ai diversi elementi.
Quindi a sinistra quello di Flo ti fa vedere quattro tab che poi andremo a vedere un po' in dettaglio e all'interno.
Abbiamo una serie di elementi che ci permettono di avere a che fare con il layout o con la tipografia o con il colore del nostro elemento.
A destra abbiamo invece la tabella di fig.
Ma é come sempre sopra abbiamo design expect.
Solitamente noi progettiamo su design e all'interno una serie di cose che posso decidere, come ad esempio il colore, lo stroke, gli elementi però il bordo, la selezione del colore degli effetti posso esportare l'elemento fuori, eccetera eccetera.
Quindi ci sono delle dinamiche che si portano indietro questi due software a livello macro.
Perlomeno.
Infatti questo ci può venire molto comodo quando iniziano a progettare da una parte per passare all'altra.
Andiamo quindi a raccontare e a vedere com'è il design daxam all'interno del più abbiamo già visto prima un attimo quello che succede all'interno.
Andiamo a vederlo più in dettaglio attraverso alcune definizioni specifiche di alcune sezioni, quindi qui e definito un perché.
Ma il perché chiaramente non è solamente così, ma ci sarà un perché molto più grande.
Quindi in questo caso il componente rimane sempre lo stesso, diventa semplicemente più grande.
E come vedete questo testo non è definito da nessuna parte.
Per quale motivo? Perché un testo che utilizzo poco, molto, molto poco non lo riutilizzo all'interno di altre parti, forse in uno e di conseguenza non era un test che mi volevo mettere all'interno di uno stile.
Quindi avrà sia uno stile su pablo, ma sarà esclusivamente uno stile che darò a quell'unico componente.
Quindi tornando invece il a vedere quello che succede dentro workflow qui all'interno possiamo vedere che abbiamo tutta la nostra parte mista dall'altra parte che è molto simile.
Quindi io come su un blog o la stessa identica pagina, chiaramente con le differenze sicuramente da una parte all'altra, quindi a differenza di corpi che avviene solitamente quando fai dei test in questo caso che cosa ho fatto? Ho fatto prima di testa con delle persone con questo primo prototipo.
Da qui ho ricevuto dei feedback a livello di copyright ting a livello di interazioni a livello di una serie di elementi e quello che fate sotto, poi sistemare all'interno direttamente dentro l'occhio.
In questo modo i due elementi si parlano come vedete ho dovuto preparare anche una parte che effettivamente riprenda quello che c'è sotto.
Quindi la prima cosa da capire qui è che tutto quello che noi abbiamo dentro workflow scusate entro fake ma deve essere dentro il flop e viceversa.
Quindi ci deve essere un uno scambio tra questi due software che non si parlano purtroppo non hanno un modo per parlarsi, ma a livello visivo devono in qualche modo potersi vedere nella stessa maniera.
Quindi andando più in dettaglio possiamo vedere anche il la hiro che è molto simile a quella sud stop se non praticamente identica.
Poi ci sono chiaramente dei delle definizioni leggermente diverse, come ad esempio la tipografia che sembra più grande dentro al sex stop che vediamo su Fig.
Ma per quale motivo? Perché questa lavora su un vecchio porcile, tre sessantasei che è più piccola di quella che stiamo vedendo qua che invece di milleseicento quarantaquattro perché sto lavorando con un computer molto più grande.
Quindi come vedete ci sono delle differenze tra una e l'altra qua la cosa che è uguale sono sicuramente le spaziature che ci sono tra una cosa e l'altra.
Se io vado ad aprirlo non sarà esattamente quello, però sono degli elementi che comunque un minimo si parlano.
Qui posso andare a vedere che questo heading a dodici pixel dodici pixel due e due ok, se io poi lo ingrandisco si gradisce anche l'altro, quindi passando a questa parte non sarà esattamente uguale infatti su fig.
Ma è otto, otto e tre pixel.
Questo perché ci sono delle diverse è modi di visualizzare il testo proprio in modo in cui si rende liza, nonostante poi sia molto simile l'uno con l'altro se noi andiamo a vedere il nostro sito inter pubblicato e le differenze tra una parte e l'altra ci sono sicuramente, ma dovrebbero essere minime.
Come vedete la tipografia é simile, ma non è uguale identica.
Ci sono delle differenze okay, sono proprio minime, non si vedono molto, ma sicuramente non possiamo dire che se tu crei qualcosa identico a dentro, filma, pubblicherai alla stessa identica maniera entro proprio.
Inoltre, se vediamo anche la parte destra e sinistra possiamo vedere che gli elementi non sono sempre esattamente gli stessi.
Quindi in questo caso vediamo che la se si prende più spazio rispetto a quella che noi abbiamo dentro Wexler, così come anche la parte sotto del light che è più presente all'interno di quella sinistra rispetto a quella destra.
Questo ricordiamo dunque è il film, ma é questo invece di più.
Ma per me alla fine, quando creiamo queste esperienze e sono comunque create all'interno di uno strumento come quello del no coding del di Flo, non è importante fare le cose esattamente esattamente uguali.
L'importante è riuscire a capire il mondo intero e poter avere la libertà di essere noi a costruire questo elemento.
Non aspettare invece uno sviluppatore che invece debba comunque prendere il nostro design ricopiare all'interno col codice ci permette di avere molte più libertà noi come designer e magari iniziare sicuramente a definire quel elemento su un film e poi devo passare al dettaglio vedete qua otto pixel auto pixel sono diversi da diciotto, diciotto, dodici dodici potrei mettere otto e otto di pixel pero' mi preferisco quello che avevamo messo di dodici sono sempre le decisioni che uno può decidere di prendere per avere lo stesso identico componente da una parte o dall'altra.
Ma alla fine è una cosa importante per me è che il mood generale è molto rispettato da una parte dall'altra.
Se poi vogliamo possiamo fare una cosa che pixel perfect ma che non consiglio o che comunque non credo che sia necessario.
Quindi ricapitolando prima cosa quando pensiamo è, dobbiamo prima costruire suo fig.
Ma entrambe le versioni con le diverse varianti, anche a livello di tipografia e di colore.
Creando questa abbiamo una struttura almeno base di partenza che ci può permettere per dire Ok, possiamo passare dentro all'oblò iniziare a disegnare questi primi elementi, quindi se noi iniziamo a lavorare prima su Mobile sud stop non cambia tanto qua all'interno.
Sappiate però che quando passerete Winslow non potete partire subito la mobile.
Potete anche farlo, ma avrà molto di più.
Sarà molto più rapidamente fare prima quello l'ex top e poi passare agli altri media qui.
Quindi iniziare da qui e poi andare a scalare sul mobile.
Perciò, ricapitolando film potete decidere utilizzare di fare prima il mobile ed ex top come volete voi m ma importante farli entrambi.
La seconda cosa, una volta che avete fatto entrambi, è passare dentro l'oblò per poter riuscire a riportare tutti gli stili che avete fatto mobile ed ex top all'interno di questo di questo campus.
In questo modo possiamo avere due elementi, quindi figl o che si parlano e che vengono costantemente aggiornati per riuscire ad avere un'esperienza che effettivamente sia coerente con quella che ho disegnato e progettato.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 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 300 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.
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 contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
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.