Web design: 5 regole base da non dimenticare

Realizzare il design di un sito web non è certo impresa semplice. Non solo si deve prestare attenzione alla grafica e al gusto visivo degli utenti, ma è necessario combinare l'esperienza estetica con il massimo dell'usabilità . Vi sono centinaia di siti dalle funzioni più sorprendenti messe però in secondo piano da una grafica scadente, non in grado di sfruttarne appieno le potenzialità . Un fatto tutt'altro che remoto sul Web odierno, dove molte realtà  online concentrano totalmente i loro sforzi sullo sviluppo dimenticandosi dell'importante ruolo del designer. Ma quali sono i 5 elementi di base che non possono mai mancare nella progettazione estetica di un sito?

A rispondere a questa domanda ci pensa il designer Nick Pettit, il quale rileva cinque fattori elementari - si potrebbe dire addirittura scontati - che tuttavia spesso mancano sui siti web più diffusi.

• Spazio negativo: non solo il contenuto è importante, ma anche il modo con cui lo si rappresenta nello spazio. Capita spesso di vedere box e container senza margini interni, con testi appesi alle estremità  laterali del rettangolo. Non solo questo sistema rende la lettura poco agevole, ma crea un vero e proprio senso di "soffocamento" visivo, tanto da convincere l'utente a fuggire su lidi ben più curati. Ogni testo incluso in un box, magari con sfondo colorato, deve avere sufficiente spazio su tutti e quattro lati. Si evitino inoltre i "box-in-a-box", ovvero riquadri contenuti all'interno di altri riquadri, mentre si prediligano ampie aree vuote al di sotto dell'ultimo rigo, per alleggerire visivamente la pagina;
• Contrasto: il contrasto aiuta l'utente a trovare gli elementi più importanti della pagina. Nei testi, di conseguenza, si privilegino i grassetti rispetto ai corsivi e si giochi sapientemente con i colori. Nella definizione di una vanity url, ad esempio, si può scegliere di colorare la parte antecedente allo slash di un grigio tenue, per evidenziare poi il testo successivo in nero e con una dimensione carattere lievemente più grande. La stessa regola vale ovviamente per l'intero design. Un metodo rapido per scoprire le zone di maggiore rilevanza visiva, è quello di trasportare in bianco e nero l'intero layout: così facendo, sarà  facile individuarne le aree di più alta attenzione e luminosità . Allo stesso modo, si può effettuare uno screenshot della pagina web e, con Photoshop, giocare con le curve per rendersi conto quanto d'impatto sia il progetto;
• Varietà  e texture: aggiungere delle variazioni a tema alle colorazioni monolitiche è sempre un buon consiglio di progettazione, perché i blocchi di colore sono statici e stancano la vista. Si può quindi ricorrere a delle basiche texture - purché non invasive - per aumentare la varietà  cromatica del sito, facendo però attenzione a non scadere troppo nello skeumorfismo. Le texture permettono al design di acquisire profondità , così come anche le sfumature. Per quest'ultime, si consiglia di partire dall'alto con colorazioni chiare, perché permettono a tutte le altre tonalità  di mescolarsi in modo più armonioso e unificano il color banding. Le texture, infine, dovrebbero essere estremamente leggere per non appesantire il caricamento del sito, si consiglia quindi di utilizzare pattern ripetibili in riquadri da 256x256 pixel massimi;
• Forme non-rettangolari: le forme non-rettangolari possono aiutare a concentrare l'attenzione dell'utente sugli elementi primari del layout e sulle porzioni di testo più importanti. Quando si progettano dei container per gli elementi irrinunciabili del sito, di conseguenza, si arrotondino gli angoli dei rettangoli. L'occhio umano è naturalmente abituato alle forme irregolari, è più facile attirare l'attenzione con una forma particolare che con un colore intenso. Inoltre, queste forme aiutano a fortificare un'iconografia sempre riconoscibile, per evitare che l'utente si dimentichi del sito;
• Equilibrio: il concetto di bellezza e piacevolezza solitamente non prescinde da quello di simmetria. Nella realizzazione di un layout, percià, bisogna prestare particolare attenzione all'equilibrio visivo: i colori sono troppo concentrati in una porzione della pagina? Il testo è stretto nella metà  inferiore? Vi sono delle aree spoglie? Si faccia uno screenshot della pagina e si tracci con Photoshop una linea diagonale: sarà  facile controllarne le proporzioni. Quindi si ruoti il layout di 180 a gradi, in modo che sia sottosopra. Così facendo, l'occhio umano non interpreta il testo e sarà  molto semplice scovare tutti i disequilibri grafici

Fonte: TreeHouse