Hola diseñadores, ¿están volviendo locos a sus compañeros desarrolladores?
Lo más probable es que tenga algunos hábitos que no se traducen particularmente bien al código, y le está haciendo la vida difícil al desarrollador que trabaja con usted en los proyectos. ¿Quieres ser un mejor compañero de trabajo (y amigo)?
Aprenda cómo comunicarse y diseñar mejor para que los desarrolladores lo amen. Agilizará los proyectos y facilitará la vida laboral. Y tampoco se trata de llevar dulces a las reuniones. Puede hacer que los desarrolladores lo amen haciendo pequeños cambios en su forma de trabajar.
El mayor problema entre diseñadores y desarrolladores es que a menudo trabajan en burbujas. Las personas o los equipos no comienzan a hablar de un proyecto hasta que se termina el primer borrador del diseño. Luego hay una transferencia del diseñador al desarrollador.
Suspiro.
Esa no es la forma de trabajar. Los diseñadores y desarrolladores deberían involucrarse juntos desde el principio para hablar sobre cómo un proyecto se unirá. Si bien el diseñador puede centrarse en el color, los tipos de letra y las imágenes, el desarrollador puede proporcionar información sobre la usabilidad, la función y el rendimiento.
Los diseñadores y desarrolladores deberían tener una buena idea de cómo se ve la otra parte. Los diseñadores deben comprender suficiente código y usabilidad para hablar con los desarrolladores y comprender los desafíos; los desarrolladores deben tener un poco de conocimiento de la teoría del diseño para que puedan hacer sugerencias cuando las ideas de diseño no son adecuadas para la web.
Una de las cosas más importantes que un diseñador puede hacer es preparar y empaquetar archivos de la misma manera todo el tiempo.
¿Cuántas veces has abierto un documento de Photoshop con cientos de capas sin nombre? No le dé este tipo de archivo a un desarrollador. Cada capa y estilo, independientemente del software que use, debe nombrarse de manera adecuada.
¿Cuántas veces has abierto un documento de Photoshop con cientos de capas sin nombre?
Los estilos, las muestras de color y la tipografía deben ser consistentes en todo el diseño. (Un botón no debe verse diferente de una página a otra).
Nombra los archivos y estilos de la misma manera para cada proyecto. Agrupe los elementos similares de manera similar y use un sistema de carpetas consistente. De esta forma, el desarrollador no tiene que volver a aprender a encontrar piezas y elementos con cada nuevo proyecto.
Uno de los mayores desafíos para los proyectos de diseño que incluyen piezas impresas y digitales es la gestión de tipografía. No utilice fuentes de escritorio para proyectos de impresión para diseños web o de aplicaciones y simplemente suponga que funcionarán. (A menudo no lo hacen)
Para proyectos digitales, opta por Google Fonts para tipografía. Esto significa que es posible que deba encontrar un tipo de letra similar para que la web coincida con lo que está utilizando para imprimir. (Está bien.)
No hagas que el desarrollador haga esto por ti. Elija las fuentes de Google comparables y úselas desde el principio. Incluso puede observar tipos de letras impresas y digitales en su guía de estilo.
La razón detrás de esto es simple: incrustar fuentes puede ser un poco complicado. Además, Google Fonts es gratuito y garantizará que no incurra en costos adicionales del proyecto. (Mientras lo hace, considere hacer lo mismo con los iconos y use un paquete como Font Awesome, que le permite al desarrollador aplicar estilos a los iconos usando CSS, ¡y no importar un montón de archivos de imagen!)
Si bien nos referimos al tema de los activos de imagen, exportar y empaquetar los archivos correctamente es muy importante. Mientras que un desarrollador puede abrir y exportar todos los archivos de imagen para satisfacer sus necesidades, puede preguntar qué necesitan y hacerlo en el camino.
Esto le garantiza que obtendrá los cultivos que desea en las imágenes, mientras comprime los archivos para ayudar a que su sitio web se cargue rápidamente.
No intentes hacer esto por tu cuenta. Pregunte al desarrollador cómo deben guardarse, nombrarse y comprimirse los archivos para un mejor uso.
Hay tantos tamaños de dispositivos y relaciones de aspecto para tener en cuenta al diseñar sitios web y aplicaciones móviles. Como diseñador, necesita conocer el tamaño del lienzo, los márgenes, el relleno, etc. para crear una maqueta que sea realmente utilizable.
Hable con el desarrollador antes de comenzar a dibujar para asegurarse de saber cómo se ve el entorno de diseño antes de comenzar. No hay nada peor que un diseño que se ve increíble en Photoshop o Sketch y no se reproduce en su totalidad.
Necesita saber estas cosas por adelantado:
Ya se ha mencionado varias veces, pero la comunicación entre el diseñador y el desarrollador es realmente la clave para hacer que todo esto funcione. La comunicación puede hacer o deshacer proyectos, afectar los plazos e influir en el diseño y la funcionalidad del proyecto final.
La comunicación puede hacer o deshacer proyectos
Lleva a tu desarrollador a almorzar. Conócelos. Haga muchas preguntas a lo largo del camino. Si no está seguro de si algo funcionará o no, solo pregunte. Los desarrolladores no son personas atemorizantes y es mucho más fácil responder a una pregunta al principio del proceso que tener que replantearse todo el concepto.
Mientras habla con el desarrollador y hace preguntas, profundice. Aprende algunos conceptos básicos de desarrollo si aún no tienes estas habilidades en tu arsenal de diseño.
Los diseñadores que trabajan en proyectos digitales deberían verse en:
En realidad, es posible que nunca escriba código, pero aprender principios de desarrollo lo convertirá en un mejor diseñador porque comprenderá el valor de las herramientas y los flujos de trabajo.
El proceso de diseño se extiende al desarrollo también. Los diseñadores, deben reconocer que el desarrollador es tan vital para el proceso de diseño como usted.
Con esto en mente, cree una guía de estilo "viviente" que no solo incluya el color y las fuentes, sino también los componentes. Todos deberían poder acceder y actualizar el documento a medida que el proyecto cobra vida.
Una buena guía de estilo ayudará a todos los que trabajan en un proyecto a mantener la coherencia con los elementos visuales, proporcionará contexto para las elecciones de diseño, servirá como punto de colaboración para el proyecto y ayudará a estandarizar el código. La guía de estilo de vida les permite a todos compartir ideas y brindar orientación durante todo el proyecto. No es solo un documento que alguien crea justo antes de que un diseño se active.
Ponga la siguiente información en la guía de estilo para aprovecharla al máximo:
Respeta la grilla. En el diseño de sitios web receptivos, la grilla es más que solo una guía para la colocación de elementos en la pantalla, también puede dictar dónde van los elementos en diferentes tamaños de pantalla y cómo se amontonan y mezclan las columnas.
La grilla puede ayudarlo a diseñar y mantener el flujo. (El desafío es que no puede romper arbitrariamente las reglas de diseño).
Piénselo de esta manera: su diseño tiene cuatro bloques de contenido alineados en la pantalla en una fila (con anchos de canal iguales) en un monitor de escritorio de pantalla completa. Luego, en una tableta, esos bloques cambian para formar dos columnas, con dos filas. En un dispositivo móvil, cambian para formar una sola columna con cuatro filas.
Comprender cómo la grilla impacta el tamaño de los objetos y cómo se desplazarán los objetos en diferentes dispositivos es importante porque puede dictar cómo se diseña para el contenido que tiene. Piensa en el mismo escenario nuevamente. ¿Qué pasa si tienes cinco bloques de contenido? Se requeriría un rediseño para garantizar que se crea un contorno visual consistente.
La verdadera clave para asegurar que los proyectos se unan con facilidad es ser flexible. Las técnicas y estándares de diseño para la web cambian todo el tiempo. Mientras que algunos proyectos le permiten ser un riguroso con los detalles y el diseño inmóvil y receptivo en realidad no funciona de esa manera.
La regla de oro cuando se trata de trabajar con desarrolladores es ... no seas idiota.
Los diseñadores con los que sea fácil trabajar ganarán más respeto y mejores relaciones con los desarrolladores. Esto conducirá a proyectos mejores y más exitosos. Debería ser evidente, pero a menudo hay un montón de comportamiento idiota por ahí. No caigas en esa trampa.
Sea flexible, abierto y hable de cosas con su desarrollador. Ellos te amarán por eso.