Quali materiali un web designer che utilizza Photoshop deve inviare a uno sviluppatore?

Ho implementato principalmente applicazioni Web e desktop e questa è la prima volta che ho effettivamente iniziato a lavorare con un graphic designer su un sito Web per uso pubblico. In questo caso il graphic designer non sta facendo HTML + CSS, ma usando Photoshop.

Quale tipo di materiale viene normalmente fornito come risultato finale affinché il progetto sia effettivamente implementato?

Ad esempio, dovrei ottenere qualcosa di più di un semplice file PSD? Che ne dici di stati diversi (come hover link, stato attivo ecc.) O design reattivo? Mi aspetto dettagli troppo tecnici?

Qualsiasi aiuto apprezzato.

Un modello viene solitamente consegnato allo sviluppatore per sapere cosa fare. Questo può variare dal file PSD a solo un'immagine piatta, a seconda del flusso di lavoro. Nella mia esperienza, consegnando un modello piatto con tutte le dimensioni, le dimensioni dei caratteri e i colori utilizzati oltre al set completo di sezioni e immagini utilizzate. Fondamentalmente tutto ciò che è necessario per completare il progetto. Ma ciò dipende davvero dal flusso di lavoro. Se il sito è realizzato principalmente in CSS, sono necessarie altre informazioni (valori di gradiente, valori di ombra esterna, impostazioni predefinite per il ritaglio delle immagini).

Gli stati dei pulsanti dovrebbero essere sempre coperti. A seconda di come saranno realizzati (puramente CSS o sezioni), è necessario fornire tutti i colori, i raggi e le dimensioni o le sezioni stesse.

Il design reattivo è un po 'diverso. Progettare la vista è solo l'inizio. Ciò che lo sviluppatore deve anche sapere è come gli elementi dovrebbero comportarsi quando il sito viene gradualmente "ridotto". Come si comporterà un menu se vengono visualizzate meno opzioni? Ciò che è solo un elemento dell'elenco nella visualizzazione Web completa può cambiare radicalmente lo schermo nella visualizzazione mobile. Che cosa succede a tutti gli elementi al passaggio del mouse (non è possibile utilizzarli nella vista mobile)?

La risposta di @ KMSTR è la soluzione all'80%, ma se il tuo designer è un vero professionista, sarà specifico su piccoli dettagli come quando si dovrebbero verificare animazioni di transizione o quale ordine caricare elementi DOM.

Se il tuo designer è tra i primi 20%, chiedi alcuni flussi utente e wireframe UX, o se sono particolarmente talentuosi, un prototipo realizzato in After Effects o Flash. Idealmente non lasciano alcun aspetto non specificato.

Tutto dipende da ciò che hai concordato con il graphic designer.

Alcuni grafici non sanno altro che PhotoShop e andranno persi se chiedi qualcosa di diverso da un file PSD di grandi dimensioni.

Alcuni grafici sono esperti in HTML, CSS e JS e possono costruire tutto per te.

E poi c'è tutto in mezzo.

Ti consiglierei di appoggiarti a quest'ultimo, in quanto un web designer che capisce il mezzo produrrà progetti che sono molto più lungimiranti, reattivi, agnostici del browser e flessibili rispetto al primo, ma il primo può funzionare troppo a lungo lo sviluppatore dell'interfaccia utente sta lavorando a stretto contatto con il progettista dell'interfaccia utente.

Dovresti dichiarare ciò che è previsto in anticipo.

Sono in grado di fornire file psd, pagine html / css o persino pagine jquery / php / mysql completamente dinamiche. Ciò che viene consegnato dipende da ciò che viene richiesto.

Se lo sviluppatore vuole solo un psd, questo è tutto ciò che fornisco ed è il loro compito creare le pagine. Non mi sarei mai preso la briga di costruire pagine se non fossero volute.

Ho alcuni clienti che fanno affidamento su di me per pagine completamente funzionali che possono essere rilasciate in siti Web esistenti.

Ho alcuni clienti che hanno uno sviluppatore che rifiuta di usare qualsiasi codice inviato a loro e insiste nel codificare tutto da soli, quindi consegno file psd.

Non esiste una risposta solida per la tua domanda. È una questione di cosa è stato concordato prima di iniziare i lavori.

Volete davvero un designer esperto in HTML, CSS e Javascript. Il posto in cui lavoro, non vediamo mai un singolo file di Photoshop. Il designer ci dà un URL alla pagina, copiamo su tutta la sua interfaccia utente e quindi riempiamo gli spazi vuoti per rendere dinamica la pagina.

Ci sono alcuni motivi per cui questo è preferibile:

1) Non c'è dubbio su ciò che il designer vuole: non ci sono numeri o note per l'interpretazione, vedi esattamente come dovrebbe essere il prodotto finale prima ancora di toccarlo. Ci sono tutti i valori CSS, ogni funzione javascript o animazione.

2) Riduce ogni volta che devi spendere per lavorare su quella pagina. Sì, devi ancora ricollegarlo e forse fare montagne di lavoro sul back-end, ma ti fa risparmiare un considerevole tempo sul fronte.

Ovviamente, non hai sempre il controllo del tipo di designer con cui lavori. Ma se sei con uno che fa solo Photoshop, assicurati di ottenere davvero tutti gli stati dei pulsanti e di sapere quali animazioni desidera il designer. Spero che se lavori in quel tipo di ambiente, puoi semplicemente andare su e parlare con il tuo designer e chiedere chiarimenti quando ne hai bisogno.