Troppo bello per essere vero, lo so… ma fidati! Non c’è trucco e non c’è inganno. E’ tutto molto semplice. Non facile (niente che davvero ha importanza lo è), ma è semplice: realizzate un design al giorno che sia totalmente fuori dai vostri schemi. Probabilmente è una tecnica che già conosci, ma che non hai mai applicato prima, oppure l’hai fatto ma in maniera del tutto involontaria o casuale (ad esempio provando ad usare font totalmente nuovi, disposizione degli elementi in maniera del tutto diversa, e così via), ma posso assicurarti che, se applicata in maniera costante, potrai lentamente migliorare senza sforzo apparente, migliorando le tue competenze.

La chiave della crescita non risiede nei grandi cambiamenti, improvvisi e traumatici, ma in quelli piccoli e costanti. Imparare ed applicare nuove tecniche o stili differenti in una volta sola può risultare non solo eccessivamente drastico, ma anche stancante alla lunga (oltre che dannoso per la gestione dei propri lavori e dei propri clienti, che reclamano il nostro preziosissimo tempo).

CREARE UN’ABITUDINE

Quello che intendo spiegarti è come creare un’abitudine per migliorarsi, come lavarsi i denti ogni mattina. Per quest’ultimo gesto neanche abbiamo bisogno di pensarci e organizzarci: è una cosa talmente naturale. Le abitudini sono probabilmente l’ingrediente migliore per assicurarci una crescita qualitativa. Faccio un esempio: se sei disordinato, e decidi di fare una completa pulizia dell’appartamento una tantum, non riuscirai a farlo sempre e in maniera costante, ti risulterà sicuramente un sforzo enorme. Ma se invece puliamo una cosa diversa ogni giorno, svuotiamo sistematicamente il cestino, togliamo la polvere quotidianamente, non avremo bisogno di dover fare le grandi pulizie spezzandoci la schiena. Così facendo avremo nuove abitudini, che svolgeremo in maniera del tutto spontanea e naturale, senza alcuno sforzo.

Per il designer è la stessa cosa. Non puoi trasformarti in un designer totalmente diverso, pretendendo tutto e subito. Piuttosto prova a rendere quotidiano l’utilizzo di una nuova tecnica fuori dai tuoi schemi. Sostanzialmente è facile provare una nuova combinazione di colori, nuovi font o sperimentare nuovi layout, ma se ripetuto costantemente diventerà una nuova e sana abitudine giornaliera.

PERCHE’ SOLTANTO UNA AL GIORNO?

Sicuramente ti capiterà, al primo giorno di applicazione di questi consigli, di renderti conto di avere le capacità e il tempo per poter imparare molto di più e di poter magari sperimentare 3 o 4 nuove tecniche al giorno.

NON FARLO!

E ci sono dei buoni motivi per non farlo… primo perchè probabilmente non avrai sempre tutto questo tempi nei prossimi giorni, e in quel caso la “costruzione” dell’abitudine rischia di fallire miseramente. Prova a chiedere a qualunque maestro di fitness, e vedrai che tutti ti diranno che un pò di esercizio ogni giorno è molto più efficace di un gran lavoro fatto soltanto una volta a settimana. Un designer può “tenersi in forma” usando questo stratagemma, fa esercizio quotidianamente e apprende sempre qualcosa di nuovo.

Utilizzando questi semplici consigli su base quotidiana, vedrai che nel giro di poche settimane noterai dei notevoli cambiamenti, pur senza stravolgere la tua giornata lavorativa. Ricapitoliamo:

• Scegli ogni giorno una nuova tecnica o un nuovo schema nel mondo del design, applicalo e fallo tuo.
• Non farti tentare dalla voglia di apprendere troppe tecniche in un giorno solo: tieni fede al proposito iniziale e approfondisci nel caso solo una tecnica.
• Creare una vera e propria abitudine, realizzando questo passaggio ogni giorno.

