15 domande da porre prima della realizzazione di un sito web

L’inizio di un nuovo progetto può essere un’esperienza interessante e frustrante al tempo stesso. Cercare di determinare se il proprio stile e quello del cliente coincidano è sicuramente l’impresa più ardua quando si affronta un nuovo lavoro. Se valutati correttamente, la relazione con il cliente e il progetto saranno un successo, ma una valutazione incompleta può rendere ben presto la nostra vita un inferno.

Fare i compiti all’inizio può aiutarci. Sai già che tipo di domande porre ai clienti per capire quali sono le loro aspettative e le loro necessità?

1. Cosa fa la tua azienda?

Uno dei problemi peggiori che possono capitare è spesso la diversità tra ciò che il cliente fa e ciò che il designer pensa che il cliente faccia (o debba fare). Oltre a fare un po’ di ricerca prima dell’incontro con il cliente, chiedi al cliente qualcosa sulla sua azienda. Scopri esattamente cosa produce e come un sito si inserisce all’interno del loro business plan. Potresti rimanere sorpreso da ciò che scoprirai del tuo cliente.

2. Qual è il tuo target?

Qualsiasi sito, dal blog più piccolo al sito di una multinazionale, deve avere un target in mente. Devi solo cercare di capire chi sia. Crea un avatar dell’utente medio del sito, e progetta le forme, la tipografia e i colori in modo da soddisfare il meglio possibile i suoi bisogni. Conoscere l’utente finale, e gli utenti, ti aiuterà nella progettazione di qualcosa di più funzionale e usabile.

3. Cosa vuoi che faccia un visitatore sul sito?

Ogni sito dovrebbe avere degli obbiettivi di conversione. Che cosa vorresti che gli utenti facessero?
Le azioni più comuni comprendono:

  • Clickare un link per imparare qualcosa o trovare un’informazione.
  • Comprare un prodotto o un servizio
  • Completare un form
  • Giocare
  • Clickare link per vedere contenuti
  • Registrarsi per un evento
  • Scaricare un’applicazione
  • Condividere qualcosa via email o social

4. Possiedi già un sito?

Hai un sito? Qual’è l’URL?
E la domanda di fuoco: Possiedi un dominio?
Molti proprietari di un sito, specialmente se il sito è datato, hanno comprato un pacchetto e probabilmente non hanno la proprietà del dominio.

5. Cosa ti piace o non ti piace del tuo sito?

Prendi carta e penna. Dividi il foglio in due colonne e crea assieme al cliente una lista delle cose che ama e odia del suo attuale sito web. In questo modo puoi definire meglio quali elementi tenere, quali necessitano di un restyling e quali invece devono essere eliminati.

6. Cosa rende la tua azienda speciale?

Una volta compresa l’identità dell’azienda e cosa pensa il cliente del suo sito web, chiedigli che cosa rende la sua compagnia differente. Cosa li rende speciali? C’è un servizio o un prodotto che solo loro sanno fare? Fai in modo che il cliente ti venda la sua azienda, in modo che possa farlo a tua volta con la progettazione del sito.

7. Chi sono i tuoi competitors?

Parlando della situazione aziendale, non dimenticare di chiedere riguardo ai competitors. Chi si occupa delle stesse materie del tuo cliente? Perché si configura come un competitor? Studia i siti dei concorrenti, in modo da scoprire come rafforzare l’immagine del tuo cliente.

8. Puoi mostrarmi 3 siti che ti piacciono?

Chiedi al cliente di pensare a 3-5 siti che gli piacciono e di dirti il perché. Difficilmente risponderà a questa domanda su due piedi. Chiedigli di farlo con calma e di risponderti dopo qualche giorno, magari inserendo un paio di punti riguardo ai dettagli che più gli sono piaciuti.

9. Quali sono le funzionalità che dobbiamo avere per forza?

La maggior parte delle persone ha già in mente che cosa vorrebbe nel proprio sito. La risposta varierà molto da cliente a cliente. Potrebbe essere una cosa semplice (“deve funzionare sul mio telefono”) o qualcosa di più complesso ed elaborato (gradienti, parallasse…).

10. Avete già Analytics?

Comprendere le necessità dell’attuale utenza può aiutarci a comprendere quali siano gli obbiettivi del percorso progettuale. Le cose che il cliente ritiene importanti sono le stesse che vengono utilizzate/ricercate dagli utenti del sito? Studiare i risultati delle conversioni può permetterci di definire meglio il percorso da seguire.

11. Avete delle immagini?

Avete a disposizione delle foto, dei video o delle illustrazioni che possono essere utilizzate all’interno del progetto? Assicurati di controllare tutti i materiali, la loro risoluzione e come questi possono essere utilizzati nel progetto. A volte il cliente avrà tutto ciò che serve, mentre a volte ci sarà bisogno di creare contenuti o di affidarsi a servizi di stock images.

12. Avete una guida colore o una guida tipografica?

Volete utilizzare particolari colori o font? Quei colori o font saranno utilizzati anche sul sito?
Un nuovo sito viene solitamente creato in un periodo di rebranding. Devi essere sicuro di costruire un progetto aggiornato. Dovrai probabilmente cercare dei sostituti per le font che non possiedono una versione web.

13. Avete una guida di stile?

Il marchio di un’azienda è molto più dei colori e delle font. Se il cliente possiede una guida di stile, leggetela con attenzione. Potrebbe fornire valide informazioni riguardo allo stile che si richiede al progetto. A volte una guida di stile contiene un esempio di target per il marketing aziendale (permettendovi di risparmiare un passaggio).

14. Qual’è la vostra timeline?

Considerati i vostri impegni, potrebbe essere la domanda che vi farà rinunciare al progetto. Le aspettative del cliente sono allineate con ciò che potete proporre nel tempo stimato?
Si tratta di una timeline flessibile? Se la vostra tabella di marcia è troppo fitta potreste non essere in grado di gestire il progetto. Siate sicuri di cosa il cliente si aspetta e di come svolgere il vostro lavoro senza sacrificare la qualità di ciò che state facendo.

