Webdesign for Dummies.10 suggerimenti utili

Visitando blog di amici e conoscenti, così come quelli di illustri sconosciuti, ho notato una scarsa propensione alla cura dell’aspetto di ciò che si propone. Questo mi fa tornare in mente una frase che dovrebbe essere un mantra quando si fa webdesign:
La qualità si nota.
Chi è alle prime armi tende a dimenticare che l’occhio del visitatore funziona in maniera diversa dal nostro, così come quello che a noi può sembrare carino e piacevole ad un altro può apparire come una fastidiosa pacchianata. Mi riferisco ovviamente all’uso improprio (in molti casi eccessivo) di immagini, colori, animazioni, banner, font strani e dai colori inadeguati. Ecco perché è importante ricordare che l’impatto visivo è un fattore determinante per la buona riuscita di quanto andremo a proporre online.

WEBDESIGN FOR DUMMIES

L’idea di scrivere un piccolo vademecum che ho deciso di chiamare Webdesign for Dummies, nasce a seguito di tante domande che alcune amiche, neo blogger, mi hanno posto. Senza voler insegnare niente a nessuno ho deciso di realizzare alcuni post a tema, una sorta di block notes su cui appuntare i suggerimenti base in materia di web design. In questo primo articolo evidenzierò i punti salienti da tenere a mente in fase di ideazione e creazione di un sito.

web design for dummies organizzazione sito

LAYOUT

Crea su carta la struttura del tuo sito e una volta terminata guardala immedesimandoti negli utenti che ti verranno a visitare. Serve per verificare la navigabilità ed il facile accesso ad ogni area o sezione. Quante volte abbiamo chiuso il browser perché persi in una selva di link, menù e sotto-menù?
Facciamo in modo di non costringere l’utente a compiere la stessa azione, perdendo così visite e contatti preziosi. Purtroppo è normale fissarsi sull’idea che si ha in partenza, così come è facile non accorgersi di eventuali errori. Una buona soluzione è chiedere a qualche amico di girovagare tra le pagine del nostro website per scoprire magagne, malfunzionamenti o “semplici” appesantimenti nella struttura.

GRAFICA

L’impostazione grafica va creata tenendo conto del tipo di progetto che stiamo pubblicando. Nel caso di una rock band si può osare qualcosa in più con i colori e le immagini, per uno studio notarile proprio no (non me ne vogliano i notai). In ogni caso è chiaro che non si deve mai esagerare, il rischio di produrre un pastrocchio fastidioso da vedere è sempre in agguato.
Il ragionamento vale anche nel caso di blog personali.
Ci tengo a sottolinearlo perché spesso noto una propensione all’uso eccessivo di immagini, gif animate (ebbene si, esistono ancora), banner, scritte scorrevoli, etc.

LOGO

Chiaro, comprensibile e in grado di fornire immediatamente le informazioni essenziali. Buona norma, qualora non sia indicata nel logo, è affiancare una frase o un motto che descriva il sito e faccia capire di cosa ci occupiamo.
Il logo va sempre linkato alla homepage.

COLORI

Potrà sembrare ovvio, ma fate attenzione a che sfondi usate ed alla combinazione di tonalità con gli altri elementi del vostro layout. Un pugno in un occhio, se pur figurato, non è mai piacevole. Non alternate tinte calde a tinte fredde, a meno che non vi riesca di trovare una combinazione vincente.
Bandito, senza se e senza ma, il testo bianco su sfondo nero perché quasi sempre poco leggibile.

Webdesign for Dummies. I colori

IMMAGINI

Da considerare non come un abbellimento, ma come un modo per attirare l’attenzione del lettore fornendo informazioni. Proprio per questo devono riportare una breve descrizione o essere abbinate al testo diviso in paragrafi.
Ricordati di posizionarle in punti ben visibili per far comprendere SUBITO chi sei e cosa fai.
L’internauta va sempre di fretta e se non si cattura la sua attenzione, chiude la pagina e passa a un’altra. E’ di estrema importanza usare immagini RGB con una risoluzione non superiore a 72 dpi, per ridurre al minimo indispensabile il loro peso.
Una pagina che non si carica velocemente diventa un problema!
Gif animate, effetti di vario genere, sfondi che sembrano prendere vita… evitateli, rallentano il caricamento delle pagine senza produrre niente di positivo.

MENU’

È sempre bene posizionarli in alto o in aree con alta visibilità, realizzare una struttura eccessivamente nidificata (ovvero contenere sotto-menù, sotto-sotto-menù, il sotto-menù del sotto-menù e via dicendo) e soprattutto devono adottare un font semplice e leggibile. Anche in questo caso è buona norma usare prima carta e penna (o matita per cancellare gli errori) per stabilire le concatenazioni di ogni link.

UNDER CONSTRUCTION

Scritta con tanto di immagine o icona, magari del cantiere in corso o dell’omino che lavora, che andava tanto di moda qualche anno fa e non del tutto scomparsa. Se la pagina non è pronta a che serve renderla visibile? Oltre a non essere bella a vedersi dà l’idea di un lavoro incompleto, di un sito poco aggiornato.

FONT

Quali usare? Senza alcun dubbio i sans serif, i caratteri privi dei trattini situati in basso e in alto delle singole lettere, e quelli creati espressamente per la lettura su video. Per il primo caso vanno quindi bene Arial e Helvetica, nel secondo Georgia e Verdana.
Le dimensioni di norma variano da 10 a 12 punti, ma in casi specifici quali lo slogan, l’intestazione e le frasi da evidenziare si possono ovviamente aumentare.

Minduka_Music_icon

MULTIMEDIA

Altra nota dolente fin troppo spesso riscontrata è quella dell’uso di musiche di sottofondo. Mi collego ad un sito e di colpo eccola in agguato: la nenia fastidiosa o l’assordante tunz tunz di turno.
Tornando al concetto scritto all’inizio di questo articolo, ricordatevi che l’inserimento di questi elementi va fatto in funzione della tipologia del sito. Se è quindi necessaria una parte audio (penso a siti di scuole di ballo, musicisti o discoteche) utilizzate un player provvisto dei pulsanti stop & pause, ma soprattutto impostatelo senza l’autoplay. Lasciamo al visitatore la facoltà di decidere se ascoltare o meno, evitando un ulteriore appesantimento della pagina.
Lo stesso discorso ovviamente va applicato ai videoclip.

VELOCITA’ DI CARICAMENTO

In precedenza ho accennato più di una volta al caricamento delle pagine e a quanto sia importante non appesantirle. Questo credo sia ovvio anche ai non addetti ai lavori: dover aspettare, prima di visualizzare i contenuti, è una cosa fastidiosissima e gli utenti hanno sempre meno tempo disponibile. Meglio porre la dovuta attenzione a questo aspetto che approfondirò in un altro post.
In ogni caso Google (e non solo lui) mette a disposizione un utile strumento per testare la velocità del nostro sito:
http://code.google.com/speed/page-speed/docs/extension.html

Eccoci giunti alla fine di questa breve guida che ho voluto chiamare, in maniera scherzosa, Webdesign for Dummies. Spero possa chiarire le idee ai neofiti e magari fare da input per approfondire le tematiche trattate. Ogni argomento merita un’analisi più profonda e dettagliata e conto di farlo prima possibile, perché le informazioni da fornire sono tante.

Se ti è piaciuto questo articolo, iscriviti GRATUITAMENTE agli aggiornamenti via email