Un layout di un sito Web è altrettanto vitale delle informazioni presenti sul sito Web. Se desideri un sito web di facile utilizzo, scegli un layout che faciliti la navigazione. Probabilmente hai scoperto che ci sono alcuni layout facili da capire e veloci da usare, mentre altri richiedono molto tempo e difficilmente valgono lo sforzo necessario per usarli.
I siti Web di facile utilizzo sono generalmente più visitati e restituiti. E i layout che sono più semplici da usare in genere sono più facili da creare.
Il sito ha una varietà di sfaccettature per il suo layout ... Inizialmente, siamo interessati al design. La tua pagina web ha tutte le cose che volevi? Sai com';è impostato e dove si trova tutto ciò che ti serve? Ricorda, puoi utilizzare diversi layout per ogni singola pagina. Essere parte dello stesso sito Web non significa necessariamente avere lo stesso aspetto e aspetto. L';uniformità aiuta, ma non è necessaria, e le persone usano una vasta gamma di layout e modelli sui loro siti web.
Come creare un layout del sito Web con Photoshop da Wireframe [Parte 2]
Un sito web è simile a un libro di testo, con ogni pagina corrispondente a un capitolo unico come un tema o un evento. La scelta dell';uniformità o la scelta di una varietà di modelli e layout dipende molto da cosa stai cercando e da quanto lavoro vuoi inserire nel sito stesso. È una buona idea controllare e valutare se il costruttore di siti Web che stai utilizzando supporti o meno più layout. Ce ne sono alcuni basati su un unico layout.
Volete un layout che non sia troppo impegnato da pregiudicare lo scopo del vostro sito Web, che è il contenuto su di esso. Il contenuto è ovviamente l';elemento più importante sul tuo sito web. I visitatori vengono a visualizzare il contenuto, quindi assicurati di mantenere la concentrazione.
Anche il layout è basato su ciò che stai presentando. Scegli un layout in base alla quantità di testo che richiede spazio rispetto alla quantità di immagini che necessitano di spazio. Avrai anche bisogno di un layout che ti fornisca il link e le scelte di pagina che ti servono. Se si utilizza il modello giusto per aggiungere altre pagine, è possibile ridurre considerevolmente il lavoro.
Gli sfondi del sito Web saranno più accattivanti e attraenti se i colori sono brillanti, ma non eclatanti. Tuttavia, se non riesci a leggere il testo a causa del colore o è difficile per gli occhi, è probabile che finirai per perdere visitatori.
Dopo aver scelto il tipo di modello, i colori e il modello, se necessario, è importante assicurarsi che tutto ciò che è necessario, i pulsanti di collegamento e di pagina, i banner e i menu siano collocati nella posizione corretta. Esistono numerose opzioni di modello che ti consentiranno di selezionare le posizioni per le diverse parti. Scegli queste opzioni successivamente per completare il layout per il tuo sito web. Come realizzare il layout del sito Web Negli ultimi 10 anni la questione se utilizzare layout fissi o liquidi durante la progettazione di un sito Web è stata infuriata nel mondo del web design, con i principali attori del design su entrambi i lati della recinzione proverbiale. Recentemente però, dato che le risoluzioni dello schermo sono aumentate notevolmente, i layout fissi sono quasi rimpiazzati, ma ci sono comunque grandi vantaggi per un layout liquido se progettato correttamente.
Preliminari
Quando uso il termine? Contenente? elementi, mi riferisco alle colonne o ai riquadri che contengono testo, immagini e altri contenuti. Gli elementi di contenuto possono avere bordi e immagini di sfondo, ma di solito sono solo i contenitori visivi per il contenuto importante sullo schermo.
Layout a larghezza fissa
In un layout fisso, la dimensione di ciascuno? Contenente? l';elemento sulla pagina Web è specificato esattamente. La pagina non cambierà quando ridimensionerai la finestra del tuo browser. Sembrerà essenzialmente uguale su qualsiasi browser o computer.
Layout liquido
In un layout liquido, la dimensione degli elementi di contenimento cambia in base alle dimensioni del browser e alle preferenze dell';utente. Le dimensioni del contenitore aumentano se visualizzate a risoluzioni dello schermo più grandi e diminuiscono quando il browser viene ridimensionato.
Vantaggi e svantaggi (pro e contro):
Layout a larghezza fissa
Professionisti
* Garantisce una lunghezza della linea di facile lettura
* Permetti alle immagini di essere posizionate esattamente in relazione ad altri elementi e dimensioni del testo
* Permette al designer di avere il controllo completo su come viene visualizzata la pagina (a differenza dell';utente)
* Consente un comportamento di stampa predefinito prevedibile.
Contro
* Può creare una dimensione del tipo che non è ottimale
* Prende il controllo della dimensione della pagina e della dimensione del testo lontano dall';utente.
* Non sfrutta lo spazio sullo schermo e potrebbe produrre ampie porzioni di spazio della finestra inutilizzate che potrebbero potenzialmente aumentare la quantità di utenti che devono scorrere (ciò è particolarmente vero a risoluzioni più elevate)
Layout liquido:
Professionisti
* Permette il massimo utilizzo dello spazio o dello schermo immobiliare. Consente inoltre il massimo controllo sul dimensionamento da parte dell';utente, poiché un utente può ridimensionare il sito web in base alle proprie preferenze.
* Consente di modificare le dimensioni del testo in base alle preferenze dell';utente, rendendo più semplice per le persone con problemi di vista aumentare o diminuire la dimensione del testo sulla pagina mentre il layout si adatta automaticamente alle dimensioni aumentate.
* Se progettato correttamente, imposta il tuo sito Web leggermente in disparte rispetto alla concorrenza, considerando che la maggior parte dei siti Web utilizza un layout fisso.
Contro
* Se le dimensioni dello schermo diventano troppo grandi o troppo piccole, possono produrre testo illeggibile o lunghezze di linea difficili da leggere / scansionare
* Può causare problemi con * la stampa delle pagine di default. (È possibile utilizzare un foglio di stile di stampa separato che consente una stampa perfetta da qualsiasi pagina, nonostante il layout di un liquido, ma se non viene fornito un foglio di stile separato per la stampa, questo cono è valido)
* Quando le dimensioni del sito web cambiano, la dimensione dell';immagine rispetto alla proporzione del testo può creare un aspetto meno desiderabile.
Risoluzioni moderne dello schermo e Prevalenza di layout a larghezza fissa
Il problema che affronta il design del layout nel moderno web design è l';enorme varianza delle comuni risoluzioni dello schermo tra i potenziali visitatori del sito web. La più piccola risoluzione moderna accettabile e ancora comune è 800 pixel di larghezza per 600 pixel di altezza. Con il recente aumento delle risoluzioni dei monitor widescreen e di grandi dimensioni, è anche molto comune una larghezza dello schermo di 1280 pixel più.
D. Come progettare un sito che abbia un bell';aspetto con una larghezza di 800 pixel e una larghezza di 1280 pixel?
R. La maggior parte dei web designer non lo fa, usano un layout fisso largo 800 pixel e lo chiamano buono. Detto ciò, ho personalmente progettato e ho visto alcuni bellissimi layout che sembrano buoni e leggibili a entrambe le risoluzioni estreme. I dettagli specifici di questi layout vanno oltre lo scopo di questo articolo, ma la maggior parte dei progetti che ho visto o creato che svolgono con successo questa attività utilizzano più colonne di contenuto in combinazione con :padding: definito come percentuale dello schermo. Quindi, quando lo schermo è piccolo, le colonne multiple sono molto vicine tra loro, ma quando lo schermo è grande il padding aumenta proporzionalmente e le colonne sono distanziate ulteriormente.
Raccomandazioni e analisi
La maggior parte dei siti web dovrebbe probabilmente essere progettata con un layout fisso o :semi: fisso. Garantisce la leggibilità e la perfetta presentazione dei contenuti. Detto questo, se il tuo sito web contiene una grande quantità di contenuti testuali (più di 3-5 paragrafi per pagina) o se il sito web trarrebbe grande beneficio da uno schema di progettazione non standard, usa il liquido.
Se non sei ancora sicuro, scegli risolto. Un layout fisso è facile da mantenere e garantisce la leggibilità da parte di tutti gli utenti ed è più facile per un web designer codificare perfettamente. Un layout del liquido mal fatto causerà più problemi, quindi risolverà e infastidirà i potenziali utenti. Ad esempio, uno dei miei animal pet è quando un designer usa un layout a colonna singola. La workstation del mio personal computer è composta da due monitor da 19 pollici e uno da 17 pollici. Quando un sito web è progettato con una singola colonna liquida, la larghezza della pagina di solito è troppo ampia per una facile lettura, quindi devo regolare manualmente le dimensioni della finestra.