Articoli › Impaginazione e creazione loghi

Creare un'interfaccia (parte terza)

Dopo aver realizzato con il programma di grafica preferito il nostro layout, ora dobbiamo trasformarlo in html.
Come fare?
Imparare a "tagliare" bene un layout per ottenere un'interfaccia veloce da caricare e semplice da modificare è forse il passo meno creativo di tutto il processo di realizzazione, ma non per questo quello meno importante o che richieda meno attenzione e tecnica.

Cosa significa tagliare un layout.
Per fare in modo che il nostro layout non sia un'unica, enorme ed ingestibile immagine, dobbiamo riprodurre l'interfaccia che abbiamo ideato tramite le regole e le strutture del codice html.
A questo scopo dobbiamo tagliare le immagini dell'interfaccia che abbiamo creato.

Suggerimenti e consigli.
La prima cosa da fare è studiare bene il layout, per capire come ottimizzare il taglio sia delle immagini che dovranno ripetersi, sia di quelle che non dovranno farlo.
Una buona ottimizzazione si ottiene cercando di creare il minor numero di immagini più leggere possibili.

Ricordate sempre che:
Un semplice esempio pratico:
Ho creato un piccolo e semplice layout che potrà servirci da esempio per capire meglio i passi da fare.

layout intero

Si tratta di una classica interfaccia con il menù a sinistra. Presenta però, lungo tutta la struttura, una sfumatura che la rende un po' più complessa da tagliare.
Ho risolto il problema ritagliandone quattro diversi dettagli (evidenziati dalle aree colorate nella immagine seguente).

layout tagli

Utilizzando solo questi quattro spezzoni posso ricostruire col codice l'intera struttura.
Nello specifico, le immagini evidenziate in giallo e in rosso dovranno essere ripetute per fare da sfondo rispettivamente alla testata e alla colonna dei menù, mentre le immagini evidenziate in verde e in arancio serviranno rispettivamente a collegare e a chiudere il layout in fondo.

Sia per il logo che per il bullet (il quadratino a fianco dei link) verranno create due immagini a parte che saranno poi posizionate sopra la struttura nel punto stabilito tramite html e CSS.
In questo layout i link andranno realizzati in font "Arial", per cui (essendo quest'ultimo un font di sistema, vedi articolo sui font) è possibile crearli direttamente tramite html, evitando così di appesantire ulteriormente il tutto con altre immagini.

Naturalmente ricordate che non c'è mai un solo modo per "tagliare" un layout, ed anche che si possono scegliere soluzioni differenti a seconda delle esigenze specifiche del sito che si sta costruendo. In tutti i casi provate più soluzioni, per poi scegliere la migliore, magari aiutandovi in prima istanza col metodo dell'evidenziazione dei tagli mostrato in questo esempio.
Valid html - Note sul copyright - Segnala errori - Cookie policy
🕑