7 giugno 2009

44 esempi di layout a larghezza fissa da non perdere

scritto daMauro Accornero

Uno dei primi passi nella realizzazione di un buon sito web è la progettazione del layout. Normalmente questa è influenzata dalla quantità di contenuti di un sito, dal design della pagina e dall’usabilità dei vari elementi presenti.

Una volta definiti questi aspetti si può partire definendo una griglia per il nostro layout. Questo permettà di mantenere ordine e conformità grafica nelle varie pagine.

Per realizzare una griglia è necessario definire almeno tre dimensioni:

-Larghezza della pagina

-Numero di colonne

-Spaziatura tra i vari elementi

Larghezza della pagina

Per questa dimensione è consigliabile utilizzare una misura uguale o inferiore ai 960px che rappresenta l’area visibile dall’utente ad una risoluzione di 1024×768px con i diversi browser. La misura in realtà è di 968px ma viene arrotondata per comodità. Essendo la risoluzione minima più usata dagli utenti di 1024×768px garantisce un ottima compatibilità con i monitor degli utenti.

Numero di colonne

Il numero di colonne deve essere definito in base alla quantità e alla varietà di contenuti del sito. E’ utile ricordare che un minor numero di colonne lascerà più spazio per immagini e grafiche mentre un numero eccessivo renderà il contenuto difficilmente leggibile. Bisogna sempre valutare a priori quale soluzione sia opportuna per un determinato contesto.

Spaziatura tra gli elementi

In qualunque contesto grafico è utile lasciare un minimo di spazio tra i contenuti per migliorare la leggibilità e soprattutto definire aree differenti con diversi elementi. Facendo attenzione che lo spazio sia proporzionale ai contenuti e non faccia prevalere il “vuoto” che porterebbe solo disturbo e confusione nella pagina. E’ utile ricordare che una volta definita una spaziatura è opportuno mantenerla su tutto il sito per garantire una migliore leggibilità all’utente.

Viste queste premesse ho creato 44 esempi di layout a larghezza fissa da 960px con differente numero di colonne e differenti spaziature. Gli esempi sono visibili su questa pagina.

Tag: , , ,

Nessun Commento
11 maggio 2009

40 esempi di Infografica da non perdere

scritto daMauro Accornero

Six Revision ha proposto recentemente 40 infografiche utili e creative come fonte d’ispirazione e spunto per ogni designer. A chi non fosse chiaro il legame tra infografica e web design suggerisco la definizione da wikipedia per comprenderne meglio la stretta parentela:

“L’infografica si occupa principalmente dell’organizzazione e della rappresentazione di dati e informazioni in forma grafica”

Wikipedia

L’infografica si occupa principalmente della parte funzionale della grafica dove il ruolo estetico è vincolato alla leggibilita e fruibilità dell’informazione da parte del lettore, un po’ come nei siti web dove usabilità e buon senso regolano posizioni, dimensioni, distanze e contrasti.

Tag: , ,

Nessun Commento