Empieza a desarrollar tus diseños (literalmente)

Por qué ya es hora de que los diseñadores aprendan a codificar

Estoy convencido de que los diseñadores de hoy en día deben hacer mucho más que simplemente crear interfaces de usuario atractivas. El rol ha evolucionado y ahora se espera que acortemos la brecha entre la creatividad y la tecnología.

¿Una de las mejores habilidades que podemos agregar a nuestro conjunto de herramientas para lograrlo? Codificación .

Ahora, mire, hay un acalorado debate sobre si los diseñadores... ¿Deberías aprender a codificar o no? Creo que la antigua división entre diseñadores y desarrolladores ya no funciona. No satisface las necesidades actuales de desarrollo de productos . Cualquiera, incluso los desarrolladores, que trabaje en interfaces debe tener un gran sentido del diseño.

Al mismo tiempo, las decisiones de diseño no deberían limitarse a reglas rígidas o manuales establecidos por quienes no comprenden:

• interacción,
• tecnología, o
• codificación.

Durante el proceso, así es como se ve a menudo el diseño (a la derecha) y la implementación real del mismo (a la izquierda):

Y ustedes (los diseñadores) son los únicos que pueden solucionar este problema. Les ofrezco código, como una píldora mágica para terminar la interfaz de usuario tal como la soñaron.

Al fin y al cabo, se ha dicho con razón que el diseño no es una persona, sino una función.

La codificación nos hace más adaptables a los cambios del mercado del diseño

El diseño está cambiando rápidamente, al igual que las habilidades que necesitamos para mantenernos al día. No digo que pronto veremos un puesto oficial llamado “Diseñador-Desarrollador de Producto”, pero los empleadores definitivamente están buscando personas que puedan salir de la burbuja del diseño tradicional. Quieren diseñadores que:

• entender comportamiento humano ,

• Puede colaborar entre equipos.

• y contribuir más allá de simplemente crear elementos visuales.

  
  

Los diseñadores que entienden de programación tienen una ventaja única: son mejores trabajando en equipo y pueden convertir ideas en soluciones prácticas y atractivas que satisfagan las necesidades reales de los usuarios.

El diseño tradicional de la interfaz de usuario no es suficiente. Comprender cómo se construyen las cosas (los marcos, las bases de código y los sistemas que impulsan nuestros diseños) nos ayuda a crear experiencias que no solo sean hermosas, sino que también funcionen a la perfección con la tecnología que las impulsa. Ya no nos limitamos a crear pantallas "atractivas".

Por ejemplo, durante un proyecto reciente que involucraba Aleteo , un marco de código abierto para crear aplicaciones a partir de una única base de código, me di cuenta de lo importante que era el conocimiento de codificación para tomar decisiones de diseño informadas.

Sin conocer la tecnología, sería mucho más difícil diseñar animaciones, transiciones o elementos de movimiento que funcionaran dentro de los límites del equipo de desarrollo.

Las animaciones para mi aplicación iOS Veggie Grower para jardineros alemanes fueron posibles porque aprendí a codificar.

Los beneficios de programar también van más allá de las habilidades. Incluso puede cambiar el funcionamiento del cerebro. Cada desafío de programación genera nuevas conexiones en mi cerebro, que se adapta y evoluciona, ayudándome en otras áreas.

La ciencia demuestra que se forman nuevas vías neuronales cuando aprendemos algo difícil o desconocido, como programar o tocar un instrumento. Las nuevas habilidades hacen más que ampliar nuestras capacidades. También reconfiguran nuestro cerebro. Nos volvemos más adaptables y resilientes frente a los desafíos.

La codificación ayuda a ver el punto de vista del desarrollador.

Los diseñadores que saben programar facilitan la colaboración con los desarrolladores, lo que genera procesos más fluidos y mejores productos. La programación nos ayuda a crear diseños más prácticos y realistas, facilita la vida a los desarrolladores y reduce la fricción entre los equipos. Cuando entendemos el código, somos mejores a la hora de comunicar nuestras ideas y convertir las visiones creativas en soluciones viables.