Sono curioso di ricevere vostri consigli e/o feedback sull’applicazione di questo semplice principio. A presto.

Se finora non vi siete ancora lanciati alla scoperta di questo nuovo mondo, quale migliore occasione che scoprire 10 template web gratuiti realizzati in HTML 5 e CSS 3, pronti per essere studiati e analizzati.

HTML5 Started Pack

HTML5 Starter Pack è un ottimo template, perfettamente modellabile ad ogni situazione. Questo template è cross-browser (incluso IE6), già ottimizzato per i tablet e i netbook, può avvalersi di Cufòn e include alcune classi ri-usabili. Inoltre include anche un file PSD con il layout.

Gotta’ love HTML5 & CSS3

Un layout da galleria immagini basato su HTML5 e CSS3, che include:

• transizioni animate (come ad esempio una descrizione animata attivata all’hover sull’immagine) usando soltanto il CSS;
• un interfaccia tabellare per le varie gallerie usando l’elemento :target di CSS3.

A Free HTML5 and CSS3 Theme

Questo template prevede una sub-page e un form per contatti con validazione server-side e codice (in PHP) per l’invio della mail. Utilizza 960.gs ed include l’uso di un font custom chiamato Chunkfive (sfruttando la funzione @font-face di CSS3).

Coding a HTML 5 Layout From Scratch

Questo template è un’ottima vetrina dimostrative per gli elementi header, footer, section, etc.
E’ stato utilizzato anche hCard microformat per definire il creatore del template. Per il CSS3 troviamo l’utilizzo dell’ombra per i testi e altre funzioni.

52framework

52framework è uno strumento completo che potrà aiutarvi a costruire un sito in HTML5 e CSS3 utilizzando i nuovi tag, i campi form, gli angoli arrotondati, ombre testuali, e tanto altro ancora. Include un sistema a griglia e un CSS reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial completo e dettagliato per la creazione di un’applicazione iPhone in formato sito web usando CSS3 e HTML5. Il template in oggetto utilizza i nuovi tags, quali section, aside, header e footer.

Create an Elegant Website With HTML5 And CSS3

Questo tutorial consiste nella creazione di una semplice pagina web in HTML5 e CSS3 e condivide anche il risultato finale con un comodo download. Sono stati utilizzati molti elementi nuovi ed è stato integrato Modernizr per la compatibilità con IE.

Free HTML5 Template

Un layout HTML presentato in versione 2 colonne  e 3 colonne. Include inoltre anche il file PSD.

HTML5 & CSS3 One-Page Template

Un template a singola pagina che sfrutta il jQuery per le slide animate. Viene fornita anche una versione in HTML semplice.

FlipThru HTML5 and CSS3 Template

Questo è un template semplice, ma elegante, e che sfrutta buona parte delle caratteristiche dell’accoppiata HTML5-CSS3. Prevede anche l’uso di uno slider Accordion realizzato tutto in CSS3.

Fare business sul web non è poi così diverso dalla realtà tradizionale. La maggior parte delle persone vogliono visitare un negozio ben organizzato, pulito, che rifletta un’immagine positiva e professionale, e che dia un senso di sicurezza e fiducia. Supponendo che un cliente visiti un altro negozio che è carente di una di queste caratteristiche, pur trovando lo stesso prezzo, visiterà sempre il primo. In questo modo il negozio n. 1 ha mantenuto una buona sinergia tra il proprio brand, l’usabilità e la fiducia (che in questo caso possiamo rapportare ad una buona visibilità).

Lo stesso si può dire per il Web. Esistono molti siti web orrendi, creati e realizzati con un solo scopo: posizionarsi al meglio sui motori di ricerca. Questa operazione è più conosciuta come SEO (Search Engine Optimization), e consiste nel realizzare un sito in modo che i motori di ricerca possano trovare in maniera facile e veloce le pagine contenute all’interno e indicizzarle, così da aumentare esponenzialmente la visibilità del sito. Ma come visto in precedenza, la visibilità è solo uno dei tre elementi dell’equazione.

