Risorse tecnologiche e Customizzazioni

Questa guida è riferita alla progettazione di layout grafici che possono essere sviluppati anche sulla base di alcuni CMS come WordPress.

Ti chiediamo, pertanto, di considerare l’impiego di eventuali framework da integrare o di moduli che magari richiedono uno sviluppo ad-hoc.

Se hai la necessità di usare elementi che richiedono uno sviluppo custom, sarà necessario indicare in modo dettagliato il loro funzionamento in modo tale da procedere correttamente con lo sviluppo.

 

Sistema di Griglia

Il layout dovrà essere progettato su una griglia con un massimo di 6 colonne.

È possibile tuttavia suddividere ulteriormente ciascuna di queste colonne sempre fino a un massimo di 6 colonne. Non è possibile fare ulteriori nidificazioni oltre alla prima.

La stessa suddivisione in colonne è possibile farla per i vari breakpoint che sono 3:

1. Monitor grande (Desktop – Laptop)
2. Medio (Tablet)
3. Piccolo (Smartphone)

Sarà necessario impostare una larghezza massima del “main content” che sia la stessa per le risoluzioni che vanno dagli schermi Desktop grandi (es. ≥ 1920px) fino a monitor Laptop più piccoli (es. ≥ 1280px).

È possibile progettare anche delle parti o interi layout “fluidi”: dovrai tenere in considerazione le dimensioni dei vari dispositivi su cui verrà poi visualizzato il sito dopo il suo sviluppo.

 

Palette Colori

l file XD fornito contiene già un set di 8 colori.

Non cancellarli. 8 colori sono più che sufficienti per realizzare un layout grafico.

Tra i vari colori, uno di questi ha una caratteristica specifica (Primary Color): questo sarà il colore primario che verrà utilizzato nella maggior parte degli elementi che progetterai.

Nel caso in cui non dovessero servirti tutti quanti i colori, non importa. Lasciali senza modificarli, non verranno presi in considerazione durante lo sviluppo.

Per la gestione delle sfumature, puoi fare una combinazione dei colori che hai impostato. I tipi di gradienti possono essere con andamento:

• lineare
• radiale

Se dovessi avere la necessità di usare gradienti molto complessi che usano dalle 3 colorazioni in su e che hanno dei colori non inclusi nella palette degli 8 colori, non ci sono problemi. Semplicemente dovrai indicarcelo poiché si tratta di una caratteristica molto specifica.

 

Tipografia

Nel file XD da scaricare troverai anche un set di tipografie già definito.

Potrai impostare ciascuno di essi per quanto riguarda:

• tipo di font
• dimensioni
• interlinea
• letter spacing
• colore

Queste sono le regole “globali” che dovranno essere usate nel tuo layout grafico. Non cancellarle e non aggiungerne di ulteriori.

Potrebbero esserci dei casi in cui necessiti di usare un tipo di intestazione o paragrafo che abbia delle caratteristiche diverse rispetto alle impostazioni globali: puoi impostare dei testi in punti particolari del layout semplicemente all’interno delle board.

Importante: dovrai tenere in considerazione è il font che utilizzerai. È preferibile utilizzare dei font web.

Se hai la necessità di usare font Adobe o altri font che non sono progettati per il web, nessun problema. Sarà necessario indicarcelo e fornirci i file del font da utilizzare.

 

Icone

Il set di icone preferibile è quello di Font Awesome (versione free), ma puoi creare anche il tuo set di icone o usarne un altro a tuo piacere.

Il tipo di icone che userai dovrà essere un framework a scelta tra:

• Font Awesome
• IcoMoon

In alternativa puoi disegnarle tu stesso, ma in questo caso sarà necessario che l’insieme delle singole parti che fanno parte di una singola icona, sia “raggruppata” .

È possibile usare sia icone in formato SVG, che immagini raster (PNG, JPG).

Per tutti i formati di icone che non sono della versione gratuita di Font Awesome, sarà necessario indicarcelo.

 

Immagini

Per quanto riguarda le immagini, puoi usare quelle che più preferisci prendendole anche da banche dati.

Nel caso in cui siano immagini che richiedono l’acquisto di licenza, dovrai inserirle nel layout senza i watermark. Se non hai la certezza che siano immagini definitive oppure non spetta a te l’acquisto della licenza, ti chiediao di indicarcelo.

Per quanto riguarda immagini composite, ovvero immagini che sono composte da altre immagini, dovrai “raggrupparle” affinché possano essere esportate in maniera più agevole.

Eventuali stili delle immagini come:

• overlay
• stondature degli angoli
• clipping-mask
• metodi di fusione
• altri

è opportuno che siano applicati tramite fogli di stile CSS da parte degli sviluppatori. Ti chiediamo di tenerlo in considerazione quando ordinerai i vari livelli degli elementi che progetterai in XD.

 

Come fornire il materiale

Il materiale dovrà essere inviato in una cartella .zip, a scelta, tramite:

• email
• WeTransfer
• repository

Il file zip dovrà contenere il file XD con le varie caratteristiche spiegate.

Nel caso utilizzassi font “custom” (non Google font) e/o icone che non siano della versione gratuita di Font Awesome, dovranno essere inserite all’interno di cartelle dedicate.

Eventuali note e indicazioni particolari relative al layout e ai suoi elementi, dovranno essere riportate nel corpo dell’email.