Esiste un vantaggio nel fare un mock-up di immagini complete invece di immergersi direttamente nella scrittura di HTML / CSS?

In passato, molte aziende e web designer avevano un flusso di lavoro composto da due o tre parti, minimo: design, markup, back-end. Si stanno generalizzando e le linee potrebbero sfocarsi un po '... ma sono sicuro che tu abbia capito bene.

Spesso il web designer era "solo visivo" e sarebbe responsabile solo della costruzione di un mockup molto dettagliato nei software di modifica delle immagini, come Photoshop o Fireworks. I modelli mostrerebbero ogni possibile aspetto di una pagina web dai colori e dalle scelte di tipo, agli sfondi, icone, foto e altre immagini da usare. Ma il "designer" non si è mai preoccupato dell'attuale costruzione e realizzazione dal vivo. Erano concentrati esclusivamente sull'aspetto.

Una volta che il progetto è stato approvato (rivedendo questi file di immagine) è stata intrapresa la seconda fase: la transizione dei file di immagine in HTML / CSS attivo.

• In un ambiente a sede singola o indipendente, il web designer potrebbe aver utilizzato le sezioni ed esportato in HTML tramite alcune opzioni interne dell'applicazione. In rare occasioni il progettista può costruire frame di pagina HTML / CSS di base.

• In alcuni ambienti aziendali, questi prototipi rimarranno sotto forma di un file di immagine più livelli (.psd, .png [per Fireworks]) per il web designer e il progettista avrebbe mai preoccuparsi di attuare qualsiasi markup o codice. Il "designer" non ha mai dovuto preoccuparsi di come costruire HTML o CSS per implementare questo mockup di immagini che ha creato. I file di immagine sono stati / sono passati a uno "sviluppatore" che è quindi responsabile della costruzione di HTML / CSS che corrisponda al file di immagine.

Immagino che alcuni lavori ancora molto in questo modo. Tuttavia, con i progressi nei linguaggi di markup, vale a dire CSS3 e miglioramenti del supporto del browser, in molti casi il tempo impiegato a costruire con cura una rappresentazione raster di una pagina Web completa può essere in gran parte inutile in molti casi.

Con il markup corrente è molto semplice implementare molte esigenze di web design direttamente tramite HTML / CSS e l'uso dell'applicazione di immagini è limitato alla generazione di risorse di immagini di piccole dimensioni o fotografie che potrebbero essere necessarie. (Le librerie e / o i modelli come Bootstrap hanno ulteriormente spinto questa nozione.)

Nel mio flusso di lavoro, in particolare, mi sono allontanato dai modelli a pagina intera a meno che non siano specificamente richiesti. Lo faccio per migliorare la velocità di progettazione e garantire che ciò che viene approvato sia vicino a ciò che verrà infine reso nei browser. In effetti, non ho creato un mockup di pagina intera da un certo numero di anni. Ma sono consapevole che ci sono ancora flussi di lavoro che utilizzano questo metodo.

C'è qualche reale vantaggio nel costruire prototipi di pagine intere nell'applicazione di editing delle immagini prima di immergersi direttamente in HTML / CSS per la progettazione?

Il vantaggio di costruire modelli a pagina intera è la divisione del lavoro.

Nelle aziende più grandi che hanno sia un designer che uno sviluppatore (front-end), il compito del designer è quello di progettare e il compito dello sviluppatore è quello di scrivere codice .

Avere questa divisione consente al designer di dedicare tutto il proprio tempo a lavorare sull'aspetto, sull'aspetto e sull'interfaccia per il sito Web e non deve sapere nulla su come viene creato. Possono creare un design di qualità superiore e riflettere sulle decisioni più a lungo proprio perché non stanno lavorando per ottenere il codice per fare quello che vogliono allo stesso tempo.

Inoltre, consente allo sviluppatore di scrivere più codice non dovendo pensare a come apparirà, inclusi i piccoli dettagli e gli stati variabili. Implementano il design nel miglior modo possibile e possono passare a un altro progetto.

Se anche il progettista è lo sviluppatore, penso che la maggior parte delle persone stia iniziando a schierarsi con te in quanto creano un prodotto più approssimativo e ripetono rapidamente per testare le cose. Ciò consente di testare rapidamente le idee anziché creare un documento Photoshop perfetto per i pixel.

Tuttavia, la progettazione approssimativa e iterativa senza codice è anche un approccio valido e incredibilmente utile soprattutto per i layout e il flusso di lavoro. I linguaggi di markup e le nuove tecnologie non hanno inventato il lavoro rapido con idee approssimative :)