Tornando all’esempio del negozio, se ne abbiamo uno posizionato in una strada ad alto traffico, ma è realizzato male, nessuno lo visiterà. Se invece è esteticamente il non-plus-ultra, ma è situato nel bel mezzo del nulla, nessuno lo visiterà. Se il negozio è ben realizzato e ben situato, ma non ci registri di cassa e dipendenti preparati, nessuno lo visiterà.

Quindi, riassumendo, ci sono 3 elementi fondamentali per il successo:

Brand: L’estetica di un sito web. Il Brand dovrebbe essere unico, esclusivo e deve far parlare di se, costantemente.

Usabilità: L’equivalente del rendere semplice la ricerca di oggetti in un negozio, e fare in modo che l’acquisto sia facile e piacevole come la visita del negozio stesso.

Visibilità: O per meglio dire, progettando e realizzando per il SEO, e che possiamo raggiungere seguendo alcuni preziosi consigli discussi successivamente.

Il Brand è molto più di un semplice Logo

Il Brand del cliente dovrebbe rappresentare tutto il business del cliente stesso, raccogliendo tutto lo spirito aziendale ma restando unico e professionale. Il Brand deve essere presente in tutti gli elementi, anche quelli collaterali al web design e al logo, quindi anche nell’interfaccia, nelle funzioni interattive, nelle schermate di caricamento: si deve estendere insomma a tutto ciò che cui normalmente non si tiene in considerazione. Eccone alcune esempi:

• Uso dei colori: fare una ricerca sull’impatto fisiologico e psicologico di certi colori e come possono tornare utili nel brand del cliente. Fare attenzione all’uso di colori che siano comunque accessibili e che forniscano abbastanza contrasto.
• Uso del linguaggio: tenere conto degli elementi demografici, psicografici ed etnografici del cliente. A seconda del business, questi sono tutti fattori fondamentali per raggiungere l’audience richiesta sia dal materiale off-line che da quello on-line.
• Caricamento del sito: immaginate una fila di persone che aspettano ore per entrare nel vostro negozio solo per dare un’occhiata. A meno che il vostro nome non sia Apple e non state vendendo l’ultimo iPhone, probabilmente la maggior parte girerà subito i tacchi e andrà via. La stessa cosa si può dire per un sito web. Cercate di far caricare le pagine velocemente, usando un buon bilanciamento di HTML e CSS, tecniche di compressione delle immagini, file Javascript e CSS esterni. Valutate anche un test del sito su connessioni a 56K.
• Compatibilità su diversi browser: suonerebbe alquanto strano se il 70% dei visitatori di un sito non potesse visualizzare il logo, o se una parte della grafica fosse malamente sovrapposta. Il cliente vuole raggiungere il 100% del proprio target, non solo una piccola fetta. Ragion per cui è consigliabile utilizzare una parte del tempo previsto per la progettazione per rendere il proprio sito web compatibile con tutti i principali browser, risparmiando mal di testa e incompresioni agli utenti.
• Accessibilità: ecco un termine super-abusato di questi tempi. L’accessibilità (possibilità di utilizzo del sito web anche da parte di disabili, con coloro che hanno problemi di vista o di percezione di colore) è un elemento fondamentale di cui tener conto. Un sito accessibile è non solo completo, ma sarà sicuramente anche adatto ad un miglior posizionamento sui motori di ricerca.

Per mettere insieme queste elementi di Web Design e raggiungere risultati importanti bisogna avere una direzione chiara, una direzione che possa essere di riferimento per ogni aspetto del design, attraverso un obiettivo comune. Bisogna pensare in maniera strategica.

Cos’è il design strategico?

Il design strategico è la fusione di vostri obiettivi di organizzazione con ogni singolo aspetto del processo di design. Non state semplicemente creando un’interfaccia bella e funzionale. State creando un’interfaccia che vi aiuterà a raggiungere gli obiettivi dell’azienda.

