Share
Il Blog Action Day 2010 è alle porte! Quest'anno, Webdesigntuts + è coinvolto in una speciale revisione del design di una delle nostre organizzazioni benefiche a base d'acqua preferite: charitywater.org. Esploreremo gli elementi chiave che rendono il sito web un tale successo e come puoi prendere in prestito le stesse strategie di progettazione per i tuoi progetti!
In onore del Blog Action Day di quest'anno, offriamo una revisione approfondita del design del sito web, charitywater.org. "carità: l'acqua è un'associazione senza scopo di lucro che porta acqua potabile pulita e sicura alle persone nelle nazioni in via di sviluppo".
I siti per organizzazioni caritatevoli sono sempre progetti interessanti perché hanno bisogno di coinvolgere i visitatori nell'azione. Il sito Web supera di gran lunga quello che normalmente ti aspetteresti da un non profit; Presenta solidi concetti di progettazione su tutta la linea e ha alcuni trucchi di design che gli conferiscono un senso di carattere e raffinatezza che pochi siti Web senza scopo di lucro hanno. Scaviamo dritto dentro!
La prima cosa che noterai probabilmente in beneficenza: il sito web dell'acqua è l'uso disciplinato del colore del marchio. Ciò che è unico qui è che usano il colore nello stesso modo in cui un marchio aziendale potrebbe usare il colore. Notare come il blu non varia mai da una pagina all'altra - tutto, dai punti salienti tipografici allo sfondo e ai colori infografici, ricollega la "carità: l'acqua blu" al design. L'uso del colore è onnipresente in tutto il sito; Quindi, anche se il layout cambia da una pagina all'altra, il colore funge da costante elemento unificante ... che in definitiva offre al progettista un po 'più di libertà di giocare con.
... utilizzando colori controllati creerà una presentazione professionale che dà al visitatore la sensazione che il sito sia credibile e affidabile.
Che cosa fa questo controllo del colore sull'estetica del sito? Crea un'esperienza utente unificata e coesa. Ancora più importante, l'uso di colori coerenti darà al visitatore la sensazione che il sito sia credibile e affidabile; qualcosa che è vitale per le organizzazioni non profit che devono costantemente lottare per la fiducia dei potenziali donatori.
La tipografia è una di quelle cose che ogni designer conosce in fondo è al centro di visitatori coinvolgenti, ma è spesso trascurato a favore della formattazione del testo dello status quo. L'ente di beneficenza: il sito web dell'acqua eccelle nell'usare la tipografia per attirare l'utente e sottolineare gli elementi chiave che rendono questa crisi specifica la pena conoscere.
Dal punto di vista tecnico, la tipografia utilizza principi consolidati per guidare gli occhi: la navigazione e il marchio sono sommessi ma facili da localizzare; "invita all'azione" e altre informazioni chiave sono audaci e facili da scansionare. Entro 10 secondi dalla visita del sito, probabilmente hai avuto una buona conoscenza del messaggio semplicemente scansionando i titoli principali ... è una tipografia efficace! Invece di seppellire i principali punti di interesse all'interno di blocchi di testo di paragrafo, il sito li porta in primo piano rispetto all'attenzione del visitatore.
Entro 10 secondi dalla visita del sito, probabilmente hai avuto una buona conoscenza del messaggio semplicemente scansionando i titoli principali ... è una tipografia efficace!
Mentre la tipografia in tutto il sito si presenta selvaggia e innovativa sul viso, non si interrompe mai da un nucleo di regole: i titoli principali sono impostati in un carattere di blocco che attira l'attenzione immediata, i titoli sono impostati in un carattere serif che si sente dignitoso e il resto del testo sulla pagina è impostato in un semplice sans-serif che è facile da leggere. L'utilizzo di poche semplici regole come questa può aiutare a unificare il tuo design, anche se vuoi essere in linea con i tuoi layout e il tipo di utilizzo. Diamo una rapida occhiata alla gerarchia dei tipi sul sito:
Dovrei menzionare una cosa che la carità: l'acqua non è del tutto perfetta da un punto di vista tecnico. Se navighi abbastanza nel sito, noterai dei piccoli posti qua e là che infrangono le loro regole. Ad esempio, in alcuni punti, il testo del paragrafo è serif, dove sulla maggior parte del sito è sans-serif. Il risultato è una leggera rottura nella coesione del sito ... queste incongruenze sono minori su questo sito, ma è importante tenere a mente che se il tuo design si sente "spudorato", vale la pena prendersi il tempo di esaminare ogni tipo di stile per ridurre la varietà di stili che hai in uso.
Terrò questa spiegazione breve e dolce: se hai le informazioni che sono meglio rappresentate come grafica, mostrale come una grafica! Le persone sono pensatrici visive, non si danno da fare cercando di spiegare qualcosa con parole che sono più facili da descrivere con un elemento visivo.
Questo è simile alla terza strategia, ma è una sua breve spiegazione. Spesso, tenterai di progettare una pagina per contenuti così complessi, così accademici, così basati sui dati che utilizzando solo testo o una sola infografica non recapiteranno il messaggio in modo efficace. In questi casi, vale la pena considerare come si potrebbe accoppiare un'immagine con il testo. Il testo è ancora dove saranno le informazioni non elaborate, ma l'immagine fungerà da "ammorbidente", rendendo l'informazione più semplice di quanto sia in realtà - il che incoraggia le persone a leggerlo effettivamente!
È il "One Trick Pony" del web design; Il paradigma organizzativo che vedi quando visiti la maggior parte dei siti è questo: 1 homepage progettata in modo personalizzato, 1 pagina di invito all'azione e 1 modello per tutto il resto. La nozione di utilizzare solo un modello per gestire la maggior parte dei contenuti di un sito è miope però! Usando un solo modello, i visitatori abbandonano i visitatori una volta che escono dalla home page ... invece di continuare quel livello motivazionale, questi modelli "taglia unica" invitano gli utenti a lasciare il sito quando hanno l'idea principale.
Dove la beneficenza: l'acqua ha successo è che usano una grande varietà di layout in tutto il loro sito. Il risultato: il contenuto si sente fresco su ogni pagina I visitatori sono incoraggiati a continuare a cliccare in giro per il sito solo per vedere cosa si nasconde dietro l'angolo. Ancora meglio, il design di ogni pagina corrisponde effettivamente al contenuto di quella pagina (pazza idea eh?). Mentre lo sviluppo di un'ampia varietà di modelli di pagina unici potrebbe costare un po 'di più, l'effetto netto è che il sito coinvolge effettivamente i visitatori ed è più probabile che riesca a coinvolgere i visitatori.
È importante notare che l'utilizzo di una varietà di layout non è sempre la soluzione giusta. Nel caso di beneficenza: l'acqua, funziona perché il sito ha una diversità abbastanza grande di contenuti che ha senso dare a ogni tipo di contenuto il proprio layout. In altri siti però, l'uso di layout radicalmente diversi da una pagina all'altra può rompere la continuità in un design e in realtà funzionare come un danno per l'esperienza del sito.
Non c'è alcuna regola per decidere quando un modello di pagina personalizzato è garantito, quindi dovrai solo usare il tuo istinto. In caso di dubbio, utilizzare un modello di pagina generico: se il modello generico ostacola il contenuto più di quanto non lo aiuti, prendere in considerazione la creazione di un layout personalizzato. Se decidi che è necessario un modello di pagina personalizzato, fai attenzione a conservare le informazioni vitali (marchio, navigazione, informazioni sull'account, carrello della spesa, ecc.) Nello stesso luogo in ogni pagina.
Ammettiamolo: se stai lavorando su un sito Web senza scopo di lucro, ci saranno un sacco di pagine informative noiose che, sebbene importanti, non trasuderanno ispirazione. Che carità: l'acqua ha fatto con queste pagine informative è mostrarle in un layout di griglia unico. Usando le icone e le immagini insieme a quelle informative, i visitatori sono incoraggiati a guardarsi intorno e trovare qualcosa di interessante per loro. Ancora più importante, rende queste pagine altrimenti ordinarie "divertenti", che trasmettono un messaggio sottile ai visitatori che anche le parti più noiose delle operazioni di questa organizzazione vengono eseguite con creatività e passione.
Il take-away qui è semplice: non ignorare le normali pagine di contenuti! Anche se queste pagine potrebbero non essere importanti, c'è un'opportunità unica per sorprendere i visitatori creando approcci intelligenti per la visualizzazione di questo tipo di contenuti.
Mi piace l'organizzazione benefica: il sito web dell'acqua ... lo faccio davvero. Ogni pagina sembra fresca e in realtà mi fa venir voglia di essere coinvolto. Qualcuno potrebbe dire che questo è il segno di una vera causa - una crisi così importante che le persone sono semplicemente attratte a partecipare. Ho intenzione di uscire su un arto però e dire che l'efficacia del sito ha tanto a che fare con il design come lo fa il contenuto. Certo, se la causa fosse "donare $ 5 a Steve Jobs", non mi interesserebbe davvero a prescindere da quanto fosse ben progettato il sito (alcuni potrebbero non essere d'accordo, haha!), Ma questo è uno di quei momenti meravigliosi in cui il design può davvero rendere il mondo un posto migliore.
Grazie per aver letto il post sul blog Action Day di quest'anno! Lascia cadere alcuni commenti sotto.
Accentsconagua