Design: linee guida per la realizzazione di un sito web “from scratch”
Nel creare un sito internet, dall’agriturismo al Discount “Ventre della balena”, esistono dei canoni fondamentali da tenere bene a mente; spesso il designer navigato non ha bisogno di ricordarli in quanto li conosce a menadito, ma le nuove leve, cosi’ come i principianti che si affacciano al mondo del webdesign devono stare molto attenti.
Si tende spesso a voler valorizzare un progetto con loghi giganteschi o immagini fin troppo ridondanti; di fondo e’ come arredare una casa: bisogna conoscere la base per poter costruire un arredo (od un sito internet) che comunichi e trasmetta il giusto concetto.
Vi sono in rete siti che richiamano un oggetto senza specificarlo, altri che ne rimandano l’uso e altri ancora che ostentano l’idea. Le regole sono semplici: comunicare, comunicare e comunicare.
La comunicazione passa attraverso vari stadi: visiva, vocale, intuitiva, olfattiva, sensoriale.
Per una casa ci vogliono quasi tutti gli stadi, deve essere un’armonia sensoriale che trasmetta il senso di chi ci vive: una cucina ben arredata, con colori caldi alle pareti e pentole a vista sara’ probabilmente indice di una stanza vissuta e amata dagli occupanti; il che denota anche l’amore per la cucina e per la compagnia, per l’allegria e per la comunicativita’.
Al contrario, una cucina dipinta con colori freddi non trasmettera’ calore; forse trasettera’ stile e austerita’, ma non e’ certo il posto migliore dove creare un fulcro vitale. Vediamo queste due immagini (la prima e’ di The Kitchen Designers, la seconda di Charles&Hudson):
Per tutto quello che sta in rete invece “basta” la comunicazione visiva, ovvero quello che si riesce a trasmettere con le immagini (primariamente) e con il testo (secondariamente).
Ma per comunicare in questo modo non serve prendere una scodellata di testo e mischiarla a delle immagini che sembrano passare di li’ per caso; se desiderate vedere quali sono i siti internet piu’ brutti mai creati ecco la chiave da cercare su Google, mentre Spoon ne propone cinque, che vi consiglio di scrutare bene, uno in particolare – Haven Works – rispecchia accuratamente quello che non dovrete mai fare!
Vediamo quali sono le linee guida piu’ comuni, a livello spiccio, per chi si cimenta per la prima volta con il design di un sito internet:
Architettura e Struttura
Un requisito fondamentale e’ l’architettura della pagina (o delle pagine): non si possono combinare diversi stili che tra loro non abbiamo un filo conduttore, sempre meglio cominciare con uno sketch su carta e poi passare alla realizzazione vera e propria.
Piazzare venti box alla rinfusa per riempire uno spazio non e’ la soluzione migliore, si rischia l’effetto inverso.
Elena Gargiulo (pssssssst! Avete letto la sua intervista?) ha creato un ottimo esempio di presentazione: i box-thumbnails coesistono, hanno la loro specifica forma e spaziatura e non affollano la pagina sgraziatamente. Come potete osservare il testo/didascalia, e’ insito nel box e non richiede spazio aggiuntivo che potrebbe soffocare la pagina stessa.
Impatto visivo e intuitivita’, anche il navigatore che non parli la lingua italiana capisce che puo’ navigare tra i contenuti semplicemente clickando sui box.
La struttura principale non ruota quidni sui box ma sulla funzionalita’ degli spazi assegnati ad ogni oggetto: i box per gli articoli, le categorie in alto (solo testo su sfondo nero) e sul lato sinistro una colonna atta a contenere link e risorse.
Tutto l’ambiente e’ reso tonico dalla scelta dei colori di sfondo, dall’immagine usata come background e dalle evidenziazioni delle risorse.
Questa struttura ad “etichette”, ricordandoci le variopinte e divertentissime Dymo, e’ capace di portare il visitatore occasionale subito al fulcro del discorso, lasciandogli ogni facolta’ di navigare il sito per avere di piu’; il visitatore assiduo sa invece dove recarsi, sceglie di leggere o meno un articolo del quale ha gia’ indovinato il contenuto con una semplice occhiata all’immagine che lo rappresenta.
In ogni caso i visitatori generano traffico e il traffico genera pubblicita’ e la pubblicita’ genera guadagni.
Definizione di una palette di colori
Belli i colori, ma attenzione a non creare un circo!
Nella scelta dei colori dovrete prestare molta attenzione ad abbinarli nel modo giusto: se pubblicizzate un limone lo sfondo non dovra’ essere per forza giallo. Se pubblicizzate un SUV lo sfondo non dovra’ essere per forza nero.
Per questo vengono in aiuto strumenti come ColourLovers o Kuler o simili. Sul vostro sketch definite anche dei colori, magari fotocopiando il disegno e colorandolo a matita.
Il sito personale di Laura De Masi (..e la sua intervista l’avete letta?) ha una palette insolita, di solito quasi tutti i designer scelgono colori pastello, ma qui ci troviamo di fronte ad una palette che si stempera in se stessa regalando un effetto visivo piacevole e per niente invasivo. I colori e le loro sfumature sono rispettate, non vedrete link sottolineati verdi o evidenziature in azzurro.
Una volta che decidete uno stile, un range di colori, rimanete con quello, non vi avventurate su modifiche contrastanti, non fanno altro che rendere la pagina graficamente isterica.
E tenete sempre bene a mente che ogni sito realizzato ha una sua caratteristica: dovendo realizzare un sito per uno studio veterinario (o, in genere, riguardante l’ambiente medico) i colori saranno tenui, sul verde, grigio e celeste; mentre un sito per un salone di parrucchieri avra’ dei colori diversi, dal giallo paglierino all’arancio vivo.
Inutile anche ricordare che il mix di colori arcobaleno mal si addicono anche alle pagine, troppi colori buttati li’ finiscono per creare l’effetto “mal di mare”.
Il colore che andrete a scegliere non deve solo piacervi, ma deve comunicare qualcosa, deve poter rappresentare a livello cromatico la personalita’ che intendete proporre.
Pensate bene anche alle sfumature, rendono un colore unico e riescono a far identificare i brand in modo eloquente.
Logo
Il logo e’ qualcosa di strettamente personale, come i colori, ma ha un impatto visivo molto piu’ forte e veloce di qualsiasi altra cosa voi buttiate in un sito.
Le grandi marche non hanno quasi piu’ bisogno di pubblicizzare il nome di un prodotto od il proprio nome, a loro basta rendere visibile il logo, il marchio.
Vediamo meglio quanto un logo (immagine o testo o porzione di testo) possa richiamare immediatamente la casa madre:
Li avete indovinati tutti? immagino di si..
Ma non tutti i loghi riescono col buco.
Ora, non ci sono soluzioni universali per creare il logo perfetto, ma aguzzare l’ingegno di sicuro aiuta, cosi’ come aiuta farsi un’idea dei loghi in circolazione; fate una ricerca, eviterete anche di creare un logo troppo simile ad uno gia’ esistente.
Guardate il logo di Italian Webdesign (elaborato da Laura Gargiulo di Lauryn.it .. e si, anche lei si e’ prestata per un’intervista, l’avete gia’ letta?), tricolore (bianco, rosa e nero), essenziale e semplice. E’ facile da ricordare, facile da identificare, non e’ impegnativo; sofisticato quanto basta per dare l’idea dell’elaborazione ma essenziale nel tratto e nelle linee.
Animali e fogliame sono un po’ troppo inflazionati, cosi’ come tutti i ghirigori e le onde e gli animaletti/personaggi chibi.
Definite la vostra identita’ o l’identita’ che dovete creare e datele un carattere. Modificate e non abbiate mai paura di sperimentare, provate e riprovate.
Quando riuscirete a rispondere affermativamente alla domanda: “ti tatueresti il logo che hai disegnato sulla pelle?” saprete che avrete creato un logo che vi rappresenta.
Il logo deve essere riconoscibile e immediatamente associabile a qualcosa (o qualcuno): il pipistrello a Batman, il ragno a Spiderman, la mucca viola alla Milka e cosi’ via; sarebbe fin troppo ovvio associare un Bip-Bip ad una ditta di trasporti veloci (copyrights a parte) e la fantomatica ditta si ritroverebbe mescolata alle tante altre che hanno sfruttato un’idea simile.
“E che cosa significa?” – questo e’ quello che vi chiederanno se il vostro logo non fosse chiaro, se fosse un putpourri di forme e colori che non hanno una forma specifica.
Se siete avvocati e mettete sul vostro biglietto da visita il logo di un quadrato (perche’ per voi la legge e’ la quadratura del cerchio) non aspettatevi che tutti riescano a capirlo. Se siete i responsabili di un canile, il vostro logo sara’ verosimilmente raffigurante un cagnolino, non una targhetta anonima che potrebbe essere scambiata per un campanello.
Spesso questi errori accadono perche’ ci si ferma all’apparenza, alla prima scelta, alle immagini raccolte in rete (ATTENZIONE! LE IMMAGINI CHE TROVATE IN RETE NON SEMPRE SONO DI LIBERO UTILIZZO!) e perche’ si vuole scimmiottare un logo gia’ famoso.
A volte riproporre un logo in chiave divertente, con delle variazioni, puo’ essere una buona scelta, ma bisogna sapere bene dove andare a parare.
Riporto dalla pagina “Chi sono” di Riccardo Pizzi, alias PocaCola:
Perchè PocaCola ? Mi chiedono spesso perchè questo blog si chiama PocaCola: Volevo registrare un dominio che fosse facile da ricordare e che richiamasse qualcosa di molto noto. La CocaCola è il marchio più conosciuto al mondo, così ho semplicemente cercato un’alternativa che sostituendo una sola lettera mi consentisse di registrare un dominio il più simile possibile a quello della famosa bibita al caramello.
Riccardo ha mantenuto fede al suo profilo: ha una sua identita’ fisica e gestisce un logo, ed un nome ad esso associato, che lo rendono riconoscibile. Il piu’ delle volte e’ citato come PocaCola, non come Riccardo. E gli utenti del suo blog riescono facilmente ad identificarlo dalla grafica.
Le linee semplici, in generale, sono quelle piu’ apprezzate, forme chiare e pulite e colori definiti RGB; pensatela cosi’: se doveste riportare il vostro logo su carta quanto inchiostro sprechereste? Questo non vuol dire che un logo in bianco e nero sia piu’ ecologico di un logo colorato, ma il mix di colori che sul digitale si vede cosi’ bene, potrebbe non risultare cosi’ nitido e chiaro sulla carta stampata, sfumature e minuterie comprese.
Pubblicita’
E’ l’anima del commercio, disse Henry Ford.
Troppa pubblicita’, comunque, nuoce alla navigabilita’ e alla credibilita’ del sito che state costruendo, soprattutto se e’ quella sbagliata.
Per farvi due risate guardate queste immagini (prese da Anvari.org):
La casualita’ con la quale alcuni trend pubblicitari vengono affiancati ad altri trend pubblicitari genera degli errori e delle perdite, in ragion di soldoni e di immagine, inimmaginabili.
Inserire AdSense e un programma di affiliazione a pagamento e’ una buona, anzi buonissima idea, ma esagerare con gli advertisements e piazzarli ovunque potrebbe far desistere i vostri lettori dal tornare. Meglio quindi pochi slot di pubblicita’ che vi portino una visibilita’ medio-alta a un sacco di piccoli banner colorati e con pesanti javascripts alle spalle che non solo rallenterebbero il vostro sito, ma lo renderebbero sgradevole.
E ovviamente sul sito della Casa di Riposo di Nonno Simpson la pubblicita’ del Viagra non sara’ il massimo =)
Evitare i cliche’
Facile scrivere dell’ovvio, facile prende un articolo molto conosciuto, copiarlo, cambiare le parole e pubblicarlo.
I contenuti devono essere originali, deve esserci un senso, deve trapelare la conoscenza dell’autore della materia.
Siete esperti in qualche cosa? Avete idee originali?
Non esitate a pubblicarle, a diffonderle.
Francesco Gavello, oltre ad essere un blogger conosciuto, ha riempito il suo blog di interessanti notizie, di opinioni personali – che a volte dissentano da quelle della massa – e ha creato un punto di riferimento per molti lettori.
Il valore aggiunto e’ un eBook sulle risorse necessarie per costruire un blog di caratura importante, con consigli e curiosita’ (scaricabile abbonandosi ai suoi feed – altra idea interessante per chi vuole raggiungere piu’ lettori ed ampliare il portafoglio di abbonati). Francesco ha unito il parlare spicciolo con la qualita’ dei contenuti, diversificando gli argomenti ma tenendo fede al suo modus operandi.
Da evitare: l’opprimente onniscenza in ogni argomento, l’abuso di immagini con reflections, il tripudio di video e microvideo, colonne infinite di lifestraming (a meno che il blog/sito non sia preposto), immagini glitter o rotanti, cento diversi font nella stessa pagina e, soprattutto, evitate di riciclare le stesse immagini.
Ci sono categorie di immagini che paiono essere talmente inflazionate da trovarle anche nei ristoranti.
Esempio: avete in mente di preparare un articolo che parli di SEO mastering? Evitiamo l’immagine di due persone che si stringono la mano. Risultati analitici o trends? Ci sara’ ben qualcosa di meglio che la classica immagine degli indici di borsa!
Se siete dei designer o dei grafici potete benissimo creare immagini che si adattino al meglio al vostro articolo, senza incappare nella banalita’; se non siete grafici e non sapete come muovervi nel mondo della grafica scegliete immagini “simili”, anche andando a curiosare i siti che lasciano scaricare, previa registrazione gratuita, immagini di libero dominio.
Piattaforma
Ultima considerazione, ma non la meno imprtante, la decisione della piattaforma: sara’ un blog? Un magazine? Puro CSS?
Non e’ una scelta facile: un blog offre possibilita’ elevate anche per chi non ha pratica con la grafica e con il design in se’, vi sono temi gratuiti e a pagamento in abbondanza e vi sono strumenti che permettono di costruirsene di personalizzati (Artisteer e Thematic, sui quali potete trovare delle recensioni qui, qui e sul sito di Fabio Marasco).
Stessa cosa per i Magazines, tanti templates, tanti spazi da riempire.. troppi forse, se i contenuti sono scarsi, si rischia di essere ripetitivi o di colmare il bianco con immagini inutili e pesati.
I CSS sono per i piu’ esperti, anche se esistono ottimi siti dove trovare gallerie e ispirazioni (da CSSIWDGarden a ZenGarden a CSS Vault a CSS Elite) e anche templates gratuiti da modificare. Quello di cui dovrete tenere conto e’ il movimento: un blog/magazine sara’ molto piu’ dinamico e movimentato e richiedera’ piu’ interventi mentre un sito CSS richiedera’ meno interventi grazie alla sua staticita’.
Se deciderete per un blog, tuttavia, non fermatevi alla prima scelta: valutate la vostra capcita’ di interagire con una piattaforma come Joomla o Wordpress o Drupal o DotNetNuke. Vi sconsiglierei blogger.com e splinder.com, almeno io li vedo piu’ come piattoforme personali che validissime alternative.
You also may find interesting
E ancora:
- Colors: librerie ordinate, multicolori, come una palette casalinga
- Brain Training for Designers
- Laura “Laura De Masi” De Masi. (Si, e basta, problemi?)
- L’etica del designer – ovvero come contribuire alla disfatta delle community
- Artisteer: the automated Web Designer
Homer J. Simpson
