¿Les diseñadores tienen que saber de código?
La pregunta del millón en los foros, redes sociales y grupos de diseñadores UX y UI es: ¿Les diseñadores tienen que saber de código?
Obviamente siempre se encuentran respuestas de todo tipo para ésta pregunta, pero las que más me llaman la atención son aquellas respuestas que buscan justificar la ignorancia. A fines de diciembre del 2019 este tema volvió a surgir en el Slack de UX Argentina. Gastón, un miembro muy activo de la comunidad, compartió una búsqueda que decía “Valoramos mucho si tenés conocimientos en: HTML semántico, Arquitectura de CSS” y con eso comenzó el forobardo.
“Quien no se prepara para lo que quiere ser, quién no conoce en profundidad lo que hace, tiene todo para cosechar más adelante el revés y la decepción” — Bernardinho Rezende(1)
Para aclarar mi formación no es de diseñador gráfico, aunque si tomé muchos cursos en específico de diseño web y apps. Mucho del aprendizaje se fue dando de forma autodidacta, durante 10 años aproximadamente trabajé como desarrollador frontend, aprendí a maquetar y codear sin haber tomado cursos formales, poniendo las manos en la masa. Llegué al frontend cuando Diego, un compañero de mi primer trabajo, me dijo que el maquetado en tablas allá por el 2006 ya no iba más y que todo iba a pasar a ser tableless, la verdad que Diego fue un visionario porque recién en ese año los navegadores web comenzaron a tener el potencial para interpretar todas las características del CSS. En esa época lo mejor que te podía pasar era que tu sitio sea publicado en CSS Mania o CSS Zen por ser un código 100% libre de tablas y con un maquetado perfecto en CSS.
Les diseñadores y los conocimientos sobre programación
Mi visión sobre este tema está sesgada por mis años haciendo frontend, los cuales creo que fueron de gran ayuda y me brindaron una gran herramienta para iniciarme en UX y diseño de interacción. Todo ese conocimiento y bagaje me dió un mejor entendimiento de cómo se iba a crear aquello que estaba diseñando y lo más importante de todo, me permitió tener un punto de conexión con les desarrolladores, aquellas mágicas personas que llevan a la vida nuestros diseños. Algo que no se ve en los cursos de UX y UI es cómo aquello que diseñamos se transforma en código y se vuelve real.
Aunque solamente nos toque crear wireframes de baja calidad tenemos que tener en la mente que nuestros diseños tienen que seguir ciertos patrones, conceptos y que van a vivir en distintas plataformas. Como dice Nico Lozada, profesor y consultor UX, “los aprendizajes más importantes tienen poco que ver con técnicas de Figma, o tendencias de Sketch. De hecho, siento que mi trabajo como UI empezó a despegar en cuanto empecé a entender algunos conceptos más de fondo. Y el más importante de todos es: Tu diseño se va a convertir en código” (2). Verdaderamente esto es un tema central al momento de querer convertirse en un mejor diseñador o diseñadora. Del mismo modo que una diseñadora o diseñador gráfico aprende sobre tintas, papeles y métodos de impresión, “el diseñador de productos digitales debe comprender las posibilidades y limitaciones de su medio para hacer el mejor trabajo de diseño que la tecnología puede permitir” dice Benek Lisefski, diseñador de UX/UI de Auckland, Nueva Zelanda. Además cuenta al igual que Nico Lozada de que no tenemos que ser ninjas del frontend, solo es suficiente tener nociones básicas, y cierra con esta hermosa comparación “el concepto de diseñar cualquier cosa digital e interactiva, sin saber cómo se va a construir esa experiencia, me parece muy extraño. Es como un arquitecto que no entiende sobre materiales de construcción o sobre ingeniería básica. O un chef que planifica menús pero que nunca cocina, prueba lo que hace y refina los platos”(3).
Un tema muy viejo
Seguramente no estés leyendo algo muy nuevo ya que existen cientos de posts que hablan de este tema y demuestran la importancia de saber algo de código para el diseño de productos digitales. A pesar de eso el tema sigue surgiendo en los foros de diseñadores.
Me parece raro que el tópico siga vivo y que tengamos un gran porcentaje de diseñadores que no reconozcan esta importancia. Cristobal Lemoine del podcast UXBS hizo una encuesta a través de las historias de Instagram preguntando ¿Los diseñadores tenemos que saber de código? En las respuestas el “No” se llevó un jugoso 30%. Paul Pela, ex desarrollador web devenido en UX/Product designer cuenta su perspectiva del tema y suma una observación muy acertada sobre la capacidad de curiosidad que tienen los diseñadores de experiencia de usuario, “…creo que los UXers son de las personas más curiosas, así que eso no debería ser un problema aprender sobre lenguajes de programación, herramientas y APIs. La curiosidad que mostrás y el esfuerzo que ponés se verán recompensados dándote ventaja e información para tus futuras decisiones de diseño”(4).
Además, vamos a ser francos, no hay momento más lindo que abrir el inspector de código del navegador y ganarnos el respeto de les desarrolladores porque sabemos cómo se construye una web y podemos hacer un cambio al vuelo.
Steve Jobs y el curso de caligrafía
Un caso no muy conocido pero que realmente refleja lo que quiero decir es el de Steve Jobs en un discurso de graduación(5) en la universidad Stanford. Allí, Jobs, cuenta una anécdota de su pésimo primer semestre en la universidad, la cual además de ser muy costosa, luego “…de seis meses, no le veía propósito alguno. No tenía idea de qué quería hacer con mi vida, y menos aún de cómo la universidad me iba a ayudar a averiguarlo”. Jobs, cansado de ese semestre y perdido sobre su futuro cuenta: “como ya no estaba matriculado y no tenía clases obligatorias, decidí inscribirme en el curso de caligrafía para aprender cómo se hacía”, así fue como ese verano Jobs se mandó a hacer un curso de lettering, sí de lettering, solo por el hecho de aprender. En ese curso todo lo que aprendió era “sutilmente bello” y “fascinante” pero también sentía que “Nada de esto tenía ni la más mínima esperanza de una aplicación práctica en mi vida”. Y eso fue así durante más de 10 años hasta que en un momento dado “cuando estábamos diseñando el primer ordenador Macintosh, todo ese conocimiento volvió a mí”.
Gracias a ese curso de lettering Jobs y su equipo pudieron traducir la esencia de ese conocimiento en el diseño de la nueva Mac. El primer sistema operativo de la Mac 128K se logró con la ayuda de Susan Kare, quien aportó mucho en el diseño de las fuentes tipográficas e iconográficas y dió soporte a cientos de diseños tipográficos(6). Como dijo Jobs “Fue el primer ordenador con tipografías bellas. Si nunca me hubiera dejado caer por aquél curso concreto en la universidad, el Mac jamás habría tenido múltiples tipografías, ni caracteres con espaciado proporcional.”
Afortunadamente para unos y desafortunadamente para otros las búsquedas de empleo siguen sumando requisitos y por eso es importante el proceso de aprendizaje continuo no sólo en código y curiosidades técnicas, sino también en cualquier otro tema. Lo valioso es poder hacer una traducción de lo que aprendiste y llevarlo ámbito en el que te vas a desarrollar, porque nunca sabemos en qué momento ese conocimiento que adquirimos puede volverse útil. Las personas no podemos ser creativas sin conocimientos. Tenemos que lograr hacer esa traducción para incorporar lo que adquirimos a nuestra área de trabajo, de esa forma los productos y servicios que diseñemos se van a ver beneficiados y van a ser mucho mejores.
Bonus: 6 increibles juego para aprender CSS, HTML y Javascript
Aprender tiene que ser divertido y lleno de práctica. Hace un tiempo publiqué esta lista en mi cuenta de Instagram @uxcharlie y tuvo buena recepción así que decidí ponerla acá también. (Podría haber robado con otro post, pero no daba 🤣🤣🤣 ).
HEX Invaders
El mundo se encuentra ante una invasión del espacio exterior y solo tú puedes pararla usando tus conocimientos del hexadecimal. Un juego simple y divertido al estilo Space Invaders.
Flexbox Froggy
En este juego, llamado Flexbox Froggy, tenes que guiar a Froggy y sus amigues hasta la hoja del nenúfar utilizando la distintas propiedades de Flexbox Layout. Sí, escribiendo CSS.
CSS Grid Garden
Similar a Flexbox Froggy en Grid Garden tenés que escribir código CSS para hacer crecer tu jardín. Regá las zanahorias usando las propiedades Grid Layout, el sistema más versátil de layout en css.
CSS Diner
Nada mejor que una rica cena y con CSS Diner la vas a poder preparar. Aprendé cómo utilizar los diferentes selectores de CSS. Éstos te permitirán elegir a qué elemento del HTML a aplicarle los estilos.
Flexbox Defense
En Flexbox Defense tu trabajo es evitar que los enemigos traspasen tus torres de defensa. Suena fácil, pero lo complicado es que debes posicionar tus torres usando CSS.
Code Combat
Code Combat es un super juego para aprender a escribir código de “zero to hero”. Aprende Python, JavaScript y HTML a medida que vas resolviendo distintos desafíos y rompecabezas.
- (1) Transformando suor em ouro — Bernardinho Rezende (2006)
- (2) ¿Te pasas del Diseño Gráfico al UI? Hay una regla importantísima que debes conocer. — Nicolas Lozada
- (3) Designers who can code are more valuable — Benek Lisefski
- (4) Should UX designers learn to code? An ex-developer’s perspective — Paul Pela
- (5) Steve Jobs — Discurso en Stanford — Youtube
- (6) Macintosh 128K — Wikipedia
