¿Cuál es la forma correcta de trabajar con un diseñador gráfico? [cerrado]

Recientemente, trabajamos con un diseñador gráfico (organizado por el cliente) para proporcionar la máscara para una aplicación Django + Bootstrap que habíamos creado. El diseñador proporcionó una serie de imágenes estáticas del nuevo diseño, junto con un documento que describe algunos atributos técnicos (tamaños de fuente, colores, algunas dimensiones, etc.).

Resultó ser increíblemente lento implementar esto. Aunque todo el sitio era básicamente una página principal, una página de índice y media docena de páginas de detalles, pasé al menos 5 días implementando los cambios de CSS y HTML. Así que me arriesgaré y llamaré a esto El camino equivocado .

Mi enfoque básico fue:

1. Compare la imagen estática y la representación actual, y observe una diferencia.
2. Adivina qué cambio sería necesario en el CSS / HTML
3. Haz ese cambio
4. Ve al paso 1.

Algunos de los problemas particulares eran que no entendía que el diseño incluía un cambio de 8 columnas a 12, algunas imágenes provistas en el formato incorrecto (.png's puede renderizarse de manera diferente en diferentes combinaciones de navegador / plataforma), problemas tratando de deshacer el estilo de Bootstrap, el lucha de CSS habitual para lograr una representación perfecta de píxeles, etc. Y ocasionalmente tuve que reorganizar las plantillas HTML para obtener un cierto comportamiento.

¿Cuál es el camino correcto?

En mi empresa, hay algunas personas especializadas en este trabajo.

Son diseñadores. Y ellos saben HTML. Pueden ser un puente entre los diseñadores y los ingenieros de front-end; que suelen ser. De esta manera, solo tenemos que integrar su HTML.

Este es un trabajo duro. Hay una razón por la que los sitios como "PSD a HTML en 24 horas" funcionan bien. La solución en nuestra empresa es tener personas especializadas en hacer esto. Para nosotros, trabajar con HTML es muy sencillo.

No hay bala de plata.

No estoy seguro de que haya una "forma correcta", pero una forma razonablemente efectiva de cooperar con un diseñador es crear primero un sistema sin estilo que use plantillas y permita el intercambio fácil de todas las plantillas. Luego, una vez que tenga una interfaz funcional pero sin estilo (o con un estilo mínimo), entrega los resultados al diseñador para su diseño.

Un ejemplo decente de este tipo de patrón de diseño sería jQueryUI ( http://jqueryui.com/ )

Primero, tengo que admitir que nunca he trabajado con front-end web hasta ahora.

Pero creo que podría ser una buena práctica para usted y el diseñador escribir en prosa sobre cómo debería ser el diseño final. De esa manera, puede estar más seguro de que es consistente, porque olería si describiera diferentes tablas para cada página. Prose puede facilitar su implementación, porque en realidad está escribiendo código, que está más cerca de su implementación que las imágenes.

También intente hacer que el diseñador se centre en los componentes, no en páginas completas. Si obtiene los componentes de una página correctamente, componerlos en toda la página es un paso mucho más fácil.

He estado desarrollando HTML / CSS con varios diseñadores y, como ya se dijo, no hay una "bala de plata". Los diseñadores con los que he trabajado no sabían mucho (nada) sobre html / css. Algunos de ellos tenían cierta experiencia en diseño web y debo decir que cuando tienen ese conocimiento, siempre termina con un desarrollo más fácil y un "mejor sitio web", especialmente cuando se trata de una respuesta UX.

Supongo que algunas empresas que buscan un sitio web no saben / ignoran es: cualquiera puede decir que es un diseñador gráfico / desarrollador web / diseñador web / diseñador de interfaz de usuario con conocimientos básicos (o incluso ninguno, sí, lo he visto). Mientras que los "reales" pueden hacer un esfuerzo adicional y producir sitios web efectivos y fáciles de mantener. Trato de "educar" al cliente y explicarle que el diseño web implica habilidades que los diseñadores gráficos "solo imprimen" no tienen. Cuando esto funciona, normalmente envío al cliente a diseñadores con los que ya he trabajado y con los que tengo un flujo de trabajo común.

Dicho esto, a menudo sucede por muchas razones que terminas construyendo sitios web con personas que tienen habilidades gráficas y no tienen habilidades de diseño web. En esta situación, la mejor manera que he encontrado para ahorrar tiempo de codificación y no terminar con diseños no desarrollados es involucrarme en el proceso de diseño y comunicarme con el diseñador y explicarle qué puede / no puede hacer y qué sería más simple / mejor desde tu punto de vista.

Aunque esto puede ser difícil de organizar en algunas situaciones, es importante explicarle al cliente y al diseñador que "si crees que el diseño web forma parte de un proyecto web, terminarás ahorrando tiempo, dinero y muchos dolores de cabeza" y que serás feliz de participar en el proceso de diseño para ahorrar tiempo y dinero.

Este es el flujo de trabajo que trato de seguir en la mayoría de los proyectos:

1. El diseñador crea estándares gráficos si no existen (por lo general, no me involucro aquí. Solo trato de insinuar al diseñador hacia las fuentes compatibles con la web, por ejemplo: fuentes de Google)
2. Mokup realizado por el diseñador. Me involucro aquí y trabajo con el diseñador para crear diseños compatibles con la web (especialmente para los receptivos) antes de que el cliente lo vea .
3. cliente valida mokup
4. Codifico el mokup

El tiempo que he pasado comunicándome y trabajando con el diseñador se ahorra durante el proceso de codificación y esto termina con un código más simple, más fácil de mantener y más ordenado.

Esto no te salva de un diseñador feliz que te llamó el viernes por la noche con una maqueta muy bonita que el cliente ha visto y ahora quiere con esta frase: "Hola, ¿podrías codificar esto para mí, la fecha límite es ... ayer! " Entonces, toda la teoría se desmorona y, si estás buscando trabajo en ese momento, eres bueno para un gran esfuerzo durante todo el fin de semana.

Conclusión

No creo que esto sea muy diferente a cualquier código relacionado con el no proyecto, la mejor manera de trabajar con otras personas es comunicarse con ellos.

Como diseñador gráfico convertido en desarrollador web full stack, para mí esta ha sido la parte fácil hasta ahora. Encuentro que muchas veces hay una brecha de comunicación entre un equipo de diseño de UX y los desarrolladores que implementan el producto. Claro, los documentos ayudan, pero el proceso puede comenzar a sentirse mucho más natural una vez que ocurren algunas conversaciones cara a cara sobre la estrategia. Además, sé que el tiempo es escaso para todos, pero trate de participar durante la fase de diseño y diseño. Esto puede ayudar enormemente cuando se necesita comunicación entre un diseñador y desarrollador. El proyecto adquiere más de un esfuerzo de equipo unificado y menos de un escenario de "Bueno, ya he hecho mi parte, por encima del muro". He encontrado que es muy beneficioso que el trabajo de diseño y desarrollo ocurra en paralelo, aliente al equipo de diseño a que le suministre tramas al principio del proceso. De esa manera, puede hacer un pase de estilo que se ocupa únicamente del diseño y el posicionamiento. Luego, a medida que los muertos se vuelven más ricos y completos. Tome otro pase CSS para la apariencia y otros atributos de estilo. Al menos esto evita que tenga que concentrarse en todo a la vez.

Estoy enfrentando un problema similar. Tengo la idea de que herramientas como Greasemonkey o Tampermonkey se pueden utilizar para ese propósito. La semana pasada, solicité comentarios sobre esta idea: ¿Cómo externalizar la interfaz de usuario de una aplicación web dinámica? , pero no obtuvo respuestas satisfactorias.

Con estas herramientas puede inyectar CSS, HTML y Javascript en una página. En mi idea, le das la URL del sitio de trabajo al diseñador y esperas a cambio los scripts de Greasemonkey. Teóricamente, debería poder integrarlos muy rápidamente en el sitio existente. De esta manera, será el trabajo del diseñador escribir el HTML y CSS y hacer que el sitio realmente funcione. Sin embargo, esto requiere muchas más habilidades de programación por parte del diseñador.

Sé que esta idea requiere mucha elaboración. Pero aún no lo he intentado y no sé si alguien más está haciendo esto. Puede haber algunos problemas con la implementación.