Por qué los diseñadores deben entender cómo trabajan los desarrolladores

Como diseñadores es fácil molestarse con los desarrolladores. Tal vez no puedan conseguir la alineación correcta de un botón; o esa característica que considerabas crítica para tu UX está demasiado atrasada para tu comodidad, la realidad es que nos enfadamos con los desarrolladores sobre todo porque no entendemos su mundo.Lo mismo ocurre con la falta de comprensión del diseño por parte de los desarrolladores, que también se enfadan bastante con nosotros.lo sé porque he pasado la mayor parte de mi vida diseñando y desarrollando para la web.Como diseñadores nos ponemos nuestros sombreros de cielo azul y diseñamos a nuestro gusto sin tener en cuenta las implicaciones técnicas, lo que no significa necesariamente que debamos limitarnos a nosotros mismos, sino que enfatiza la importancia de atenernos al alcance de un proyecto y asegurar la alineación de todo el equipo.Comienza a inventar funcionalidad o componentes y a menudo puede venderlos a las empresas sin ninguna consulta técnica. Esto es peligroso y podría resultar fácilmente en una pérdida de alcance y en un producto final que se retrasa o supera el presupuesto, y otro escenario probable es cuando eres un espectáculo de un solo hombre, diseñando de forma aislada. Esperas que los diseños planos que entregues sean perfectos en píxeles, pero casi nunca es el caso.A su desarrollador no le importa la experiencia del usuario – y esto es completamente justo porque no es su trabajo.Las conversaciones de ingeniería están demasiado a menudo llenas de jerga que los diseñadores no entienden, lo que resulta en resultados mixtos.A veces el diseño también se incorpora al proceso cuando el trabajo de ingeniería ya está hecho y cuando es casi imposible hacer cambios en el diseño. cerrar esta brecha puede requerir que nosotros, como diseñadores, sepamos un poco más sobre el desarrollo.Reducirá la fricción, ayudará a su equipo a producir mejores productos y, en última instancia, lo hará mucho mejor en su trabajo.

Datos y estructuras de datos

Los datos son la piedra angular de cualquier aplicación.La mayoría de las aplicaciones pueden usar lo que se llama operaciones CRUD: Crear, leer, actualizar y eliminar.Estas operaciones se utilizan para gestionar datos, pero lo más importante es que las funciones o llamadas a la API deben escribirse para cada una de estas operaciones, y a menudo para cada conjunto de datos.En realidad, sin embargo, un desarrollador necesita escribir un conjunto completo de operaciones CRUD para esta pieza de diseño.Además, necesitan escribir código para vincular este avatar a tu perfil, y proporcionar una imagen de respaldo, y gestionar dónde se almacenan los archivos en un servidor.Este pequeño cambio de diseño puede haberle llevado cinco minutos, pero podría añadir fácilmente un día o dos a un sprint: Dónde se almacenan los datos reales de esta imagen de perfil. Generalmente los desarrolladores diseñan bases de datos que son fáciles de escalar, pero a veces podemos forzar cambios estructurales diseñando nuevas características.Diseñé una aplicación web que te permitía encontrar ofertas especiales basadas en la ubicación. Después de algunos comentarios de los usuarios me di cuenta de que nos faltaba una característica muy importante: Personalización de la misma promoción para tiendas diferentes. Como diseñador, este problema era muy sencillo de resolver: Sólo tuve que añadir algunos botones al back-end y dividir uno de los procesos de administración. La realidad era que la base de datos tenía que ser rediseñada y los procesos administrativos reconstruidos – no podía permitírmelo y mi proyecto se salió del presupuesto y fracasó.Es importante que seamos conscientes de las limitaciones a la hora de diseñar la base de datos de una aplicación, así como del código necesario para leer y escribir esos datos.Piense en cómo se relacionan los datos entre sí; y recuerde que cada trozo de texto que agregue a su diseño necesita vivir en una tabla de base de datos en algún lugar.

Generación y rendimiento de activos

La mayoría de los desarrolladores se toman muy en serio el rendimiento de sus aplicaciones: estoy obsesionado conmigo mismo y cuento cada milisegundo que me afeito como una victoria digna del champán.Es nuestra responsabilidad como diseñadores entregar activos y prototipos que consideren el rendimiento de la aplicación y esto sólo es posible con un sólido conocimiento de la tecnología para la que se está diseñando.Puede ser tentador subir la calidad de ese control deslizante a 12 cuando se guarda un JPG, pero al final del día los usuarios sufrirán por ello. La mayoría de los temas de WordPress, por ejemplo, no cambian el tamaño de las imágenes cuando las subes o las usas en producción.Sí, puedes resolver esto con un plug-in o dos, pero ¿por qué no guardarlo correctamente desde el principio? hay algunas herramientas muy útiles para probar el tamaño de las imágenes (y servicios como Google Page Speed Insights incluso ofrecen compresión).Ejecute su sitio en vivo a través de estas herramientas y suministre a sus desarrolladores con las imágenes comprimidas apropiadas.Algo simple, como ponerle un nombre semántico a su archivo, puede tener un gran impacto en el rango de búsqueda de su proyecto.Puede parecer ridículo llamar a estoa-photo-of-an-apple-on-a-cutting-board.jpg, pero Google realmente lee estos metadatos y, por último, esto no sólo es aplicable a las imágenes, sino también al vídeo. Sugiera un servicio de terceros como YouTube o Vimeo – a sus desarrolladores les encantará por ello, ya que hace todo el trabajo pesado para ellos.

