All'inizio di quest'anno, abbiamo pubblicato un articolo che descriveva 5 siti web della band dei motivi. Oggi seguiremo quel post creando un design di una band web page che eviti i problemi incontrati dalla maggior parte dei siti in questa categoria.
Creeremo il mockup in Photoshop e scopriremo alcune caratteristiche e una solida teoria del design lungo il percorso. Iniziamo!
Il progetto
Scarica PSD Layered gratuito
Il post di oggi è ancora un altro progetto tratto dal nostro programma di Dilemma del design. Due designer separati, Nathan Futo e Roman Hurton, hanno scritto entrambi in questa settimana per chiedere aiuto nella progettazione di un layout iniziale per un sito web della band.
Come dimostrato dal nostro post precedente, questo può essere un compito piuttosto complicato e il prodotto finale è spesso disordinato e brutto. Affronteremo questo problema creando un layout semplice e flessibile che chiunque può utilizzare per contenere molti contenuti.
Il progetto
Il post di oggi è ancora un altro progetto tratto dal nostro programma di Dilemma del design. Due designer separati, Nathan Futo e Roman Hurton, hanno scritto entrambi in questa settimana per chiedere aiuto nella progettazione di un layout iniziale per un sito web della band.
Come dimostrato dal nostro post precedente, questo può essere un compito piuttosto complicato e il prodotto finale è spesso disordinato e brutto. Affronteremo questo problema creando un layout semplice e flessibile che chiunque può utilizzare per contenere molti contenuti.
Per iniziare: la foto di sfondo
Il primo passo è creare un file Photoshop che sia intorno a 1200px per 1600px a 72 dpi e in RGB. Successivamente, vogliamo un bel background fotografico per il nostro sito. Qualcosa di drammatico ma non troppo distratto e ancora bello anche quando la maggior parte di esso è coperto da altri contenuti.
Ti consiglio di acquistare una foto a basso costo o di acquistarne una tua, ma poiché questo è solo un esempio, ho fatto un giro su Creative Commons di Flickr e ho afferrato questa foto del campo di grano da Snake-Eyes Photography.
Quando lanci questa foto sul tuo PSD, dovrebbe lasciare una grande porzione di spazio vuoto in basso. Per risolvere questo problema, imposta il livello di sfondo sul nero e applica una maschera alla foto del campo di mais. Quindi prendi lo strumento sfumatura e allunga verticalmente un gradiente lineare dal bianco al nero. Questo dovrebbe dare alla tua foto una sfumatura graduale verso il nero senza effettivamente danneggiare alcuno dei pixel originali.
Ove possibile, si desidera sempre utilizzare maschere per apportare modifiche non distruttive. Ciò garantisce una flessibilità senza rivali che è utile quando vuoi cambiare le cose. La modifica del livello attuale distrugge l'immagine originale e impedisce di tornare a quel punto.
Lo schema
Il problema più grande con i siti web della band è che così tante cose si ammucchiano sulla home page e che il risultato finale è un caos disordinato. Il contenuto tende ad apparire disparato e accartocciato insieme invece di apparire come un'unità coesa con parti distinte.
La via facile è solo per dirti di non mettere così tanto sulla tua homepage, ma spesso questa non è una soluzione molto pratica. Invece, devi imparare come creare una pagina piena di foto, post di blog, lettori di musica, feed di Twitter, date dei tour e molto altro ancora mantenendo un design accattivante. Può essere fatto? Assolutamente! Ed è in realtà molto più facile di quanto tu possa pensare.
Per iniziare, imposta alcune guide nel documento in modo che creino una singola colonna centrata larga 960 pixel. Se Photoshop è impostato per scattare le selezioni su qualsiasi guida, questo ti aiuterà a disegnare alcune caselle per il contenuto.
Quindi, crea quattro scatole bianche disposte come quelle mostrate sotto. Questa sarà la base del nostro intero layout. Troppo facile dici? Anzi! Questa griglia semplice e flessibile può contenere un'ampia varietà di contenuti. In effetti, sentiti libero di sistemare le scatole come preferisci e persino provare a suddividerle in modo diverso. Finché la tua spaziatura rimane costante e il tuo allineamento è forte, puoi creare semplici scatole per contenere tutto ciò che desideri.
Ho aggiunto un'ombra esterna alle mie scatole per aiutarle a stare un po 'meglio sullo sfondo.
L'intestazione
Per sostenere questo progetto, presumo che tu stia lavorando per una vera band. Questi gruppi di solito hanno molte risorse con cui lavorare: foto, copertine di album, ecc. Per il nostro ipotetico sito, non ho avuto nessuno di questi. Fortunatamente, in realtà ero in una rock band al college e ho ancora tutto il nostro materiale promozionale, quindi userò roba casuale da quella raccolta per riempire la pagina.
La prima cosa che dobbiamo fare è riempire la casella di intestazione. Questo potrebbe facilmente essere qualsiasi cosa tu voglia, un annuncio per un album o un tour imminente, una foto della band o anche meglio, lanciare tutto quanto sopra in un cursore jQuery.
Per questo progetto, mi limiterò a inserire una semplice foto di gruppo. Invece di ritagliare la tua foto per adattarla allo spazio, prova a posizionarla direttamente sopra il livello con la casella bianca e applicando una maschera di ritaglio (Comando + Opz + G). Questo dovrebbe adattare automaticamente la tua foto ai limiti impostati dal livello del riquadro bianco. Questa è solo un'altra tecnica non distruttiva che offre più flessibilità del ritaglio.
Per aiutare la foto risaltare, ho dato un tratto interno bianco. Per quanto strano possa sembrare, assicurati di applicarlo direttamente al livello del riquadro bianco e non al livello fotografico.
Noterai che questa foto è piuttosto bella rispetto allo sfondo caldo. Penso che questo faccia apparire la foto come se non fosse così ho aggiunto uno strato di regolazione del riscaldamento per rendere i due più coerenti.
Come puoi vedere, ho anche gettato una piccola grafica con il nome della band. La foto è troppo impegnata per posizionare il testo direttamente, quindi il piccolo rettangolo di offset rende più leggibile e raddoppia come un tocco grafico.
Navigazione e Logo
Mentre lavoriamo sull'intestazione, dobbiamo inserire alcuni elementi standard del sito Web: ovvero il logo e l'area di navigazione.Sono abbastanza semplici, basta allineare il logo a sinistra e la navigazione a destra. Ho tirato fuori alcune piccole scatole nere per le schede di navigazione. Ciò fornisce alcune belle ripetizioni con l'elemento che abbiamo aggiunto sopra e aiuta il testo a risaltare sullo sfondo del cielo.
Con questo, la nostra intestazione è finita e ora possiamo procedere alla sezione centrale.
Mostra date e nuovo album
La sezione centrale è la più semplice. Usa semplicemente queste due caselle per contenere qualsiasi contenuto che ritieni sia importante. Ad esempio, ho creato un programma di tour di base e un banner pubblicitario di un nuovo album. Questo è anche il luogo perfetto per lanciare un lettore musicale se ne hai uno, ma assicurati di impostare la musica in modo che suoni solo quando le persone lo vogliono! Non c'è niente di peggio di un sito che ti scarica inaspettatamente con la musica quando la pagina viene caricata.
Si noti che ho usato lo stesso font Slab-Serif (Museo) che abbiamo visto sulla navigazione per le date dello spettacolo. Ove possibile, mantenere i caratteri tipografici abbastanza coerenti e limitarsi a due o tre famiglie principali.
Tutto il resto
La sezione inferiore è la più grande e quindi la più complicata. Riusciremo davvero a racimolare un sacco di contenuti qui mentre cerchiamo di rimanere strutturati e puliti.
Per rimuoverlo, useremo lo stesso trucco che abbiamo usato nel layout generale del sito. Questa volta stiamo semplicemente annidando un altro sistema di moduli all'interno del nostro più grande modulo primario.
Per iniziare, disegna alcune scatole e disponili in un altro schema a griglia. Questa volta sono andato con quattro grandi quadrati e una barra laterale.
Quindi, lancia le quattro foto e applica le maschere di ritaglio proprio come facevamo prima, in modo che siano conformi alle caselle che hai impostato. Nella parte inferiore di ogni quadrato, aggiungi del testo che descriva dove porterà il link.
Infine, utilizza la barra laterale come hub di social media. Inserisci qui i tuoi widget di Twitter, Facebook, Flickr, ecc. E modellali quando possibile per abbinare l'aspetto del tuo sito.
Puoi davvero vedere qui quanto può contenere questo sistema di layout. Anche se hai il doppio dei contenuti che ho inserito qui, è facilmente espandibile e non apparirà ancora disordinato.
Prodotto finito
Questo completa il design del nostro sito! Ecco il progetto finito (clicca per un'anteprima più grande).
Conclusione
Per riassumere, sì, i siti Web delle band spesso fanno schifo ma non devono. Utilizzando i metodi di cui sopra, è possibile creare facilmente layout chiari e puliti che contengono tonnellate di contenuti senza apparire come un disastro di MySpace.
Lascia un commento qui sotto con un link a tutti i siti web di grandi band che hai visto o creato. Chiediti se il sito potrebbe essere migliorato con un layout più coeso o se lo hai già inchiodato. Ci piacerebbe vedere alcuni dei tuoi lavori!
Assicurati inoltre di fermarti alla nostra pagina del Dilemma di progettazione per inviare i tuoi dilemmi relativi alla progettazione. Se pensiamo che sia rilevante per i nostri lettori, lo trasformeremo in un post come questo!