¿Cuáles son las habilidades esenciales para los diseñadores de productos que codifican?

Siento que tengo una perspectiva única sobre esto como diseñador ahora (Quora) e ingeniero en el pasado (Facebook).

El rol de “diseñador que codifica” está lejos de ser estandarizado en toda la industria, aunque generalmente se considera una habilidad valiosa. El diseñador que codifica tiene algunas ventajas:

  • La capacidad de liberar a los ingenieros para resolver problemas de algoritmos, ingeniería y sistemas en lugar de largos cambios de interacción o detalles visuales.
  • Desarrolle un mejor modelo mental para ser ingeniero y escribir código. Ayuda a comunicarse en la misma terminología y a comprender las limitaciones del medio, aunque no es nada como escribir código como ingeniero.
  • Ayudar a los ingenieros a diseñar abstracciones que permitan a los diseñadores iterar sobre el diseño más rápido.

En este punto, me referiré a Designers Will Code de David Cole sobre Emesis, que está mucho mejor escrito desde la perspectiva de un diseñador primero.

Personalmente, creo que es una buena experiencia de aprendizaje construir una aplicación de principio a fin, por lo que sería mi orden personal recomendada.

  1. Aprenda HTML y CSS para construir una página web
  2. Aprenda JavaScript para manejar el comportamiento. Aprenderá algo de programación básica y un poco sobre las estructuras de datos.
  3. Aprenda un lenguaje del lado del servidor como Python o use Node si ya conoce JS y duda en aprender otro. Aprenderá más sobre las estructuras de datos en el proceso, y esta es una buena oportunidad para aprender un poco de informática y algoritmos en el camino.
  4. Aprenda a usar una base de datos para almacenar el estado. Esto lo familiarizará con los cuellos de botella de rendimiento.
  5. Aprenda un poco sobre ingeniería de software, OOP, organización de código, consistencia y estilo.
  6. (Mobile Track) Aprenda Objective C, Swift o Java y escriba una aplicación simple para Android o iOS. Puede usar esos conceptos de base de datos para hacer que persistan los datos y usar sus habilidades del lado del servidor para crear una API y convertirla en una aplicación que funcione en la web.
  7. (Opcional) Obtenga información sobre sistemas distribuidos, almacenamiento en caché, replicación y fragmentación para ver cómo las aplicaciones se crean a escala. Esto le permite empatizar con los ingenieros y comprender realmente las limitaciones del sistema.
  8. (Rastreo de datos) Aprenda estadísticas básicas y las matemáticas detrás de las pruebas A / B, luego explore otras curiosidades como el aprendizaje automático. De esta manera, puede comprender mejor su diseño con datos y diseñar productos en torno a los datos.
  9. (Opcional) Aprenda sobre programación funcional para ver cuán elegante puede ser la programación cuando la programación en sí misma está cuidadosamente diseñada. Los videos de SICP en YouTube son un buen recurso para esto.
  10. (Opcional) Aprenda sobre sistemas de bajo nivel, ensamblaje, localidad, representación de datos, etc., básicamente, cómo funciona una computadora bajo el capó. Recogerás C muy bien en el camino.
  11. (Opcional) Aprenda sobre la teoría de CS, algoritmos de nivel superior y los límites de la computación.

Algunos llamarían a 1 un diseñador que codifica, mientras que otros pasan por todo esto. A eso de las 3 puede trabajar eficientemente con un ingeniero. A los 5 tienes una superposición de vocabulario decente. A las 7 puede completar ocasionalmente y a las 9 o más puede hablar en barra con programadores con experiencia en CS.

Entonces la gente recorre todo este espectro. Realmente depende de cuáles son tus objetivos y curiosidades.

Prototipos

Específicamente, crear un prototipo con el que uno pueda interactuar.

Creo que es una habilidad bastante infravalorada para los diseñadores. Al ser alguien con experiencia en programación, he estado en varias situaciones en las que la dinámica de las interacciones de un producto se explicaba utilizando esquemas de alambre y prototipos en papel. Creo que eso ya no es suficiente. Es propenso a errores, ya que el equipo de implementación a menudo interpreta cosas incorrectamente que conducen a un reproceso que podría haberse evitado y una gran cantidad de tiempo perdido. Diseñar un prototipo interactivo con HTML / CSS / JS (ni siquiera tiene que estar en la plataforma a la que se dirige) hace que las cosas sean mucho más fáciles y rápidas para todo el equipo. Luego pueden recoger cosas desde allí e implementar y refinar las plataformas apropiadas.

Por supuesto, hay muchas herramientas disponibles en estos días para este mismo propósito de combinar activos de diseño y vistas estáticas para crear prototipos interactivos (por ejemplo, Sketch, Balsamiq), pero, si no me equivoco, la mayoría no ofrece los detalles. control sobre la dinámica de interacción que pueden proporcionar las herramientas de programación. Además, la realidad es que un gran porcentaje de diseñadores no tienen acceso a estas herramientas o, peor aún, se niegan a usarlas y todavía están atrapados en el mundo PDF en el que se puede hacer clic. No me malinterpretes, no hay nada de malo en hacer las cosas de esta manera para hacer un prototipo rápido y sucio para cuando estás haciendo una lluvia de ideas en un taller de diseño o algo así, pero creo que es mucho menos efectivo cuando el desarrollo realmente comienza y en las etapas posteriores.

La respuesta de Abhinav Sharma es bastante acertada en este sentido. Algunas de las primeras habilidades que enumera pueden y deben usarse para liderar el equipo de producto y darles dirección. Profundizar lo convierte en un diseñador increíble que comprende las capacidades y limitaciones de la plataforma / lenguaje / tecnología, etc.

Percibo a los Diseñadores de productos como profesionales que pueden diseñar interacciones y estilo visual de los productos. Por lo tanto, es un diseñador versátil, no un especialista en un solo área.

Creo que la capacidad de codificar es realmente útil para los diseñadores. Conozco algunos diseñadores que pueden codificar (yo también puedo codificar).

Todos los diseñadores de GoodData pueden codificar:

  • HTML
  • CSS
  • JavaScript

Algunos de nosotros también podemos codificar:

  • Java
  • PHP

Y algunos otros idiomas.

No podemos producir un código de producción. Contamos con un departamento de ingeniería con un proceso de entrega específico. Nuestros ingenieros usan muchos idiomas diferentes (Erlang, Perl, Java, Scala y más) que no podremos y no estaremos dispuestos a aprender.

Pero creamos prototipos, estilos, etc. Nos ayuda a explorar diseños más rápido. Y colaboraremos en la creación de nuestro propio bootstrap directamente en código para tener un estilo visual consistente en todos nuestros productos.

Para mí es suficiente. Porque requiere mucho tiempo y esfuerzo mantenerse al día con las tendencias modernas de desarrollo y diseño juntos. Y como soy diseñador, la experiencia en diseño es más importante.

Creo que depende mucho de tu definición de diseñador. Los diseñadores generalmente tienen que aprender a usar programas como InDesign e Illustrator. Aprenda técnicas y términos como, sangrado, canalón y DPI.

Como desarrollador web, no espero que los diseñadores sepan ningún idioma. Déjales hacer el trabajo creativo y déjame hacer la codificación.

Me gustaría argumentar que los diseñadores que conocen los límites de la programación generalmente también se limitan a sí mismos. Quiero que tengan la máxima libertad, que diseñen lo que quieran, como quieran. Cualquier efecto que puedan pensar, intentaré darme cuenta.

Puede que haya entendido mal la pregunta por un momento, pero así es como funciona en mi entorno de trabajo.

El proceso de traducir su diseño en código básicamente está cerrando una brecha.
Puede comenzar haciendo las siguientes dos cosas:

  • Exprese su diseño como un conjunto de reglas estrictas.
  • Codifique esas reglas en su idioma elegido.

La brecha que está cerrando es entre el mundo de diseño sin restricciones y el mundo de código bien definido y especificado.

  • Conoce tu diseño íntimamente. De lo contrario, no tendrá claro cuáles deberían ser las reglas.
  • Conoce tu idioma íntimamente. De lo contrario, tendrá dificultades para codificar las reglas que se le ocurrieron.

Cuanto menor sea la brecha, mejor será su producto.