No, no puedo mejorar el rendimiento de su transición de página completa en IE6.

Otra cosa de la que somos culpables es de exagerar la animación.Claro, esa transición puede parecer suave y sexy en tu iMac Pro, pero ¿qué pasa con el resto de tu público que puede estar usando ordenadores portátiles viejos?Lo mismo ocurre con otros dispositivos como teléfonos con funciones o tabletas más antiguas. la animación puede añadir mucho hinchazón al código ya que los desarrolladores pueden necesitar implementar bibliotecas adicionales para ejecutarlo.Además, podría añadir un alcance innecesario – la animación avanzada de formas, por ejemplo, requeriría un lienzo HTML, que a menudo es una habilidad especializada, y es importante que la animación sea considerada y significativa. Esto asegurará que los desarrolladores estén implementando sólo animaciones que sean relevantes para la experiencia de su usuario final, puede leer más sobre la creación de animaciones significativas aquí o sobre el análisis del rendimiento aquí.

Ejecución técnica

Cuando llevo puesto mi sombrero, a veces recibo diseños que son difíciles de implementar; y esto es a menudo porque el diseñador no entiende completamente lo que está involucrado en la implementación. CSS y JavaScript, por ejemplo, tienen sus limitaciones: sólo hay algunas funciones móviles nativas que no se pueden utilizar para la Web. Entonces también tenemos que considerar cosas como el soporte del navegador, así como el esfuerzo que implica hacer un diseño compatible con todos los navegadores, con lo cual, la mayoría de los diseños son ejecutables, se trata de encontrar un compromiso entre el alcance y lo que es mejor para el usuario.Tener un sólido conocimiento de CSS y de la web ayudará a este proceso y reducirá la fricción entre usted y sus desarrolladores – asegúrese de que su proceso es ágil por naturaleza – consulte con un desarrollador de forma regular para confirmar que su diseño es ejecutable y está dentro del alcance.El diseño de prototipos rápidos es una gran manera de mostrar su pensamiento y, a menudo, sus desarrolladores pueden utilizarlo para crear sus propios prototipos. Por último, nunca muestre los diseños finales a un cliente sin asegurarse de que son ejecutables y están dentro del alcance de su proyecto.

Marcos o bibliotecas CSS y JavaScript

Bootstrap fue un punto de inflexión para muchos profesionales de la web.Permitió a los desarrolladores construir sitios web sin diseñadores, y permitió a los diseñadores diseñar en un lenguaje que los desarrolladores pudieran entender. En cierto modo, Bootstrap fue uno de los primeros sistemas de diseño para la web y permitió una mejor colaboración entre los equipos, utilizando un concepto llamado preprocesamiento CSS. Esto permite a los desarrolladores separar estilos de interfaz de usuario para diferentes componentes en sus propios archivos. React, Vue y Angular (todos ellos frameworks/librerías JavaScript) siguen metodologías muy similares. Estas herramientas de aplicaciones de una sola página, basadas en datos, han permitido a los desarrolladores crear aplicaciones web altamente escalables y de naturaleza muy modular.Entender este concepto de separación de preocupaciones permite a los diseñadores abstraer su trabajo de diseño en tokens de diseño, lo que crea un lenguaje compartido que tanto diseñadores como desarrolladores pueden entender.Permite a los diseñadores formar parte del alcance del proyecto y de la planificación de sprint.No habría duda entre tú y tu desarrollador cuando les pidas que cambien un botón depequeño agrande, ya que el componente y su estilo relevante es abstraído. Esto, en última instancia, podría conducir a un sistema de diseño, que permite que el diseño se despliegue a escala.

Para concluir

No estoy diciendo que los diseñadores necesiten ser desarrolladores de hard-core, pero un poco de comprensión es de gran ayuda.Aprenda de los desarrolladores y ayúdelos a aprender de usted, para que todos podamos construir mejores productos.

Sígueme en Medium, Dev.to, LinkedIn & Twitter.

>

>

Etiquetas

DiseñoFront EndDesarrolloProductosCarreraHackernoon Top StoryDesarrollo de SoftwareCodificación

Comentarios

Continúe la discusión