Prenderò su Guffa con questa risposta. Per essere chiari, non sto cercando di individuare Guffa, ma piuttosto, i punti puntati sono molto comuni che sento. Vorrei offrire anche alcuni contrappunti. Non sto dicendo che Guffa ha torto e ho ragione. Sto semplicemente offrendo un contrappunto.

1. La parte creativa del processo di progettazione soffre se si impiega del tempo a cercare di capire come fare cose diverse in HTML e CSS.

Questo è vero se uno non considera il codice ugualmente creativo. Photoshop e HTML / CSS / JS sono entrambi i mezzi su cui un artista può lavorare. Proprio come una vernice è creativa come il carbone, così Photoshop può essere creativo come un mezzo come HTML / CSS / JS.

E il grande vantaggio di lavorare direttamente in HTML / CSS / JS è la multidimensionalità di esso. Photoshop, alla fine della giornata, è una tela piatta. HTML / CSS / JS è una tela dinamica con fluidità, interazione, animazione, ecc.

In conclusione, direi che il codice è il mezzo più creativo in questo caso.

2. Quando i designer e i programmatori sono persone diverse, anche se i progettisti sono abbastanza bravi in ​​HTML e CSS, raramente sono davvero bravi a scrivere codice. Il risultato sarebbe (in vari gradi) un codice inefficiente che è gonfio e difficile da mantenere.

Il contrappunto a questo, purtroppo, è qualcosa a cui mi imbatto spesso: la maggior parte degli sviluppatori che lavorano in ruoli dedicati lavorano in organizzazioni più grandi (dove i ruoli dedicati sono più la norma) e, a causa della mancanza di conoscenza interdisciplinare ( e spesso una totale mancanza di codice del livello di presentazione) rende alcuni dei più gonfiati un codice front-end difficile da mantenere che abbia mai visto.

Il punto è che non prenderei in considerazione le capacità di progettazione visiva di qualsiasi indicazione delle loro capacità di programmazione. Farei un ulteriore passo avanti e direi che un talentuoso generalista che conosce design e codifica - anche se non sono il miglior designer o il miglior programmatore, può spesso creare un prodotto complessivo migliore rispetto al team altamente segregato semplicemente perché che possono vedere l'immagine più grande mentre creano. Molto meno si perde nella traduzione.

3. Se inizi a scrivere il codice prima di avere una visione chiara di come dovrebbe essere il design, fai delle scelte disinformate su come costruire il codice. Il rischio è che peggiori il codice e limiti le possibilità di progettazione.

Ma la progettazione in codice non significa che sia il tuo codice di produzione. Ho lavorato su progetti in cui la maggior parte del codice che abbiamo creato era puramente per la progettazione e poi ha realizzato alcuni prototipi. Una volta terminato, faremmo una riscrittura pulita. Ciò ha avuto l'ulteriore vantaggio di essere in grado di trovare molti "gotcha" nel primo round di programmazione.

4. Il codice HTML e CSS può cambiare praticamente con piccole modifiche nella progettazione, il che renderebbe il processo di progettazione più statico. Rischi di limitarti alle sole modifiche facili da apportare nel codice.

Il contrario è che il progettista si sta limitando alle sole modifiche facili da realizzare in Photoshop. Non è un ottimo argomento in entrambi i casi.

L'unico motivo per non fare prima un mockup di Photoshop è se il progettista non capisce i limiti del codice. Non vorrai mai dare al cliente una comp di qualcosa che non può avere in finale.

Fintanto che il PSD rappresenta qualcosa che può essere replicato abbastanza da vicino in CSS / HTML (date le limitazioni cross-browser e cross-media), lo farei in Photoshop (o InDesign - conosco alcuni designer che lo compongono). È più veloce e molto più semplice manipolare le immagini. Deridere su CSS per me significherebbe codificare prima di scrivere, se questo ha senso.

Esistono diversi motivi per mantenere l'elemento di design separato dall'elemento di generazione del codice, ad esempio:

• La parte creativa del processo di progettazione soffre se si impiega del tempo a cercare di capire come fare cose diverse in HTML e CSS.

• Quando i designer e i programmatori sono persone diverse, anche se i progettisti sono abbastanza bravi in ​​HTML e CSS, raramente sono davvero bravi a scrivere codice. Il risultato sarebbe (in vari gradi) un codice inefficiente che è gonfio e difficile da mantenere.

• Se inizi a scrivere il codice prima di avere una visione chiara di come dovrebbe essere il design, fai delle scelte disinformate su come costruire il codice. Il rischio è che peggiori il codice e limiti le possibilità di progettazione.

• Il codice HTML e CSS può cambiare praticamente con piccole modifiche nella progettazione, il che renderebbe il processo di progettazione più statico. Rischi di limitarti alle sole modifiche facili da apportare nel codice.