Ok, abbiamo parlato.

Già, abbiamo accennato in diverse elezioni il concetto di pattern.

Ecco quello che dobbiamo imparare intanto a conoscerli e a capire come possono essere utilizzati.

Questo diciamo un mondo veramente molto, molto vasto e quello che vi consiglio è assolutamente di imparare da quelli che stanno diciamo studiando parecchio prima di voi, vi consiglio di visitare questo sito, il Nilsen Norman Group, ma nello specifico la pagina dei design Pattern guidelines.

Che cosa trovate li trovate tutta la serie di pattern che possono essere utilizzati per progettare un'interfaccia.

Dovete progettare dei check box dei radio Botton.

Qui trovate il link per leggere L'articolo che spiega quando utilizzarli, come utilizzarli tutte le best practice Questo vale per ogni e Lem dovete fare un form wizard.

Vedete che qui trovate un articolo specifico per ogni pattern che dovete andare a utilizzare.

Per esempio come devono essere fatte le modali e le finestre di dialogo? Come possono essere diciamo articolate cliccate Ci sarà tutto l'articolo che vi spiegherà con tutta una serie di norme e best practice da seguire.

Come vedete, la lista è veramente molto, molto, molto lunga e c' è vera di tutto quello che dovete imparare a fare intanto a riconoscerlo.

E per farlo, secondo me conviene ovviamente prima studiare moltissimo, proprio tutta la nomenklatura che trovate in questa pagina.

E poi di volta in volta, ogni volta che vi si pone un problema, qualche diciamo è un problema di design da risolvere.

Vi conviene andare qui e cercare quali possono essere i tips, i suggerimenti di chi ha dettato e detta le linee guida in questo campo, per esempio andando sempre qui a scorrere nella pagina.

Ci sono tantissime linee guida su come si costruisce un mega menu.

I mega menu sono per esempio quei menu dove non c' è una navigazione semplice, ma a cascata si aprono tantissime, tantissime sotto voci classici esempi di mega menu li troviamo quasi sempre negli e-commerce, perché abbiamo bisogno di una navigazione molto complessa, molto articolata contattate sotto categorie.

Per esempio qui in questo articolo ci fa vedere quali possono essere le Becks Practice per progettare un buon mega menu e via scorrendo ce l'abbiamo appunto.

Se tutti elementi di navigazione sulla parte di ricerca, sulla parte di sua gestione della ricerca.

Come vedete qui le informazioni da raccogliere sono veramente tantissime.

Ci dice soprattutto anche quello che non va fatto e quando non va fatto.

Quindi mi raccomando, quando ho iniziato a progettare elementi che sapete che sono di utilizzo comune, appunto, non stiamo parlando di di un'immagine con un titolo, ma chiaramente stiamo parlando di elementi che ci aiutano a interagire.

Possono essere appunto la ricerca, la navigazione, i form ice box radio battono tutti questi elementi qui andate a studiare di volta in volta, come vengono utilizzati e come appunto non devono essere utilizzati.

Questo quanto riguarda per i partner.

A livello generale, poi, dobbiamo invece conoscere proprio i pattern a livello responsive.

Qui invece c' è un'altra guida che vi invito a consultare.

È quella di Beth Frost che il creatore della to meet design dove trovate questa pagina che si chiama responsive pattern? Qui sono i partner senso più generale di come gli oggetti scusate di come gli oggetti vengono responsabilizzati all'interno di una navigazione trasversale.

Se per esempio vedete qui c' è tutta una parte dedicata a come il layout possono responsabilizzarsi.

Per esempio, vedete questo esempio layout shifter Che cosa succede ora? Ovviamente è rappresentato in maniera molto grezza, cioè solo testo e titoli, ma per farvi capire cosa succede quando il layout va a stringersi in questo si chiama in questo caso si chiama layout shifter, perché immagina che c' è un blocco a destra che esula, diciamo il contenuto a sinistra.

Questo blocco quando il contenuto si va a restringere shift appunto sotto le tre colonne principali.

Infatti, se adesso vado a scorrere questa parte è andata sotto.

Questo per esempio è tipico dei comportamenti dai blog.

La sai Barney blog quasi sempre va a slittare sotto al contenuto e questo è un esempio di questo pattern qui.

Ma per esempio abbiamo altri esempi di responsible pattern, per esempio anche nella nella navigazione possiamo per esempio vedere guardate qui il footer l'ancora del footer come viene qui rappresentata qui abbiamo un menu in alto e qui tutta una serie di link in basso del ancora del footer quando vado a scorrere che cosa sta succedendo? Succede che questo menu mi viene riportato sia come hamburger menu qua in alto, ma diventa anche una serie di ancore di navigazione in basso nella nella parte finale del nostro sito.

Anche questo è un pattern da conoscere.

Vedete questi elementi non sono assolutamente presenti nella versione dell'ex top nella parte bassa, ma quando vado a stringere, invece li ritrovo in basso.

Ovviamente non ci mettiamo a guardare tutti gli elementi che si trovano all'interno di questa pagina, ma è super interessante perché ci aiutano per esempio, a capire quando ci troviamo in difficoltà.

Come abbiamo detto prima, ad esempio le tabelle sono uno degli elementi da responsabilizzare più complicati, ma quando non non sappiamo come trasporre un oggetto, la navigazione, il footer una galleria da ex a mobile, possiamo ricorrere a questo sito responsivo pattern dentro diciamo la sezione di bud post punto guidavo punto io e saremo in grado di scoprire come potremmo diciamo approcciare in modo responsive a diciamo elementi che sono più difficili da collocare.