Va bene iniziare il layout di un sito Web con un mockup di Photoshop?

Question

Questo è un argomento di best practice.

L'ho visto come metodo preferibile per alcuni sviluppatori web. Invece di fare il layout CSS da zero, iniziano prima un mockup di Photoshop e poi lo decodificano in CSS.

Cosa ne pensi di questo approccio?

Best to all,

Answer 1

È veloce. Questo è il motivo per cui uso sempre questo metodo. Non vuoi perdere tempo a creare CSS cross-browser finché non sei effettivamente impostato su un layout.

Answer 2

Agile methodology suggerirebbe qualcosa di facilmente modificato in consultazione con il cliente. Dave Thomas nel Agile Web Development with Rails suggerisce scarabocchi su carta. Ma qualsiasi cosa deve essere migliore di troncare direttamente il CSS fatto a mano a meno che tu non sappia veramente cosa vuoi.

Stavo pensando di dire "scarabocchi potrebbe non tagliato per una presentazione formale", ma l'impressionante SO folla mi ha battuto ad esso nei commenti ...

Answer 3

Se sei produttivo in quel modo, perché non? Non tutti riescono a immaginare il loro sito Web perfettamente come stanno digitando un gruppo di parentesi angolari.

Più seriamente: è il tuo lavoro, quindi è tua responsabilità farlo in un modo che ti permetta di farlo in modo efficace.

Answer 4

I mockup sono grandiosi, ma non so se Photoshop è la prima cosa che vorresti provare per lo scopo: all'inizio, quando stai solo cercando di ottenere un layout logico per varie pagine del sito (prima di perfezionarlo in termini di look & c), una lavagna con marcatori cancellabili a secco e post-it permette di riorganizzare mock-up molto veloci e ripetuti per il primo brainstorming. Una volta che vi è un accordo ragionevole su uno (o pochissimi) possibili accordi di informazioni, quindi strumenti visivamente più precisi entrano in gioco.