14. Farete dei cambi dopo il lancio?

Cosa succede una volta che il sito è nelle mani del cliente? Vorranno ricevere la formazione necessaria ad aggiungere contenuti? Il sito vivrà in modo indipendente? La risposta può definire come la struttura del sito verrà realizzata, particolarmente nel back-end. Può inoltre aiutarti a comprendere se il cliente necessita di un aiuto nella gestione. Preparare un sito in modo che il cliente possa utilizzarlo ti permetterà di avere ottimi feedback e magari anche un po’ di pubblicità. Ricorda che non stai costruendo un sito per te o per il tuo portfolio.

Il web design sta perdendo la sua anima?

Cosa porta un progettista come Noah Stokes (ex engineer per Apple, HP e web designer professionista) a urlare al mondo “I hate #RWD” (Io odio il Responsive Web Design)?

 

I web designer hanno sviluppato una dipendenza dai box e dalle griglie

Noah Stokes

 

Tutto è più regolare negli ultimi tempi. I siti web si assomigliano molto tra loro e le strutture sulle quali vengono costruiti i nuovi progetti sono spesso le stesse (es. Bootstrap). Non fraintendetemi, non sto incolpando i framework per questo, o le novità grafiche del Material Design, o i trend che sono nati in seguito alle varie evoluzioni iOS. Il vero problema non è certo lo strumento, no?

 

729db57071c0e080afc2544bec250e22

 

Non possiamo certo pensare che la causa di tutto sia il RWD. Cerchiamo di essere realisti. La navigazione della rete avviene oramai per la maggior parte attraverso smartphone e tablet. Google, l’anno scorso, ha inaugurato l’era del responsive web design (Mobilegeddon) penalizzando tutti i siti che non si sono adeguati al cambiamento. Combattere l’evoluzione non è mai stata una grande idea. Tuttavia ho come l’impressione che gli strumenti che abbiamo a disposizione siano così estesi da averci tolto ogni voglia di esplorare. Il desiderio di cercare nuove strade per la realizzazione di un prodotto davvero originale.

Abbiamo perso forse la capacità di sognare?

 

Si tratta di un adattamento naturale. La progettazione dei siti era sicuramente più semplice quando c’era da tenere conto di una sola larghezza fissa. Seguendo uno schema di lavoro abituale non è raro ritrovarsi a spezzettare il layout immaginando nella propria testa come realizzare i singoli blocchi e come apparirà il codice di ognuno di essi. Altrettanto comune è bloccarsi di fronte a dettagli che non ricadono così perfettamente nella struttura a cui siamo abituati. Bisogna cercare di pensare fuori dagli schemi. Il Responsive Web Design è il futuro, e alcuni di noi stanno iniziando solo adesso a metterci le mani. Non limitatevi a seguire gli schemi e aggiungete quel pizzico di creatività che serve per creare un contenuto unico.

 

ispirato a: Why web design is losing its soul

 

Tenere conto del daltonismo

Vediamo i colori nello stesso modo?

Guarda l’immagine qui sopra. Se vedi il numero 21, o se non vedi alcun numero, è probabile che tu soffra di una forma di daltonismo (con una percezione corretta dei colori dovresti vedere un 74). Si stima che 1 uomo su 12 (8%) e 1 donna su 200 siano affetti da una forma di daltonismo. Questa percentuale di popolazione è spesso ignorata quando si progettano siti o altri tipi di interfacce.

Cos’è il daltonismo?

Ci sono diversi tipi di daltonismo che si dividono ulteriormente per il livello di gravità. Anche se in rarissimi casi può essere vero, è un errore piuttosto comune quello di pensare che le persone affette da daltonismo vedano solo in bianco e nero (Acromatopsia). La maggior parte dei soggetti daltonici fatica nel distinguere le differenze tra sfumature e livelli di luminosità di determinati colori.

La condizione più comune è la difficoltà nel distinguere tra il verde e il rosso, che si divide in due tipologie. Le persone affette da Protanopia hanno una ridotta sensibilità alla luce rossa. Le tonalità di rosso, arancione e giallo tendono a diventare verdi e ad apparire meno saturate. I soggetti affetti invece da Deuteranopia hanno una ridotta sensibilità alla luce verde, dunque distinguono con difficoltà tonalità blu, gialle, viola, rosse e verdi.

Come tenere conto del problema nei nostri progetti

Anche se il daltonismo può causare grossi problemi agli utenti, è abbastanza semplice da combattere. Se sei al corrente del problema, sei già a metà strada.

1. Usa colori con molto contrasto

Anche le persone affette da Acromatopsia riescono a percepire il contrasto (ovvero la differenza tra il chiaro e lo scuro). Per essere sicuro che il sito sia leggibile, bisogna assicurarsi che i contenuti abbiano un buon contrasto con lo sfondo. Banalmente, un testo nero su sfondo bianco possiede un alto livello di contrasto.

contrast

Usiamo strumenti per il calcolo del contrasto per testare le combinazioni tra i colori. Questo strumento non richiede grosse spiegazioni. Un consiglio: Quando sottoponi i progetti ai vari test, usa il dispositivo più piccolo che possiedi in un contesto di scarsa luminosità. Cerca di ricreare il peggiore scenario possibile. Se dovessi progettare un’app per una sveglia vorresti che i tuoi utenti fossero in grado almeno di leggere l’ora.

2. Usa diverse sfumature piuttosto che diversi colori

shades

Uno schema monocromatico utilizza diverse sfumature dello stesso colore. Questa pratica riduce in maniera piuttosto efficace tutti i problemi riguardanti gli schemi cromatici e ci aiuta ad inserire facilmente contrasto nei nostri progetti. Uno schema monocromatico non deve essere necessariamente bianco e nero, utilizzare varie sfumature di blu può creare un progetto visibilmente piacevole senza ridurre la leggibilità.

3. Sperimenta il daltonismo durante la progettazione

tools