Ci sono anche fin troppi siti con una veste grafica notevole e pieni di tutte le ultime tecnologie, ma che falliscono miseramente nel proprio scopo principale. Gli ultimi trend nel design sono importanti perchè forniscono sempre un’ispirazione al passo con i tempi e nuove tecniche, ma la loro implementazione deve essere intelligente ed oculata. Ad esempio, un blog non è una brochure pubblicitaria; è necessario concentrarsi sull’usabilità e la leggibilità piuttosto che sullo stile. Allo stesso modo, un sito web che promuove un gioco dovrebbe essere caratterizzato da una grafica e uno stile particolari, perchè in questo caso l’estetica gioca un ruolo molto importante.

Quando un designer crea un sito seguendo il trend del momento (ad esempio l’ormai abusatissimo Web 2.0) senza pensare assolutamente alle funzionalità e al business del sito stesso, difficilmente il risultato finale potrà soddisfare le sue aspettative.

Il Web Design è tutto lì: creazione di un’interfaccia che comunichi funzionalità, usabilità e accessibilità, tutto condito con uno stile che lasci il segno. Un Web Design efficace ha bisogno che tutti questi elementi siano in linea con gli obiettivi del sito e dell’azienda stessa che commissiona il sito. Il design strategico è la ricerca di questi obiettivi per usarli nel proprio design.

Implementazione del design strategico

Ora vediamo in 6 passaggi come pensare strategicamente su un progetto di Web Design:

1. Stabiliamo i nostri obiettivi
Una delle prime operazioni da fare in fase di startup di un progetto di Web Design è essere chiari sugli obiettivi del cliente o dell’azienda. Cosa pensate di raggiungere con questo nuovo sito web? Qual è lo scopo principale del sito? Chiedete al vostro cliente, al vostro manager o a voi stessi. Se le risposte non sono ancora chiare, allora bisognerà discuterne e mettere dei punti fermi. E’ necessario avere una direzione chiara per poter dare uno scopo al nostro design.

Ricordate che un sito web non è un’opera d’arte; è un’interfaccia che fornisce una funzionalità. Questa può essere vendere prodotti, fornire contenuto informativo, divertire, informare o fornire accesso ad un servizio. Qualunque sia la funzionalità, il design deve essere studiato per supportarla totalmente. Gli obiettivi sono importanti anche se state effettuando un restyling. Chiedetevi perchè state effettuando un redesign: volete incrementare il numero di iscrizioni, diminuire il bounce-rate o aumentare la partecipazione degli utenti?

Diamo un’occhiata, ad esempio, al sito web del New York Times. La sua funzione è fornire contenuto informativo. L’intefaccia molto essenziale è perfetta per questo scopo. Al contrario, AdaptD è uno studio di Web Design, quindi l’obiettivo non è fornire informazioni ma stupire i visitatori con il design, mostrare una gallery dei lavori e pubblicizzare i servizi dell’azienda. In questo caso la grafica ha un ruolo molto importante, e AdaptD garantisce un’esperienza di navigazione bella e ricca di colori.

2. Identifichiamo la nostra audience
Identificare la nostra audience gioca un ruolo importantissimo per decidere come sarà il nostro sito web. Molte informazioni possono influenzare il nostro design, tipo l’età, il sesso, la professione e la competenza tecnica. Un sito web di un gioco per computer avrà un’audience giovanile e quindi uno stile diverso da quello di un giornale di business, decisamente più serio. L’usabilità in questo caso giocherà un ruolo più importante per un’audience meno giovane e meno tecnica.

Tutto questo non solo potrà influenzare l’estetica generale del sito ma determinerà anche molti dettagli, come la grandezza dei font, quindi è necessario conoscere bene l’audience che andremo a interessare.

