8 consejos para colaborar con los desarrolladores (Guía del diseñador)

Los diseñadores necesitan mejorar su juego técnico

Los lectores de cierta edad recordarán una época en la que los diseñadores y los desarrolladores rara vez se cruzaban en un proyecto y, a menudo, estaban encerrados en partes completamente diferentes de una organización. Los diseños se transfirieron cuidadosamente a los desarrolladores a través de un tercero y todos simplemente cruzaron los dedos y esperaron lo mejor.

Incluso hace tan solo cinco años, había muchas dudas y dudas ante la mera idea de que los diseñadores fueran capaces de comprender los conceptos básicos de CSS y HTML y usarlos para simular sus propios diseños.

En 2015, el debate continúa , pero al menos está claro que los diseñadores deben poder comprometerse de manera significativa con los fundamentos técnicos de sus creaciones para brindar soluciones que funcionen. Como argumenta el excelente artículo reciente de Ivana McConnell en Smashing Magazine , los diseñadores y desarrolladores simplemente tienen que ser capaces de colaborar de manera efectiva en estos días, y los límites entre sus funciones son cada vez más borrosos.

La realidad de un mercado laboral verdaderamente global es que si no está preparado para ampliar sus conjuntos de habilidades técnicas y aprender a trabajar en estrecha colaboración con los desarrolladores, hay más que suficientes diseñadores talentosos que lo estarán.

Con eso en mente, prosigamos con nuestra lista de áreas en las que los diseñadores deben enfocarse para trabajar de manera más efectiva con los desarrolladores.

1. Comience a vincularse con un desarrollador

Como diseñador, es posible que haya escuchado o no el término programación en pares entre algunos de sus colegas más técnicos.

Es un concepto que surge de la metodología de desarrollo de software Agile y básicamente involucra a dos desarrolladores que se unen para trabajar en un problema en conjunto. Aparte del beneficio obvio de que dos cabezas a veces son mejores que una, también es una excelente manera de transferir conocimientos y desarrollar la comprensión del equipo.

Uno de los principales obstáculos para la colaboración efectiva entre diseñadores y desarrolladores es que a menudo no tienen la menor idea de qué tipo de problemas enfrentan cada uno a diario, o cómo se abordan normalmente.

Algo tan simple como pasar una hora sentado con un desarrollador y pedirle que le explique su proceso mientras ataca un problema puede cambiar por completo su percepción de lo que hace, y viceversa: localice a un desarrollador local amigable y pruébelo si en todo lo posible. Si puede convertirlo en algo habitual en un proyecto en el que ambos participen activamente, mucho mejor.

2. Repasar los fundamentos del diseño digital

Puede o no terminar agregando un lenguaje de programación a su conjunto de herramientas general en el futuro, pero realmente debería sentirse cómodo con los conceptos básicos de HTML y CSS en esta etapa si está haciendo algo, incluso remotamente, relacionado con el diseño web.

Imagine, por ejemplo, un diseñador de impresión que simplemente se negó a siquiera intentar comprender el concepto de cuadrículas en relación con el diseño de página y la tipografía. Con razón te burlarías de su ignorancia deliberada. No termines en la misma posición con respecto a la estructura subyacente de tus diseños en línea.

Asegúrese de estar al día con los conceptos básicos del diseño de página completando los siguientes dos cursos gratuitos en Codecademy :

1. HTML y CSS : un tiempo de curso estimado de siete horas lo lleva a través de los conceptos básicos de marcado de página, diseño, posicionamiento y el modelo de caja mientras le brinda pequeños proyectos de muestra para completar.
2. Cree un sitio web : un curso de tres horas lo lleva a recrear a mano una versión reciente de la página de inicio de Airbnb desde cero.

Solo diez horas es todo lo que se requiere para poner en orden lo básico. Esa es una pequeña inversión de tiempo que se justifica con creces en términos de llevar sus habilidades técnicas a un nivel mínimo aceptable y ser capaz de comprender cómo se implementarán realmente sus diseños.

3. Abordar un lenguaje de programación

