Il dibattito: è possibile sviluppare la bozza di un sito direttamente nel browser?

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Il dibattito: è possibile sviluppare la bozza di un sito direttamente nel browser?"

Vittore Fulvio Borrelli
5 anni fa
Visualizzazioni

1 Il dibattito: è possibile sviluppare la bozza di un sito direttamente nel browser? YIW è anche un luogo di confronto e di crescita professionale e individuale per cui, quando possibile, ci fa piacere coinvolgervi in alcuni dibattiti che nascono (fuori e dentro la redazione) e invitarvi a dire la vostra sull argomento. La controversia di oggi riguarda un interessante - e allo stesso tempo sovversivo - articolo di Meagan Fisher su 24ways.org (per chi mastica poco bene l inglese è disponibile anche la traduzione in italiano di html.it) in cui si inneggia, letteralmente, alla morte di Photoshop a favore di un mockup realizzato direttamente nel browser. In sintesi, l articolo invita a progettare un sito senza prima realizzarne la classica bozza estetica con un software di grafica (nel caso specifico Adobe Photoshop) perché cito testualmente Photoshop ha un interfaccia poco usabile, tende a crashare nei momenti più delicati e come tutti sanno, ha anche notevoli problemi con il rendering del testo. Ma lo svantaggio più grande sembra essere il fatto che, mettendo il cliente di fronte al semplice design di quello che sarà il suo sito, egli non avrebbe concezione delle reali interazioni dello stesso (come i vari javascript, o gli effetti sui link) ma si limiterebbe ad accettare un immagine statica che rappresenta solo in parte le potenzialità reali che avrà il sito una volta messo online. Va da sé che questo articolo ci lascia un po perplessi sui limiti di questa nuova metodologia di lavoro: vediamo insieme quali sono. Lavorare con Photoshop può essere controproducente poiché tende a crashare nei momenti cruciali, ha un interfaccia poco usabile e ha anche dei problemi con il rendering del testo. Questa simpatica intervista su helikopterdesign, che aveva per oggetto cosa ritieni essenziale per la realizzazione di un sito web ha rivelato che, su un campione di 25 designer (alcuni dei quali decisamente autorevoli) una buona parte utilizza Adobe Photoshop durante la fase di progettazione grafica del sito (alcuni preferiscono Fireworks e altri hanno scelto come elementi essenziali altri tools). Personalmente lavoro con Photoshop (versione cs3) diverse ore al giorno e mi sono resa conto che, dopo un po di aggiornamenti, Adobe ha reso la versione finalmente stabile: da più di un anno questa versione non crasha più e questa è ovviamente un ottima notizia in quanto questa propensione del software a ravviarsi spesso con conseguente perdita del lavoro non salvato rendeva la fase di design veramente stressante. 1 / 6

2 Non mi sono mai resa conto di quanto possa essere poco usabile l interfaccia di Adobe Photoshop: so solo che può risultare complessa, soprattutto per chi è alle prime armi, ma ciò potrebbe dipendere dalla vastità del software stesso e non da un errata progettazione dell interfaccia. Infine, per quanto concerne il rendering del testo, effettivamente Photoshop ha una resa estetica del testo leggermente diversa da come esso apparirà una volta inserito il contenuto testuale nel markup (solo Safari visualizza il testo esattamente come su Photoshop). Tuttavia, almeno per quanto mi riguarda, le piccole differenze nel rendering testuale non sono mai state notate dai miei clienti e non hanno mai influito in modo decisivo sulla resa estetica del sito. Con la comparsa dei CSS3 i browser possono visualizzare bozze grafiche belle quanto quelle create in software di grafica. I CSS3 sono potenti ed hanno molte proprietà grafiche veramente entusiasmanti, su questo siamo d accordo. Ma veramente possono sostituire in tutto e per tutto Photoshop? Ombre, sfumature ed angoli arrotondati: un buon design è veramente solo questo? Del resto l esempio di layout utilizzato da Meagan è molto semplice e la grafica e ridotta ai minimi termini. Ma il sito che ne e venuto fuori meriterebbe un posto in una qualsiasi gallery css? Prendiamo come riferimento gli ultimi tre siti inseriti su Css Mania: 2 / 6

