Andiamo adesso a mettere in pratica tutto quello che abbiamo imparato per realizzare un vero e proprio progetto web.

Quindi andremo a creare una pagina.

Sarà la pagina di un portfolio di un portfolio di un fotografo dove avremo delle informazioni.

Avremmo delle immagini che mostreremo e sarà un design a single page.

Quindi una singola pagina scroll abile verticalmente.

La prima cosa che possiamo fare è andare a vedere il design è stato fornito un design da da chi, appunto, si è occupato di studiare la grafica e l'aspetto visivo.

E andiamo adesso a vedere tramite tramite Fig.

Ma che sarebbe lo strumento che utilizzano i designer per però Toti pare per disegnare quello che il contenuto di una pagina web.

Ce ne sono molti altri strumenti, ma Phil ma è uno di quelli più comuni.

Esiste anche Sketch a Dobbs di Andiamo a vedere adesso all'interno di film.

Ma il design che è stato realizzato Apro l'applicazione, eh? Clicco su la landing page.

Andiamo a vederlo insieme al disco.

Un po' l'immagine.

Ok, qui abbiamo una prima overview di tutto quello che è ebrea, la superficie del design.

Io andrei a zoomare diretto alla design, quello completo.

Poi vedremo le altre singole parti.

Intanto comincerei ad analizzare un po' il dettaglio questa sarà la pagina che andremo a realizzare, costituita da dei blocchi orizzontali che si succedono tra loro verticalmente e ogni blocco ha un suo scopo.

È un suo contenuto ben preciso.

Andremo a realizzare ogni singolo blocco man mano che procediamo è un primo esercizio che possiamo provare a fare è quello di cominciare a ragionare su sui componenti del design.

Quindi andare a scomporre, aspettare quelli che saranno poi i micro componenti che andremo andremo a realizzare in maniera isolata per poi assemblarli assieme e comporre l'intera pagina.

Io ho gia' esportato a ce l'ho.

Qui sul mio testo ho gia' esportato un un semplice jpeg della della pagina dov'é.

Adesso andremo a vedere, magari andiamo a fare un pò questo esercizio di di individuazione di splitting un po' dei componenti dicevamo la prima cosa che salta sono le sezioni che si alternano verticalmente.

Abbiamo sicuramente Lehder.

Abbiamo poi un grande blocco principale che è quello che in gergo viene chiamato tiro, che è quello che accoglie i visitatori che atterrano sulla pagina e contiene, diciamo, le informazioni principali, quelle che devono risaltare poi c'è un altro piccolo blocco di navigazione con i link diretti ai singoli lavori del portfolio.

A seguire si succedono i vari hit del portfolio, quindi abbiamo ai singoli elementi con il loro titolo, il loro tag, le loro info e ovviamente le fotografie a corredo.

Perché si tratta di un portfolio di un fotografo.

Abbiamo diversi elementi, poi sono diversi tra di loro.

Gli svilupperemo sia strutturalmente che visivamente e poi c' è un ultimo blocco.

A seguire c'è la bout me.

Quindi blocco contatti con un po' di info, una forma e per chiudere l'ultima l'ultima section l'ultima sezione finale che è quella del footer con un piccolo disclaimer quindi questo sarà il layout nella sua interezza, facendo però questo esercizio di scomposizione è una cosa che mi piace fare perché è importante, ma già dal design è già dal dall'inizio.

Quando un designer si approccia un progetto, cercare di razionalizzare quella che è la struttura di un appunto, di un progetto per cercare delle regole comuni per cercare di assemblare quelli che sono i blocchi base che poi useremo in ottica di' di realizzazione dell' intero design.

In questo modo abbiamo una certa consistenza anche nel design che è anche l'obiettivo principale, no? Cercare di dare una una consistenza, una coerenza a quella che è la nostra.

Quindi gli user interface è che l'utente poi riconoscerà, per cui proviamo a fare un po' il problema ad evidenziare un po' qualche elemento io prendo qua lo strumento di evidenziazione.

Potrei cominciare a dire che abbiamo sicuramente un componente che all'interno della section del the ledger abbiamo il luogo, abbiamo poi il componente di navigazione con i suoi hit okay, ora mi sto divertendo a evidenziarlo un po' ma dopo li vedremo poi più in dettaglio all'interno della section hiro a sua volta individuiamo dei sotto componenti? No, provo a cambiare colore.

Prendo faccio dei blocchi, magari adesso gialli.

Ah, ok, beh, dicevamo, ci sono dei sotto componenti all'interno della del liro, come per esempio il titolo abbiamo un sottotitolo e anche il il link rapido che ci rimanda al al discover many worlds.

Ok, vado veloce, ne vediamo altri.

Abbiamo per esempio nella nel blocco della navigazione dei lavori degli degli ai team della sezione lavori abbiamo un pulsante.

Ok, quindi abbiamo un elemento che si ripete, che è rappresentato appunto da questo pulsante che utilizzeremo più volte nella tua vedremo dopo, anche nella forma riusciamo a identificare se all'interno del the light em all'interno dell'elemento dell'elemento lavoro, quindi l'elemento di portfolio individuiamo per esempio i tag che caratterizzano quel lavoro.

A sua volta ci sarà anche un titolo assegnato a quella a quell' elemento.

Abbiamo anche una sezione con le informazioni principali.

È tra l'altro, una sezione che si struttura in questo modo.

Abbiamo due colonne con l'hubble e il contenuto é che si ripetono quindi infinite volte.

Quindi c' è anche la possibilità di replicare all'interno dello stesso hit e poi andando avanti.

Insomma, abbiamo la carrellata di fotografie di immagini.

Vado veloce, vado, vado direttamente al blocco Abbot mi dove anche qui riusciamo a identificare in questa section una parte di contenuto, anche qui rappresentata da un titolo e un un paragrafo.

E poi per chiudere abbiamo anche la forma in cui al suo interno però riusciremo a identificare anche i singoli elementi della forma.

Quindi anche anche il campo.

Adesso magari cambio colore, così lo distinguiamo meglio.

Prendo ma facciamo un verde, ok, dicevamo.

Il singolo campo che rappresenta la forma a sua volta un componente, un micro componente che realizzeremo a parte, che poi useremo più volte per realizzare gli interi campi, gli altri campi della della forma.

Quindi, in definitiva, abbiamo visto che all'interno di un layout.

Quello che dobbiamo riuscire a identificare sono degli elementi ricorrenti.

L'idea è quella di partire con lo sviluppo di gli elementi base del design, in modo da poter poi riutilizzarli più volte nello sviluppo delle varie sections action.

Avrà le sue peculiarità, ma le andremo li' a sviluppare man mano che procediamo, quindi direi iniziamo.