Trabajar con desarrolladores no significa que usted mismo tenga que ser un mago de la codificación, pero algún tipo de comprensión básica de al menos un lenguaje de programación contribuirá en gran medida a ayudarlo a colaborar de manera efectiva.

El lenguaje obvio para elegir aquí es JavaScript. Estos son solo tres de sus principales puntos positivos:

1. Es lo que impulsa muchas de las interacciones que diseña: con la desaparición de Flash , JavaScript es lo que impulsa la gran mayoría de la animación e interactividad en línea. Si está diseñando algo más complicado que páginas completamente estáticas, en gran parte basadas en texto, JavaScript está haciendo un trabajo pesado en algún lugar de la mezcla.
2. Es el lenguaje de programación más popular del mundo: JavaScript es el lenguaje dominante entre los desarrolladores de todo el mundo  y lo es cada vez más con cada año que pasa. Si aún no ha tenido que lidiar con eso como diseñador, no pasará mucho tiempo hasta que se vea obligado a: ¡adelantarse a la curva!
3. Está emergiendo cada vez más como el futuro de WordPress: la reciente dirección State of the Word  de Matt Mullenweg y el lanzamiento de Calypso dejan bastante claro que el futuro de WordPress se basará en gran medida en JavaScript. Si se gana la vida diseñando para esa plataforma, ahora es un buen momento para comenzar a aprender.

JavaScript también es un lenguaje relativamente accesible para que lo aborde un novato; incluso una vaga familiaridad con su sintaxis y conceptos se transferirá bien a muchos otros lenguajes populares como Ruby, PHP y Python.

Hay muchas formas de aprender JavaScript, pero una de las más accesibles es seguir el camino de aprendizaje sencillo (¡y gratuito!) descrito en Eloquent JavaScript por Marijn Haverbeke.

Eloquent Javascript lo llevará de un principiante total a un conocimiento razonable del idioma y le dará cinco pequeños proyectos prácticos para aprender a lo largo del camino. No lo transformará mágicamente en un desarrollador de tiempo completo, pero le proporcionará lo siguiente:

1. Los elementos básicos de un lenguaje que puede utilizar activamente en términos de diseño y creación de prototipos del día a día.
2. Un recorrido rápido y práctico por muchos de los conceptos en los que los desarrolladores confían todos los días para implementar sus diseños.

Incluso una comprensión básica de JavaScript lo convierte en un mejor diseñador y le permite hablar con los desarrolladores en términos con los que están familiarizados mientras aumenta su comprensión de los problemas que enfrentan todos los días: es beneficioso para todos, sin importar cómo lo mire.

4. Elija un editor de texto y siéntase cómodo con él

Para cuando haya abordado el punto dos o tres de nuestra lista, se dará cuenta de que el editor de texto es donde los desarrolladores pasan la mayor parte de su tiempo. Es de su interés como diseñador elegir un editor de texto decente y familiarizarse con su uso.

Como dejó en claro la reciente Encuesta de herramientas de diseño de Subtraction.com de Khoi Vinh , HTML/CSS sigue siendo la opción principal entre los diseñadores de alto nivel para la creación rápida de prototipos. Si aún no se siente cómodo con la maqueta de sus propias demostraciones a mano, probablemente debería estarlo. Un editor de texto decente contribuirá en gran medida a mejorar su flujo de trabajo mientras lo hace.

Qué editor de texto elegir es, en última instancia, un asunto personal, pero dos en particular son adecuados para los diseñadores:

1. Sublime Text : este editor de texto multiplataforma no solo se ve bien , sino que pone una gran cantidad de funcionalidad al alcance de su mano y se presta bien para la codificación front-end .
2. WebStorm : si va a pasar gran parte de su tiempo lidiando con una combinación de archivos JavaScript, HTML y CSS, WebStorm  tiene prácticamente todo lo que necesita para realizar tareas comunes y ajustar su flujo de trabajo con el tiempo.