Ci sono diversi strumenti che possono simulare gli effetti del daltonismo, permettendoci di capire come la nostra interfaccia si comporta agli occhi di una persona con questo tipo di problemi. Photoshop ha un’opzione apposita, raggiungibile semplicemente attraverso il percorso: Visualizza > Imposta prova.

4. Scegli con cautela le combinazioni di colore

Sfortunatamente, come web designers non abbiamo sempre la possibilità di scegliere i colori da utilizzare nei nostri progetti. A volte siamo limitati dalle linee guida dei brand, ma quando possibile è saggio scegliere colori primari e secondari prima di finalizzare l’immagine di un brand. Ecco alcuni colori da evitare:

color-scheme

5. Usa texture al posto del colore

Nel progettare grafici e info-grafiche, considera l’utilizzo di texture o pattern per aiutare gli utenti a distinguere i colori. Ad esempio, nel grafico qui sotto, i colori sarebbero del tutto irriconoscibili per una persona affetta da Protanopia. Inserendo delle texture, il risultato cambia.

graph

6. Non utilizzare solamente il colore per veicolare un messaggio

Quando progetti elementi come forms e interfacce complesse, non dovresti utilizzare il solo colore come indicatore. Guarda i form qui sotto. Quello sulla sinistra indica con il colore rosso la presenza di errori e con il colore verde la buona riuscita dell’operazione. Una persona affetta da deuteranopia non riuscirebbe a distinguere la differenza tra questi due messaggi. Il miglior modo per evitare questo problema è quello di utilizzare delle icone (esempio a destra).

forms

 

La lezione più importante da imparare è che ogni dettaglio (seppur minimo) dei nostri progetti influenza il loro funzionamento. Quando possibile bisogna sempre cercare di utilizzare testi, icone, forme o texture per comunicare all’utente come utilizzare i nostri siti. Creare dei siti web che siano accessibili al 100% è essenziale, e dovrebbe essere parte di ogni processo progettuale.

Il design dei bottoni

L’attenzione al dettaglio è sicuramente un punto focale dei nostri progetti. Oggi discuteremo di alcune tecniche per progettare dei bottoni che i nostri utenti vogliano cliccare. Anche se si tratta di uno dei particolari più piccoli all’interno dei nostri siti, è certamente quello più importante. D’altronde come faremmo altrimenti ad indirizzare l’utente attraverso quel ciclo di azioni che vogliamo fargli compiere?

 

Deve sembrare toccabile

Sembra un’affermazione banale, ma spesso questa necessità viene ignorata. Gli utenti dovrebbero vedere un bottone e immediatamente pensare “voglio cliccarlo”.

Mentre (quasi) ogni dimensione è cliccabile sullo schermo di un PC, la dimensione e le spaziature di un tasto su un dispositivo mobile è una componente vitale. Mediamente la larghezza di un polpastrello va dagli 8 ai 10 millimetri. Una dimensione di un centimetro quadrato diventa quindi la minima dimensione ottimale sullo schermo di uno smartphone (o di un tablet).

Ci sono altri dettagli che possono invitare l’utente al click:

  • Un ombra appena visibile può dare l’idea che l’oggetto si trovi più vicino all’utente.
  • Un’abbondante spaziatura attorno al testo (o all’icona), rende il bottone più semplice da premere.
  • Il cambio di colore applicato durante il passaggio del mouse e durante il tocco, funge da feedback per l’utente.

 

Il colore è importante

Il colore di un bottone deve essere particolare. Si tratta del luogo migliore per sperimentare con i colori d’accento.

Il colore di un bottone dev’essere luminoso e attraente. Bottoni di colore giallo, blu o verde sono più semplici da individuare all’interno del layout. La scelta migliore per il colore di un bottone ricade sul colore complementare a quello che troviamo in maggior misura nel nostro sito. Non dimentichiamo però di assecondare i colori del brand. Per quanto un colore sia visibile all’interno del nostro progetto, deve accompagnare degnamente i colori della nostra palette.

 

La dimensione è ancora più importante

Fallo grande!

I bottoni devono attirare subito l’attenzione. Ma attenzione, c’è una sottilissima linea tra la dimensione perfetta e l’eccesso. Quando il bottone diventa l’unica cosa visibile all’interno del layout, è meglio rivederne le dimensioni.

 

Il posizionamento

Dove dovrei inserirlo? Esiste un posto che mi aiuti a generare più click? Nella maggior parte dei casi dovrebbe accompagnare il contenuto a cui fa da complemento:

  • Al termine di un form
  • Alla destra di una Call To Action
  • Nel fondo della pagina o dell schermo
  • Centrato al di sotto di un messaggio

Queste posizioni funzionano perché seguono l’associazione logica e il pattern di lettura utilizzato dalla maggior parte degli utenti.

 

Utilizza forme standard

Quando si tratta di bottoni ci sono forme che funzionano meglio di altre. Gli utenti che navigano i nostri siti sono più portati ad utilizzare strumenti immediatamente riconoscibili per la loro funzione. Si tratta di familiarità. Perciò utilizza sempre:

  1. Rettangoli: Questa è la forma base utilizzata dalla maggior parte dei web designer. Alcuni preferiscono utilizzare dei bordi arrotondati mentre altri tendono a mantenerne la forma. Si tratta di scelte stilistiche che non cambiano la eccessivamente la riconoscibilità della forma se assecondano l’estetica del progetto.
  2. Cerchi: Diventati popolari con il concept di Material Design. Funzionano bene per azioni standardizzate comunicabili con l’utilizzo di un’icona (es. social share).

 

Dì all’utente cosa deve fare

Ogni bottone (o quasi) dovrebbe includere un’istruzione testuale che dica esattamente all’utente cosa succederà dopo che lo avrà cliccato. L’ideale è utilizzare un linguaggio semplice e sintetico e ricorda, il primo messaggio che l’utente dovrà ricevere dopo aver cliccato dovrà confermare il successo dell’azione effettuata. Che stia inviando un form, facendo un acquisto o che stia semplicemente seguendo un link.

 

 

