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

41

Recientemente, trabajamos con un diseñador gráfico (organizado por el cliente) para proporcionar la apariencia de una aplicación Django + Bootstrap que habíamos construido. 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ño de fuente, colores, algunas dimensiones, etc.).

Resultó ser increíblemente lento consumir esto. Aunque todo el sitio era básicamente una página de inicio, 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 arriesgo y lo llamo The Wrong Way .

Mi enfoque básico fue:

  1. Compare la imagen estática y el renderizado actual, y note una diferencia.
  2. Adivina qué cambio se necesitaría en el CSS / HTML
  3. Haz ese cambio
  4. Vaya al paso 1.

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

¿Cuál es el camino correcto?

    
pregunta Steve Bennett 29.05.2013 - 04:11

6 respuestas

15

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 por lo general son. 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 24h" funcionan bien. La solución en nuestra empresa es tener personas especializadas en hacer esto. Para nosotros, trabajar con HTML es muy fácil.

No hay una bala de plata.

    
respondido por el Florian Margaine 29.05.2013 - 09:54
6

No estoy seguro de que exista una "manera correcta", pero una forma razonablemente efectiva de cooperar con un diseñador es construir 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), entregue los resultados al diseñador para que los aplique.

Un ejemplo decente de este tipo de patrón de diseño sería jQueryUI ( enlace )

    
respondido por el Eva 29.05.2013 - 07:51
3

Primero, debo admitir que nunca he trabajado con frontales web hasta ahora.

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

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

    
respondido por el SpaceTrucker 29.05.2013 - 09:19
0

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

Supongo que lo 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) en ya sea. Mientras que los "reales" pueden hacer un esfuerzo adicional y producir sitios web efectivos y sostenibles. Intento "educar" al cliente y explicar que el diseño web implica habilidades que los diseñadores gráficos no tienen "solo imprimir". Cuando esto funciona, normalmente envío al cliente a diseñadores con los que ya he trabajado y 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 desplegables es involucrarse en el proceso de diseño y comunicarse con el diseñador y explica lo que puedes / no puedes hacer y lo que 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 cree que el diseño web forma parte de un proyecto web, se ahorra tiempo, dinero y dinero" y que Estarás encantado 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 fuentes compatibles con la web, por ejemplo: fuentes de google)
  2. Mokup hecho por el diseñador. Me involucro aquí y trabajo con el diseñador para crear diseños compatibles con la web (especialmente para los que responden) antes de que el cliente lo vea .
  3. el cliente valida mokup
  4. Codifico el mokup

El tiempo que he pasado comunicándome y trabajando con el diseñador se guarda 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 limpio.

Esto no te salva de un diseñador feliz que te llamó el viernes por la noche con un mokup muy bonito que el cliente ha visto y ahora quiere con esta frase: "Hey pall, podrías codificar esto para mí, la fecha límite es ... . ¡ayer!" Entonces, toda la teoría se desmorona y si buscas trabajo en ese momento, eres bueno para un discurso durante todo el fin de semana.

Conclusión:

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

    
respondido por el web-tiki 08.10.2014 - 15:42
-1

Como diseñador gráfico convertido en desarrollador web de pila completa, para mí esta ha sido hasta ahora la parte fácil. 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 se producen algunas conversaciones cara a cara sobre la estrategia. Además, sé que el tiempo es escaso para todos, pero trate de involucrarse durante la fase de diseño y diseño. Esto puede ayudar enormemente cuando se necesita comunicación entre un diseñador y un desarrollador. El proyecto toma más de un esfuerzo de equipo unificado y menos de un escenario de "Bueno, he terminado mi parte, por encima del muro que va". He encontrado que es muy beneficioso que el trabajo de diseño y desarrollo se realice en paralelo, alentar al equipo de diseño a que le proporcione los esquemas de alambre al inicio del proceso. De esa manera, puede hacer un pase de estilo que se ocupe únicamente del diseño y la posición. Luego, a medida que los diálogos se hacen más ricos y completos. Tome otro pase de CSS para la apariencia y otros atributos de estilo. Al menos, esto evita que tengas que concentrarte en todo a la vez.

    
respondido por el CF Grugan 17.08.2015 - 13:41
-2

Estoy enfrentando un problema similar. Tengo la idea de que herramientas como Greasemonkey o Tampermonkey pueden usarse para ese propósito. La semana pasada, pedí 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 puedes 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 las secuencias de comandos de Greasemonkey a cambio. En teoría, debería poder integrarlos muy rápidamente al sitio existente. De esta manera, será tarea 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 en el lado del diseñador.

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

    
respondido por el lunr 29.05.2013 - 05:44

Lea otras preguntas en las etiquetas