Dall’idea al layout
Martedì 30 Ottobre 2007 - 13:51
di Gianluca Brindisi
Lavorando in coppia con un altro web designer mi sono reso conto di una cosa: per sviluppare un layout non esiste una metodologia standard.
Questo forse è un bene da un punto di vista creativo, ma decisamente un male quando dobbiamo sincronizzarci con un gruppo. Passare dall’idea al layout comporta una serie di fasi che partono dal mockup, cioè la bozza, fino al debug cross-browser: affrontarle in maniera differente può creare dei problemi.
Ed è proprio durante la stesura del mockup che si scontrano due grandi scuole di pensiero: chi apre Photoshop e disegna quello che dovrà essere il layout finale, e chi invece parte costruendo una struttura funzionante con i CSS.
Iniziare il lavoro con Photoshop ci da un’idea molto precisa di quello che vogliamo ottenere (cosa che fa sempre piacere al cliente) e ci mette in mano molti dettagli grafici già pronti all’uso. D’altro canto, invece, lavorare direttamente sui CSS ci pone subito in condizione di avere un riscontro immediato della resa reale sul browser, e questo semplifica un sacco di lavoro durante il debug finale (che poi è la parte più noiosa).
Io personalmente sono per il secondo approccio, perché credo che disegnare direttamente in Photoshop sia il retaggio di un metodo di lavoro obsoleto: di quando ancora i siti si facevano con le tabelle (chi non ha mai usato lo Slice Tool?). Inoltre c’è sempre il rischio, non da poco, di disegnare qualcosa che poi sarà di difficile implementazione.
So che qualcuno di voi non la pensa come me, perciò fatevi avanti e dite la vostra! Cosa ne pensate?
Categoria: Web Design | Permalink
Commenti
1
Si ma in alcuni casi disegnare il layout con photoshop è fondamentale, specie se il sito è molto grafico.
Da un idea del risultato finale molto precisa e permette di creare le gif perfette per le intestazioni dei campi del sito. E ovvio che l’immagine usata come sfondo e poi i div montati sopra coi css fa un po pena, ma questo non è l’unico modo nel quale si può usare photoshop.# - postato da Daniele Rapisarda - 30 Ottobre 2007 - 14:57
2
Non ho ben capito perchè iniziare con Photoshop sarebbe sinonimo di sviluppo tabellare; se si conoscono le problematiche dello sviluppo web non vedo come questo possa rappresentare qualcosa di obsoleto.
3
Forse sono stato troppo sintetico, me ne scuso.
Intanto, per rispondere a Daniele, stavo puntando l’attenzione sulla fase iniziale di realizzazione della bozza. Presto o tardi da Photoshop ci si passa comunque, e li sono d’accordo con te.
Sergio: quando con Image Ready si esportavano le slices in html i risultati erano un ottimo punto di partenza perché generare una tabella era un processo ben automatizzabile. Secondo me questo non vale più quando dobbiamo implementare una strattura tableless in CSS. Alla fine poi si dovranno fare sempre i conti con l’implementazione: allora perché non partire direttamente da una struttura funzionante e POI passare a Photoshop?
# - postato da Gianluca Brindisi - 30 Ottobre 2007 - 15:23
4
Personalmente assolutamente la prima scuola.
Partire col CSS mi da l’idea di andare a tastoni, l’equivalente di chi apriva Dreamweaver e innestava tabelle su tabelle perchè non aveva idea di dove posizionare gli elementi.
Disegno un layout “ideale” come insomma lo vorrei fare, fregandomene dei CSS e ragionando su layout e posizionamento delle aree.
Al momento della realizzazione del CSS cambio in tempo reale i dettagli impossibli (comunque in minoranza perchè quando disegno un sito ho sempre in mente di doverlo poi ridurre a 1/2/3 colonne e via dicendo)# - postato da \\Dav - 30 Ottobre 2007 - 15:24
5
Io sono d’accordo sul procedimento con i css: rivestire graficamente un layout già funzionante è un’operazione molto più semplice rispetto all’opposto, specialmente in questo periodo dove i siti professionali richiedono una serie di interazioni complesse lato client che hanno reso molto più difficile trovare la giusta compatibilità cross-browser e al contempo hanno fatto cadere un po’ in disuso la grafica “pura” per privilegiare una grafica più “funzionale”. Purtroppo questo flusso di lavoro non mi sembra ancora molto diffuso…
# - postato da Marcello Brivio - 30 Ottobre 2007 - 15:38
6
ciao, io non sono d’accordo nè con Gianluca nè Marcello, anche se non esiste IL metodo per lavorare.
Se io non vedessi prima il layout grafico, non saprei da dove cominciare, cioè:
fare un sito con misure in %, fisse o in em? Quando realizzo io la grafica, faccio in modo di ovviare a problemi che potrebbero presentarsi in fase di codice. Se, invece, mi viene data… anche se io realizzassi il css per prima cosa, in base a quale grafica va sritto il codice? A me farebbe perdere molto tempo. Non so a voi.
Cià
7
Ciao Gianluca. Con il massimo rispetto del tuo modus operandi, permettimi di dissentire totalmente con quello che dici. Porre il flusso di lavoro come lo imposti tu, a mio parere, non fa altro che porti dei limiti creativi, inesistenti, che tu stesso vai a costruirti. A parte che sarebbe *sempre* giusto usare carta e matitone per iniziare un progetto, il passaggio successivo è certamente quello di passare a Photoshop (o Illustrator se si è dei verctor designers) per creare slices (porzioni di immagini e/o sprites) e successivamente cominciare a creare il codice per la struttura dell’html prima e il codice del css successivamente. Se si ha _bene_ in mente ciò che si sta facendo, si saprà benissimo se creare un’immagine di 1 px per 30 px da ripetere sull’asse x o se usare successivamente un colore di BG impostato da css.
Con il tipo di approccio di cui parli, l’Arch. Santiago Calatrava non avrebbe mai progettato alcune delle sue opere semplicemente perché, da un punto di vista strutturale, non si sarebbero rette
Volevo inoltre aggiungere che Photoshop, se proprio non si conosce bene ciò che si sta facendo, permette, anche, l’esportazione in (x)html e css tramite l’utilizzo di divs.
8
Scusate, ma non sono assolutamente d’accordo con chi vuol far passare l’idea che partire da Photoshop sia sintomo di poca professionalità e poca attenzione agli standard.
Al contrario, credo che la comunicazione si possa sviluppare appieno soltanto rimanendo slegati, almeno inizialmente, da una struttura rigida e usando tutte le possibilità creative del software grafico.
Strutturare già in partenza un layout in html credo che limiti non di poco le potenzialità nel variare e testare la presentazione, perchè è un sistema inevitabilmente meno flessibile, e porti molto facilmente a pagine scialbe e/o con grafica povera.
Sono dell’idea che tutto ciò che nasce dal software grafico possa essere portato in html, nel pieno rispetto dei web standards e ovviamente nei limiti dell’accessibilità e dell’usabilità.
Affermare il contrario presuppone spesso una scarsa padronanza dell’html e dei css, forse perchè nel proprio percorso formativo ci si è concentrati troppo sull’aspetto “codice” a scapito di quello “grafico”.
9
Intanto un grazie a tutti delle risposte!
@ floyd: hai messo in luce quello che potrebbe essere un limite del disegnare la bozza in Photoshop: dover progettare un layout liquido/fluido.
@caruso_g: Ciao. Non penso di pormi dei limiti, o meglio si, ma sono comunque gli stessi limiti che mi verranno imposti al momento di implementare il tutto con i CSS.
Per quanto riguarda l’esportazione in xHTML & CSS di Photoshop mi sono trovato una volta a dover debuggare un layout fatto a quella maniera per renderlo cross-browser e non te lo auguro! Non so se tu hai mai provato.
Il discorso è lo stesso di prima: una tabella era sempre correttamenta visualizzata (in ogni browser), i CSS vogliono più cura e non possono essere generati in automatico così.
Io alla fine ci vedo un bel risparmio di tempo.# - postato da Gianluca - 30 Ottobre 2007 - 16:04
10
Anche io sono della scuola Photoshop.
Secondo me indispensabile per capire come strutturare tutti gli elementi della pagina, compresi spazi e margini.Usare Photoshop non significa dover usare ImageReady. Si usa Photoshop per avere ben chiaro quello che si farà con xhtml/css.
Se però uno è come il pittore di heroes e gli diventano gli occhi bianchi e comincia a scrivere codice css/xhtml avendo già tutto in testa, ogni singola linea, allora come non detto.
11
Generalmente passo per almeno tre fasi:
1. bozza su carta, schemi molto semplici di quella che sarà la struttura base dei componenti. Durante questa fase già inizio a pensare ad alcuni accorgimenti per facilitarmi il debug senza perdere tempo nella fase 2 a realizzare elementi grafici che poi non si possono implementare.
2. disegno su photoshop.
3. mockup in xhtml e css.
Non sono assolutamente d’accordo che la fase photoshop appartenga al passato, ai tempi delle tabelle. Anzi. Oggi grazie ai CSS si possono realizzare layout fatti con photoshop in pochissimo tempo.
12
Photoshop innanzitutto, poi dipende dalle scuole di pensiero, nel senso che io quando creo in photoshop posso lasciar libera un po’ la fantasia, pur avendo bene in testa già perlomeno i div principali in cui sarà diviso il layout. Quindi diciamo che faccio le due cose in simultanea ahaha
Dipende se uno ci mette più tempo a strutturare in html e debuggare o se a creare le cose in photoshop e cosa decide di fare per primo. Partire da una base in html mi capita di farlo per siti che non permettono una grande personalizzazione, ma la norma per me è l’inverso ;)
ps complimenti Gianlu per questa nuova opportunità su Edit!!
13
Non posso far altro che quotare ciò che ha detto Francesco prima di me, anche perchè, se cambio idea, con ps lo modifico, ed è solo un disegno.
Se dovessi invece progettare siti partendo dall’html, non avrei nessuna base sulla quale partire, e nel caso poi modifico tutto, sarebbero ore di lavoro buttate.
Avendo invece il disegno pronto, a farlo coi css è un attimo.
Progettando direttamente dal codice secondo me si perde una parte fondamentale di quello che è il nostro lavoro: il disegno.
# - postato da Marco Olivetti - 30 Ottobre 2007 - 16:43
14
@Gianluca: Non ho mai usato ne una ne l’altra opzione di esportazione di Photoshop.
Creo tutte le slices a mano. Così come il codice.
Dal mio punto di vista poi, non vi sono limiti nel css ma soluzioni da trovare rispetto al layout. Penso, ma ribadisco nel totale rispetto del tuo modo di impostare il workflow, che se mi imponessi i limiti del css nello stilizzare l’(x)html non avrei mai usato gli angoli arrotondati solo perchè sono un estensione proprietaria di Firefox, o non avrei mai avuto colonne di uguali altezze perchè il css non mi permette di impostarle uguali.
Ti ripeto, considera il tono del commento totalmente amichevole e assolutamente non polemico.
Semplicemente uno scambio, costruttivo, di opinioni. :)
15
In effetti… al cliente che bozza presenti? presupposto che di html nn ci capirà una mazza voglio sperare che gli si sottoponga un mockup grafico, altrimenti come fa ad approvare o meno?
Solo dopo si passa a renderlo in html, a me è stata insegnata come procedura standard, perlomeno per i nuovi clienti o per siti da rifare completamente!
16
Non sono un grafico ma un programmatore ed il mio sito lo dimostra. :) Però, per la mia esperienza e anche per la mia purtroppo non spiccata dote creativa mi trovo decisamente meglio a sviluppare codice html e css a partire da un determinato layout grafico.
Durante lavori che ho svolto in collaborazione disegnatori la grafica nasce a mano, poi con photoshop (in collaborazione tra grafico e programmatore, per determinare qual è la soluzione più opportuna per ottenere un determinato effetto con i css) e infine con l’applicazione degli elementi grafici al codice html e css puro da parte del programmatore.Come dice anche @@ Lauryn @@, poi, il cliente che bozza vuole? non credo proprio codice…
Comunque, approvo anche il commento di @@ cirox @@: infatti quando mi tocca fare da solo lavori personali, non avendo doti creative in termini di grafica vado avanti a suon di codice sistemando, poi, a poco a poco le problematiche di compatibilità cross-browser.
Ho trovato comunque questo post molto utile per avere un piacevole scambio di idee.
17
E’ proprio vero che è solo questione di punti di vista: al contrario di Gianluca io ho sempre considerato obsoleto partire dal codice, forse perchè è così che lavoravo sei o sette anni fa. Ritengo la progettazione in Photoshop (o Fireworks) fondamentale e la successiva implementazione in HTML e CSS la naturale conseguenza.
Non capisco perchè partire da Photoshop dovrebbe far correre il rischio di disegnare qualcosa che poi sarà di difficile implementazione o, addirittura, dovrebbe essere sinonimo di codice di vecchio stampo: un web designer serio ha ben stampati in mente quali sono i limiti delle proprie possibilità e, per quanto riguarda la seconda questione, se così fosse, vuol dire che non ha ben compreso come funziona un layout tableless… ma allora il problema è di altra natura :-)
Tra l’altro, non capisco nemmeno perchè i layout tableless dovrebbero essere antitetici a Photoshop: dove sta scritto? Con un’implementazione tableless faccio tutto (ma proprio tutto) quello che qualche anno fa facevo con le tabelle, non ho mai visto limitazioni in ciò.
Al contrario, ritengo che partire sempre e solo dal codice possa porre dei limiti alla creatività, e lo vedo come un segno di pigrizia che ci può portare a fossilizzarci sempre e solo sui soliti due o tre layout che conosciamo bene per poi distribuire due fotine, una qua ed una là :-)# - postato da Yangtze - 30 Ottobre 2007 - 22:09
18
Secondo me è solo questione di abitudine…
Conosco ottimi web designer che lavorano prima con Photoshop e altri ottimi web designer che sviluppano subito in HTML e CSS…Certo: quando lavorano ognuno per conto proprio tutto fila liscio, quando lavorano in coppia è un bel problema… ;)
19
io parto dalla carta…schizzo a matita..idea e impostazioni…poi passo a phothop..bozza e relative modifica e poi via di xhtml e css…
20
io parto comunque da photoshop, da una “carta bianca” su cui stendere le idee. Cerco però di tenere sempre bene a mente come andrò ad implementare i vari elementi nei css, e solitamente non ho mai problemi a passare dal mockup al template.
All’inizio lavoravo soprattutto da css e aggiungevo man mano gli elementi grafici fatti con photoshop, ma dovendo far vedere la bozza al cliente, trovo più comodo partire da photoshop e poi, una volta approvata la veste grafica, a lavorarci su.
21
L’utilizzo di Photoshop non è affatto sinonimo di obsoleto. L’importante è che chi utilizza Photoshop non stia pensando di fare un depliant e che il disegno sia già pensato per la futura integrazione con XHTML CSS.
Tutto qui.
22
ma nessuno che usa più la carta??
io faccio ancora schizzi su fogli e ottengo la mia idea grafica. poi passo a photoshop tenendo in mente quali sono le problematiche poi nel convertire il tutto in css.ed è per questo che mi trovo bene con designer che hanno basi di css.
poi ovviamente l’approccio può cambiare in base al progetto e al design.
# - postato da davide - 31 Ottobre 2007 - 11:01
23
un esempio per tutti: lavorare partendo dal css è come iniziare a costruire una casa senza progetto, senza sapere come dovrà essere fatta, mettendo e provando i vari mattoni per vedere se ci vano benne…
così almeno la vedo io.
24
Io parto dalla grafica, secondo me all’inizio è fondamentale incentrarsi su questo aspetto, il primo che salta all’occhio del cliente ma anche di qualunque altra persona.
Poi, una volta trovata una bella soluzione grafica, inizio a pensare al codice e al relativo CSS: praticamente inizio a riempire i vari div esportando di volta in volta un pezzo di layout.
Usare le “porzioni” non è affatto obsoleto, se uno poi le usa con criterio come faccio io, ossia esporta pezzo per pezzo.
25
caro laburno mi sorprendi un po :)
io preferisco il primo metodo: chi conosce a fondo i css sa cosa può disegnare e cosa non tramite photoshop, ti da un’ idea del risultato(quindi cosa aggiungere o levare, il posizionamento del contenuto)e con l’ utilizzo delle griglie hai una bozza quasi identica alla pagina html finale.# - postato da swign - 31 Ottobre 2007 - 13:18
26
se non hai intenzione di creare un sito megapacchiano con mille disegnini partire da photoshop va benissimo e non e’ affatto obsoleto, perche tutto quello che crei in PS lo puoi replicare con i css
Simone
27
Il processo creativo dovrebbe partire sempre dall’impostazione grafica. Ormai con le tecniche CSS, i layout a griglia etc., si può fare tutto.
Forse l’unico vincolo rimasto è l’utilizzo dei font…
Il flusso in genere è questo:
- approvazione grafica
- approvazione prototipo “grigio”
- implementazione template
- programmazione
- test
- produzione# - postato da Carlo - 31 Ottobre 2007 - 14:41
28
E si, il primo metodo va per la maggiore. “So che qualcuno di voi non la pensa come me, perciò fatevi avanti e dite la vostra” dice Brindisi, ma qui si son fatti avanti tutti eh eh ;-)
29
Non sono ancora così abile nel maneggiare i CSS per trasformare ciò che ho disegnato con Photoshop in un’interfaccia grafica-web, però devo dire che, creando diversi Layout Uncoded, ci sono dei web designer davvero in gamba che riescono a trasformare tutto (! o quasi) ciò che uno ha disegnato virtualmente! (Solitamente quando realizzo template tramite PS, non penso molto a ciò che può essere realizzato e a quali sono i limiti dei CSS, realizzo un buon prodotto e solitamente questo viene trasformato pari pari grazie ad un lavoro dei tanti siti PSD2XHTML) :)
//Nikopolidis
# - postato da nikopolidis - 08 Novembre 2007 - 22:59
30
ciao ciicccooooì weflerjhfb ewmfblawe erekjbfmdnmnzxmncf emnder alooooooooooooo dhgf
# - postato da jane - 20 Maggio 2008 - 16:24