Como diseñador front-end, inevitablemente tendrá que trabajar con desarrolladores en pequeños cambios de código aquí y allá. Levantar las manos con horror ante la idea de tener que abrir un archivo de texto es francamente un movimiento de aficionado y hace poco para sugerir que será una parte efectiva del equipo en general.

Los diseñadores profesionales deberían, como mínimo, ser más que capaces de manejar un poco de HTML y CSS y tomarse el tiempo para aprender a usar un editor de texto le ahorrará una cantidad significativa de tiempo en el futuro.

5. Comprender el control de versiones

El control de versiones es un tema muy querido por los desarrolladores, pero que puede ser alucinante cuando lo encuentras por primera vez desde un entorno no técnico.

Sin embargo, no es un área de preocupación que se limite a los desarrolladores. Los diseñadores han luchado durante años con la mejor manera de administrar los activos y realizar un seguimiento de los cambios y, a pesar de los intentos como Version Cue  y LayerVault de Adobe , es una nuez que está muy lejos de ser resuelta.

Ese no es el caso en el mundo del desarrollo. El control de versiones es esencialmente un problema resuelto para los desarrolladores con la opción predeterminada en estos días siendo Git .

Introducción a Git para diseñadores web de WebdesignerDepot de 2009 sigue siendo una de las introducciones más sencillas al tema, y ​​Git para diseñadores de Treehouse es igualmente útil. El tutorial de Git interactivo de Github también es una forma agradable y sencilla de practicar algunos conceptos básicos de Git en un entorno fácilmente comprensible.

Tenga en cuenta que no estamos diciendo que deba dominar instantáneamente Git y comenzar a ejecutar todos sus archivos de diseño a través de él. Sin embargo, debe al menos obtener una comprensión conceptual amplia de cómo funciona.

Como señala Leonard Teo , el principal obstáculo para los diseñadores es que los archivos de diseño que se basan principalmente en texto seguramente estarán bajo algún tipo de control de versión en un proyecto bien organizado. Al exponerse a los conceptos básicos del control de versiones, se elimina como un obstáculo si es necesario realizar cambios simples en estos archivos y amplía su comprensión del flujo de trabajo de desarrollo general para arrancar.

También se pone en buena forma para beneficiarse de los sistemas de control de versiones más específicamente orientados al diseño que acechan en el horizonte, como el propio soporte de Github para PSD y la reciente adquisición de Dropbox, Pixelapse .

6. Mantenga su propia casa en orden

La realidad del diseño moderno es que estás trabajando en un entorno de equipo. Los días de entregar con confianza un enorme JPG aplanado y tomarse el resto de la semana libre para comprar zapatillas deportivas de diseñador han terminado.

Para trabajar de manera efectiva con otros diseñadores y desarrolladores, debe inculcar un conjunto sólido de mejores prácticas de trabajo que mantenga su trabajo organizado y fácil de compartir con otros.

En términos de mantener su propia cordura, se recomienda encarecidamente seguir metodologías como las descritas por Photoshop Etiquette . Por supuesto, no siempre estará tratando con archivos de Photoshop, pero su división de preocupaciones de diseño tiene mucho sentido: archivos , capas , activos , tipo , efectos , calidad : estas son categorías universalmente aplicables a las que debe prestar atención. y organizándose adecuadamente.

Cuando se trata de no llevar a los desarrolladores completamente a la vuelta de la esquina, hay un conjunto de preocupaciones relacionadas pero separadas a tener en cuenta. Por ejemplo, querrá asegurarse de considerar todos los estados potenciales de los elementos individuales, describir con precisión todas las vistas y animaciones potenciales y tener en cuenta el texto variable.

Hay una lista más larga y ligeramente anticuada de elementos a considerar antes de entregar los activos a un desarrollador en twosixcode que aún se mantiene en general. El libro electrónico gratuito Web UI Design Best Practices de UIPin  también es un recurso invaluable e incluye ejemplos actuales de mejores prácticas de algunos de los mejores equipos de diseño en el negocio, como Apple, Spotify y LivingSocial.

7. Crea y usa guías de estilo