Explicaré más con mi "hijo", la aplicación Veggie Grower. Mi mayor error fue hacer que la interfaz de usuario fuera demasiado compleja porque el cliente insistió en tener un "factor sorpresa". Queríamos impresionar, pero no lo logramos: la interfaz de usuario real de la aplicación en la tienda de aplicaciones no resultó bien (ver la portada de esta historia más arriba).

Esto me enseñó que los diseñadores realmente necesitan actuar como una primera línea de defensa para los desarrolladores. Tenemos que contraatacar cuando las ideas comerciales comienzan a desviarse hacia territorio poco realista, protegiendo el producto y la experiencia de usuario para que no se compliquen demasiado. Logramos encontrar algunas soluciones alternativas inteligentes para lanzar la aplicación. Utilicé una combinación de animaciones de Lottie y algunas que creé yo mismo; mis habilidades de codificación definitivamente resultaron útiles aquí. Nos ayudaron a pulir las cosas lo suficiente para que se hiciera realidad el lanzamiento.

Aprender a programar cambió por completo mi forma de ver mis diseños. Empecé a ver las cosas desde la perspectiva de un desarrollador, comprendiendo los desafíos que enfrentan, como equilibrar funciones complejas con límites de presupuesto y encontrar un punto medio realista entre las grandes ideas y lo que realmente se puede hacer.

Comprender el dolor de los desarrolladores y saber cuándo mantenerse firme

La codificación me enseñó a sentir empatía hacia el lado de desarrollo del proceso.

Es importante reconocer que los desarrolladores a menudo enfrentan una enorme presión para lograr que las cosas funcionen. Después de pasar días depurando, lo último que quieren es lidiar con elementos de diseño complejos que agregan complicaciones innecesarias.

Aquí es donde nosotros, como diseñadores, debemos intervenir para resolver problemas. Debemos esforzarnos por lograr la simplicidad y la claridad, logrando un equilibrio entre forma y función que sea útil tanto para el usuario como para el desarrollador.

Esto no significa simplificar todos los diseños hasta el punto de hacerlos insulsos, sino ser estratégicos y dividir las interfaces en componentes manejables y construibles que sean fáciles de entender e implementar para los desarrolladores.

Ahora, hablemos también de algo llamado “gatekeeping”. Hoy en día, en UX, suele verse como un rasgo negativo. Gatekeeping: la actividad de controlar y, por lo general, limitar el acceso general a algo.

Pero en el diseño, ser un “guardián” es una parte importante del trabajo. Somos la línea de defensa antes de que algo se lance. Nuestro papel es asegurarnos de que todo lo que ayudamos a crear realmente mejore la experiencia del usuario.

Este “control de acceso” no tiene que ver con ser difícil, sino con asegurarse de que las necesidades del usuario sean lo más importante. Y aquí es donde saber un poco de código puede marcar la diferencia.

Cuando comprendes el aspecto del desarrollo, estás en una mejor posición para comunicar por qué son importantes ciertos detalles de diseño.

Digamos que estás trabajando en una función en la que necesitas una animación específica para guiar la atención del usuario, pero el desarrollador quiere omitirla para ahorrar tiempo. Si sabes cómo se puede hacer esa animación con, por ejemplo, un simple ajuste de CSS o usando una biblioteca de JavaScript existente, puedes defender tu postura de manera eficaz y es más probable que el desarrollador te escuche.

Esto es clave: saber codificar es crucial para ayudar a defender su punto de vista de una manera que sea constructiva y no frustre a ninguna de las partes.

La codificación nos permite ver la magia detrás del "factor sorpresa"

El "chico del aguacate" en la parte inferior muestra la carga de elementos adicionales. Era complicado para los desarrolladores, así que usé Lottie para convertirlo a JSON, lo que hizo que la integración fuera perfecta y tomó solo 15 minutos en lugar de días.

