Le home page della Chiesa tendono a soffrire di molti degli stessi problemi che abbiamo visto di recente con i siti Web della band. C'è così tanto contenuto che viene gettato su queste pagine e tutto compete per l'attenzione a tal punto che la maggior parte o la totalità perde ogni significato visivo previsto.
Oggi impareremo come combatterlo progettando una homepage della chiesa drammaticamente semplice e attraente che ha ancora molto spazio per vari messaggi, annunci e altro ancora.
Sbirciata
Se sei il tipo di persona a cui piace sapere dove sei diretto, controlla il prodotto finito qui sotto. Nota che stiamo semplicemente facendo Photoshop oggi, quindi il risultato non sarà un sito live ma un PSD con livelli.
Clicca qui per scaricare il PSD gratuito
Oppure clicca qui per vedere un'anteprima
Il progetto
Di recente, un mio amico è stato incaricato di redigere una riprogettazione per il sito web della chiesa mostrato di seguito e mi ha chiesto il mio contributo. Essendo l'over-acheiver che io sono, questa è la mia risposta.
Indubbiamente, questo sito fa già molto meglio nell'organizzare informazioni disparate rispetto alla maggior parte del suo genere. Tuttavia, lo schema grafico complessivo non è davvero in risonanza con me. Tutto sembra abbastanza ridimensionato e non c'è alcun grande impatto di alcun tipo.
Per vedere alcuni altri esempi di siti di chiese tipici, ho eseguito una ricerca su Google per trovare alcune chiese nella mia zona. Sin dall'inizio, ciò che ho trovato ha riaffermato il mio sospetto che il web design sia una delle principali aree di lotta per molte chiese.
Cambiando il paradigma
Dagli esempi sopra ho deciso di buttare fuori l'idea di trarre ispirazione da altri siti web della chiesa. So di aver visto alcuni progetti di siti di chiese davvero stellari là fuori, ma le pagine precedenti mi hanno fatto davvero desiderare di mettere insieme qualcosa che riflette le tendenze attuali nel web design professionale piuttosto che seguire uno schema troppo usato e / o obsoleto nella progettazione per organizzazioni religiose.
Quindi dimentichiamo tutto ciò che abbiamo visto fino a questo punto, vero? Ciò include il sito originale (che sembra molto meglio dopo aver visto la competizione!) Che abbiamo il compito di ridisegnare. Sappiamo che abbiamo bisogno di qualcosa di attraente e pulito, ma anche qualcosa che sia in grado di contenere tonnellate di informazioni in modo organizzato.
Il primo passo: colore
Il più delle volte, il primo passo che passo nel processo di progettazione è trovare alcuni colori su cui voglio costruire. Molti designer affermano che il layout dovrebbe sempre venire prima, ma alla fine, questo dipende completamente da te. I colori che scelgo per un sito influenzano l'intero tema, il che può persino dettare il modo in cui scelgo di sistemare tutto, quindi questo è davvero un passaggio fondamentale nel mio processo.
Per evitare consapevolmente il tipo di design occupato che abbiamo già visto, non volevo essere portato via con il colore qui, ma piuttosto optare per una palette abbastanza semplice. Ho finito col scegliere i colori qui sotto, il primo dei quali è davvero il mio unico pop di colore interessante. I rossi e le arance sono diventati molto popolari nel web design ultimamente e sono spesso più efficaci se usati con parsimonia in una pagina altrimenti sottotono. Utilizzerò la luminosità di questa sfumatura per richiamare l'attenzione sulle aree chiave della pagina.
Lo sfondo
Crea un nuovo documento RGB in Photoshop (il mio è 1265px per 1680px) e riempi lo sfondo con #eaeaea. Ora riempire il livello di sfondo con un motivo molto sottile impostato su Moltiplica in modo che il colore di sfondo sia visibile. Il pattern che ho usato qui sotto è in realtà uno dei valori predefiniti di Photoshop, se non lo vedi nel tuo menu Effetti, prova a caricare in altri set di pattern fino a quando non lo trovi.
Ciò serve semplicemente a dare allo sfondo un po 'più di interesse visivo rispetto a un riempimento solido. Se dovessimo convertire questo in un sito live, prenderemmo semplicemente un piccolo quadrato del pattern e lo imposteremo per ripetere nel nostro CSS.
Il titolo
Il prossimo è il titolo, che identifica semplicemente la chiesa e getta una slogan per farti sapere di cosa si tratta. Per iniziare questo processo, ho scelto un bel font condensato sans-serif: Humanist 521 BT Condensed. Se non si dispone di questo carattere particolare, qualsiasi altro font condensato con sans-serif funzionerà correttamente.
Successivamente ho digitato il nome della chiesa e ne ho realizzato tre versioni diverse in tre colori diversi, come mostrato di seguito. Nota che lo strato intermedio dovrebbe essere dello stesso colore dello sfondo, ma l'ho reso bianco qui solo per poterlo vedere. Inoltre, il colore di fondo è semplicemente il colore superiore con una opacità ridotta (36%).
Come puoi vedere, ho quindi sovrapposto questi strati per creare la composizione risultante sul fondo. Puoi fermarti qui, ma poiché a volte sono un po 'ossessivo del disturbo ossessivo, ho usato il livello intermedio semplicemente per mascherare lo strato inferiore, in questo modo la trama dello sfondo sarebbe stata visibile sulla sezione centrale.
Successivamente ho aggiunto un tocco visivo sotto forma di piccoli turbini su entrambi i lati del titolo. Ho anche aggiunto una tagline segnaposto con un font serif lastra sottile che pensavo piacevolmente completava il titolo. Questo font si chiama AW Conqueror Slab ed è scaricabile gratuitamente da Font Squirrel.
Slider e navigazione immagine
Molti designer sono anche sviluppatori, nel senso che possono codificare i propri progetti in siti Web funzionanti. Altri semplicemente fanno il lavoro di Photoshop e lasciano che qualcun altro prenda il design dal vivo. Indipendentemente dalla categoria in cui ti trovi, è incredibilmente importante sapere quale tipo di strumenti gli sviluppatori hanno a loro disposizione.
Ad esempio, solo perché non sai nulla della scrittura di JavaScript non significa che non dovresti leggere e notare effetti jQuery interessanti. Questo ti consente di pensare alla funzione dinamica anche quando imposti una pagina statica. È quindi possibile comunicare l'idea della funzionalità a chiunque codifichi il sito.
Quasi ogni volta che sto lottando con il problema della confusione nel web design, guardo a jQuery come risposta.Un dispositivo di scorrimento jQuery di base è semplicemente uno dei modi migliori per inserire tonnellate di informazioni in un piccolo spazio e vedrai che li incorporo nei progetti più e più volte qui su Design Shack.
Quindi, naturalmente, questo è esattamente ciò che faremo qui per gestire il nostro problema di ingombro. La nostra homepage della chiesa ha bisogno di alcune immagini grandi e accattivanti oltre alla comunicazione di vari messaggi disconnessi che cambieranno su base settimanale. Entrambi questi obiettivi sono soddisfatti in un cursore immagine. Per iniziare, ho inserito un'immagine segnaposto e l'ho resa un'ombra con la sfumatura impostata su 0, quindi è bello e difficile.
A questo punto non mi piaceva il modo in cui l'immagine si fondeva con il nostro tema stabilito. Inoltre, il sito non avrebbe solo una foto qui, ma piuttosto un messaggio su qualcosa di pertinente per i fedeli, come il prossimo sermone. Ho preso questa idea e l'ho usata per trovare l'immagine qui sotto.
Dopo questo, il resto è per lo più solo filler tipico per assicurarsi che tutti gli elementi funzionali necessari siano a posto. Ho aggiunto alcuni punti per indicare come avrebbe funzionato lo slider e ho inserito un menu di navigazione basato su testo super base che utilizzava Helvetica.
Ancora più informazioni
Il problema con il formato del cursore sopra è che alcune informazioni sono nascoste. Certo, l'utente può accedere a ciascuna pagina facendo clic sui puntini, ma se stanno cercando qualcosa di specifico, come dovrebbero sapere che apparirà nel cursore? In definitiva, questa limitazione rende questo formato il migliore per gli annunci generici che gli utenti trarranno beneficio dalla visione, ma in realtà non lo cercheranno a meno che non abbiano già familiarità con il contenuto che la chiesa solitamente colloca in quella posizione.
Abbiamo ancora molte più informazioni che dobbiamo inserire nella home page e non vogliamo semplicemente ripetere il cursore sopra, sia per la ridondanza che per le limitazioni appena menzionate. Quindi qual è la risposta?
Ancora una volta, dichiaro di aver davvero bisogno di familiarizzare con gli strumenti e le soluzioni di sviluppo comuni, anche se non sei uno sviluppatore. Per risolvere i problemi che abbiamo di fronte ho deciso che sarebbe stato un posto perfetto per implementare un SlideDeck, un plugin commerciale di jQuery che non solo ha un aspetto magnifico e contiene molte informazioni, ma consente anche agli utenti di dare immediatamente una sbirciatina a tutto ciò che è contenuto all'interno . Visita SlideDeck.com per ulteriori informazioni e per testare il SlideDeck mostrato di seguito.
Tenendo presente questo fantastico prodotto, ho creato un messaggio di benvenuto e un'altra area di contenuto con un segnaposto per SlideDeck. Ancora una volta, gli utenti saranno in grado di individuare le informazioni contenute nel cursore e fare clic immediatamente sul banner che vogliono vedere. Questo combinato con il nostro primo cursore crea un'impressionante capacità di informazione su una singola pagina. Ogni dispositivo può essere espanso per includere tutte le informazioni che la chiesa deve mostrare sulla propria homepage e ogni immagine può fungere da collegamento a una pagina dedicata che contiene più contenuti sull'argomento.
Il piè di pagina
Ora che abbiamo tutti i contenuti contrapposti, non resta che dare uno schiaffo a questo bambino e siamo pronti a partire. Ricorda che il footer non dovrebbe essere travolto come un ripensamento. È importante considerare quali contenuti devono andare qui e come dovrebbe riflettere e distinguersi dal resto del sito.
Ho pensato che una chiesa avrebbe voluto rendere le informazioni di contatto e l'indirizzo fisico ben visibili e facili da trovare, quindi ho scelto di usare il piè di pagina per questo. Ho anche deciso di prendere il nostro colore principale (# ec492d) e usarlo come sfondo per il piè di pagina, quindi è una sorta di inverso dell'intestazione. Questo utilizza alcune belle ripetizioni e farà in modo che il footer sia un elemento visivamente distinto.
Design finito
La nostra homepage è ora finita! Ecco i pezzi messi insieme. Notate fin dove ci siamo allontanati non solo dal design originale, ma da tutti i progetti di chiese che abbiamo visto sopra. L'ispirazione è grandiosa, ma a volte devi smettere di guardare agli altri per trovare le risposte e semplicemente illuminare il tuo percorso con gli obiettivi che stai cercando di raggiungere.
Clicca sull'immagine qui sotto per vedere una versione più grande.
Conclusione
Per riassumere, ricorda che non stai facendo alcun favore ai tuoi utenti invocando tutto ciò che riesci a pensare nella tua home page. Clutter rende le informazioni specifiche più difficili da trovare e riduce drasticamente la tua usabilità, eliminando allo stesso tempo la tua estetica.
Come designer, spesso pensiamo troppo ai problemi e guardiamo alla complessità per la risposta. Il più delle volte, una soluzione molto migliore sta nella semplificazione.
Lascia un commento qui sotto e facci sapere cosa pensi del design finito in relazione a dove abbiamo iniziato. Assicurati inoltre di condividere tutti i collegamenti che hai con i siti della chiesa che ritieni vadano alla larga e spingi davvero al limite in termini di estetica e funzionalità.
Crediti fotografici:
http://www.flickr.com/photos/normanbleventhalmapcenter/2674833839/
http://www.flickr.com/photos/2create/2152949049/