Si ha trabajado con desarrolladores durante algún tiempo, probablemente dos cosas se le habrán hecho muy evidentes:

1. Son criaturas orientadas a los detalles y procesos.
2. Son grandes fanáticos de la documentación adecuada.

Estas son características de las que muchos diseñadores podrían aprender y una de las mejores maneras de introducirlas en sus propios proyectos (y mantener contentos a los desarrolladores mientras lo hacen) es mediante el uso de guías de estilo en sus proyectos.

Las guías de estilo, también denominadas a veces con el término un poco schmancier bibliotecas de patrones , son elementos de diseño documentados que se utilizan a lo largo de un proyecto. En cuanto a cómo configurarlos, recomendamos encarecidamente el excelente artículo de Susan Robertson en A List Apart sobre la creación de guías de estilo . El artículo de Anne Debenham sobre cómo empezar con las bibliotecas de patrones es una lectura igualmente esencial.

Puede ver ejemplos públicos de primer nivel de guías de estilo en WooThemes , MailChimp y Lonely Planet . Una gran cantidad de sitios como UI Patterns y Pattern Lab  también están disponibles si desea profundizar un poco más en la teoría.

Cuando se trata de trabajar con desarrolladores, los beneficios de este enfoque son enormes. Al adoptar un enfoque atómico , está eliminando toda una categoría de idas y venidas innecesarias que tienen que ver con las especificaciones y la implementación, al tiempo que proporciona una documentación de diseño clara a la que todos pueden referirse sin ambigüedades.

En términos de su propio proceso de diseño, también está agregando un elemento de profesionalismo, disciplina y minuciosidad del que muchos diseñadores podrían beneficiarse.

8. Concéntrese en las soluciones, no en las imágenes

El artículo de Intercom de 2014 sobre la Dribbblización del diseño debería ser una lectura esencial para cualquiera que se gane la vida en la industria. Es una crítica sin tapujos de un enfoque erróneo que los diseñadores pueden caer fácilmente en él.

Así como los desarrolladores pueden tener una tendencia natural a retirarse a las minucias técnicas cuando las aguas se agitan, los diseñadores a menudo ponen demasiado énfasis en crear atractivos visuales en lugar de abordar el problema subyacente que se debe resolver.

Como deja en claro la excelente presentación de Sarah Parmenter de 2011, el diseño efectivo es mucho más que obtener el brillo correcto. Debe centrarse constantemente en el resultado final real desde el punto de vista del usuario en lugar de maquetas aspiracionales de lujo.

Al comprometerse con este enfoque, está haciendo que cualquier interacción potencial con los desarrolladores sea sustancialmente más productiva.

En lugar de pensar en ellos como obstáculos obstinados en el camino de sus bellas creaciones, deberían ser socios iguales en la entrega de una solución de diseño que deleite a los usuarios dentro de las limitaciones técnicas disponibles.

Conclusión

En estos días, incluso los equipos pequeños pueden producir productos que resuelven problemas para literalmente millones de personas. En ese tipo de entorno, limitar sus opciones debido a una falta percibida de experiencia técnica no le hace ningún favor a su talento.

Aprender a trabajar de manera efectiva con los desarrolladores abre la puerta a proyectos cada vez más gratificantes y un progreso futuro masivo como diseñador. Recapitulemos nuestros principales consejos para hacerlo:

1. Sigue a un desarrollador en el trabajo.
2. Asegúrate de dominar HTML y CSS.
3. Tome algunos pasos de bebé en JavaScript.
4. Ponte cómodo con el uso de un editor de texto.
5. Envuelva su cabeza alrededor del control de versiones.
6. Utilice las mejores prácticas en su propio trabajo de diseño.
7. Descubre el poder de las guías de estilo.
8. Enfócate siempre en el problema a resolver.

Nos encantaría escuchar sus pensamientos. ¿Hay algún consejo o truco que nos hayamos perdido para colaborar de manera efectiva con los desarrolladores? ¡Ponte en contacto a través de los comentarios y cuéntanos!

Imagen en miniatura del artículo por Danielala / shutterstock.com