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.
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:
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?
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.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
66 commenti
Trackback e pingback
-
Tweets that mention Il dibattito: è possibile sviluppare la bozza di un sito direttamente nel browser? | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by nando pappalardo, Your Inspiration Web. Your Inspiration Web said: RT @YIW Il…
Ottima domanda. Per me è il futuro, nel senso che le nuove tecnologie ci permetteranno di farlo.
Per il template che ho realizzato nel mio ultimo articolo non ho usato Photoshop, o comunque un editor di immagini, per fare la bozza.
http://www.pvmgarage.com/downloads/portfolio/
Sta a voi valutare il risultato finale…
Ciao Piervix, grazie per il tuo intervento.
Il layout che hai disegnato e’ molto carino, ma converrai con me che – proprio come premesso nell’articolo – e’ molto semplice: di grafico oltre al background, agli angoli arrotondati e alle ombre non ha niente. Il mio dubbio e’: e’ questo il futuro del design (e quindi man mano andranno sparendo i layout veramente grafici (quelli su cui un designer puo’ sbizzarrirsi)? E se lo e’, per noi designer, non verrebbe a mancare qualcosa, dovendoci in qualche modo limitare?
Domanda spiccia: Per te e’ stata piu soddisfacente realizzare il restyling del tuo blog, con tutta la cura dei dettagli che e’ evidente un po’ ovunque, o realizzare questo template?
Che dire, da grafica posso solo sperare che il futuro non sia questo :D
io ritengo che tra le “best practices” di un buon web designer ci sia la preparazione del layout in photoshop (o equivalente) per diversi motivi.. il codice è solo un passo successivo al disegno della bozza e relativa accettazione del cliente..
Sono d’accordo con te. Ma l’autrice dell’articolo non e’ un web designer alle prime armi (collabora addirittura con l’agenzia Happy Cog di Zeldman), sa cio’ di cui parla e, nei commenti che le hanno lasciato nell’articolo, ho letto che in molti seguono questa procedura. Siamo forse noi italiani un po’ “indietro”? :)
Ciao sarah,
il dibattito è interessante e torna fondamentalmente al problema di collaborazione tra designer e programmatore.
Non si possono mettere paletti alla creatività, mentre i CSS3 lo fanno e come!!
La qualità dei CSS3 è di dare una migliore usabilità e accessibilità da ogni lato di ottimizzazione del sito ma con perdita dell’originalità e innovazione del design dei siti web.
Comunque non facciamo tutto un fascio la categoria dei programmatori.
Anche se ostici a collaborare con i designer, il loro punto di vista è sempre essenziale.
Dal mio punto di vista, utilizzo Photoshop CS4 su Mac e fin’ora non è mai andato in crash e il problema del rendering testuale… non mi sembra un problema!!
;) masterdany
Ciao Danilo, benvenuto su YIW.
“I CSS3 mettono i paletti alla creativita'”
….e certo, se si pretende che costituiscano il design in tutto e per tutto! L’hai detta giusta ;)
Assolutamente. Ho solo detto che i CSS3 possono dare l’opportunita’ agli sviluppatori di abbellire leggermente un layout non grafico che altrimenti si sarebbe limitato ad una serie di rettangoli squadrati. Ma per un buon sito occorre la simbiosi di entrambe le figure: grafico e sviluppatore. O perlomeno, l’ho sempre pensata cosi :)
Non metto in dubbio le potenzialità dei CSS3 e i vantaggi ad utilizzarli (quando potremo tranqullamente :D )
Ma fare a meno di Photoshop è praticamente impossibile, sopratutto per la creazione di layout un tantino più elaborati, a meno che per il futuro non si voglia puntare solo su bordi arrotondati, ombre e sfumature. Tra l’altro vorrei capire la signorina Meagan come si è comportata per le immagini nel suo semplice layout, le ha buttate dentro così come andavano oppure le ha ottimizzate prima?
E se le ha ottimizzate come l’ha fatto senza Photoshop o programma similari?
P.s.: spero tanto di sbagliarmi e risparmiare l’acquisto del prossimo pack Adobe :D
Ciao Salvatore,
l’articolo di Meagan parla di non utilizzare Photoshop per realizzare l’intera bozza, ma credo che per l’ottimizzazione delle immagini o per piccoli elementi grafici il suo utilizzo sia inevitabile.
Io comunque ADORO Photoshop, sono troppo di parte per schierarmi in questo dibattito ;)
beh sicuramente non è simpatico riscrivere un foglio di stile (e quindi misure da ricalcolare, float, posizionamenti,z-index.. ) e magari una intera struttura in html con qualche script js se il cliente dice di voler “qualcosa di diverso..”. E comunque è relativo al tipo di lavoro commissionato imho, personalmente non ho mai usato editor wysiwyg e dopo diversi lavori fatti scrivendo righe di codice + test su browser ho trovato un giusto equilibrio in termini di tempo impiegato lavorando su photoshop..
Riscrivere il markup non e’ certamente un lavoro gradevole ma c’e’ da dire che, con l’avvento dei framework (vedi il framework 960 grid system) molte problematiche relative a posizionamenti e float sono state eliminate; infatti proprio nell’articolo oggetto di dibattito l’autrice consiglia l’utilizzo di un framework per facilitare le eventuali modifiche nel foglio di stile o nell’html.
Anch’io, adorando Photoshop, sono decisamente di parte, mi sembra comunque affrettato dire che non servirà più.
E se è vero che il design non è fatto solo di creatività penso anche che così si rischi l’omologazione.
Questa soluzione radicale forse è in parte dettata dalla notevole instabilità del software su piattaforma Apple.
In ogni caso credo che ognuno di noi si debba regolare come sente più consono al suo metodo di lavoro, non credo esista una soluzione universale valida per tutti…e per fortuna aggiungo :)
Personalmente non intendo rinunciare ai software di Adobe
Salve, compatriota :D
Il rischio dell’omologazione e’ effettivamente molto alto, gia’ adesso i siti minimal si assomigliano un po’ tutti, non oso pensare ai risultati se l’abitudine di evitare grafica e personalizzazione diventera’ una regola generale nel web design.
Facciamo una campagna in difesa di Photoshop? ;)
Sono pienamente d’accordo anch’io su quanto detto da Sara, Antonio, Danilo e YesWebCan. Sarebbe un bel passo indietro se con il tempo il web si limitasse ad avere come elementi di design una serie di box arrotondati con qualche semplice effetto di ombreggiatura.
Con questo non voglio dire che limitandosi al solo utilizzo di CSS3 non possono venir fuori dei layout accattivanti, il layout realizzato da piervix ne è una dimostrazione ma credo che non ci si debba limitare solo a questo.
Personalmente considero il web un media come tanti altri, alla pari della carta stampata dal punto di vista creativo, e come tale deve evolversi. Oggi ci sono siti web che considero delle vere e proprie opere d’arte.
Si deve trovare il giusto punto di equilibrio. Sicuramente l’utilizzo di CSS3 renderà molto più semplice la vita agli sviluppatori (che per realizzare un semplice box con angoli arrotondati in passato dovevano ricorrere a vari espedienti con conseguente perdita di tempo) ma questo non vuol dire fare a meno di programmi di grafica per realizzare la bozza di un sito perché sarebbe davvero troppo limitante dal punto di vista creativo.
@sara si…se mai ce ne fosse bisogno ;)
Dal mio punto di vista dipende dal prodotto che devi realizzare, dal metodo lavorativo che utilizzi e da altri fattori.
Se devi fare un sito basato per esempio su illustrazioni vettoriali sicuramente non userò photoshop, ma bensì illustrator.
Concordo.
Anche se alla base di ogni mio progetto c’è la matita il passo successivo dipende dal tipo di progetto, illustrator / photoshop e dopo dreamweaver, se la grafica è risolvibile con css ed altro passo la bozza al programmatore e lavoriamo insieme.
“Crash di Photoshop?” è un nuovo gioco?
Quando ho letto quell’articolo ho subito pensato: oh, finalmente qualcuno che usa il mio stesso metodo. Infatti sinceramente non ho mai usato prima Photoshop. Nell’articolo non si dice di non usare Photoshop, ma di fare il procedimento inverso. Prima si crea il layout a livello di codice: spazi, colori, dove andranno posizionati i testi, i titoli, il menu, ecc. e poi con Photoshop o altri programmi si crea la grafica. Che non vuol dire fare semplicemente i bordi arrotondati. Se l’header che ho creato è di 900px di larghezza, io vado in Photoshop, creo un bel rettangolino di 900px di larghezza e vado di creatività. Insomma la parte grafica la creo a pezzi nelle zone dove questa è NECESSARIA. Quindi è semplicemente un metodo diverso. Non migliore o peggiore, solo diverso. Io poi creo sempre layout fluidi e mai fissi, quindi non potrei mai usare prima Photoshop.
Poi penso che col secondo metodo sia più facile puntare all’accessibilità e all’usabilità, quindi agli utenti che
navigano all’interno del sito. Nel metodo tradizionale invece si parte dal fare una bozza grafica che piaccia a me Web Designer e poi con le modifiche successive che piaccia anche al cliente.
Lo stesso Vlad Gerasimov, che avete intervistato, dice che nei siti sono altre le cose importanti e non la grafica.
“E un consiglio che voglio dare ai webdesigners è: smettete di migliorare le vostre abilità grafiche! Dedicate invece del tempo a comprendere l’usabilità, i css, la differenza tra html buono e html non corretto, come utilizzare i font, come utilizza i siti web tua nonna, e così via. Il web design ha ben poco a che vedere con la grafica, davvero.”
Però, ovviamente, un conto è fare siti per se stessi e un altro è farli per altre persone. In questo secondo caso è fondamentale presentare una bozza al cliente che ti permetta di apportare velocemente e senza troppa fatica tutte le modifiche che sicuramente ti chiederà. Però… boh… si potrebbe fare lo stesso anche con l’altro metodo… C’è chi è velocissimo ad apportare modifiche con Photoshop perchè lo usa molte ore al giorno e chi riesce ad apportare velocemente modifiche al foglio di stile perchè se lo studia molte ore al giorno.
Cavolo ho scritto un poema… :D
Aldo, vlad nell’intervista suggerisce ai webdesisgner di migliorare l’usabilità e l’accessibilità dei siti perchè ancora oggi sono in tantissimi i (presunti) webdesigner che sviluppano siti impaginati con tabelle, non accessibili, poco usabili e senza nessun riguardo per le specifiche W3C. E su questo sono d’accordo anche io. I webdesigner che fanno parte di questa categoria dovrebbero assolutamente lavorare per migliorare il lato accessibile e usabile dei propri lavori piuttosto che il lato puramente estetico. Un sito deve essere in primo luogo usabile e accessibile e solo dopo – se si è in grado – anche bello esteticamente.
E chi non appartiene a questa categoria? Chi realizza già siti accessibili e usabili perchè non dovrebbe migliorarne il lato estetico?
Attenzione a non confondere, Vlad non dice mica che un sito usabile e accessibile non possa essere anche bello dal punto di vista estetico. Perchè mai una dovrebbe escludere l’altra. Le gallery CSS sono piene zeppe di esempi di siti dal design accattivante e contemporaneamente perfettamente usabili e accessibili. I limiti sono solo nostri.
Nando, io ho ricopiato quel che ha scritto Vlad (e lui con la grafica ci mangia e ci dorme): web designer non pensate solo alla grafica, pensate sopratutto alle altre cose perchè il web designer è sopratutto le altre cose e poi la grafica. Sintesi mia. Io entro in YIW non perchè ha una bellissima grafica (e la tiene) ma perchè ci sono ottimi contenuti, scritti benissimo, presentati benissimo. Questo conta.
Io non sto commentando perchè Sarah a creato il bellissimo logo di YIW, ma perchè ha scritto questo bellissimo post. :-P
Tutti i blog più importanti se ci fai caso (trarre rarissime eccezioni), hanno tutti degli header bellissimi (ho usato credo 4 volte bellissimi hihi), ricchi di grafica, ma poi il resto è tutto html e css. Il motore di ricerca di Yahoo è più bello di quello di Google, però è quello di Google il più utilizzato.
Sono d’accordo che un sito accessibile non debba essere necessariamente senza grafica o brutto. Ma se invece di usarlo prima Photoshop lo uso dopo… mica il sito diventa brutto. :-P Io lo uso Photoshop. Dico solo che la priorità di un sito non è che sia un’opera d’arte, ma che ci sia un buon testo e che questo sia ben rappresentato e che comunichi qualcosa.
Sull’usabilità penso che io che creo la bozza di un sito partendo da Photoshop non penso all’usabilità o all’accessibilità, ma penso di farlo bello. Se invece parto direttamente dall’html è diverso.
Poi ripeto, secondo me è questione di metodo e di come si è iniziato. C’è chi è partito ad usare Photoshop e poi ha iniziato a far siti e chi ha iniziato a far siti e poi ha imparato ad usare Photoshop. Non vedo errori in entrambi i metodi.
Io per fortuna non mi occupo della bozza grafica, quindi non ho il problema di doverla presentare al cliente. E per i miei siti personali sono sempre partito prima dalla struttura in html e css e poi ho aperto Photoshop. Il mio metodo è questo. Tutto qua.
L’idea che il sito WEB glielo devo prima far vedere STAMPATO SU UN FOGLIO o aperto sul PC come un’immagine… è una pratica che spero si superi… (cioè quando tutti avranno la cultura del WEB e non più del foglio di carta). Prima o poi dovranno capire che io non gli sto facendo un volantino, o un biglietto da visita, o una brochure, ma un sito…
Scusa ma questo discorso mi sembra privo di fondamenta. Il processo che riguarda l’usabilita’, per esempio, e’ molto ampio e trova le sue fondamenta anche durante la realizzazione grafica (con il relativo posizionamento degli elementi) del layout.
Realizzare una bozza del sito con un software di grafica non significa che usabilita’ e accessibilita’ passano in secondo piano, anzi. Allo stesso modo la realizzazione diretta in codice non e’ sinonimo degli stessi, potresti benissimo sviluppare un codice in modo scorretto, e questo indipendentemente dall’utilizzo o meno di una certa grafica.
Questo mi sembra lo snobismo tipico degli sviluppatori, che tendono a sottovalutare – e spesso a demonizzare – il ruolo della grafica e dell’estetica in un sito web. Ho letto spesso affermazioni come ” il sito non deve essere bello, deve essere usabile” come se le due caratteristiche non possano coesistere. :)
Diciamola tutta: un sito deve anche essere bello: un sito bello ma inaccessibile e’ un cattivo prodotto cosi come lo e’ un sito oggettivamente brutto, anche se accessibile e/o usabile.
Ma infine, qual’e’ il ruolo di un volantino? Presentare l’azienda, presentare un prodotto, renderlo noto al pubblico. E il ruolo di un sito? Presentare sul web la stessa azienda, lo stesso prodotto. In una parola, vendere. E come tale non deve solo dare informazioni, ma darle in modo visivo ed immediato.
Un sito web fa parte dell’identita’ aziendale a tutti gli effetti, non facciamo confusione ;)
Scusa ma questo discorso mi sembra privo di fondamenta…
Lo è come non lo è. Per me lo è. Per te no. :-)
La grafica non limita l’usabilità, ma l’accessibilità sì. Almeno per me. Poi è opinabile.
Quello che dico io è: io creo un sito, poi questo sito sarà accessibile disattivamento il css, disattivando javascript, disattivando la grafica, usando un foglio alternativo, usando una diversa impostazione del browser? Benissimo! Abbiamo risolto il problema. Non esiste più un problema accessibilità, perchè basta impostare in un altro modo il browser o usare un foglio di stile alternativo. Ma intanto così com’è, quel sito non è accessibile per il semplice fatto che bisogna usare un’alternativa per navigarci. Ora da qui a dire che si sminuisce il grafico… boh che c’entra… io ho detto un’altra cosa. :-P
Il sito può essere sia bello che funzionale. La grafica può contribuire a rendere il sito funzionale. Chi dice il contrario. Ma è più importante che sia funzionale senza grafica. Ripeto, in YIW penso che uno ci entri non perchè è bello ma perchè è funzionale. Io navigo nelle PAGINE di un sito. Non nelle TELE di un sito. La bellezza è un concetto relativo, indipendentemente se si usa o non si usa un programma di grafica.
Per quanto riguarda il volantino. Non l’ho scritto per sminuire il processo di creazione del volantino. Volevo semplicemente dire che sono due cose diverse. Entrambe rappresentano l’azienda, ma sono due cose diverse e quindi dovrebbero essere presentate in modo diverso. Almeno penso io. Ma è solo la mia opinione.
Non è mai stata mia intenzione sminuire il ruolo del grafico, ne che questa figura non sia importante. tutt’altro. Però i siti più visitati al mondo sono:
facebook, google, youtube, wikipedia. In effetti graficamente sono bellissimi, giusto?
Per quanto riguarda l’accessibilità, perchè ad esempio
questi siti sono fatti così?
http://www.uiciechi.it/
http://www.ipovedenti.it/
http://www.nonvedenti.it/
http://www.diodati.org/
http://www.frascolla.org/
Perchè non sanno usare Photoshop? :-P
Aldo, le specifiche W3C riguardanti l’accessibilità – più comunemente note come WCAG – suggeriscono di fornire delle alternative testuali per i contenuti presentati con immagini, audio, video, ecc e garantire che le pagine si trasformino in maniera elegante in base al dispositivo di navigazione utilizzato dagli utenti per permetterne l’accessibilità a tutti:
http://www.w3.org/TR/WCAG20/
http://www.w3c.it/wai/wcag10Guidelines.html
Queste specifiche non dicono quello che stai affermando tu:
ovvero che un sito per essere accessibile deve essere privo di grafica e javascript.
Il disabile per navigare i contenuti del sito utilizzerà un dispositivo a lui più idoneo e non un normale browser a cui siamo abituati tutti noi, non è l’utente ad occuparsi di disabilitare javascript, css, ecc, il suo dispositvo, come potrebbe essere uno screenreader, per impostazione predefinita non caricherà il nostro foglio di stile e non caricherà i javascript. Il compito dello sviluppatore consiste appunto, come dicono le specifiche WCAG, nel fornire l’accesso ai contenuti del sito anche in questi casi in cui vengono utilizzati particolari dispositivi di navigazione.
Diciamo la stessa cosa Nando. Tu fai un sito “normale”: grafica, javascript, ecc., ma poi per essere accessibile a tutti, si usano dispositivi o impostazioni particolari del browser che disattivano javascript, flash, o eliminano le immagini, o sostituiscono il foglio di stile, ecc.. ecc.. di conseguenza quel sito diventa privo di immagini e di altre cose per permettere ad altre persone di stare in questo sito. Insomma alla fine, ripeto, stiamo dicendo la stessa cosa. Quello che dico io in più (in più… è una cosa mia…) è che, trovo riduttivo lasciare che sia il dispositivo a fare tutto il lavoro. Trovo non corretto che a costo di fare un lavoro creativo, altre persone debbano poi usare un dispositivo o impostare il browser in un altro modo. Però la maggioranza delle persone vede bene, e quindi si fa il sito per la maggioranza e non per la minoranza, ovviamente. E semplicemente un mio pensiero. Un mio modo di vedere le cose. Mi è possibile senza che sia considerato strambo? :-P
Per una semplice questione pratica. Se vogliamo presentare la bozza in html, bisognerà tagliare, sviluppare il css e l’html, e se poi non va bene? Tanto tempo perso.
Addirittura, se fossi capace, la prima idea da sottoporre la disegnerei a mano, uno schizzo. Vediamo le proporzioni, i colori, gli elementi. Va bene? Passiamo a photoshop. Si riposizionano gli elementi, si allarga si restringe, si perfezionano i colori. Va bene? Passiamo al codice.
Sara, mi trovi perfettamente d’accordo… nell’articolo che hai citato, l’unica cosa a cui forse mi troveri d’accordo è:
Può essere anche vero e giusto, però se poi vogliamo dare la grafica ad un sito (complessa o minimal che sia), un programma di grafica come photoshop ci vuole sempre.
La progettazione grafica da ampio spazio alla fantasia, alla creatività e senza photoshop, questa libertà si perde.
Inizialmente, quando non conoscevo questa tecnica di utilizzare photohop per la grafica e poi trasportare tutto in codice, non sapevo fare un minimo di grafica sensata direttamente su browser. Mi sentivo limitato, come bloccato…
Ora io non sono un grafico e quindi non sono proprio l’esperto a fare i layout, però se trovassi qualche grafico che mi dice di fare un sito, gli direi subito: “Prima progettati e disegnati il sito così come lo vuoi e poi passami il PSD… poi ci penso io”.
Cioè, siti come http://www.webdesignerwall.com/ (il primo che mi è passato per la testa), come lo si abbozza senza photoshop?? direttamente sul browser?
mi sembra abbastanza impossibile…
Ultima cosa… in questo modo, il grafico ha finito di lavorare… non esiste più :D
Qualcuno sta decretando la morte del ruolo del grafico all’interno di un progetto web =)
Anche per altri tipi di media vale la regola “content is the king”, ma non per questo depliant, riviste, brochure, carta intestata, bigliettini da visita, ecc… hanno i loro contenuti scritti in nero su sfondo bianco =)
Quando si parla di comunicazione (e il web rientra pienamente in questo), l’impatto estetico con cui si tenta di veicolare il messaggio da comunicare può assumere un ruolo di un certo rilievo all’interno del progetto.
Vorra’ dire che mi faro’ mantenere da Meagan, Arquen e tutti quelli che la pensano come loro! :D
È da un po che mi diverto a realizzare, per conto mio, oggetti e figure semplicemente con div e css senza usare immagini pre-elaborate con photoshop.
Infatti per il mio portfolio ho realizzato il MacBookPro in questo modo. Si è vero ha una forma stilizzata ma questo è dovuto al contesto grafico. Penso che se avessi usato sfumature e quant’altro con i CSS3 avrei potuto realizzare un discreto lavoro.
L’avvento dei CSS3 ha dato una grossa mano ai noi web designer e sviluppatori. Ha reso le cose più semplici, però non penso che possono sostituire photoshop, soprattutto in lavori più elaborati. E sono pienamente d’accordo sul fatto che il solo utilizzo dei CSS3 può portare ad una omologazione e limitare la creatività.
Poi inoltre trovo molto comodo presentare prima una bozza in photoshop e poi, dopo le dovute correzioni, realizzare il codice.
Risponderò brevemente e per punti:
1) L’interfaccia di Photoshop.
Fortunatamente non è accessibile a tutti. Immaginate il mondo pieno di designer improvvisati che cercano di rubarvi il lavoro! (come purtroppo già accade…)
Dio ce ne scampi!
2) Crash
A me è mai capitato che crashasse Photoshop, ma basta salvare frequentemente e non lavorare con un mac del 1800 e con tutta la Suite aperta e il problema non sussiste.
3) Photoshop ha una resa estetica del testo leggermente diversa
Basta settare l’anti-alias su “none” e in ogni caso su Firefox e Safari su Mac i font si vedono molto bene e con anti-alias
4 ) CSS3
Evviva i CSS3! Però come facciamo a creare immagini del genere? http://floridaflourish.com
Con i css??? In ogni caso da Photoshop (o illustrator) dobbiamo passarci per forza!
5) Velocità
Per una designer come me lavorare col cliente a fianco è quasi una regola. Spostare in fretta elementi e modificare la bozza in tempo reale è necessario… non credo che con HTML riuscirei a lavorare tanto velocemente!
Morale?
Ne passerà di acqua sotto i ponti prima di abbandonare Photoshop!
Concordo pienamente con zebradesign………..io non ho ancora avuto un cliente che non desse importanza soprattutto a quello che vede……prima che a css e xhtml (molti non vogliono neanche sapere cosa sono per dirla tutta)………photoshop per fare modifiche “LIVE A VIDEO” con il cliente seduto davanti a te è imbattibile, …….chi non si è mai sentito dire “cambiami questo elemento….o…..al posto di questo simbolo metti quest’altro, con photoshop è una cosa da un minuti e due tasti………CONCLUSIONE…….io a photoshop non rinuncio……
P.S. per chi parla di crash e altri difetti di stabilità io personalmente non ne ho mai avuti fin ora……..e poi ai corsi base la prima cosa che insegnano mi pare sia la funzione del tasto SALVA :)……….non ci crederete ma è molto utile :)
Com’e’ possibile che non abbiate mai avuto problemi di crash improvvisi????? siete dei miracolati, ecco cos’e’ :D
ah ecco… anche io, con tutto che ho una ciofeca di portatile (con windows), photoshop non mi ha mai crashato… forse, 1 volta sola, ma non si è mai preso l’abitudine… quindi per me non ha senso dare l’instabilità un motivo valido per non usare photoshop.
E’ una cosa nuova per me :D
Antonio, a crashare è la versione originale di Photoshop, le versioni piratate invece funzionano perfettamente =)
Ah ecco… curiosa sta cosa… se io pago 3000 €, mi prendo un prodotto che crasha… se me lo scarico e ci applico la crack, va alla grande.
E’ curiosa sta cosa.
antonio, ma guarda che stavo scherzando =)
piccola precisazione:
per i css3 è ancora presto, dovete ancora ricordarvi che dovete realizzare i layout per il 70% dell’utenza, cioè internet explorer 7. Quindi o integrate dei workaround in js oppure il vostro sito sarà troppo “nuovo” alla maggior parte degli utenti.
Per il resto ci sarà una selezione naturale in stile darwin: siti carini con css3, siti creativi con photoshop, siti megastratosferici che fondono i due strumenti! Insomma, nessuno esclude l’altro :D
Ma povera Adobe: già non tira aria buona con la faccenda Flash VS Jquery, ci manca solo che si vedano messi in dubbio il futuro di Photoshop! :P
Questi CSS3 faranno un sacco di disoccupati. Al limite voi conoscete nome, indirizzo e/o numero di targa di chi se li e’ inventati? :D
Innanzi tutto complimenti per il blog, sempre interessante da leggere! :)
Premetto che non sono un designer, ma mi è capitato di dovermi improvvisare tale qualche volta…
Ho provato sia a fare la bozza disegnando con un software di grafica (uso gimp), sia scrivendo html e css al volo.
Ciò che ho notato è che scrivendo html e css, mi limito alla conoscenza che ho in questi due linguaggi, mentre se provo a disegnare non mi preoccupo se lo so fare o no coi css, ci penserò poi…
Quindi disegnando sono più disinibito e riesco ad ottenere un design più “originale” rispetto ai miei standard.
Mi trovo completamente d’accordo, del resto Andy Clarke lo dice da anni, la grafica in molti casi ( anche se non tutti ) non è sufficiente. E’ meglio un prototipo html + css funzionante, tanto il codice si riutilizza.
Lo spiega bene nel suo libro “Oltre i css”
…anche se qui non si sta dicendo che la grafica “in alcuni casi non e’ sufficiente”, ma si inneggia alla morte di Photoshop a favore di bozze realizzate interamente nel browser. E la cosa e’ un pelino diversa :)
(ma come, proprio tu che regali risorse psd???? traditore! :D)
Sarah……..non ti preoccupare photoshop almeno per altri 5-10 anni con la velocità di sviluppo che c’è in Italia…….fin che continueranno a girare quelle “cariole” di explorer 6 e 7 (e ti assicuro che ce ne son tantissimi ancora attivi, specialmente nelle pubbliche amministrazioni che dovrebbero dare per prime il buon esempio) il lavoro è assicurato………..dormi sonni tranquilli :D
5 anni? C’è proprio da star tranquilli, allora :) e io che mi volevo comprare casa!
Spesso si ha l’impressione che venga considerato, da molti, come “grafica” una sorta di pleonasma facilmente trascurabile tendenzialmente decorativa, e se invece ci accorgessimo che il vero supporto di tutto è proprio colei che verrebbe preferito ad un buon testo??? Non dimentichiamoci come erano i primi siti privi di design, dove persino un testo intriso di lustrore appariva stucchevole dallo squallore compositivo che rendeva il tutto illeggibile… A mio parere non si può preferire l’uno all’altro se si vogliono ottenere fini ottimali, ma deve esserci sinergia, in cui ad un buon testo si dia un buon vestito che lo enfatizzi e lo presenti al meglio per poter accogliere, nel migliore dei modi, i lettori (vi avvicinereste mai alla donna più bella del mondo se ammantata da luride e strascicanti vesti???).
Per quanto riguarda la prima bozza del sito, io sinceramente preferisco farla con programmi vettoriali, anche se, come detto da Maurizio, la si potrebbe fare anche con matita e carta, in fondo è una bozza, ognuno usa ciò che gli vien meglio, ma al momento di una maggior rifinitura, vuoi o non vuoi, Photoshop lo apri, anche se per una grafica minimalista, a meno che non si ha la sola necessità di creare contenitori colorati…
Ciao a tutti.
Io il web designer ho iniziato a farlo da Photoshop (da bravo informatico non ne sapevo praticamente nulla) per poi passare al montaggio e agli script…
Occuparmi tanto di XHTML e di CSS, oltre da darmi tantissime conoscenze e pratiche positive, ha un po’ vincolato la mia creatività a “questo si può fare, questo non si può fare, quello è uno sbatti”.
Per questo motivo spesso lavoro a 4 mani, con grafici e designer che di HTML non sanno una cippa, il risultato è sicuramente più originale, mi costringe a non fossilizzarmi sulle cose comode e senza photoshop questo tipo di creatività si va a perdere.
Purtroppo per quello che è il nostro mercato, vedo un futuro di siti sempre più simili, dove cambiano i colori, le trame, angolini, font e sfondi… ma che si potranno disegnare in mezza giornata, magari con già una buona parte montata durante la creatività…
Wow, che mi ero perso :)
La questione è molto delicata, e naturalmente ognuno difende il proprio orto (sviluppatori e grafici).
Secondo me il punto che viene taciuto ogni volta che emerge questa discussione è che esiste una figura intermedia tra chi deve creare la grafica e chi deve metterla in codice, quello che alcuni chiamano “architetto dell’informazione”. Questa figura dovrebbe guidare le altre due verso il prodotto finale, ponendo delle linee guida al processo di creazione del sito.
Dovrebbe fornire i motivi per cui la navigazione **deve** essere orizzontale, che lì **deve** esserci un certo tipo di link piuttosto che un altro, accettando allo stesso tempo i consigli del grafico sulla resa estetica, sul messaggio che un certo colore piuttosto che un altro manda all’utente; così come allo stesso tempo deve badare alle difficoltà implementative di chi deve poi mettere in codice. Un sito diventa così un lavoro sinergico tra queste figure.
L’esempio dell’articolo di Meagan Fisher è ridicolo: troppo troppo semplicistico. Se le differenze tra i vari siti fossero solo l’inserimento dei bordi arrotondati e le varie piccole modifiche riportate, il nostro sarebbe un campo “in via d’estinzione”. Se voleva mandare un messaggio così forte, doveva quantomeno mostrare come lei, in un progetto reale, aveva utilizzato questa tecnica, e poi analizzarne i pro e i contro. Perché io, per quanto presunto sviluppatore, non potrei mai realizzare un sito utilizzando solo XHTML+CSS+JS.
Just, come non sottoscrivere ogni singola parola che hai scritto? virgole e virgolette comprese =)
Sarebbe una figata!
…presumo che tu non sia un grafico ;)
Ma dai scherziamo…se dovessi usare solo codice html/css ci metterei giorni a fare la bozza di un sito !
Io uso l’accoppiata Illustrator+Fireworks (devo dire che con Photoshop mi trovo male)
Ciao Filippo!
Ho chiesto piu volte a piu utenti che cos’ha fireworks che – dice qualcuno – lo rende migliore di Photoshop. Non ho mai ottenuto una risposta :)
Sono curiosa: in cosa ti trovi male con Photoshop e in cosa preferisci Fireworks?
Ciao Sarah…guarda di base per la bozza uso Illustrator perchè devo dire che a parer mio concede più funzionalità e libertà di sviluppo creativo rispetto a PS.
Per quanto riguarda FW lo trovo più agile nella gestione dei livelli e nello spostarsi tra i vari oggetti.
Lo utilizzo principalmente per due cose: l’ottimizzazione delle immagini(grazie al pannello apposito combinato con la creazione di “sezioni”) ma soprattutto per la creazione di barre di navigazione.
Per questa seconda cosa trovo comoda la gestione dei simboli e la creazione di script per differenziarli (in pratica il mio pulsante è un simbolo dove i vari attributi come colore e testo sono gestite tramite lo script).
In seguito poi creo la matrice dove includo tutti gli stati dei pulsanti, e con il pannello “proprietà” vedo al volo le varie coordinate dei simboli da impostare poi con i CSS (bg-position).
Infine sel il cliente vuole vedere in tempi brevi un bozza più vivace e animata (mi riferisco soprattutto alla barra di navigazione), FW permette con il livello Web di creare semplici animazioni e rollover da poi esportare in Dreamweaver con funzione “Copia codice html”.
Ovviamente nulla di complicato per non perdere troppo tempo :)
Sicuramente mi dirai che molte di queste cose le puoi fare anche in PS…ma uso FW anche per motivi affettivi e pratici perchè è stato il primo programma della famiglia Adobe che ho imparato ad utilizzare.
di nuovo ciao!
Secondo me è logico ed evidente che sia meglio partire dalla bozza poi passare a photoshop e poi implementare, ma alla fine credo sia tutta una questione di budget.
Se i fondi scarseggiano il primo a rimetterci è il grafico.
Premetto che non sono un grafico, ma un editor e uno sviluppatore (o almeno mi fingo tale :P).
Mi lascia però perplessa questa frase
“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?”
Magari ho interpretato male io, ma che senso ha fare una bozza in Photoshop con (ironizzo)gli uccellini che svolazzano da un angolo all’altro dello schermo, se poi una volta che il sito è creato gli uccellini stanno fermi a sonnecchiare su un ramo?
Ciao Davide :)
..ehm, saro’ stanca io, ma non ho capito questa tua metafora. A cosa ti riferisci? :D
Ciao :)
Ripeto, magari avevo frainteso male io. Comunque intendevo:
a che pro mostrare una bozza strafiga al cliente (font particolari, bordi arrotondati, etc etc) se poi non si riesce a realizzare un prodotto finito identico alla bozza?
O il discorso era “le cose si fanno in entrambi i modi, ma con photoshop c’è meno sbattimento” ?
In qualsiasi caso, per fortuna, il compito creativo non spetta a me, io mi “limito” a codare in html/css e, ovviamente, lo faccio direttamente sul sito (tramite notepad++, per l’esattezza)
Ehm, si, ho come l’impressione che tu stia fraintendendo il senso di questo dibattito ;)
Chi e’ che non riesce a realizzare un prodotto finito identico alla bozza presentata? E’ ovvio che si parla di layout realizzati con un software di grafica e successivamente messi in codice, senza alcuna differenza per quanto concerne l’aspetto estetico. Non ho capito questa puntualizzazione, mi dispiace :)
Neanche. Il discorso era “senza un programma di grafica e sviluppando la bozza direttamente in html si puo’ progettare un layout creativo, accattivante, bello da vedere? O comunque un layout complesso, che richiede per forza di cose piu tentativi per quanto riguarda la disposizione degli elementi, i colori, la tipografia, le immagini, eccetera?”
Per farla breve: tu, da non creativo, riusciresti a realizzare un buon sito direttamente in html, senza che ti venga consegnata la classica bozza da mettere in codice? E poi, pensi che il risultato di tale lavoro, possa essere paragonato a siti che sembrano vere e proprie opere d’arte, come quelle pubblicate in alcune gallery del settore?
Di questo si e’ parlato finora, spero che adesso sia un po’ piu chiaro :)
Ok, direi che avevo fatto abbastanza confusione…dovrei dormire di più in questi giorni :D
Ok, allora tutto chiaro…beh, purtroppo non posso dare la mia risposta, come già detto sono i grafici dell’azienda che preparano le bozze in formato grafico.
Quindi il dubbio era (spero di azzeccarci ‘sta volta, sennò me ne vado sul serio a dormire xD )se scrivere direttamente il sito senza farsi prima una bozza grafica distolga l’attenzione dall’aspetto estetico e/o porti a semplificare il risultato finale…il che si riallaccia un pò (ma neanche troppo) ad un altro articolo di YUM, in cui si diceva che quando il grafico fa anche il coder tente inconsciamente a “semplificarsi la vita”, evitando di progettare particolari grafici d’impatto ma che risultano difficili da codare.
Vista sotto questo punto di vista…si, credo che al grafico (anche se sa scrivere in html/css) debba partire da un programma di grafica, in modo da potersi esprimere al meglio…e poi si passa al codice
PS (anche se non specifico per te): il bannerino a comparsa per scaricare l’ebook, cosa che tra l’altro ho già fatto, è abbastanza irritante e, su un netbook come il mio, specie se si ha il vizio di aprire tabs a rotta di collo e poi leggersi i contenuti con calma, è abbastanza fastidioso e causa freeze a chrome (che di per suo già consuma un pò troppa cpu con le tabs, ma è lo scotto da pagare per avere le sandbox). Un cookie per ricordarsi che ho premuto sulla x di “non mostrare più” e mantenerlo chiuso?
davide, leggendo i commenti che hai lasciato su questo articolo ho l’impressione che tu sia un po’ confuso.
riguardo la bozza strafiga da presentare al cliente ti risponderà presto sara. non ho assolutamente capito perchè mai al cliente si dovrebbe presentare una bozza grafica in un modo e poi fargli il sito in altro modo. dove lo hai letto? chi lo ha detto?
riguardo il fastidioso bannerone devi cliccare sul link “non mostrare più” per non vederlo più nelle successive visite. Accanto alla “X” c’è la scritta “chiudi” che invece serve solo a chiuderlo temporaneamente.
Mi auguro che con queste istruzioni tu adesso riesca a liberarti del fastidioso bannerone.
…doh!
Ero convinto di averlo già fatto più volte, ma il bannerone era sempre lì…
Chiedo scusa per la confusione :)
Salve a tutti,
E’ da un po’ che seguo YIW ma non ho mai trovato l’occasione giusta per inserirmi nella community, cosa che invece questo articolo mi ha stimolato a fare.
La mia opinione su questo dibattito tra photoshop e non photoshop, premesso che utilizzo sia css3 che il software di adobe, è la seguente:
Trovo importante dire che il web è uno strumento diverso rispetto al mezzo cartaceo o a quello televisivo, perché esiste un interazione diretta dell’utente con le informazioni, non è più l’utente che riceve semplicemente le informazioni, ma è l’utente che le trova su di una pagina; E’ nostro compito (da web designer-developer) aiutare il più possibile l’utente nel trovare ciò che vuole. Proprio perché il web è un media interattivo, ed il nostro prodotto finito sarà un mix di html, css e javascript, trovo molto strano ridurre il tutto ad un immagine a livelli quale è un lavoro in photoshop, dove è finita l’interattività? Come faccio a rappresentarla con un immagine? Come faccio a provare se effettivamente comunico il messaggio giusto all’utente, quando il focus che mi da photoshop è sul look ma non esattamente sul feel?
Ma allora quale è il ruolo di photoshop? A mio avviso è quello di realizzazione di componenti, di quelle parti che andranno ad arricchire il contenuto, ma solo dopo che il contenuto stesso sarà definito.
Questa è solo la mia opinione, ogni caso o cliente chiaramente è diverso e richiede un analisi a priori di cosa è meglio fare.
Grazie della possibilità di esprimermi :)
Ma… nessuno usa programmi di grafica vettoriale per fare le bozze? Io ho sempre usato prevalentemente quello, le rare volte in cui ho provato su un programma come photoshop o photopaint non mi son trovata benissimo sopratutto quando si fanno prove e si devono ingrandire parti degli oggetti. È tanto assurda la scelta di usare un programma vettoriale? O.o
…….se consideri inkscape……….un programma di grafica vettoriale, io uso anche quello, tutto dipende da comodità e abitudini.
Io ho come abitudine ultimamente di usare programmi free (anche perchè li posso far scaricare al cliente volendo senza fargli spendere un centesimo di licenze varie) tipo inkscape appunto e gimp, e fino ad ora non mi posso lamentare
Io credo che in un futuro prossimo sia più facile fare a meno di un programmatore che di un grafico, per sviluppare siti web originali e accattivanti.
E’ il lavoro del programmatore che si presta meglio ad essere standardizzato, non quello del grafico. La creatività non può essere standardizzata……….altrimenti non si può più chiamarla con questo nome.