Strumenti per progettare, realizzare e testare un sito web

Un universo di applicazioni web-based per condividere, semplificare e accelerare ogni fase del web design.

Potrebbe non essere facile mettere tutto insieme: ispirazione, progetto e realizzazione.
Il disegno, la messa in opera, le attività di test e i riscontri degli utenti, fanno parte del processo di realizzazione di un sito web: ogni fase ha i suoi tempi e questi potrebbero dilatarsi all’infinito se non ci fosse un universo intero di piccole applicazioni web-based, nate apposta per condividere, semplificare e accelerare ogni fase. Seguici e scopri come poche e semplici applicazioni potrebbero cambiarti la vita!

Raccogliere ispirazioni

Qualcuno lo chiama il metodo Vichingo, ovvero saccheggiare il web per cercare ispirazioni e finire per copiare insensatamente il lavoro di altri. Questo approccio è sbagliato, non solo perchè scorretto, ma perchè la raccolta delle ispirazioni ha un altro obiettivo nel processo di realizzazione: identificare un contesto (visual landscape) e stili di uso frequente (design pattern) per accendere la miccia che porterà, sulla carta o sul pc, il tuo progetto.
Per non cominciare a perdere tempo inutilmente su tutto il web alla ricerca di una lanterna magica, esiste una risorsa, che si presenta proprio come "raccolta organizzata di interfacce web per ispirazione e idee": si tratta di Patterntap. I suoi autori la definiscono "una galleria alternativa di CSS", sicuramente si presenta come uno strumento utilissimo per organizzare stili ed esempi di interfaccia, con un sistema di filtri per per tag o collezione. Ti consiglio intanto questa risorsa per realizzare un sito web, se proprio non ne hai un’idea..

Il progetto: carta, pc oppure tutte e due insieme?

Se il classico album di carta ti sembra un vestito troppo vecchio da indossare, allora dovresti dare un’occhiata al numero di strumenti che stanno emergendo per mettere insieme ispirazioni e nuovi disegni, direttamente sul web piuttosto che sulla carta: gimmebar.com e vizua.li.
Se invece appartieni alla specie di web designer che preferiscono la vecchia e inossidabile carta, connectasketch.com è uno strumento che puoi utilizzare per caricare i tuoi schizzi, creare collegamenti tra di loro e realizzare velocemente e facilmente prototipi a bassa fedeltà.
Infine, ma non per ultima, un’applicazione a pagamento (la tariffa base è comunque di 9 dollari al mese): gomockingbird.com. Questo browser-based tool permette di assemblare rapidamente mockups (modelli dimostrativi), utilizzando elementi predefiniti di interfaccia (blocchi, liste, elementi multimediali, etc.) e condividerli con collaboratori e committenti.

Realizzazione e messa in opera

In questa fase sono necessari strumenti per:

1) Sviluppare un sistema di griglia (grid system), ovvero la spina dorsale del disegno.
Se non hai sempre una calcolatrice al tuo fianco oppure un foglio di carta millimetrata, puoi comporre comodamente un layout fisso oppure fluido (ma in una proporzione di 960px), utilizzando 960 GS. Puoi testare online diverse soluzioni, inserendo il numero, la larghezza e la distanza tra le colone, e scaricare il file CSS completo.

2) Scegliere caratteri e tipografia.
Non è più necessario rimbalzare su photoshop per testare il tipo di font e le sue dimensioni, grazie anche alle nuove specifiche di CSS3, Typecast ha creato un’applicazione su browser per la resa immediata del font scelto: typecastapp.com.

3) Collocare segnaposti per immagini e contenuto multimediale.
Nella realizzazione di un sito web, non esiste parte più estenuante quanto l’attesa di immagini e materiale definitivo dal committente oppure dall’agenzia che dovrebbe occuparsene… Bene, se il tempo non è un buon amico, cominciate con il collocare blocchi segnaposto (come al ristorante).
Placehold.it è in grado – con un meccanismo, forse non dannatamente intuitivo – di farvi generare direttamente online, immagini segnaposto in formato .jpg, .gif e .png. Se oltre al colore, avete anche l’esigenza di mostrare fotografie vere e proprie, per i più arditi e con qualche nozione base di JQuery, consiglio invece flickrbomb.

Test e feedback utenti
Non esistono super-eroi (almeno in questo universo) e anche il designer più stagionato incontra problemi, quando il suo progetto non si visualizza come dovrebbe… Il primo scalo deve essere quello di assicurarsi di utilizzare un valido HTML e CSS.
Con HTML5 e CSS3 le strade sono un po’ più strette, ma ci si può giostrare tra validazioni classiche (HTML 5 e CSS 2.1 Validator) e alcune più innovative per affinare gli stili CSS3 (Mozilla Css-usage addon e CSS3 Generator).

Giunti alla fine del percorso non resta che ricevere l’approvazione finale: quanti collaboratori, committenti e utenti sono coinvolti in questa fase? Se per vostra fortuna, o sfortuna, i primi due si possono anche contare sulla dita di una mano, tutti si augurano (questo è il web, baby!) che ci saranno centinaia, se non migliaia o milioni di utenti da soddisfare! Allora è il momento del beta-test: ovvero condividere l’intero progetto e avviare uno scambio di appunti, note e files fino all’approvazione firmata: per questo consigliamo Onotate. Una valida applicazione per pianificare, discutere, ridiscutere e soprattutto concludere un progetto di sito web. Non è un software gratuito, ma lo si può provare per 30 giorni.

Per approfondire e conoscere tutti gli aspetti del web design scopri tutti i dettagli dei nostri corsi.