Prendiamo ad esempio il re-design rockeggiante di jQuery. In questo caso il designer ha esagerato nel tentativo di creare sensazione, fallendo nell’interessare un’audience più seria e decisamente più tecnica. Da allora, la grafica rock è stata modificata con una molto più semplice e conservativa.

Il target del sito Disney sono i bambini. Qui lo scopo è di divertire e di coinvolgere, e il sito raggiunge questo scopo inserendo i contenuti in un’interfaccia colorata con molti elementi interattivi.

3. Determinare l’immagine brand
Molti designer oggi tendono a seguire troppo le mode grafico/tecniche del momento e perdono di vista qual è il tipo di immagine che serve davvero all’azienda. Pulsanti glossy, sfumature, riflessioni possono andar bene per taluni siti web, ma possono essere totalmente sbagliati per il nostro brand.

Pensiamo, ad esempio, ai colori. Pensiamo alle sensazioni e alle emozioni che vogliamo scaturire. Il nostro design dovrebbe rappresentare la personalità e le caratteristiche del nostro brand. Tutto ha un proprio brand: anche se non vendiamo un prodotto o forniamo un servizio – ad esempio, un blog – il vostro sito web sicuramente da delle sensazioni ai vostri visitatori. Dovete decidere voi quali emozioni dare tramite il design.

Carbonica è un sito web nato per aiutarci a ridurre le emissioni di carbonio nell’atmosfera. L’ambiente amichevole rappresentato nel sito web è caratterizzato da immagini di carta e texture, e da tonalità di verde terra e marrone.
Restaurantica è un sito di recensioni di ristoranti. Il design è basato su uno stile che rappresenta le informazioni sotto forma di un vero e proprio menu da ristorante.

4. Design basato su obiettivi
Abbiamo stabilito lo scopo del nostro sito, identificato gli obiettivi, il target e l’immagine brand. Ora possiamo procedere all’implementazione del tutto. Come possiamo sincronizzare il design con la nostra strategia? Vediamo questo esempio.

Supponiamo che il nostro obiettivo primario è incrementare il numero di iscritti al nostro servizio Web. Come può il design raggiungere questo obiettivo? Ci sono almeno tre elementi che fanno la differenza:

• Creiamo una sezione “Servizi” sulla nostra pagina principale quanto più chiara possibile. I nostri visitatori non devono poter dubitare neanche un secondo sulle funzionalità del nostro sito web.
• Usiamo colori e contrasto in modo da evidenziare il pulsante e/o il link di registrazione. Se gli utenti non lo trovano, difficilmente potranno iscriversi.
• Ripuliamo il processo di iscrizione, eliminando gli elementi superflui; gli utenti possono compilare queste informazioni aggiuntive in un secondo momento. Se il form risulta lungo potrebbe portare a noia e non verrà mai compilato.

Questi sono tre semplici consigli che possono aiutarci nel design a raggiungere l’obiettivo di aumentare il numero di iscrizioni al nostro servizio. Gli obiettivi possono cambiare, ma la strategia è sempre la stessa: focalizzare tutti gli elementi di design per raggiungere questi obiettivi.

La stessa strategia si applica anche al nostro brand e alla nostra audience: creiamo una grafica che si adatta ad entrambe. Se la principale caratteristica del nostro sito è il divertimento, allora creiamo un”esperienza”. Possiamo usare tutti i colori e le immagini per farlo. Al contrario, se stiamo creando un stio che è focalizzato sulle informazioni, tipo un blog o un magazine, allora l’attenzione maggiore va su usabilità e leggibilità. Creiamo un’interfaccia che possa scomparire e che non distragga l’utente nella lettura.

Stubmatic è un’applicazione di box-office online. Il sito web esterno ha due scopi: illustrare il servizio e invitare le persone ad iscriversi. I nuovi visitatori possono restare sul sito solo per pochi secondi, quindi per non perderli bisogna essere sintetici. Possiamo farlo in questo modo:

