Nel processo di progettazione la prima fase serve ad individuare i punti focali dei messaggi da comunicare: questo per poi affidare al design il compito di evidenziare priorità e allo stesso tempo non far perdere contenuti che potrebbero comunque essere di interesse all’utente. L’analisi dei messaggi da comunicare avviene percorrendo due strade: un’intelligente benchmark e l’ideazione di funzionalità per l’utente (ad esempio valutare una navigazione tematica, la possibilità di filtrare argomenti).

L’analisi ci porta a riflettere sulla struttura e sui contenuti: è qui che si valuta se è necessario un piano editoriale e si definisce la strategia di marketing. In base alla tipologia di contenuti si impostano messaggi e tono della comunicazione: parte di questi saranno validi anche grazie al supporto grafico. L’utente che visita il sito deve ritrovarsi in un ambiente confortevole, intuitivo. Lo studio dell’interfaccia e della user experience è strettamente legato alla strada più breve ed evidente in cui vogliamo indirizzare l’utente. Questo studio è molto delicato poiché le esigenze visive e di programmazione – pensiamo ad un sito che debba adattare i contenuti e i messaggi su tutti i devices – sono varie e complesse. La struttura del sito, a prescindere dall’aspetto grafico finale, nasce dalla definizione dei punti chiave delle funzionalità: in questa fase è necessario per identificare i messaggi comunicativi e per il corretto sviluppo tecnico.
Ecco alcune riflessioni e guide (in inglese):
Structuring Your Workflow for Responsive Web Design
The Elements Of The Mobile User Experience
Typographic Design Patterns And Current Practices (2013 Edition)

La grafica è al servizio delle funzionalità e del contenuto. Attraverso la disposizione degli elementi nella pagina, con un utilizzo armonico di font, immagini, allineamenti portiamo alla luce il progetto comunicativo. Solo in questa fase è possibile rivalutare lo spazio e l’evidenza dei messaggi che abbiamo definito nella struttura, ed è qui che si può aggiustare il tiro. Anche pensando a tipologie di siti molto differenti tra loro rimangono degli elementi comuni: il logo, un’area di evidenza grafica (immagini che esaltino il messaggio e che portino agli approfondimenti), menu di navigazione snello ed intuitivo, area contenuti, funzionalità correlate.
Qualche esempio di come la grafica e il codice siano sempre più correlati (in inglese):
Techniques for responsive typography
SVG drawing animation
Contrast rebellion

Lo sviluppo tecnico è una fase costruttiva concreta della struttura e delle funzionalità. Passiamo dalla scelta di un linguaggio di programmazione, all’uso di un determinato CMS, dalle potenzialità del database alle proprietà dei CSS: tutte le risorse si concentrano per trasformare il codice in un prodotto usabile e definito per essere poi facilmente utilizzato dagli utenti.
Qualche spunto per capire cosa si può ottenere sfuttando le potenzialità del codice(in inglese):
Getting Started with the Sass Preprocessor
Responsive Images Problems and Solutions

La fase di test, spesso purtroppo con tempistiche ridotte, viene effettuata per valutare l’impatto tecnico e grafico, la user experience e la fruibilità dei contenuti e più in generale come verifica di tutta la complessità. Si misurano tempi di caricamento, parametri, performance prima della pubblicazione: nel caso si sfruttano le informazioni per migliorare sensibilmente l’intero sito.
Vediamo qualche link a riguardo (in inglese):
Website Testing Techniques
How to Test Your Site’s Performance

Spiegare tutti i passaggi e le fasi della progettazione è davvero difficile: ognuna di queste richiede attenzione e meticolosità. Su ogni passaggio in realtà ci si sofferma, si studia, ci si guarda intorno, si prova, si impara, si rivaluta, si definisce e infine si decide quale strada è migliore da percorrere.
Volutamente, proprio per la complessità che contraddistingue creare e seguire un sito web, ho omesso l’approfondimento di alcuni argomenti fondamentali come ricerche di marketing, accessibilità, seo, analisi post-pubblicazione, social network: ognuno meriterebbe uno spazio dedicato.

Il mio consiglio, rimasto intatto negli anni, è uno solo: essere curiosi e guardare avanti, aggiornarsi costantemente. Sta a noi poi voler sfruttare la tecnologia e metterla al servizio degli utenti presentando un prodotto valido e intelligente.