Un buon modo per capire come funzionano i tasti presenti sul proprio sito è quello di monitorare le azioni degli utenti con strumenti specifici. In base alle loro azioni possiamo capire come determinate forme, colori o testi influenzano i click degli utenti. Tutto dipende dai nostri visitatori. Se una grossa percentuale della nostra utenza visita il nostro sito con uno smartphone, dovremmo tenerne conto e modificare il nostro progetto per assecondare questa tendenza.

 

credits: designshack.net

Come scegliere il formato giusto per le tue immagini

JPEG, PNG e GIF. Alcuni web designer imparano quale formato utilizzare solamente dopo un po’ di esperienza e quasi nessuno capisce come queste estensioni funzionino davvero.

In questo articolo, illustreremo brevemente gli algoritmi di compressione utilizzati da ogni formato, in modo da capire come differenti approcci siano più o meno appropriati per tipi di immagini differenti.

Iniziamo da un vecchio amico…

 

JPEG

Joint Photographic Experts Group

Con i suoi 25 anni, lo standard ISO 10918 ha decisamente superato la prova del tempo. Ma come funziona? E per quali situazioni è più indicato?

La compressione JPEG divide l’immagine in blocchi da 8×8 pixel, e in seguito compie un calcolo piuttosto complesso. Converte i pixel di questi blocchi (liste di valori RGB assegnate ad ogni punto nello spazio) in coefficienti che li descrivono come onde. In termini tecnici, l’algoritmo di compressione JPEG traduce le informazioni di un’immagine in frequenze.

Questo significa che JPEG risulta ottimale nella compressione di immagini con molte sfumature di colore. Sostanzialmente, JPEG interpreta tutte le immagini come se fossero fotografie. Al contrario, però, il formato JPEG risulta terribile per la compressione di immagini con bordi netti o con texture definite.

 

JPEG

 

Per comprimere questo tipo di immagine in modo ottimale dobbiamo utilizzare un altro tipo di algoritmo:

 

GIF

Graphic Interchange Format

Nei primi giorni del web, se un’immagine non era JPEG, era sicuramente GIF.

Il formato GIF utilizza l’algoritmo di compressione LZW, molto più semplice della mate-magia introdotta da JPEG. Essenzialmente, l’algoritmo LZW scansiona i dati relativi all’immagine e genera degli shortcode (delle abbreviazioni utilizzate per richiamare codici più complessi) per quelle parti che si ripetono; LZW accorcia le ripetizioni. Questo vuol dire che il formato GIF è adatto a comprimere immagini con grandi aree di dati identici o ripetuti. Immagini con pochi colori e separazioni nette possono essere salvate in maniera efficiente e senza perdita di qualità grazie a questo formato.

Anche se si tratta di un formato piuttosto semplice, GIF possiede un paio di interessanti qualità: trasparenza (ma non semi-trasparenza) e animazione.

Purtroppo, GIF è un formato inadatto a comprimere immagini con un moderato numero di colori; infatti, GIF ha una limite di 256 colori. Convertire una immagine con più di 256 colori risulta in un effetto posterizzato dall’aspetto sporco e impreciso.

 

GIF

 

 

In breve, GIF e JPEG hanno una serie di pregi e di difetti per i quali si adattano in modo perfetto al web.

 

Ma alcuni contenziosi riguardanti il brevetto sull’algoritmo LZW hanno ispirato alcuni individui nella creazione di un nuovo formato di immagine lossless (senza perdita di qualità) per il web.

 

PNG

Portable Network Graphics

PNG eccelle in tutti i tipi di immagine in cui funziona il formato GIF, con dei vantaggi aggiuntivi:

  • Non è limitato a 256 colori
  • Trasparenza in canale alpha (un pixel può essere parzialmente trasparente, invece che interamente trasparente o interamente opaco).
  • Nella maggior parte dei casi, una compressione superiore

Questa immagine presa da Wikipedia mostra la capacita di PNG di comprimere un’immagine a colori con aree semitrasparenti.

 

PNG_transparency_demonstration

 

Come è possibile che PNG abbia un algoritmo di compressione più efficiente di GIF? Questo traguardo è ottenuto aggiungendo dei passaggi al procedimento.

Prima di tutto, l’algoritmo PNG cerca di ridurre i dati salvati, utilizzando i pixel che già conosce per prevedere quelli che non sono ancora stati letti. Il formato prevede cinque strategie di previsione diverse, ma sostanzialmente, PNG assume che i pixel vicini tra loro siano simili. Se questa assunzione risulta vera, PNG salva i dati immagazzinando la differenza tra la sua previsione e il valore effettivo (piccoli numeri occupano un minore spazio).

In secondo luogo, PNG elimina le ripetizioni permettendo all’immagine di riferirsi a sequenze di pixel individuate in precedenza (invece di immagazzinare lo stesso dato due volte) utilizzando un algoritmo chiamato LZ77.

Al termine dei 2 procedimenti appena esposti, PNG utilizza un metodo chiamato “codifica di Huffman” per ridurre i valori rimanenti al minimo indispensabile (anche JPEG utilizza questa codifica come ultimo passaggio nel suo algoritmo).

 

Per riassumere il concetto: PNG funzionerà sempre peggio di JPEG per quanto riguarda le fotografie, ma meglio di GIF in tutti gli altri casi. Utilizzate PNG quando dovete salvare immagini con bordi definiti, tinte piatte o pattern dettagliati.

 

Il servizio dei trasporti di Londra si rinnova

Il carattere tipografico usato su tutti i trasporti di Londra è diventato un’istituzione ma per la prima volta dopo 100 anni subirà un cambiamento. Ideato dalla collaborazione tra TfL (Transport for London) e Monotype, la nuova font sarà una riproposizione del marchio originale progettato da Edward Johnston nel 1916.

