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

10

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.

Tx3
fuente
2
¿No estás preguntando demasiado tarde? Estas son preguntas que deberían haberse respondido antes de comenzar el trabajo.
Scott
Tienes razón, hice un poco de trampa en la pregunta al dar la impresión de que el contrato ya está hecho. Hemos tenido una discusión preliminar sobre cuál es la tarea y los dos estamos listos para hacer esto. Ahora es la parte donde debo decir mis requisitos desde el punto de vista técnico.
Tx3

Respuestas:

10

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)?

KMSTR
fuente
4

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.

japonés
fuente
3
"un prototipo hecho en After Effects o Flash" = o, preferiblemente, un prototipo hecho en HTML, CSS y JS.
DA01
Estoy de acuerdo, todos esos detalles deben ser abordados. Estaba cubriendo los conceptos básicos desde el punto de vista de los diseñadores. Para mí, estos detalles se han trabajado en colaboración en el pasado, en lugar de que yo dicte lo que sucede. Depende de la relación laboral del desarrollador y diseñador, pero personalmente me gusta trabajar de un lado a otro tratando de combinar los requisitos de diseño y codificación para encontrar resultados ideales.
KMSTR
@KMSTR para el registro, te voté;)
nipponese
2

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.

DA01
fuente
2

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.

Scott
fuente
1

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.

Hanna
fuente
Estoy pagando por el diseñador, así que quiero que él / ella se centre en cosas que no puedo hacer, que es la parte del diseño. Puedo manejar la implementación si se proporciona toda la información necesaria. Lo que solo quiero saber de antemano es lo que normalmente se requiere del diseñador y cuándo es demasiado técnico. Parece que realmente se trata del conjunto de habilidades del diseñador + lo que el cliente pregunta.
Tx3
Si es un tipo de trato único, asegúrese de obtener el PSD de origen.
Hanna