En nuestro esfuerzo por hacer que las cosas sean funcionales, no podemos olvidarnos del “factor sorpresa”.

La forma en que fluye una animación o cómo se equilibran perfectamente los colores de la interfaz de usuario pueden hacer que una experiencia sea memorable. Esta conexión emocional es crucial para que los productos no solo sean utilizables, sino también agradables.

Los usuarios son más tolerantes con los pequeños problemas de usabilidad Cuando una interfaz les resulta visualmente atractiva, pues los diseños estéticos tienen más posibilidades de triunfar que los meramente funcionales.

Sin embargo, el "factor sorpresa" no surge por sí solo. Requiere que trabajemos en estrecha colaboración con los desarrolladores para asegurarnos de que nuestra visión de esos momentos se traduzca en el producto final. Herramientas como Lottie o animaciones CSS nos permiten mostrarles a los desarrolladores exactamente lo que pretendemos, lo que ayuda a dar vida a las transiciones e interacciones.

La codificación nos ayuda a comprender lo que es posible

Aprender a programar nos ayuda a entender qué es realista y qué puede ser un poco exagerado. Por supuesto, es genial ver un portafolio impresionante en Dribbble, pero si esos diseños no se pueden desarrollar, son solo arte digital, no productos funcionales.

Cuando conocemos algunos conceptos básicos de codificación, empezamos a ver lo que es posible, lo que significa que podemos ser creativos sin abrumar a nuestros desarrolladores con ideas poco prácticas.

Por ejemplo, si diseñas una microinteracción para una pantalla de inicio de sesión, imagina que quieres una animación sutil y satisfactoria que ofrezca a los usuarios una respuesta a medida que escriben su contraseña. Por ejemplo, el campo debería brillar en verde cuando se cumpla el formato correcto. Sin entender un poco de CSS o JavaScript, podrías proponer algo demasiado complejo que le llevaría horas al equipo de desarrollo. Con algunos conocimientos de codificación, sabrías qué efectos son realistas. Te ayudaría a proponer ideas que sean interesantes y alcanzables.

Los diseñadores deberían “ser como el agua”: adaptables y fluidos (gracias por esta cita, Bruce ) Todavía podemos superar los límites creativos, pero somos receptivos a las limitaciones que tenemos por delante.

Los mejores diseños inspiran usuarios y desarrolladores por igual sin ir más allá de lo que es práctico construir.

De la mano para un diseño impactante

El diseño no es una cuestión de estética. Es un proceso de resolución de problemas que tiene como objetivo mejorar la experiencia de las personas con el producto y el servicio que ofreces y, en última instancia, con tu marca.

Hoy somos más que simples diseñadores: somos solucionadores de problemas, defensores de la experiencia del usuario y, lo más importante, colaboradores. Al combinar nuestra creatividad con conocimientos técnicos, estamos allanando el camino para los productos del mañana: productos que no solo son hermosos, sino también verdaderamente significativos y efectivos para los usuarios.

Nuestro trabajo como diseñadores va más allá de crear un hermoso prototipo: se trata de trabajar codo a codo con los desarrolladores para darle vida a esa visión. Esto significa participar durante todo el proceso de desarrollo, estar presente para resolver los desafíos técnicos, hacer ajustes de diseño cuando sea necesario y mantener abiertas las líneas de comunicación. Es esta colaboración continua la que convierte un buen diseño en un producto excepcional.

A medida que el diseño siga evolucionando, la codificación no hará más que cobrar importancia. En la encrucijada entre el diseño y la tecnología, existe un potencial increíble para la innovación, pero se requiere un cambio de mentalidad. Adoptar la codificación como una habilidad fundamental permite a los diseñadores crear productos que no solo sean visualmente impactantes, sino también funcionales, fáciles de usar para los desarrolladores e impactantes.