Maqueta web para desarrolladores

"cuál es el proceso/flujo de trabajo"

No hay uno. O mejor dicho, no hay uno solo . Varía de un proyecto a otro, de un equipo a otro.

Procesos comunes que he visto.

1. Envíe un PSD grande a Dev

El diseñador pasa todo su tiempo en Photoshop y luego envía el archivo al desarrollador para averiguar cómo convertirlo en HTML. Esto puede funcionar cuando el diseñador no tiene habilidades de desarrollo y el desarrollador tiene un buen ojo para el diseño que puede tomar la decisión adecuada sobre qué partes del PSD deben ser imágenes, texto, CSS, etc.

2. Cree maquetas, estructuras alámbricas, guías de estilo

Esto es como la opción 1, pero tiende a usarse en equipos mucho más grandes. Un equipo de diseño creará documentación detallada (archivos de Photoshop, estructuras alámbricas, prototipos, guías de estilo, etc.) y luego la enviará a los equipos de desarrollo para que la construyan.

3. Los diseñadores son los desarrolladores y/o los desarrolladores y los diseñadores trabajan codo con codo

En algunos casos, el diseñador web es un desarrollador front-end capaz. O el diseñador web está en el mismo equipo que el desarrollador front-end. En este escenario, hay mucha menos documentación formal y mucha más colaboración, y el diseño se modifica en el código real en el que se entregará.

y muchos otros...

Por supuesto, hay tantos flujos de trabajo como equipos de diseño y desarrollo web, pero creo que encontrará que la mayoría caerá en uno de los 3 campos anteriores.

La opción 1 funciona bien en equipos muy pequeños.

La opción 2 rara vez funciona. Pero tiende a ser la 'norma' en las compañías Fortune 500 que invierten mucho en desarrollo y diseño subcontratados.

La opción 3 es lo que más disfruto y siento que produce los resultados finales más sólidos.

Como desarrollador, puedo decir que solo necesita enviar un archivo a un desarrollador y asegurarse de que el desarrollador tenga el software adecuado para abrir este archivo, como Photoshop u otro.

Acerca de las fuentes:

Por supuesto, si usa alguna fuente principal, puede describirla, pero si el desarrollador tiene un psd, un desarrollador puede verificarlo sin sus comentarios en caso de que la capa se represente como texto y no solo como una capa gráfica.

Sobre los #colores

Como en el caso de las fuentes, creo que es más simple para el desarrollador verificarlo usando Photoshop.

Solo una nota aquí que he notado durante el trabajo. Por ejemplo, Photoshop permite a los diseñadores crear algunas capas con un valor flotante como 33,33 pt, etc. Pero, por ejemplo, si decimos sobre un sitio web o una aplicación móvil, no podemos dividir, por ejemplo, una capa con un ancho de 100 px en 3 partes, solo si alguna parte lo hará. tener un píxel adicional, como 33, 33, 34 o cualquier otro orden de estos valores. Sólo tenga en cuenta estas cosas.

Estoy de acuerdo con Matrosov Alexander, y siendo un novato aquí no puedo comentar, pero tengo algo que agregar.

Muchos diseñadores web tienen diferentes flujos de trabajo. Según mi experiencia, es mejor preguntarle al desarrollador cuál sería su documentación preferida. Por ejemplo, como desarrollador web, si no puedo participar directamente cuando se toman decisiones de interfaz de usuario, me gusta ver guiones gráficos/miniaturas de cómo interactúan o se animan los elementos. La mayoría de los diseñadores con los que trabajo ya los crean, así que solo toman capturas de pantalla o fotos de ellos y los envían con el diseño.

Como alguien que trabaja con un desarrollador, creo que sería muy útil compartir con ellos el PSD en Creative Cloud (y no lo digo solo por ser Gerente de Producto en Adobe) porque no solo puede permitir que las personas descarguen el PSD pero también puede ver de un solo vistazo todas las fuentes/tamaños de fuente, los colores, los degradados utilizados y usar medidas dentro del navegador para obtener valores (y el texto) y colaborar mejor a partir de ahí.

Aquí hay más información sobre esto: http://helpx.adobe.com/creative-cloud/help/extract-css-images-psd-files.html

Estamos en una situación similar trabajando con PSD para producir sitios web de alta fidelidad y nuestro enfoque fue crear una aplicación para marcar visualmente los diseños para crear rápidamente una especificación completa. Todavía estamos ajustándolo, pero si alguien está interesado, estaré encantado de compartir un enlace una vez que esté listo, tratando de mantener bajo control la autopromoción flagrante.