3 3 / 6

4 4 / 6

5 Sono tutti design ricchi di dettagli estetici che, per forza di cose, devono necessariamente essere disegnati con un software di grafica. Forse tale processo può essere evitato per siti semplici, minimal, o molto lineari ma per siti dall estetica più accattivante è impossibile rinunciare alla fase di progettazione e design su Photoshop ( o un equivalente programma grafico). E facile effettuare le modifiche agendo direttamente sul markup e sui fogli di stile, mentre su Photoshop alcuni cambiamenti (come gli angoli arrotondati) sono un incubo, dato che richiedono di lavorare interamente su tutta l interfaccia realizzata. Certo, impostare gli angoli arrotondati ai box con estrema semplicità è uno dei vantaggi dei css3, ma se le modifiche da apportare fossero di una natura più corposa? Se il cliente invece di chiedere di cambiare font chiedesse di espandere tutto il box inferiore o di modificare in modo più drastico la struttura già definita? Peggio ancora: se al cliente non piacesse completamente la bozza e chiedesse qualcosa di più grafico, come integrarlo in una pagina xhtml già definita? 5 / 6

6 Powered by TCPDF ( Considerazioni Nonostante capiti che debba occuparmi anche di xhtml e css, il mio ruolo consiste perlopiù nel design del sito: colori, tipografia, immagini, effetti grafici particolari, ecc ecc. Personalmente credo che questo metodo comporti più limiti che vantaggi effettivi e che possa rappresentare una soluzione solo per gli sviluppatori che non possono (o non vogliono) appoggiarsi ad un designer e che in questo modo sono liberi di realizzare un layout senza l ausilio di software di grafica, mettendo come fase protagonista quella di sviluppo. Durante la fase di progettazione e design del layout, sono solita fare più e più tentativi, spostando i vari elementi grafici, modificandone le dimensioni, aggiungendo determinati effetti piuttosto che altri, combinando più font alla ricerca di quello giusto. Spesso ci vogliono ore (talvolta giorni) prima di arrivare al giusto risultato estetico e funzionale. Come e possibile far combaciare queste esigenze con la progettazione diretta nel browser? Nel layout di esempio Meagan ha impostato le varie sezioni a colpo sicuro, senza effettuare prove o modifiche al fine di trovare la soluzione piùadatta: dove è meglio posizionare le foto della gallery? E preferibile optare per una navigazione orizzontale piuttosto che una verticale? Questo è stato possibile data la semplicità del layout ma raramente è cosi facile realizzare il mockup di un sito; d altra parte (e questa è una mia considerazione personale) un designer potrebbe sentirsi le ali tarpate, come se non avesse piena libertà di progettazione e dovesse attenersi a determinati limiti. In sintesi: che fine fa la creatività? Dovremmo limitarci tutti ad arrotondare box e a impostarne le relative ombre? L articolo in questione è senza dubbio molto stimolante, ma credo che dovremmo giudicarlo con una certa cautela. Dimmi che cosa ne pensi E tu pensi che il metodo proposto da Meagan sia una valida alternativa alla tradizionale bozza su Photoshop? Hai mai progettato un sito web direttamente nel browser, senza appoggiarti ad un software di grafica? Parliamone insieme. 6 / 6

Documenti analoghi

Web Mastering e Design. Web Design. Programma CONTROLLO DOCUMENTO

Web Mastering e Design. Web Design. Programma CONTROLLO DOCUMENTO Web Design Programma CONTROLLO DOCUMENTO TITOLO: Corso di Web Design Programma VERSIONE: 1.1 AUTORI: Daniele De Benedictis, Francesca Morgana REVISIONATO DA: Fabio Rebecchi DATA: 01/06/2011 NOME FILE: