Tácticas Pequeñas

Cómo entender el código como un diseñador

Aprende lo suficiente para no avergonzarte

Vayamos al grano con mi provocativa declaración para que podamos eliminar a las personas que solo quieren saltar a los comentarios y comenzar a disparar:

Los diseñadores necesitan entender el código

Ahí. Lo dije.

¿Pero por qué? La mayoría de los artículos que leerá sobre este tema dependen de uno de los siguientes argumentos:

  • La codificación te hace más valioso
  • Los empleadores lo exigen
  • No puedes entender cómo diseñar sin aprender código
  • Muy pronto, todo el diseño estará en código (mi favorito personal, ya que esto se ha repetido durante más de una década)

Afortunadamente para ustedes, diseñadores, ¡ninguna de estas cosas es [totalmente] cierta!

Tomar una respiración profunda. Relajarse. En cambio, esto es lo que los diseñadores necesitan aprender del código:

1. Aprenda qué marcos son populares

He mencionado esto anteriormente y continuamente se lo digo a los diseñadores junior: crea todos los componentes de diseño personalizados que quieras, pero prepárate para defenderlos cuando trates de persuadir a los desarrolladores para que personalicen un conjunto de herramientas o un marco perfectamente bien.

Sí, muchos usan esto como argumento para aprender el código ellos mismos. Pero si un desarrollador sénior piensa que su interacción de clasificación de tablas no vale la pena personalizarla, entonces, ¿qué tan inteligente es perder su tiempo aprendiéndolo usted mismo?

Pero yo divago.

Los marcos son geniales porque ahorran tiempo a las personas. Esto significa que se pueden hacer más cosas y que el producto se puede enviar más rápido. Todas las cosas buenas. Puede hacer esto aún mejor sumergiéndose en los marcos populares para que no se salga [completamente] de los rieles en su diseño.

Eche un vistazo a los marcos de la interfaz de usuario como Bootstrap, o los marcos de Javascript como Angular, Vue o Meteor. El espacio evoluciona rápidamente, por lo que también puede echar un vistazo a las tendencias de GitHub para ver qué vale la pena vigilar: https://github.com/trending/javascript?since=monthly

Tienes que codificar al menos un sitio terrible usando Bootstrap en tu carrera.

2. Pruebe herramientas de diseño orientadas a códigos.

Cuando comencé, esto era Flash. ¡Me encantó! Aprendí ActionScript 2.0 lo suficientemente bien como para codificar una aplicación desde cero.

Pero luego murió.

Y entonces elegí XAML y un poco de WPF cuando trabajé en una aplicación basada en Windows.

Entonces eso murió.

Y también lo hizo mi amor por codificar algo otra vez.

Si bien mis esfuerzos por convertirme en codificador fracasaron, las experiencias me ayudaron a comprender la interacción del diseño y el código. Hoy, Framer es una gran opción, y también lo es Origami. Ninguno de los dos le enseñará a codificar, pero ambos le enseñarán lo suficiente como para aprender conceptos básicos.

Recuerde: su objetivo no es aprender lo suficiente como para codificar su propia aplicación, sino poder empatizar y comprender cómo los diseños cobran vida.

También he usado Codepen ampliamente para encontrar ideas de interfaz de usuario para compartir con los desarrolladores. (https://codepen.io/collection/nwgQRw/)

3. Aprende sobre AI / ML / Bots

Ciertamente no necesita comprender la ciencia de datos y el aprendizaje automático para diseñarlo, pero este campo está emergiendo rápidamente y querrá al menos comprender cómo funciona para poder diseñar para él.

Su área de juegos es un excelente lugar para comenzar: https://playground.pandorabots.com/en/quickstart/

He usado Pandorabots para entender cómo funciona el lenguaje natural. Ciertamente no tuve la paciencia para pasar mucho tiempo codificando un bot completo, pero hice lo suficiente para entender cómo lo harían los expertos.

Por último, el MIT también tiene algunos boletines que ofrecen una buena descripción de la IA:

4. Aprenda sobre esquemas de datos

Tuve que aprender esto en la escuela, pero para aquellos que no lo han hecho, comprender SQL básico o JSON les ayuda a comprender cómo se manejarán los datos en su diseño.

Ya no dará por sentado la carga diferida y las cuadrículas de datos. Intente jugar con herramientas como import.io, o aprenda sobre JSON como manual.

Import.io le brinda experiencia práctica para ver cómo los datos se conectan a la interfaz de usuario.

5. Siga los boletines orientados al desarrollo de la interfaz de usuario

Es cierto que en estos días no me sumerjo en el código de manera significativa. En cambio, encuentro mucho valor en los boletines. Los boletines informativos bien seleccionados lo ayudarán a mantener un ojo en lo que está de moda y, de vez en cuando, un desarrollador comprensivo escribirá un hermoso artículo que desglosará el desarrollo de una manera que su pequeño cerebro de diseñador pueda manejar. Yo, por mi parte, abrazo mi pequeño cerebro de diseñador

Me he suscrito a fuentes muy pesadas para desarrolladores en el pasado, pero descubro que todavía puede obtener mucho de los boletines híbridos de UI y UX. Algunos buenos resúmenes son:

  • Codrops
  • Hola diseñador
  • Hacking UI

Y eso es. No necesita aprender a codificar para hacer su trabajo como diseñador. Pero debe absorber y sumergirse lo suficiente como para tener mejores conversaciones, llevarse bien con los desarrolladores y tomar mejores decisiones de diseño.

La próxima vez que sientas la necesidad de quedarte despierto hasta tarde y finalmente codificar esa aplicación meteorológica que todo el mundo ha estado esperando, elige Framer.

Cuando no estoy escribiendo el artículo 1.345.625 sobre si los diseñadores deben codificar, estoy trabajando en las herramientas de diseño de Sketch en UX Power Tools para convertirlo en un diseñador mejor y más eficiente.

Sigue a UX Power Tools en Twitter
Contáctame directamente