Un web design efficace: tutto è nei dettagli

Presta attenzione all’allineamento, al contrasto, agli effetti tipografici e al colore perché queste componenti possono fare o disfare il design del tuo sito.
Un web design efficace: tutto è nei dettagli

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo Successful Web Design: It’s All About The Details” di

Tutto è nei dettagli

Presta attenzione all’allineamento, al contrasto, agli effetti tipografici e al colore perché queste componenti possono fare o disfare il design del tuo sito.

Mentre i tool per costruire un sito sono disponibili quasi per tutti, i design di maggior successo condividono alcune caratteristiche. Questi siti tendono ad essere ben organizzati, ad avere ottimi contenuti e hanno tutti i dettagli del design in modo ordinato.

Le piccole parti del tuo sito, dall’allineamento e grassetto al contrasto e colore, possono creare o distruggere il tuo design. Prenderti cura dei dettagli prima che il tuo progetto sia pubblicato assicura alle pagine un aspetto generalmente pulito. Un design disorganizzato e poca attenzione ai dettagli possono dare al design di un sito un aspetto poco professionale o addirittura poco armonioso. Prima di iniziare pensa a tutte le piccole cose e a come possano dare unità al tuo progetto.

Allineamento

Uno dei primi elementi chiave per un design pulito è l’allineamento verticale e orizzontale. Inserire elementi in modo casuale non darà la stessa impressione pulita e coerente tipica di alcuni siti dal design professionale. Il giusto allineamento aiuta il sito a mantenere gerarchia e coerenza nel design.

Quando lavori con elementi di tipo immagine e testo, presta attenzione a come si allineano in orizzontale in tutta la pagina. Le estremità superiori di ciascun elemento formano una linea dritta? Anche gli sfondi di ciascun elemento sono allineati?

Sito Jux

Tieni d’occhio anche l’allineamento verticale. Mantieni coerenti le larghezze degli elementi e presta particolare attenzione agli spazi vuoti che li dividono. Gli spazi fra elementi devono essere gli stessi da elemento ad elemento. Nota come le foto di diversa larghezza entrano bene in una griglia sul sito Jux, gli spazi fra elementi hanno larghezze coerenti e le foto di varie dimensioni sono perfettamente allineate.

Griglia sito Jux

Mentre progetti il tuo sito, uno dei modi più facili e veloci di tenere i tuoi elementi ben allineati è lavorare con una griglia. Non c’è alcuna regola generale sul tipo di griglia che funziona meglio, ma usarla ti aiuterà a progettare ricordandoti degli allineamenti.

Usa la griglia per posizionare e misurare gli elementi mentre costruisci il sito. Puoi lavorare con una griglia costituita da quadrati verticali e orizzontali distribuiti uniformemente (che ricorda un po’la carta millimetrata) o puoi usare più di una griglia di colonne. Puoi creare la griglia da te o scaricare un template già fatto.

Contrasto

Alcuni elementi del tuo sito cattureranno sempre più attenzione rispetto agli altri a causa di un’immagine, un colore o del testo. Pianificare ed usare i contrasti in modo efficace assicura che sia tu a determinare dove finisce prima l’occhio. Stabilisci elementi contrastanti nel tuo design usando colore, testo e pesi diversi. Determina dove vuoi davvero che vada l’attenzione sul sito e crea il maggiore contrasto in quell’area.

Uno dei modi più semplici per creare contrasto è con il colore. Una volta che hai stabilito il background e i colori del testo, usa qualcosa di totalmente diverso per dare enfasi ad una parte del sito. Prendi nota dell’approccio minimalista usato da Doberman. Il sito fa affidamento su uno schema di colore basilare (ma pulito e rassicurante) in bianco e nero, ma aggiunge un colore giallo ad un blocco per dare enfasi. Il colore vivace contrasta in modo diretto con la natura essenziale del tema sottostante e cattura l’occhio immediatamente. Inoltre, il designer del sito ha aggiunto tocchi di blu per aggiungere ulteriore contrasto in altri punti focali del sito.

Sito Doberman

Puoi creare contrasto con una varietà di metodi. Alternare le misure dei font e la doppiezza dei caratteri crea contrasto e aiuta a sviluppare un senso di gerarchia.

Effetti tipografici

Selezionare e decidere i caratteri può diventare tra le parti più difficili della creazione di un sito. Per tenere il tuo design pulito, concentrati su una selezione limitata di font e famiglie di font. Troppi caratteri possono rovinare anche il progetto più dettagliato.

Quando pianifichi su come usare ciascun font, pensa a dimensione e peso. Usa gli stessi attributi dei font per gli elementi comuni in tutto il sito. Usa un font, minuscolo o maiuscolo, che abbia una misura e un colore per i titoli. Usa lo stesso font, ma in un’altra misura, colore o peso per i sottotitoli e usa un terzo colore o peso per caratteri bold o strong nel corpo del testo.

Sito The New York Times

Prendi appunti quando imposti questi attributi tipografici per le varie parti del sito, in modo che queste specifiche caratteristiche siano coerenti di pagina in pagina.

Colore

Così come usare un numero limitato di caratteri può essere di beneficio per il design, una gamma di colori limitata può fare altrettanto. Scegli la tua gamma cromatica ed usa le combinazioni esatte in tutto il sito. Il rosso non è solo rosso; variazioni anche lievi nei colori da elemento ad elemento possono recare disturbo.

 Appuntati tutti i valori dei colori mentre crei il sito. Se cerchi variazioni, usa tinte di ogni colore per aggiungere enfasi ed effetto ottico. Netlife Research, ad esempio, fa un ottimo lavoro nell’attenersi ad una tavolozza monocolore coerente usando tre sfumature dello stesso verde in tutto il sito.

Sito Netlife Reserach

La tua gamma cromatica non deve essere per forza così semplice, ma tieni questo principio in mente quando inizi ad abbozzare il tuo design.

Coerenza

La coerenza è davvero un dettaglio fondamentale. Conserva lo stesso stile e aspetto generale negli elementi di tutto il sito. Loghi, titoli e banner non devono essere troppo diversi di pagina in pagina. Usa le stesse parole nella navigazione. Usa colori uguali o simili per elementi comuni. Attieniti alla tua gamma di font. Se hai una griglia, usala. 
Assicurati che tutti i piccoli componenti del sito siano completi, lasciarle in sospeso per una volta successiva può davvero nuocere al sito. Fai una checklist di cose da controllare mentre termini il design:

  • allineamento verticale degli oggetti.
  • allineamento orizzontale degli oggetti.
  • elementi contrastanti per aggiungere enfasi.
  • numero di font.
  • misure dei font coerenti.
  • numero di colori.
  • combinazioni giuste di colori.
  • elementi coerenti tra cui intestazioni e piè di pagina.
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github