• Usiamo immagini grandi e diagrammi per illustrare le funzionalità base del nostro prodotto e/o servizio.
• Mostriamo screenshots della nostra applicazione. Le persone vogliono vedere com’è prima di effettuare un download o di iscriversi.
• Fornire un tour guidato, con esempi descrittivi di come questo servizio può aiutarci a risolvere un problema. Mostriamo anche un video; meno sforzi fanno gli utenti per capire, meglio è.
• Mettere ben in evidenza il link di iscrizione in tutte le pagine.

Per avere successo il nostro sito web deve fare l’uso migliore della poca attenzione che i visitatori possono dedicare in fase di navigazione, non solo informando ma anche educando gli stessi utenti su cosa fa realmente il prodotto, e vendendo bene i benefici che può portare. Stubmatic usa elementi di design in maniera efficace per raggiungere questi obiettivi.

TechCrunch è un dei più popolari blog tecnici. Il restyling recente ha rimosso ogni singolo elemento grafico inutile dalla pagina. Ciò che è rimasto è solo il contenuto, la pubblicità e la navigazione. Linee sottili e sfurmature di grigio delineano la struttura della pagina, l’interfaccia quindi p molto essenziale e tutto ciò da massimo risalto ai contenuti. Per un blog con molti articoli pubblicati in un solo giorno, questo stile è l’ideale perchè permette un’accesso facile e veloce al contenuto.

5. Analizziamo i risultati
Una volta disegnato e pubblicato il nostro sito web, dobbiamo analizzare il nostro successo. E’ importante quanto i primi due passaggi perchè senza questa analisi non sapremo mai se stiamo o meno raggiungendo i nostri obiettivi.

Se l’obiettivo è di incrementare il numero di iscrizioni al nostro servizio, misuriamolo e vediamo se i cambiamenti portano a risultati positivi. Se vogliamo incrementare i sottoscrittori del nostro blog, controlliamo le statistiche RSS. Se vogliamo incrementare il coinvolgimento degli utenti, controlliamo se ci sono più commeni o più post sui forum.

Possiamo anche richiedere un feedback direttamente agli utenti, e sarebbe un ottimo modo per vedere se siamo sui binari giusti. Facciamo però attenzione a non implementare ogni singolo consiglio che ci verrà dato. Ognuno ha un proprio gusto, quindi le opinioni saranno certamente diversificate. Se decidiamo di collezionare i feedback, cerchiamo allora schemi comuni e partiamo da quelli per un’analisi.

Lo studio completo dell’analisi statistica del nostro sito web non è argomento di questo articolo, la cosa importante è che ci sia la possibilità di verificare il raggiungimento o meno dei nostri obiettivi primari. E’ un’informazione essenziale per capire se siamo sulla strada giusta.

6. Kaizen
Esiste una filosofia giapponese chiamata “Kaizen”, che si concentra sul miglioramento costante usando piccoli passi. Quando lavoriamo sul nostro sito web, dovremmo pensare in maniera Kaizen, perchè la versione che abbiamo pubblicato non è la versione finale. Non ci sarà mai una versione finale.

Possiamo sempre implementare miglioramenti, e la natura stessa di un sito web ci permette di farlo in qualunque momento. Questo perchè un sito web non è una rivista che stampiamo e vendiamo: una volta che una rivista è nelle nostre mani, non possiamo fare nessun cambiamento e nessuna correzione. Un sito web, invece, è pubblicato su un server: se c’è un errore , possiamo correggerlo. Allo stesso modo possiamo introdurre miglioramenti graduali e aggiornalo per renderlo sempre più efficace nello svolgere la propria funzione.

Usando i risultati della nostra analisi, possiamo identificare le aree con i maggiori problemi. Magari i nostri utenti non riescono a trovare il link RSS, oppure il bounce-rate è troppo alto oppure una pagina importante non riceve abbastanza visite. Qualunque sia il problema, esisterà sempre un modo per migliorare.