Anche se i londinesi passano una gran parte delle loro giornate in metropolitana sarà difficile per loro trovare subito le differenze. Lavorando attraverso i principi del progettista originale, Monotype ha potuto creare un marchio digitale che riesce a richiamare lo stile del suo creatore. Il risultato è Johnston100, di cui potete vedere un esempio qui sotto:

Johnston100

Jon Hunter, responsabile del design di TfL, spiega che la nuova font è stata creata per mantenere l’identità dell’azienda anche sulle nuove piattaforme.

“Data l’importanza che i social media hanno ottenuto, l’hashtags (#) e l’at (@) sono divenuti fondamentali e Johnston non disegnò mai questi caratteri ritenendoli non necessari”

Jon Hunter

 

Nadine Chahine, di Monotype, aggiunge:

Siamo stati in grado di sfruttare il trend attuale dei caratteri light ed eleganti, ma dato che siamo stati in grado di utilizzare le strutture originali, abbiamo mantenuto l’anima di questo carattere tipografico.

I pendolari inizieranno a vedere Johnston100 sui materiali stampati (mappe e posters). Sarà inoltre utilizzato per la segnaletica della nuova linea Elizabeth che aprirà nel 2018.

Johnston100-Segnaletica

Per maggiori informazioni: monotype.com

Website analysis: GOV.UK

Visita il sito Gov.uk

Progettato dal Government Digital Service nel 2013, questo sito raccoglie tutti i siti governativi inglesi all’interno di un unico portale. Vinse nel 2013 il Design of the Year award battendo sorprendentemente 97 altri progetti.

I giudici lo elessero vincitore all’unanimità tra un grande numero di progetti con argomenti e finalità completamente diversi (furniture design, architettura, moda…).

“Migliora la vita di milioni di persone semplificando delle procedure noiose. Dall’ottenere un nuovo passaporto al pagare le tasse.”

Deyan Sudjic, direttore del Design Museum di Londra

“Un vincitore indiscusso. Questo sito definisce uno standard di valutazione per tutti i siti governativi.”

Griff Rhys Jones, giudice Design of the Year 2013

Cosa rende questo progetto così apprezzato? Agli occhi di un profano questo progetto non sembrerà un lavoro degno di un premio così ambito, tuttavia la perizia e l’ordine nella composizione valgono la pena di essere analizzati.

 

Una struttura modulare consistente

GOV.UK_grid

La struttura del sito è essenziale. Questa ci permette di navigare il contenuto con facilità oppure determina degli ostacoli alla comprensione. Quello che possiamo osservare in un sito come Gov.uk è l’estrema coerenza compositiva determinata dalla sua struttura modulare. Questa scelta permette al sito di essere perfettamente riconoscibile sia su PC che su dispositivi mobili.

Come possiamo vedere la classica griglia a dodici colonne è stata semplificata ulteriormente proponendo due scenari possibili di layout:

  • 3 colonne. Tre colonne di uguale larghezza.
  • 2 colonne. Una colonna da 1/3 e una colonna da 2/3 della larghezza della pagina.

Possiamo inoltre vedere come i contenuti del sito siano facilmente distinguibili tra di loro. Come abbiamo già avuto modo di spiegare in un precedente articolo le convenzioni sono alla base di una buona User Experience (UX). A tal proposito Gov.uk presenta gli elementi del proprio portale in modo elementare senza variare la struttura dei suoi elementi chiave.

Ad esempio, i collegamenti sono identificati da una sottolineatura e sono dotati, non solo di un effetto on-hover, ma anche di una visualizzazione visited, che ci permette (grazie all’uso di un colore differente) di riconoscere le pagine che abbiamo già visitato. Tutto ciò può sembrare banale (si tratta di funzionalità presenti da più di dieci anni) ma l’utilizzo di questo tipo di accorgimento non lo è, soprattutto dopo l’ascesa dei one-page layout.

 

Dov’è la navigazione?

govuk_nav

Ai meno pratici sarà saltato subito all’occhio che questo sito non contiene una navigazione principale. Questo dettaglio è forse il più impressionante. Come possiamo navigare all’interno di un sito senza paletti, senza una guida? Soprattutto se pensiamo all’impressionante mole di contenuti che un sito web simile può contenere. Innanzitutto dobbiamo analizzare la componente quantitativa del sito ricordando che Gov.uk è un portale governativo. Tutti noi conosciamo le difficoltà che si possono incontrare nella ricerca della documentazione su di un sito governativo italiano. Indubbiamente stiamo parlando di esperienze completamente diverse in quanto sin da subito il sito ci viene incontro presentandoci un campo di ricerca affiancato da una lista delle pagine più ricercate.

Gov.uk non necessita di un sentiero prestabilito affinché l’utente riesca a trovare ciò che vuole. La quantità di contenuti non è un punto debole per questo sito.

 

La ricerca della documentazione

Un altro punto a favore di Gov.uk è il suo archivio. Cliccando su una qualsiasi tematica presente in homepage veniamo introdotti ad una vera e propria biblioteca di contenuti che grazie ad una struttura categorizzata su due livelli ci permette di trovare facilmente ciò che cerchiamo.

govuk

Sarebbe impensabile radunare tutte le informazioni qui presenti attraverso la navigazione principale. Inoltre un layout di questo tipo permette all’utente di impararne l’utilizzo attraverso il classico procedimento di trial and error senza però dover ricaricare la pagina (Ajax). Questo genere di accorgimenti riduce notevolmente le tempistiche della ricerca, migliorando l’esperienza dell’utente in modo sensibile.

 

Conclusione

Abbiamo analizzato solo alcune delle qualità di gov.uk ma ora le ragioni del suo successo risultano molto più chiare. Si tratta di un lavoro di semplificazione incredibilmente complesso. Un esempio da tenere a mente per tutti i progettisti web a riprova che il buon design è invisibile.

25 Regole tipografiche che tutti dovrebbero conoscere

L’arte della tipografia è la base del lavoro di ogni graphic designer e il suo corretto utilizzo può senza dubbio dare una marcia in più ai nostri progetti. Ci sono ottimi libri, scritti da autori ben più esperti del sottoscritto, che affrontano dettagliatamente l’argomento:

  • Ellen Lupton – Thinking with type (vedi su Amazon)
  • Robert Bringhurst – Elementi dello stile tipografico (vedi su Amazon)
  • e molti altri ancora…

Questa enormità di conoscenze può rappresentare un muro per i designer alle prime armi o per chi invece, munito di minore esperienza, vuole solo rendere i propri documenti più eleganti e leggibili ma sono sicuro che con questo articolo riuscirai a migliorare la qualità dei tuoi documenti.

 

Scegliere la font corretta

 

1. Non utilizzare font sfarzose o estrose

La scelta di una font non deve essere condizionata dal proprio gusto estetico ma dall’attinenza con il tema del documento. Se non si hanno le conoscenze necessarie per scegliere una font appropriata è preferibile scegliere delle soluzioni semplici ed evitare decorazioni inutili.

2. Trajan Pro non è una font sfarzosa né estrosa

trajan

Prendiamo come esempio Trajan Pro ma possiamo estendere il discorso a molte altre famiglie di caratteri. Ogni font necessita di un utilizzo corretto. Nel caso in oggetto abbiamo una font classica ed elegante ma decisamente non funzionale per testi lunghi. Perché? I caratteri incisi, di cui Trajan Pro fa parte, si rifanno ai testi greco latini tipicamente visibili su colonne e templi. Data la complessità nella lavorazione i caratteri di questa famiglia sono esclusivamente maiuscoli. Studi più recenti sulla leggibilità hanno dimostrato che un lungo testo scritto in maiuscolo non può essere letto in maniera scorrevole.

3. Eliminate Comic Sans dai vostri lavori

Sul serio. Fatelo.

4. Non utilizzare le font di default è una cavolata

times

Times (New Roman) e Helvetica sono tra le font più famose nella storia della tipografia. La bellezza di un carattere tipografico non dipende dal carattere in se ma da come lo si utilizza. Meglio sembrare banali o scontati che impaginare un testo illeggibile o con un cattivo aspetto.

 

Mischiare le font

 

5. Non usare più di 2 font diverse

mix-fonts

È una regola generale di quasi tutti i graphic designer (me compreso). Bisogna sempre cercare di limitarsi a 2 famiglie di font. Generalmente all’interno delle famiglie di caratteri ci sono abbastanza varianti di peso e/o stile da poter soddisfare qualsiasi tipo di variazione. E poi, i patchwork non piacciono a nessuno, vero?

6. Crea del contrasto tra le due font che hai scelto

contrast-fonts

Normalmente si tende a scegliere un carattere graziato e un carattere lineare per la composizione di documenti. Questo comportamento serve a mantenere un certo contrasto tra i caratteri, inoltre utilizzare due caratteri simili dà alla composizione un look piuttosto sciatto

7. Ma controlla che l’altezza della x sia la stessa

L’altezza della x è l’altezza delle lettere minuscole misurata dalla loro linea di base. Bisogna scegliere font con una altezza della x simile. Questo tipo di accorgimento serve a mantenere costante il livello di grigio di un paragrafo rendendo la lettura più fluida.

 

Impostare il testo

 

8. Corpo carattere

I paragrafi di testo utilizzati sul web dovrebbero essere di almeno 13px per agevolare la lettura mentre su carta stampata non andare al di sotto degli 11pt (se non stai creando dei biglietti da visita).

9. Scegli con cura la lunghezza delle righe

Cerca di mantenere la lunghezza delle righe tra le 45 e le 75 battute. 66 è reputata come la cifra ideale. In generale, per aiutare la lettura, non creare righe di testo troppo lunghe (o troppo corte).

10. Scegli l’interlinea basandoti sulla grandezza del tuo testo

lead

Per avere un testo bilanciato, gli spazi vuoti tra le righe dovrebbero essere circa il 150% dell’altezza della x. Per semplificarci la vita, utilizza un’interlinea che sia almeno il 125% del corpo carattere.

 

I paragrafi

 

11. Bandiera con allineamento sinistro

flush-left

Se non ti senti a tuo agio nella spaziatura delle parole — non giustificare i testi. Allineali a sinistra. Questa impostazione è abbastanza buona per la lettura perché tende a guidare l’occhio verso le righe successive. Puoi provare a giustificare il testo se hai più di 60 caratteri per riga, ma ricorda di attivare la sillabazione. Cerca inoltre di evitare che ci siano più di 3 righe tronche di seguito.

12. Evitare la sillabazione

La sillabazione dovrebbe essere utilizzata solo per i testi giustificati. Prova ad utilizzare un punto di sospensione o riduci leggermente la spaziatura tra le lettere. Se il testo presenta troppe righe tronche riconsidera il corpo carattere o la misura delle linee di testo. Disattiva la sillabazione per i testi a bandiera con allineamento a sinistra.

13. Quando non indentare i testi

Non indentare il testo se la riga che lo precede è un titolo, un sottotitolo o utilizzi una linea vuota tra i paragrafi. La misura ideale per l’indentazione è pari all’interlinea.

14. Punteggiatura sospesa

Se utilizzi la punteggiatura sospesa all’inizio di una riga ( ” ” ), posizionala all’esterno della colonna di testo. Si tratta di una scelta più elegante e gradevole alla vista.

15. Vedove e orfani

widows

Una vedova è una singola parola o una linea di testo molto breve al termine di una paragrafo. Un orfano è una vedova che appare sulla cima di una nuova colonna o di una pagina. Evitale il più possibile. Riduci la spaziatura tra le parole o riconsidera il corpo carattere. Questo tipo di errore tipografico è immediatamente visibile e molto sgradevole.

16. Non abusare della spaziatura tra le parole

Premere invio è sufficiente ad iniziare una nuova linea di testo. Non è difficile.

 

Parole

 

17. Kerning o Crenatura

Se non sei un designer esperto è meglio non giocare con il fuoco. In sostanza il kerning è la riduzione della distanza tra i singoli caratteri. Si tratta di un’impostazione piuttosto delicata in quanto un kerning errato può variare la lettura delle parole in modo considerevole quindi lascia che ci pensi il software.

18. Tracking

Il tracking è l’aumento della distanza tra i caratteri. Per i titoli è buona norma aumentarlo proporzionalmente.

19. Enfatizzare le parole

emphasis

Riguardo a questo argomento, non usare mai il maiuscolo per enfatizzare le parole. Utilizza il grassetto (bold) della font che stai usando.

20. Non aumentare il tracking dei testi minuscoli

space-lowercase

Questa è una regola da tenere bene a mente. Le spaziature tra i caratteri sono studiate nei minimi dettagli da professionisti type designers. Esatto, ci sono persone che si guadagnano il pane disegnando i caratteri che stai vedendo sul tuo schermo, quindi, rendi loro giustizia e lascia che le loro font rimangano leggibili.

21. Aumenta il tracking dei testi maiuscoli

I testi maiuscoli al contrario necessitano di un tracking aggiuntivo per poter essere letti in modo più scorrevole. Il 10% è più che sufficiente.

22. Non scrivere lunghi testi in maiuscolo

Non usare il maiuscolo per testi più lunghi di una riga. Abbi pietà di chi legge i tuoi documenti.

23. Ignora il maiuscoletto

Se non hai una serie di glifi per il maiuscoletto (o small caps), o se non hai la minima idea di cosa sia, ignoralo del tutto.

 

Lettere

 

24. Non modificare la larghezza delle lettere

text-width

Ricordi il discorso sui type designers? Bene, tienilo a mente.

 

Numeri

 

25. Scrivi i numeri

Per una questione di eleganza, è preferibile scrivere i numeri in lettere e non in cifre, anche se per le date se ne accetta universalmente l’utilizzo.

 

 

Credits: medium

6 Web Design Trend del 2015

Come dimenticare le GIF degli anni ’90, o la più recente passione per il Flat Design. Recentemente si parla molto di Responsive Design e del suo ruolo vitale dopo il cosiddetto Mobilegeddon di Google. In questo articolo osserveremo i trend più popolari di quest’anno e dell’anno a venire.

1. Elementi comuni

Una delle conseguenze del Responsive Design è quella di rendere i siti molto simili tra loro. Comunque, la colpa non è unicamente di questo nuovo metodo di progettazione. L’ascesa di WordPress da semplice piattaforma di blogging a CMS per la costruzione di siti web ha contribuito a questa enorme conformità.

1

Ma avere un aspetto simile non è necessariamente un difetto. Abbiamo cambiato il modo in cui usufruiamo della rete e abbiamo dato vita a delle chiavi di lettura comuni. Come già discusso in un nostro precedente articolo i design pattern ci aiutano a scandire meglio i contenuti di una pagina web tuttavia l’evoluzione avuta nello studio della User Interface lascia poco spazio all’innovazione di questi schemi. In breve, un modulo di login sarà sempre un modulo di login e funzionerà sempre nel medesimo modo. Non ci sono davvero delle reali ragioni per reinventare questi meccanismi. I Design patterns devono accompagnare l’utente nella navigazione fornendo un’esperienza naturale.

Ecco alcuni pattern che dovrebbero risultarvi familiari:

  • L’hamburger menu. Anche se alcuni criticano l’uso di questo pattern, non c’è dubbio che il suo vasto utilizzo renda la sua funzione immediatamente riconoscibile. menu
  • I form di registrazione. Ogni volta che cerchiamo di registrarci ad un sito possiamo trovare questo pattern. Potrebbe esserci un form da compilare, o un bottone per la registrazione attraverso i social network. Inoltre ultimamente i form di registrazione sono stati spezzati in più passaggi per ridurre il carico di informazioni percepito dall’utente.facebook
  • Il long scroll. Precedentemente evitato, ora, grazie all’introduzione della navigazione su dispositivi mobile, questo metodo viene utilizzato molto da quei siti che fanno dello storytelling il loro cavallo di battaglia. I siti che fanno uso di questa tecnica spesso inseriscono una navigazione per rompere lo scroll in sezioni distinte.

    HcfLR

    http://www.dangersoffracking.com/

  • Il card layout. Introdotta per la prima volta da Pinterest, le cosiddette cards sono ora ovunque nel web grazie al metodo in cui raggruppano le informazioni. Ogni carta rappresenta un argomento e, data la loro forma rettangolare, risulta più facile ordinarle in modo da soddisfare i requisiti dei diversi dispositivi.pin
  • Le hero images. Le immagini in alta definizione sono sempre state un ottimo metodo per catturare l’attenzione dell’osservatore. Grazie all’avanzamento nelle tecnologie di connessione e alla conseguente accelerazione delle prestazioni, gli utenti non sono più obbligati ad attendere i caricamenti di un tempo.bigdreams-hero-1_ss1-1600x688

Per studiare meglio l’argomento, consigliamo questo ebook gratuito Web Design Trends 2015 and 2016.

 

2. Animazioni

Le animazioni vengono utilizzate sempre di più per migliorare lo storytelling di un sito. Comunque, non è il caso di usare animazioni ovunque. Bisogna sempre considerare se il loro utilizzo approfondisce la comunicazione di un discorso prima di farne uso. Le animazioni possono essere divise in 2 gruppi distinti:

  • Animazioni di grandi dimensioni. Utilizzate come strumento di interazione. Hanno molto impatto sull’utente ed includono effetti come il parallasse o le notifiche pop-up.
  • Animazioni di piccole dimensioni. Includono gli spinner, gli effetti on hover e le barre di caricamento. Ovvero tutti quegli effetti che non richiedono un input da parte dell’utente.

Di seguito descriveremo 7 esempi di animazione utilizzate ordinariamente dai siti web:

  • Animazioni di caricamento. Sono utilizzate per intrattenere l’utente durante l’attesa. Questo tipo di animazione è popolare per il flat design, per le pagine di portfolio e per i one page layout.6-web-design-trends-awwwards-image14
  • Navigazione e menu (scrolling). Le navigazioni “a scomparsa” sono diventate sempre più popolari, specialmente perché possono essere utilizzate per risparmiare spazio sullo schermo.
  • Animazioni on hover. Questi effetti rendono più intuitivo un sito perché sono immediatamente visibili. Basta passare il cursore del mouse sopra di essi.risen_hover
  • Gallerie e slideshow. Sono un metodo efficace per mostrare più immagini senza sovraccaricare l’attenzione dell’utente. Sono particolarmente indicati per siti di fotografia, presentazioni di prodotti o per un portfolio.
  • Animazioni in movimento. I nostri occhi sono naturalmente attratti dal movimento, il che lo rende lo strumento migliore per attrarre l’attenzione dell’utente. Il movimento può anche aiutarci nella gerarchia visiva, aumentando l’interesse verso form, call to action e menu.6-web-design-trends-awwwards-image07
  • Scrolling. Le animazioni on scroll permettono un maggiore controllo da parte dell’utente che può infatti determinarne la velocità.6-web-design-trends-awwwards-image08
  • Animazioni e video in background. Un semplice sfondo animato può aggiungere visibilità allo schermo, ma dovrebbe essere usato con moderazione dato che può distrarre facilmente l’attenzione dell’utente. Il metodo migliore è quello di lavorare su sezioni individuali o di creare un movimento lieve.

 

3. Micro-interazioni

Le micro-interazioni ci circondano e diventano parte della nostra quotidianità, dallo spegnere la sveglia sul vostro telefono cellulare al premere like sulla foto di un gatto su Facebook.

Ognuna di queste azioni è fatta senza impegno. Dal momento in cui ci si sveglia e si spegne la sveglia siamo accompagnati in una User Interface, e questo modo di agire è sempre più radicato nella nostra vita. Le micro-interazioni:

  • Comunicano uno stato.
  • Mostrano il risultato di un’azione.
  • Aiutano l’utente nella manipolazione di qualcosa.

Agiscono rimanendo quasi del tutto invisibili. Questo però non ci deve far cadere nell’errore di mantenere questo tipo di interazione troppo semplice. Il risultato di un pensiero superficiale potrebbe rendere la percezione di questi eventi superficiale e inanimata. Invece, nell’ottica di un’ottimizzazione del nostro lavoro, questo tipo di interazione deve essere reso sempre più sensibile e umano.

 

4. Il Material Design: un’alternativa al Flat Design

L’anno scorso Google ha lanciato il suo nuovo linguaggio stilistico: Material Design. Utilizza effetti d’ombra che permettono la percezione di movimento e di profondità in modo da creare dei progetti più realistici.

3

L’obiettivo del Material Design è quello di creare un design moderno concentrato sulla User Experience (UX). Anche se l’estetica del design di Google ha dei detrattori, è stato comunque apprezzato in quanto rivoluzionario.

Con un look minimale, ha molto in comune con un altro trend attualmente in crescita, il Flat Design. Material Design però utilizza la profondità e gli effetti d’ombra per creare un’effetto più naturale. Prima d’ora, abbiamo visto come la maggior parte dei progetti di Material Design si limitino alla produzione di applicazioni. Google però ha annunciato in Luglio lo sviluppo di Material Design Lite, una versione più adatta allo sviluppo di siti. Material Design Lite non utilizza particolari framework perciò i designers possono utilizzare un repertorio piuttosto vasto per la creazione dei propri siti. Inoltre è molto leggero per quanto riguarda il codice.

 

5. Il Responsive Design

4

Divenuto molto popolare negli ultimi anni grazie all’aumento della popolarità dell’internet mobile, possiamo dire con certezza che questa pratica non verrà abbandonata molto presto, dato che rappresenta il metodo più semplice e conveniente per costruire siti compatibili con i vari dispositivi.

Le performance non sono importanti solo per l’esperienza dell’utente, ma anche per l’indicizzazione del proprio sito. Soprattutto dopo il Mobile Friendly update, rilasciato nell’Aprile di quest’anno. Il Responsive Design è ottimale per layout minimali, data la necessità di mantenere leggerezza nella composizione dei contenuti. Questa pratica viene inoltre avvantaggiata dall’utilizzo del Card Layout, di cui abbiamo parlato al primo punto, data la sua scalabilità.

Il Responsive Design sta diventando sempre meno un trend e sempre più un elemento comune del web design e negli ultimi tempi i progettisti stanno studiando tecniche per rendere l’esperienza più rapida.

 

6. Il Flat Design non sparirà tanto facilmente

Il Flat Design è in giro da un po’ ed è ottimale nella creazione di layout minimali e moderni come nel caso del Responsive Design.

Flat design vector illustration concept of computer and connected mobile devices with links of transmission information on various data storages and cloud computing service. Isolated on stylish colored background.

Procedendo su questa strada, saremo sicuramente partecipi di alcuni cambiamenti nei trend:

  • Ombre. Aggiungono profondità al Flat Design.
  • Schemi di colore vibranti. I colori utilizzati stanno diventando più forti e saturati.
  • Tipografia semplice. La semplicità tipografica agevola la leggibilità dei testi e quindi la fruibilità di un sito.
  • Ghost buttons. Sono funzionali ma non distraggono l’utente dai contenuti del sito.
  • Minimalismo. La riduzione degli elementi superflui per sottolineare l’importanza dei concetti di fondo.

 

Un’ultima considerazione

Non bisogna mai seguire questi consigli perché sono i più utilizzati. I trends rappresentano delle tecniche popolari, certamente, ma bisogna essere sicuri che dal loro utilizzo scaturisca un vantaggio per l’utente. Per esempio, un sito e-commerce potrebbe non funzionare al meglio come One Page Layout.

Si tratta di considerare queste tecniche come degli strumenti e non come delle linee guida. Scegliete sempre le tecniche più giuste per il vostro caso.

 

Credits: awwwards