BTW, basta non dimenticare di fotografare la lavagna prima di cambiarla (qualsiasi cellulare decente lo farà, non stai provando per l'alta qualità qui ;-) ogni volta che ci sono idee o suggerimenti che potresti voler rivedere o medita in futuro!

Answer 5

Durante la prototipazione, è importante scegliere la fedeltà corretta. This article from BoxesAndArrows fornisce una buona introduzione alle varie opzioni e ai loro usi.

mi piace particolarmente questa linea dal Bill Buxton che l'articolo cita:

Non esiste una cosa come alta o bassa fedeltà, solo la fedeltà appropriata.

In this TechTalk by the Facebook Design Team, menzionano come utilizzano Photoshop nella loro processo di progettazione (IIRC è da qualche parte a metà percorso, ma io non riesco a trasmettere attraverso il video).

Answer 6

La maggior parte degli artisti grafici di webdesign funzionano in questo modo.

Molti programmatori trovano semplicemente una perdita di tempo.

Ha vantaggi e svantaggi.

Vantaggi:

• Molti Grafici Grok Photoshop/Illustrator più di loro Dreamweaver.

• Il cliente riceve un'anteprima del prodotto finale che funziona ovunque: mac, pc, firefox, ie, safari, qualunque sia. L'invio di un'anteprima html nelle prime fasi della produzione con gli sviluppatori che utilizzano firefox e il cliente che utilizza MSIE suscita sempre problemi.
  
  E non pensare di essere dal lato intelligente, scarabocchiare html MSIE guidato. Iniziare con un html non standard e convertirlo in standard è più doloroso che farlo in un altro modo.
  C'è un'altra cattura: molti clienti del sito Web tendono ad avere un Mac e utilizzano Safari. I web committents tendono ad avere un gusto per la grafica più forte rispetto alla media, quindi la possibilità di imbattersi in maniaci del Mac è più alta in questo settore che in altri.

• Altre alternative di progettazione possono essere preparate spendendo meno tempo su ciascuna. Questo potrebbe essere un enorme vantaggio mentre si affrontano oscure nuvole di dirigenti senza responsabili decisionali sul lato del cliente. I prototipi alternativi passeranno di mano in mano fino a quando verrà raggiunto un consenso generale su un progetto o sull'altro.

Svantaggi:

• "taglio" del graphic design in HTML diventa un lavoro in più e non si capisce chi è paghera 'per quel tempo in più.

• Preferisce flussi di lavoro di progettazione rigidi e grafici. I clienti concordano preventivamente su una determinata anteprima ed è ciò che ottengono per contratto. Ogni modifica grafica significa denaro, comportamento e programmazione invece tendono a non essere ben definiti, o peggiori, mal definiti dal modello.

• La ricerca di pixel perfetto aderenza cross-browser al modello può farti impazzire. Se hai concordato un determinato progetto rigido con il cliente, questo potrebbe diventare un problema terribile da perseguire.

• Scarpa trucchi CSS sporchi in nel vostro disegno. Utilizzando un mockup HTML, il cliente avrebbe approvato un progetto guidato dal codice con meno trucchi sul posto.

Comunque, non vorrei suggerire photoshop per un mockup, ma inkscape. (o illustratore, se venerate Adobe bruciando mucchi di soldi in cerchi magici a mezzanotte)

Anche una fase di scarabocchi è buona, mentre si discute del contratto dal vivo con il cliente.

Preferisco matita e carta a punte di feltro e io sparo le idee per l'archiviazione e l'invio di e-mail. Quando si tratta di scarabocchiare, chiunque fa ciò che sembra più naturale.

Non fare nulla e affidarsi a esempi di siti di esempio e schermate per riferimento grafico è sempre un'opzione.

Answer 7

Personalmente, e in ogni società di webdev a cui ho lavorato, ho sempre preso in giro Photoshop. Saltare dritto in CSS e markup è più di un approccio dal basso verso l'alto e ha senso per molti programmatori, ma nello sviluppo web bisogna tenere presente che ci sono un'estetica da considerare e una direzione creativa da seguire. Non è sufficiente che il tuo prodotto sia funzionale, ha bisogno dell'input di un creativo-regista/grafico-designer professionista per rendere il prodotto piacevole da guardare e da utilizzare.

Nella mia esperienza, il problema è sempre stato il wrestling con la rigidità dei membri del team. Grafici che si concentrano sull'estetica e si rifiutano di comprometterne l'integrità progettuale; che a volte si traduce in layout impossibili o estremamente difficili e non semantici. Sviluppatori che si rifiutano categoricamente di compromettere l'integrità del loro codice laddove esiste una soluzione praticabile, che potrebbe essere un po 'meno elegante. La chiave è avere un team creativo che abbia familiarità con i CSS e ciò che è e non è possibile e un team di ingegneri che apprezzano l'importanza del design e dell'estetica.

Nella mia vita freelance (avendo avuto il beneficio di lavorare in entrambi i campi) trovo molto più facile creare un mock-up in Photoshop perché so cosa posso e cosa non posso fare. E i mockup di Photoshop sono molto più semplici da modificare sul feedback dei clienti rispetto a CSS e markup. Inoltre, se puoi mostrare al tuo cliente un modello, si sentono più sicuri perché sanno che il loro denaro sta andando in un progetto ben pianificato con una direzione definita.

Spero che questo aiuti!

Answer 8

Sono un programmatore web che conosce html e css abbastanza bene. Posso usare un programma grafico per le sue funzionalità di base, ma non è il mio obiettivo progettare un sito web grafico completo.

Ho permesso a un grafico di utilizzare il suo programma grafico per creare un layout di aspetto piacevole e di codificare il sito Web a mano in html e css.

Funziona per me e offre ai miei clienti un design che gli piace (perché un designer grafico avrà sempre un design molto più gradevole della maggior parte dei programmatori web).