Il layout può essere uno dei più facili e uno degli aspetti più complicati del web design. A volte un designer può svelare un layout sorprendente in pochi minuti e talvolta lo stesso designer può lottare per la parte migliore della giornata con lo stesso compito.
Ogni progetto è unico e richiede una soluzione unica, ma ho trovato utile tenere in mente alcuni allineamenti solidi e incredibilmente versatili che posso uscire quando rimango bloccato. I dieci layout di seguito dovrebbero essere sufficienti per superare anche i casi peggiori del blocco del designer quando non riesci a trovare il modo migliore per organizzare il contenuto della pagina.
Mantenerlo semplice
L'impaginazione equivale all'arte e alla scienza. Creare qualcosa che sia visivamente attraente e unico porti gli occhi di un artista. Tuttavia, ci sono molte linee guida molto facili da seguire che è possibile utilizzare per creare layout solidi che funzionano per un numero qualsiasi di casi. Questi principi includono la scelta e il rispetto di un allineamento, la strutturazione corretta dello spazio bianco e l'evidenziazione di elementi importanti attraverso dimensioni, posizionamento, ecc.
I progettisti spesso sottolineano troppo il processo di layout. Abbiamo la tendenza ad avvicinarci a un progetto pensando che debba essere assolutamente unico sotto ogni punto di vista per meritare il nostro tempo e il denaro del cliente. Tuttavia, se guardi bene il Web, noterai che non è necessariamente così. I siti Web di grandi dimensioni spesso utilizzano layout che sono abbastanza semplici e non per niente unici. È vero che le pagine di cui i progettisti si meravigliano maggiormente sono spesso i siti peculiari che rompono gli schemi, ma il tuo cliente medio vuole solo qualcosa di utile, pulito e professionale.
In questo articolo daremo un'occhiata a dieci layout molto comuni che è possibile trovare su innumerevoli siti sul web. Si noti che il modo in cui questi siti sono in stile, ovvero i colori, la grafica e i caratteri, è unico, ma la struttura di base dei siti stessi si basa su metodi provati e veri per la creazione di una pagina Web. Sottolineeremo questo aspetto mostrandoti per prima cosa una semplice silhouette del layout in modo da poter proiettare i tuoi pensieri e disegni su di esso, quindi lo seguiremo con uno o due esempi di siti reali che utilizzano il layout.
Se sei un web designer, aggiungi questa pagina ai segnalibri e torna la prossima volta che ti blocchi bloccando una pagina. Tieni presente che ciascuno dei seguenti layout rappresenta un suggerimento di base da modellare e modificare. Ti incoraggio a non usarli così come sono, ma metti il tuo giro su di loro in base alle esigenze del tuo progetto.
Tre scatole
Questo è probabilmente il layout più semplice della lista. In effetti, sarai tentato di pensare che sia troppo semplice per soddisfare le tue esigenze. Se questo è il caso, sarete sorpresi se penserete davvero a quanto sia davvero versatile l'arrangiamento.
Il layout a tre riquadri presenta un'area grafica principale seguita da due caselle più piccole al di sotto. Ognuno di questi può essere riempito con un grafico, un blocco di testo o una combinazione di entrambi. Il riquadro principale in questo layout è spesso un cursore jQuery, in grado di mostrare il contenuto desiderato!
Le forme stagliate nella parte superiore sono aree che possono essere utilizzate per loghi, nomi di società, navigazione, barre di ricerca e qualsiasi altro contenuto informativo e funzionale tipicamente su un sito web.
Questo design è ideale per una pagina portfolio o qualsiasi cosa che debba mostrare alcuni esempi di grafica. Ciascuna delle immagini potrebbe essere un collegamento che conduce a una pagina galleria più ampia e complessa. Più avanti nell'articolo vedremo come mescolare ulteriormente questa idea.
Nella natura selvaggia
Di seguito vediamo una bella implementazione del layout a tre riquadri nel portfolio di Peter Verkuilen. Come suggerito sopra, l'immagine principale ruota e mostra alcuni dei recenti progetti di Peter. Cliccando su una delle caselle ti porterai alla pagina dedicata di quel progetto dove potrai trovare maggiori informazioni.
Semplice, efficace e attraente. Probabilmente puoi creare una pagina web completa dal vivo con questo layout in meno di un'ora!
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. Genius è un modello di business minimale e completamente reattivo per aziende, agenzie, liberi professionisti e singoli individui. È molto facile da personalizzare e ben documentato, ed è semplice organizzarlo in qualsiasi tipo di griglia che desideri!
Schermate 3D
Mentre gli sviluppatori continuano a creare una collezione infinita di applicazioni web, il layout degli screenshot 3D visto di seguito, o alcune varianti di esso, sta diventando sempre più popolare. L'idea di base è di completare la tua pagina con un titolo e poi lanciare alcune anteprime stilizzate della tua applicazione. Questi vengono spesso con riflessioni, ombre pesanti, una grande grafica di sfondo o persino ornamenti complessi come i rampicanti che strisciano su tutti gli screenshot, ma l'idea alla base è sempre molto semplice.
Un altro posto che vedo questo trucco usato molto è in temi pre-costruiti. In questi casi, un designer sta vendendo un layout azionario e ha davvero bisogno della sua grafica segnaposto per brillare, e nulla dice cool e moderno come alcuni fantasiosi effetti 3D!
Nella natura selvaggia
Pixelworkshop utilizza questa tecnica, non come un tema azionario, ma per mostrare in realtà i temi azionari! Qui gli screenshot 3D si spostano in una presentazione e si presentano in diverse modalità. Fermati e dai uno sguardo per vedere tutti i vari modi in cui il designer presenta le immagini.
Griglia avanzata
Molti dei layout che vedrai in questo articolo aderiscono a un allineamento della griglia piuttosto rigoroso. Tuttavia, per la maggior parte, non suggeriscono semplicemente una pagina piena di miniature uniformi. Ad esempio, il layout sottostante mescola le dimensioni delle immagini per evitare la ridondanza.
Come con l'esempio dei tre riquadri, c'è un grafico principale che sale verso la pagina. Questo è seguito da una semplice svolta sull'idea di una griglia uniforme di miniature.Lo spazio consentirebbe uno span di quattro quadrati orizzontalmente, ma invece abbiamo combinato le prime due aree in modo che la metà sinistra della pagina differisca da destra.
Come abbiamo detto con il primo layout, i blocchi non devono essere immagini. Ad esempio, puoi immaginarlo come blocchi di testo sulle immagini quadrate laterali a sinistra sulla destra.
Nella natura selvaggia
Nell'esempio meraviglioso di seguito, questo layout viene utilizzato per il sito web di abbigliamento per bambini. Notare che vicino al fondo dell'allineamento, hanno spostato le cose ancora di più in modo che il lato sinistro presenti un'immagine di dimensioni quasi strane seguita da un paragrafo, nessuna delle quali si allinea perfettamente con il contenuto sul lato destro.
Di nuovo, una volta che hai in mente il tuo layout di base, puoi apportare modifiche sottili come questo, mantenendo l'integrità della struttura sottostante. Un altro trucco interessante che hanno usato è stato quello di suddividere l'immagine principale in due aree. In realtà è tutto un JPG, ma è stato diviso in due immagini per mostrare ancora più contenuti.
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. GoodFood è un modello che si adatta perfettamente a questo tema: "l'esempio utilizzato è per un sito di cibo e bevande, ma sarebbe perfetto per qualsiasi tipo di tema del sito web!
Grafica in primo piano
A volte non hai abbastanza contenuti per una pagina piena di immagini. Che cosa fai se vuoi mostrare un'icona, una foto o forse anche un simbolo come una e commerciale? Il layout sotto è una soluzione super facile che è abbastanza popolare e si legge molto bene a causa della mancanza di distrazioni.
Il risultato è una pagina che è audace, ma minimale e pulita. L'affermazione che rende è forte e impossibile da perdere, ma assicurati che la tua grafica sia abbastanza buona da essere così ben visibile!
Nella natura selvaggia
Quanto è comune questo layout? Molto più di quanto potresti pensare! Con il minimo sforzo, sono stato subito in grado di creare due siti che utilizzano una variante ravvicinata di questa tecnica. Nota che hai le opzioni per come vuoi formattare il testo e anche dove vuoi posizionare la navigazione. Il secondo sito riorganizza gli elementi secondari piuttosto un po 'ma è immediatamente riconoscibile come lo stesso layout di base.
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. Motive è un modello HTML di portfolio minimalista perfetto per siti web di agenzie o personali. Questo modello presenta una sezione completa del portfolio con la pagina dei filtri e dei dettagli del portfolio. Inoltre, sono inclusi nel modello una pagina dedicata e sezioni di blog che consentono di utilizzare il modello per un blog anziché per un portfolio. Un sacco di personalizzazione è incluso insieme a tutta la documentazione per aiutare.
Cinque scatole
La disposizione delle cinque scatole è semplicemente un'evoluzione del layout delle tre scatole. Si applica tutta la stessa logica, è stata appena modificata per contenere ancora più contenuti. Potrebbe facilmente essere anche quattro scatole, dipende solo da quello che vuoi mostrare. Inoltre, sembra che tu abbia dedicato un po 'più di impegno al design!
Ovviamente, man mano che si aggiunge al layout, gli oggetti secondari diventano sempre più piccoli, quindi per la maggior parte degli utilizzi, probabilmente cinque scatole si avvicinano al limite.
Proprio come con il layout di tre scatole, questo è così versatile che può essere letteralmente utilizzato praticamente su qualsiasi tipo di sito. Le idee per accenderlo includono l'aggiunta di una grafica di sfondo di grandi dimensioni, l'arrotondamento degli angoli, l'aggiunta di ombre e / o riflessi, o forse anche l'aggiunta di un elemento interattivo alle miniature più piccole. È possibile aggiungere facilmente pulsanti che li fanno scorrere orizzontalmente.
Nella natura selvaggia
Anche in questo caso abbiamo due esempi di questo layout utilizzato in modi leggermente diversi. La cosa importante da notare qui è che, nonostante abbiano layout simili, questi due siti non potrebbero apparire più diversi gli uni dagli altri se provassero. Uno usa uno stile di illustrazione disegnato a mano, le altre fotografie e le sfumature. Il primo utilizza colori tenui e caratteri di script, i secondi colori vivaci e caratteri moderni.
Questo porta a casa l'argomento che l'utilizzo di uno dei layout in questo articolo non ucciderà la tua creatività. Una volta sistemato il contenuto, c'è ancora molto da fare nell'area dell'estetica. Questo è ciò che definirà realmente la personalità del sito e spesso farà o distruggerà una proposta del cliente.
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. Phoebe è un modello Blogger minimale e pulito, ricco di funzionalità come il cursore automatico dei post in evidenza e l'area Promo (entrambi sono opzionali). 4 stili di home page tra cui scegliere (dispositivo di scorrimento + area promozionale, solo slider, solo area promozionale o layout classico).
Fixed Sidebar
Finora tutti i siti che abbiamo visto hanno avuto una navigazione orizzontale in alto. L'altra opzione popolare è ovviamente una navigazione verticale, che si presta a creare una forte colonna verticale sul lato sinistro della pagina. Spesso questo è un elemento fisso che rimane dov'è mentre scorre il resto della pagina. Il motivo è che la navigazione può essere facilmente accessibile da qualsiasi punto del sito.
Il resto del contenuto può prendere in prestito da uno degli altri layout di questo elenco. Notare che ho modificato nuovamente il layout a tre riquadri, questa volta in una disposizione a quattro riquadri. Una volta che hai finito di leggere questo articolo, guarda di nuovo tutti i layout e pensa a come combinare le idee per creare nuovi layout.
Nella natura selvaggia
Come con l'esempio precedente, i due siti sottostanti sembrano in realtà molto diversi, anche dal punto di vista del layout. Tuttavia, se guardi di nuovo, noterai che entrambi usano una barra laterale verticale sinistra e il layout a quattro riquadri.Il secondo esempio ha semplicemente spostato le caselle più piccole nella parte superiore della pagina! Un'altra idea interessante che dovresti tenere a mente quando crei un sito basato su questi esempi.
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. Pebbles è un modello di blogger portfolio unico, incentrato sul minimalismo, l'eleganza e la semplicità. È stato creato attorno a un concetto modulare e una straordinaria griglia di portfolio in muratura. Ricco di molte funzioni sorprendenti, questo modello offre la soluzione migliore per qualsiasi nicchia.
Titolo e galleria
Tutti amano una buona pagina della galleria. Dal punto di vista del layout, cosa potrebbe essere più semplice? Tutto ciò che serve è una griglia di immagini solida e uniforme e spazio per un titolo con sottotitolo opzionale. La chiave qui è rendere il tuo titolo grande e audace. Sentiti libero di usarlo come un punto di creatività e includi una sceneggiatura o qualche carattere pazzo.
Questo esempio usa rettangoli squished per rispecchiare il vero sito sottostante, ma questo può e deve essere modificato per adattarsi a qualsiasi cosa tu stia mostrando. Il punto qui è farti pensare fuori dagli schemi e non impostare di default un quadrato, forse potresti usare rettangoli verticali o persino cerchi nella tua galleria!
Nella natura selvaggia
Lo sviluppatore di seguito ha utilizzato questo design per creare una galleria dei loghi per i clienti con cui ha lavorato. Si noti che non sta suggerendo di aver creato i loghi, ma sta semplicemente mostrando la sua base di clienti in modo molto visivo. Ciò dimostra che anche se non sei un designer, una galleria di miniature potrebbe essere un ottimo modo per mostrare un elenco di articoli altrimenti banale e noioso.
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. Proton è un tema creativo di alta qualità con uno stile unico e un codice pulito. Proton può essere utilizzato per molti scopi a partire da portafogli, agenzie, liberi professionisti e molto altro. Il modello è creato e testato su tutti i dispositivi e funziona perfettamente senza un singolo problema.
Foto in primo piano
Il layout sottostante è estremamente comune, soprattutto tra la comunità di fotografi. L'idea di base è avere un'immagine di grandi dimensioni che mostri il tuo design o la tua fotografia (qualcosa di veramente), accompagnata da una navigazione verticale sul lato sinistro.
La navigazione potrebbe essere la più forte in un allineamento a sinistra, ma sentiti libero di sperimentare con un centro o addirittura l'allineamento giusto per completare il bordo dritto della foto.
Nella natura selvaggia
Il sito sottostante sfrutta al meglio questo layout trasformando l'immagine in primo piano in un cursore orizzontale. Un'immagine è presente alla volta, ma puoi vedere quella successiva che si trova sul lato destro della pagina. Al passaggio del mouse sopra, viene visualizzata una freccia che consente di scorrere le foto.
In alternativa, perché non provare a creare un sito che utilizza questo stesso layout ma con una galleria di immagini che scorre verticalmente? Lo spazio sembra quasi più adatto per questo, poiché non dovrai includere un'area scomoda per proteggere la navigazione.
Rete elettrica
La griglia di alimentazione è il layout più complesso in questo articolo, ma è uno dei layout più efficaci che ho visto per le pagine che devono contenere tutti i tipi di vari contenuti correlati. Da immagini e lettori musicali a testo e video, puoi racchiudere qualsiasi cosa in questo layout e rimane forte.
La chiave si trova nella metà inferiore dell'anteprima sopra. Si noti che in realtà c'è un grande contenitore che contiene una serie di rettangoli. Questo contenitore ti fornisce i limiti per il tuo spazio e tutto il contenuto che inserisci all'interno deve essere formattato in una griglia forte ma varia, non diversamente dal layout di griglia avanzato all'inizio di questo articolo.
Nella natura selvaggia
Questo può essere davvero difficile da avvolgere nella tua mente finché non vedi alcuni esempi dal vivo. Il primo è una vetrina di arte e cultura. Solo questa descrizione ci dice che il contenuto sarà completo, e infatti vediamo che la pagina è piena di feed Twitter, foto, elenchi, immagini e altro ancora.
Tuttavia, tutto si adatta perfettamente alla griglia che il designer ha stabilito. Questo layout è facilmente estendibile in modo che, indipendentemente da quanto si passi, l'aspetto generale dovrebbe rimanere abbastanza logico e lineare purché si formatti e si organizzi correttamente il contenuto.
Questo layout sopra mi ha ricordato un tutorial che ho scritto un po 'indietro nel disegnare un sito web per una rock band. Qui abbiamo una pagina dall'aspetto molto diverso, ma una disposizione del contenuto quasi identica, specialmente nella metà inferiore. Il vero trucco per tirare fuori questo schema è iniziare con alcune scatole veramente grandi, che vengono poi suddivise in aree di contenuto più piccole, se necessario.
Se ti senti ancora perso, consulta il tutorial completo, che ti guiderà attraverso ogni fase del processo.
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. PunicPress è un modello HTML5 e CSS3 completamente reattivo che è molto adatto per pianificare l'avvio di un sito Web o una rivista di notizie online.
Foto a schermo intero
Il layout finale della lista è un altro che è ideale per i fotografi, ma funzionerà su qualsiasi sito con una grafica di sfondo grande e attraente da visualizzare e una quantità limitata di contenuti.
Può essere davvero difficile leggere il contenuto quando viene posizionato su un'immagine di sfondo, quindi l'idea di base qui è quella di creare una barra orizzontale opaca (o quasi opaca) che si trova sopra l'immagine e funge da contenitore per i collegamenti, copia , loghi e altri contenuti.
Anziché utilizzare la barra come un'area di contenuto veramente ampia, prova a suddividerla in alcune sezioni diverse. Questo può essere fatto variando il colore di sfondo, aggiungendo alcune sottili linee verticali come divisori o addirittura spezzando la grande scatola in scatole disconnesse più piccole come ho fatto sopra.
Nella natura selvaggia
Questo layout potrebbe sembrare incredibilmente restrittivo, ma di seguito diamo un'occhiata a quanto può contenere. Questo sito fotografico riempie la barra con la navigazione, un? blocco di testo, alcune foto recenti con descrizioni e un grande logo! Non male per uno spazio così piccolo, e tutto questo si risolve in un modo molto pulito e non disordinato.
Prendi un modello
Un modo rapido per iniziare con questo tipo di layout è con un modello HTML. Questo modello di una pagina è eccellente per i siti Web di portfolio o fotografici. Le sezioni incluse nel modello includono su di noi, i servizi offerti, i lavori più recenti, le testimonianze, un modulo di contatto aJax funzionante, una pagina di portfolio unico, diversi stili di pagina di notizie e molto altro ancora.
Conclusione
Ci sono stati alcuni punti chiave sopra riportati che vorrei ribadire in chiusura. Innanzitutto, anche se il layout di pagina non è necessariamente necessariamente di una taglia unica? pratica, c'è una scienza che può essere rapidamente e facilmente applicata in un numero incredibilmente vasto di circostanze.
Successivamente, le idee di layout presentate sopra non devono necessariamente portare a siti web di cookie cutter che sembrano tutti uguali, ma invece forniscono semplicemente una tela di base su cui costruire un progetto finito notevolmente unico.
Infine, la chiave per implementare con successo queste idee è ricordare che non sono scolpite nella pietra. Ognuno dovrebbe essere modificato per adattarsi al tuo progetto specifico e può anche essere mescolato e abbinato per creare nuove idee!
Lascia un commento qui sotto e facci sapere cosa ne pensi dei layout sopra. Ci sono dei casi in cui non hai menzionato sopra per cui ti trovi in difficoltà quando hai problemi? Lascia un link per un esempio.