it-swarm.it

Pro / contro dei modelli PSD rispetto ai modelli HTML

Ho letto alcuni articoli ( questo e questo ) recentemente che mi stanno aprendo gli occhi sui modelli HTML invece dei soliti modelli PSD.

Nell'articolo citano alcuni professionisti:

  • Le modifiche sono molto più veloci (comprese le modifiche ai colori e, in una certa misura, ai caratteri).
  • Quando imposti la pagina come HTML, stai mostrando al cliente qualcosa di molto più vicino all'aspetto del prodotto finale.
  • Possono vedere gli effetti di un layout liquido cambiando le dimensioni della finestra.

Contro:

  • Non tutti i visual designer possono creare un mockup in HTML. Dovrà essere un compito per due persone. Una persona HTML e una persona Photoshop.

Cosa vedete come pro/contro di entrambi gli approcci?

24
milesmeow

Se stai costruendo un sito Web o un'applicazione, i modelli HTML sono di gran lunga superiori perché stai progettando il modello nel formato il più vicino possibile al prodotto finale. Ciò consente di impostare le aspettative molto più facilmente, ti limita a ciò che è possibile nel prodotto finale e offre una flessibilità molto maggiore.

Questa convenzione sta gradualmente diventando nota come "progettazione nel browser". La progettazione nel browser elude il metodo a cascata per sua stessa natura. I mockup di Photoshop introducono una barriera tra il visual designer e l'interaction/UX designer: la persona che lavora in Photoshop può trovarsi lontano, pensando completamente in termini di fedeltà visiva, senza considerare il prodotto finale e i vincoli di accompagnamento del browser. Una volta che il mockup di Photoshop è pronto, viene "lanciato" al team UX per passare alla fase successiva. Ciò non promuove un processo iterativo, orientato al feedback.

Ho scritto un post sul blog un paio di mesi fa su questa filosofia, che abbiamo usato per costruire il nostro strumento di prototipazione. Ecco alcuni articoli a cui ho fatto riferimento che potrebbero essere utili (incluso quello di Megan Fisher a cui ti sei collegato):

Altri designer e sviluppatori sono d'accordo con lui:

  • 37signals " Perché ignoriamo Photoshop spiega il loro processo: i mockup di Photoshop non sono interattivi; non ti danno la sensazione del flusso dell'app; ti incoraggiano a concentrarti sui dettagli troppo presto.
  • L'articolo di 24ways.org di Meagan Fisher Make Your Mockup in Markup parla di più sui principi di Clarke e spiega come iniziare con la struttura HTML consente ai progettisti di iterare rapidamente su più pagine layout.
  • Questi 12 suggerimenti per la progettazione nel browser oltre a Design Shack offrono anche alcune buone intuizioni.
18
Rahul

È un problema di fedeltà.

Il problema è che entrambi i documenti possono avere una fedeltà superiore rispetto agli altri a seconda di ciò su cui ci si sta concentrando.

Un prototipo HTML è davvero l'unico modo per simulare davvero qualsiasi interazione di complessità anche moderata. Semplicemente non c'è modo di documentare completamente la progettazione dell'interazione all'interno di un file PSD.

Al contrario, se ti trovi in ​​un ambiente in cui il design visivo viene costantemente modificato/migliorato/ripetuto, il PSD potrebbe essere il miglior "documento di registrazione" per gestire gli elementi del design visivo.

Alla fine, non penso che dipenda da PSD o HTML. È necessario entrambi in importi diversi a seconda delle specifiche delle proprie esigenze in base al progetto e ai membri del team.

13
DA01

Un potenziale svantaggio dell'uso dei modelli HTML è che il client potrebbe pensare di aver completato l'applicazione, anche se gli hai detto di cosa si tratta.

Seriamente, ho conosciuto persone - sia clienti che manager - che vedendo un modello usando gli strumenti che normalmente usi per costruire il prodotto reale pensano di aver svolto la maggior parte del lavoro e sono sorpreso quando dici che ci vorranno altri 6 settimane (o comunque lunghe) per svolgere effettivamente il lavoro.

Avere i mockup rimossi un passo potrebbe aiutare a dissipare questo malinteso.

Tuttavia, detto questo, un mockup dinamico consentirà a te e al cliente di comprendere meglio come funziona il sistema e come navigare attraverso l'applicazione.

7
ChrisF

Non è il lavoro del visual designer di preparare modelli interattivi, ma piuttosto quello del I/UX designer. È vero, spesso sono la stessa cosa, principalmente per motivi di budget, ma i loro lavori sono molto diversi.

La tua domanda potrebbe in effetti essere riformulata come Statico vs. Dinamico modelli.

Secondo me i modelli dinamici sono quasi sempre superiori a quelli statici:

Il motivo principale secondo me è che possono essere utilizzati per accurati test di usabilità: immaginare che stai facendo qualcosa è molto diverso dal farlo effettivamente, rendendoti conto del tempo impiegato, della quantità di clic, del movimento, ecc. Quindi fornisce un vera sensazione del flusso nel sistema.

