Sto cercando risorse sulla composizione delle pagine Web.
Mi piacerebbe conoscere i pro e i contro di diversi layout di pagina e tecniche per spostare l'occhio intorno a una pagina.
Sto cercando risorse sulla composizione delle pagine Web.
Mi piacerebbe conoscere i pro e i contro di diversi layout di pagina e tecniche per spostare l'occhio intorno a una pagina.
Risposte:
La domanda può avere una risposta abbastanza ampia che richiede giorni e giorni di studio, ma proverò qualcosa di breve.
Devi progettare il tuo layout seguendo una griglia invisibile, come nella carta così sul web che ti aiuterà a mantenere tutto sul giusto allineamento e ordine. Le difficoltà sono che sul web le dimensioni e le proporzioni sono modificabili e il contenuto è dinamico su molti aspetti (impostazione delle preferenze, calibrazione del monitor, illuminazione, dimensioni del monitor, browser, sistema operativo, ecc ...).
Per questo motivo non consideriamo la proporzione tra le cose, ma concentriamoci su una configurazione classica. Un layout classico è l'intestazione in alto, il piè di pagina in basso e 3 colonne al centro (con la sinistra e la destra più piccole di un centro). Potrebbe essere un sito Web su due o più colonne, tutto dipende da quante informazioni hai e da quanto vuoi visualizzare o da quanta "aria" (ovvero spazio bianco) vuoi mettere tra le informazioni che hai .
Nota: tenere presente che esistono alcune limitazioni tecniche CSS come l'allineamento delle colonne (che si trovano sulla stessa riga orizzontale) alla stessa altezza quando hanno contenuti diversi che riempiono la colonna. Le persone stanno cercando di risolvere con la soluzione creativa fino a quando il browser non aggiornerà il loro rendering CSS secondo lo standard più recente
Esistono 4 possibili layout:
1) Layout fisso: definisci ogni div in px che rientri in una dimensione specifica che sarà visibile all'interno di un browser (ad esempio all'interno: 800x600)
pro: il design è stabile con: potresti avere molto spazio bianco a seconda dello schermo dell'utente
Di questa soluzione puoi decidere di sinistra (sapendo che un grande spazio sarà sulla tua destra e potresti giocare con uno sfondo grafico), o allineare il centro (dividendo lo spazio bianco a sinistra e a destra, riducendo la sua quantità rispetto all'allineamento a sinistra).
2) Layout fluido: la pagina si adatterà alle dimensioni dello schermo, spostando e adattando il contenuto
pro: riempirà sempre la pagina senza lasciare spazi vuoti incontrollati con: perderai il controllo sulle proporzioni e sulla griglia in cui posizioni il tuo contenuto (esempio: un paragrafo su più righe che diventano una frase lunga a riga singola con risoluzioni dello schermo più alte)
Esempio di tecnica o altro più complesso
3) Layout originale: si basano sulla violazione delle regole di layout e griglie. Non usano il classico layout di colonna e si basano principalmente su effetti di progettazione grafica, come la visualizzazione di informazioni su tutto il sito Web, e utilizzano un posizionamento più assoluto di qualsiasi altra soluzione. Buono per divertimento artistico sul web o portfolio pazzo e niente di più (non sono contrario, ma richiedono conoscenza delle regole di comunicazione del web design, tecnica e buon impegno creativo).
Non trovo un esempio al momento, scusa.
pro: ottimo aspetto estetico e originale: non puoi utilizzarlo per siti Web commerciali, blog o per qualsiasi cosa con una grande quantità di informazioni.
4) Layout fisso dinamico: è ciò che uso oggi per i miei siti Web personali e per i siti Web dei clienti che hanno tempo da dedicare a rendere un sito Web flessibile ma sotto controllo. Non è altro che un layout fisso, ma con un javascript che controlla costantemente le dimensioni dello schermo (in caso di ridimensionamento o per determinare quale dimensione è) e passa i CSS appropriati per quella dimensione. Quindi, indipendentemente dalle dimensioni dello schermo, avrai sempre un buon controllo. Ad esempio, se ho un layout a 3 colonne, se ridimensiono il browser posso decidere che la terza colonna scomparirà e andrà in fondo al contenuto, prima del piè di pagina.
pro: controllo completo + flessibilità con: un grande sforzo nella progettazione e nel debug del tempo da dedicare a verificare che tutto sia ok, pensando anche in anticipo perché aggiungerai nuovi contenuti più tardi in futuro e tutto dovrà funzionare bene.
Articolo in cui ho preso ispirazione (oggi jquery fa un ottimo lavoro con resize (), 3 anni fa avevo una lunga sceneggiatura per questo :))
Un'ultima nota Oggi c'è una nuova tendenza per i web designer grafici (persone che sono più graphic designer che programmatori), che usando un layout fisso stanno progettando ogni singola pagina del loro blog come fanno le riviste con i loro articoli. Creativo e progettando ogni articolo con il suo stile.
Un esponente è Jason Santa Maria
Altri articoli:
Ci sono altri articoli là fuori. Cerca "layout CSS". Oppure segui luoghi in cui si parla di usabilità e design come Signal Vs Noise
Tutto quello che c'è da sapere sulla composizione è l'esperienza e lo studio o test di usabilità (prova ed errore). Metti qualcuno sul tuo sito Web e guarda come reagiscono alla tua progettazione. O un dispositivo di localizzazione Eye :)
Sono autodidatta, quindi non posso suggerire libri sulla composizione, ma un buon libro sul layout della griglia può aiutarti molto.
Se desideri un buon sistema per la progettazione di progetti web, dai un'occhiata al sistema a griglia 960 . È quello che uso per la maggior parte dei miei layout. Penso che ci sia anche una buona selezione di modelli da utilizzare in diversi pacchetti, come Photoshop e InDesign, nonché alcuni stampabili per tutte le esigenze di scarabocchio del tuo sito web.
Anche un buon esempio di diversi layout può essere visto qui: http://designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples