Una rassegna di disegni coerenti sul web
Il linguaggio visivo di un sito web impressiona un visitatore ben oltre il suo primo sguardo.
Infatti, osservando i migliori siti web, si nota che i piccoli dettagli ti parlano inconsciamente e che la coerenza migliora la tua esperienza del sito web e di conseguenza ti rende più probabile il ritorno.
In questo articolo esploreremo ciò che rende un design coerente e mostreremo alcuni dei progetti di siti web più coerenti in circolazione.
Si prega di commentare alla fine dell'articolo sulla coerenza di questi siti Web e sentirsi liberi di aggiungere collegamenti ad altri che seguono questo principio.
Cosa intendiamo per coerenza nel design? Secondo questa definizione , la coerenza può essere definita come: "Un'uniformità o accordo armonioso tra cose o parti".
Il tuo obiettivo come progettista è creare ordine, per consentire agli utenti di trovare facilmente le informazioni che stanno cercando. La coerenza può aiutarti a raggiungere questo obiettivo.
Lista di controllo dei dettagli
Innanzitutto, definiamo i criteri in base ai quali determineremo se i siti web che esaminiamo qui sono coerenti. Stabilire criteri per te stesso potrebbe anche portare benefici al tuo lavoro quotidiano di progettazione. Come mi piace dire, il buon design viene prima creato con una buona osservazione . Ecco i nostri criteri:
Consistenza tipografica:
- C'è un ritmo verticale costante?
- L'allineamento tipografico è coerente?
- Le scelte del carattere tipografico sono coerenti?
- La navigazione tipografica è prevedibile tra le pagine?
Coerenza grafica:
- Le immagini del sito web trasmettono uno stato d'animo coerente?
- I colori delle immagini corrispondono?
- Le trame delle immagini sono coerenti?
- Le dimensioni delle immagini sono coerenti con la struttura generale del sito web e tra loro?
Consistenza del colore:
- I colori vengono utilizzati in modo coerente tra le pagine?
Consistenza di icone e pulsanti:
- Le icone del sito web sono della stessa famiglia?
- Le icone corrispondono alla dimensione?
Un sito Web non deve soddisfare questi criteri fino al punto, ma l'elenco è un buon punto di partenza per contribuire a rendere i propri progetti coerenti e armoniosi.
Ok, ora abbiamo una bella lista di controllo con cui giocare. Rivediamo i nostri siti Web, impariamo da loro e lasciamo ispirare!
52 settimane di UX
Quali sono alcuni dei punti salienti di questo sito Web:
- Lo spazio bianco nell'intestazione è equamente diviso.
- La tipografia è costantemente allineata, a filo con una destra lacera.
- La navigazione impaginata persistente in alto è sia intelligente che familiare.
- Le immagini per i post sono sempre in bianco e nero.
Ora, poiché questo articolo riguarda i dettagli, desidero sottolineare due problemi minori relativi a questo sito Web, entrambi nel footer: in primo luogo, notare come il pulsante di ricerca "Vai" ha una riflessione, mentre gli altri elementi sul sito Web non (confronta, ad esempio, il pulsante RSS in alto).
In secondo luogo, si noti che lo spazio tra i titoli e il testo è molto più stretto nel footer rispetto al resto del sito web.
Nastri di rosso
- In primo luogo, l'elemento più importante del sito: il rosso! Splendidamente e coerentemente utilizzato dal logo alle intestazioni ai link ai pulsanti.
- Successivamente, la trama della grafica del pulsante è la stessa di quella utilizzata per il logo.
- Inoltre, nota che i pulsanti sono visivamente tutti della stessa famiglia, anche le icone sociali in basso.
- Il tipo di display è di nuovo un bel serif lastra, usato in modo coerente dal logo alle intestazioni ai pulsanti.
- Infine, gli elementi di testo in tutto il sito Web sono allineati in modo coerente, a filo a sinistra ea destra.
Yaron Schoen
- La prima cosa che attira l'attenzione è come l'illustrazione nell'intestazione gioca con la profondità. Anche i quattro elementi grafici sottostanti escono dai loro contenitori e giocano con profondità allo stesso modo.
- La tipografia è perfettamente allineata in una griglia.
- Il carattere tipografico è ben scelto ed eseguito. Anche la home page e le altre pagine mostrano continuità.
- I colori sono anche molto coerenti, giocando bene con il blu scuro per il verde bluastro, dall'intestazione al piè di pagina.
Fuzzco
- Guarda la trama nella navigazione in alto; è anche usato per le immagini vicino al fondo.
- Controlla il tipo nell'intestazione tra le pagine; ben fatto con Flash personalizzato, dandogli un tocco creativo.
- Il serif è coerente in tutta la home page ma si rompe un po 'sulle pagine interne.
- I colori nella navigazione in alto corrispondono al piè di pagina, armonizzando e inquadrando il contenuto.
Styleboost
- La dimensione rende sicuramente questo sito coerente: grande . Grandi pulsanti, grandi immagini (tutte di dimensioni coerenti), grande tipo, grande spazio bianco.
- Il colore è ridotto al minimo e usato bene. L'azzurro mantiene l'armonia e il grigio secondario gioca con la profondità e la gerarchia.
- I pulsanti sono tutti grandi e uniformi. Sono anche leggermente arrotondati, corrispondenti alla casella di ricerca.
- La struttura della griglia è semplice e ti dice cosa verrà dopo. Anche il piè di pagina è in proporzione, che sembra essere vicino alla sezione aurea.
Delizioso mostro
Questo sito non è nuovo, ma è bello come è rimasto costante nel corso degli anni e non è invecchiato un po '. L'attenzione ai dettagli ha aiutato.
- Notare le trame. Il sito web è incorniciato da una mensola in legno, che si lega al tema del software offerto dall'azienda.
- Gli elementi grafici come l'erba e le piante mantengono l'armonia.
- Ogni sezione ha angoli arrotondati, anche i pulsanti di presentazione.
- Il giallo-verdastro domina la pagina, invitandoti a entrare in questo mondo fantasioso e memorabile.
Richard Meier & Partners Architects.
È stato progettato da Massimo Vignelli , che è noto per aver padroneggiato la rete e produrre progetti moderni, coerenti e logici.
- Si noti l'allineamento degli elementi grafici. Il tipo flush-left nel menu è allineato alle immagini sottostanti.
- La regola orizzontale sotto la sotto-navigazione è persistente, aiutando gli utenti ad orientarsi sul sito web.
- Lo spazio tra la navigazione e il contenuto corporeo è coerente, dando all'occhio un chiaro percorso da seguire.
- E la tipografia è semplice, a filo di sinistra e sans-serif, cadendo costantemente nella griglia.
La squadra dietro Architetti dell'informazione ha anche padroneggiato la semplicità, il design della griglia e la coerenza.
- Nota come la navigazione in alto è allineata al contenuto del corpo sottostante.
- La tavolozza dei colori è semplice e coerente: rosso, bianco e nero.
- Gli elementi testuali sono allineati in modo uniforme. Si noti come lo spazio tra le regole orizzontali sia coerente lungo la pagina.
Wilson Miner
- Le date e il meta contenuto sono allineati nella prima colonna, seguiti dal contenuto del corpo.
- Osserva come la navigazione nella parte superiore cade nella griglia, allineandola con il contenuto sottostante.
- La tipografia è un semplice bianco e nero: bianco per i titoli delle sezioni, nero per la copia del corpo.
Tapbots
- La prima cosa che cattura il mio sguardo è l'eccellente uso dello spazio bianco, in particolare la spaziatura uniforme tra il logo e la navigazione, sia sopra che sotto.
- Le icone sembrano tutte provenire dalla stessa famiglia, creando armonia.
- Anche l'uso della profondità, dalla grafica in alto alle illustrazioni del footer, è coerente.
- I colori corrispondono alla pagina: il nero in alto corrisponde al piè di pagina; il pulsante rosso in alto corrisponde al pulsante di ricerca sottostante; e la navigazione grigia corrisponde alla barra grigia nel footer.
Avvolgendo
La progettazione coerente richiede molti strumenti e può essere difficile da raggiungere.
Un suggerimento che posso offrire è iniziare con una bella griglia e poi costruire un wireframe su di esso. Questo ti darà una vista a volo d'uccello degli elementi grafici e di come si relazionano tra loro.
Gli esempi precedenti dovrebbero darti spunti di riflessione per quanto riguarda l'esecuzione del tuo progetto. La consistenza è composta da molte parti, che sono tutti ingredienti essenziali nel processo.
Scritto esclusivamente per il Webdesigner Depot di Noam Almosnino, web designer a Brooklyn, New York. Segui Noam su Twitter , o visitare il suo sito web hellonoam.com .
Conosci altri siti Web coerenti da condividere con noi? Si prega di postarli nei commenti!