Tuttavia, nulla è privo di prezzo: la creazione di un modello dinamico richiede in genere un tempo notevolmente maggiore. Inoltre, crea maggiori aspettative con il cliente: se premi un pulsante e fa qualcosa nel sistema, ti aspetteresti che tutti i pulsanti funzionino allo stesso modo (e alcuni potrebbero essere meno rilevanti per lo scenario principale).

Con un modello statico potrebbe anche essere più facile guidare i clienti e gli sviluppatori attraverso i casi d'uso - devi semplicemente mostrare gli schermi uno per uno nell'ordine "corretto", assicurandoti che tutti i casi d'uso siano coperti come volevi. Durante l'utilizzo di uno dinamico si potrebbe dare agli utenti "troppa" libertà, facendoli perdere casi d'uso chiave, ecc.

A proposito: non devi essere un programmatore per creare modelli HTML. Esistono molti strumenti (ad esempio Axure, Balsamic, Flair Builder e molti altri) che consentono la creazione di tali modelli da parte di non programmatori.

5
Dan Barak

Con la crescente popolarità del design reattivo ha persino più senso usare un modello dinamico (presumibile HTML). Durante la progettazione del layout approssimativo iniziale mi ritrovo a ridimensionare costantemente il browser per vedere come funziona il layout a più larghezze.

Cercare di specificare un design reattivo con un'immagine statica non è possibile, ed esprimerlo con più immagini statiche è dispendioso in termini di tempo e eccessivamente complesso.

2
obelia

Risposta aneddotica

Di recente ho lavorato su un sito in cui il modello principale è stato progettato in Photoshop (che chiamerò "PS"), ma le singole sezioni del sito devono ancora essere progettate. Stavo lavorando su diverse sezioni con alcuni requisiti di interfaccia utente non standard e ho dovuto decidere se li avrei derisi in Photoshop o semplicemente li avrei fatti con HTML/CSS. Ho scelto quest'ultimo ed è stato MOLTO grato per questo.

In realtà ho iniziato contrassegnando il contenuto della pagina e gli elementi di navigazione in HTML. Una volta che l'ho avuto, ho appena iniziato a giocare con i CSS e vedere cosa ha funzionato. Sono stato in grado di creare rapidamente diversi layout totalmente diversi e di provarli subito in un browser. C'erano diverse opzioni che sapevo non avrebbero funzionato quasi all'istante e che erano in grado di abbandonarle rapidamente (dove normalmente avrei finito il progetto in PS). Sono stato in grado di aggiungere anche elementi interattivi (mostra/nascondi/ecc.) Che non sarebbero stati possibili in Photoshop.

Ci sono alcune cose che vanno semplicemente way più veloci in HTML vs PS, ad esempio le tabelle. Ci vuole un vero sforzo per progettare visivamente tabelle in PS con contenuto di testo variabile all'interno delle celle e delle intestazioni. È super veloce in HTML e in realtà vedi come sarà realmente.

Naturalmente questo ti porta solo così lontano perché non puoi fare tutto con i CSS. Di tanto in tanto tornavo a Photoshop e creavo un'immagine simile e tale per una parte particolare, ma per la maggior parte ero sorpreso di vedere quanto potevo fare solo con i CSS.

La mia opinione

Lo prenderò ancora caso per caso. Ma in futuro mi appoggerò sicuramente ai modelli HTML.

2
jessegavin

Se ho ragione, credo VB è stato inizialmente scritto come un modo per rovesciare rapidamente alcuni modelli ... Tenendo presente ciò, direi che la risposta "giusta" è probabilmente per seguire la strada dei modelli HTML.

Tuttavia, sono in procinto di creare modelli per un nuovo prodotto durante la digitazione e, francamente, non credo che lo sforzo coinvolto nella creazione di modelli HTML che sembrano buoni come in formato PSD, sia utile. Ottenere un po 'di testo, o un'immagine, o ecc., Per apparire esattamente dove lo si desidera, con una progettazione del layout complessa richiederà uno sviluppatore web più tempo di quanto farebbe un artista di Photoshop con livelli simili di abilità.

Inoltre, se hai intenzione di fare qualcosa di più del semplice testo e dei progetti di base, probabilmente utilizzerai Photoshop (o pacchetti grafici simili) per fare quel lavoro di progettazione - perché preoccuparti di complicare la faccenda?

Certo, se esiste una vera giustificazione per l'utilizzo di modelli interattivi (ad esempio, un grande gruppo di utenti per dimostrare come pensi che funzionerà un determinato display interattivo), ne vale la pena.

Ma se stai solo mostrando a un cliente come pensi che dovrebbero apparire diverse finestre di un'applicazione, non credo che ci sia la giustificazione per lo sforzo extra?

1
Sk93