Soy diseñador en una agencia que se dedica principalmente al desarrollo web de "PSD a HTML". Sé que algunos pueden argumentar que no es ideal, pero dentro de mi agencia es así como funciona porque la mayoría de los diseños deben aprobarse antes de que se produzcan. Los clientes y los ejecutivos simplemente no confían en que los desarrolladores produzcan cosas sin aprobación.
El flujo de trabajo habitual es:
Esto deja el "intermedio" de los diseños a los desarrolladores, quienes generalmente pueden resolverlo, pero a veces terminan pareciendo inestables (como un dispositivo móvil a 320 px que parece basura a 600 px porque 640 px es el punto de interrupción de la tableta).
Dejando a un lado las fallas, la mayoría en nuestra agencia se sienten cómodos con este enfoque, pero anhelan algo que pueda producir experiencias receptivas más cercanas / más perfectas en píxeles. Sé que no será al 100%, pero espero que podamos acercarnos.
Mi pregunta, en concreto, es:
¿Cómo demuestro yo, el diseñador, lo que debería suceder entre puntos de interrupción para los desarrolladores, además de producir docenas de diseños para todos los espacios entre puntos de interrupción (agencia pequeña y no tenemos personal de producción)?
Estoy abierto a las técnicas de Photoshop, o al uso de otro software si ayuda, siempre que nos permita producir diseños antes del desarrollo para la aprobación del cliente, y aún pueda producir un documento intuitivo para que los desarrolladores lo codifiquen en HTML. (como lo hace un PSD en capas con sugerencias de tipo y otras cosas).
¡Gracias!
Honestamente, esos tamaños intermedios son más comodines que cualquier otra cosa. Diseñaría contra los "estándares" (iPhone 5 y 6/Samsung Galaxy) y cualquier cosa en el medio depende posiblemente de ajustar el punto de interrupción (es decir, si la tableta baja a 600 px en lugar de 640 px). Si hay un punto intermedio y realmente necesita que se vea de cierta manera, eso requeriría un nuevo punto de interrupción. No hay forma de evitar eso. Ya sea que se trate de algo para dictar al desarrollador que el cliente nunca ve porque todo se hace en el desarrollo, o si se produce un diseño.
Recomendaría tener una conversación abierta con los desarrolladores de su agencia sobre cómo les gustaría recibir orientación (en lugar de una gran cantidad de diseños). A partir de un ejemplo personal, recomendamos seguir la cuadrícula de respuesta de 12 columnas para los diseños de escritorio en Photoshop, entendiendo que los diseños móviles serán impulsados por cualquier marco CSS que se utilice, en nuestro caso, es Bootstrap. Por lo tanto, los creativos preparan el diseño del escritorio, tal vez incluso un par de estados móviles para una sola plantilla, los creativos y los desarrolladores lo revisan conjuntamente para asegurarse de que todos tengan claras las reglas que guían el espaciado y la reorganización/cambio de tamaño del contenido para dispositivos móviles, y la codificación. Una vez que se completa la construcción inicial, pasa por una revisión interna con los creativos de la agencia, quienes pueden proporcionar comentarios específicos sobre cualquier problema de diseño que hayan identificado.
Esto funciona bastante bien para las construcciones de sitios web personalizados, manteniendo las horas creativas sanas y brindando a los desarrolladores la orientación suficiente para ejecutar una construcción.
Para mantener el proceso optimizado y minimizar las idas y venidas entre diseñadores y desarrolladores, también sugerimos que los creativos ejecuten sus archivos PSD a través de Web Preflight para identificar posibles problemas de codificación antes del inicio del desarrollo.
marco
max tokman