¿Qué materiales debe enviar un diseñador web con Photoshop a un desarrollador?

He estado implementando principalmente aplicaciones web y de escritorio y esta es la primera vez que realmente comencé a trabajar con un diseñador gráfico en un sitio web que es de uso público. En este caso, el diseñador gráfico no está haciendo HTML + CSS, sino que está usando Photoshop.

¿Qué tipo de material se proporciona normalmente como resultado final para que el diseño se implemente realmente?

Por ejemplo, ¿debería obtener algo más que solo archivos PSD? ¿Qué hay de los diferentes estados (como desplazamiento del enlace, estado activo, etc.) o diseño receptivo? ¿Estoy esperando detalles demasiado técnicos?

Cualquier ayuda apreciada.

Por lo general, se entrega una maqueta para que el desarrollador sepa a qué ir. Esto puede variar de un archivo PSD a solo una imagen plana, dependiendo del flujo de trabajo. En mi experiencia, entregue una maqueta plana con todas las dimensiones, tamaños de fuente y colores utilizados más el conjunto completo de cortes e imágenes usadas. Básicamente todo lo que se requiere para terminar el proyecto. Pero eso realmente depende del flujo de trabajo. Si el sitio se realiza principalmente en CSS, se requiere otra información (valores de gradiente, valores de sombra paralela, ajustes preestablecidos de recorte de imagen).

Los estados de los botones siempre deben estar cubiertos. Dependiendo de cómo se harán (puramente CSS o sectores), debe proporcionar todos los colores, radios y tamaños o los sectores en sí.

El diseño receptivo es un poco diferente. Diseñar la vista es solo el comienzo. Lo que el desarrollador también necesita saber es cómo deben comportarse los elementos cuando el sitio se "encoge" gradualmente. ¿Cómo se comportará un menú si se muestran menos opciones? Lo que es solo un elemento de lista en la vista web completa puede cambiar la pantalla dramáticamente en la vista móvil. ¿Qué sucede con todos los elementos de desplazamiento (no se pueden usar en la vista móvil)?

La respuesta de @ KMSTR es la solución del 80%, pero si su diseñador es un verdadero profesional, él / ella será específico sobre pequeños detalles, como cuándo deberían ocurrir las animaciones de transición o en qué orden deberían cargar los elementos DOM.

Si su diseñador se encuentra en ese 20% superior, solicite algunos flujos de usuario y tramas de UX, o si son especialmente talentosos, un prototipo hecho en After Effects o Flash. Idealmente, no dejan ningún aspecto sin especificar.

Todo depende de lo que haya acordado con el diseñador gráfico.

Algunos diseñadores gráficos no saben nada más que PhotoShop, y se perderán si solicita algo más que un archivo PSD grande.

Algunos diseñadores gráficos están bien versados ​​en HTML, CSS y JS y pueden construir todo por usted.

Y luego está todo en el medio.

Le recomiendo que se incline hacia lo último, ya que un diseñador web que entiende que el medio producirá diseños mucho más avanzados, receptivos, independientes del navegador y flexibles que el primero, pero el primero puede funcionar siempre y cuando UI Developer está trabajando estrechamente con el diseñador de UI.

Debe indicar lo que se espera por adelantado.

Soy completamente capaz de entregar archivos psd, páginas html / css o incluso páginas jquery / php / mysql completamente dinámicas. Lo que se entrega depende de lo que se solicita.

Si el desarrollador solo quiere un psd, eso es todo lo que entrego y es su trabajo crear las páginas. Nunca me tomaría la molestia de construir páginas si no se quieren.

Tengo algunos clientes que confían en mí para obtener páginas totalmente funcionales que se pueden colocar en sitios web existentes.

Tengo algunos clientes que tienen un desarrollador que se niega a usar cualquier código que se les envíe e insiste en codificar todo ellos mismos, por lo que entrego archivos psd.

No hay una respuesta sólida para su pregunta. Es una cuestión de lo acordado antes de comenzar el trabajo.

Realmente quieres un diseñador que esté bien versado en HTML, CSS y Javascript. El lugar donde trabajo, nunca vemos un solo archivo de Photoshop. El diseñador nos da una URL de la página, copiamos toda su interfaz de usuario y luego completamos los espacios en blanco para que la página sea dinámica.

Hay algunas razones por las cuales esto es preferible:

1) No hay duda acerca de lo que quiere el diseñador: no hay números o notas de interpretación, puede ver exactamente cómo debe verse el producto final antes de siquiera tocarlo. Todos los valores CSS están ahí, cada función de JavaScript o animación.

2) Reduce mucho el tiempo que necesita dedicar a trabajar en esa página. Sí, todavía tiene que volver a cablearlo y tal vez hacer montañas de trabajo en el back-end, pero le ahorra una cantidad considerable de tiempo en el frente.

Por supuesto, no siempre tienes el control del tipo de diseñador con el que trabajas. Pero si está con uno que solo hace photoshop, asegúrese de que realmente obtenga todos los estados de los botones y sepa qué animaciones desea el diseñador. Con suerte, si trabaja en ese tipo de entorno, puede simplemente subir y hablar con su diseñador y pedirle una aclaración cuando la necesite.