Es hora de que los diseñadores cambien del diseño basado en imágenes al diseño basado en código

¿Por qué cambiar del diseño basado en imágenes al diseño basado en código?

Ha habido un gran problema desde los albores del diseño de productos digitales. Los diseñadores están separados del proceso de desarrollo de productos y se ven obligados a trabajar solo con software.

Los diseñadores utilizan gráficos de trama o herramientas de diseño vectorial para dibujar imágenes a medida que se separan del resto de la organización. En la mayoría de los casos, el proceso sigue siendo idéntico incluso si funcionan en diferentes programas como Photoshop, Gimp, Sketch o Fireworks. Se envía un conjunto de imágenes estáticas a los ingenieros como intención de los diseñadores.

Es extremadamente tedioso mostrar diferentes estados de la interfaz a través de tableros de arte estáticos. Por lo tanto, no todo está detallado por los diseñadores. Y eventualmente, toda la interfaz de usuario es construida por los ingenieros con la ayuda de un conjunto de imágenes estáticas incompletas. A menudo, en una larga comunicación de ida y vuelta, todos los estados interactivos suelen resolverse.

La experiencia no se representa con precisión con diseños estáticos y, por lo tanto, las pruebas suelen ser tediosas para los usuarios. Es debido a estos procesos ineficientes que una organización genera productos sin éxito y equipos frustrados.

Gracias a la evolución de la tecnología hoy en día tenemos una mejor manera de diseñar las cosas. Las herramientas de diseño basadas en imágenes están siendo reemplazadas rápidamente por el paradigma de herramientas de diseño basado en código. Las representaciones estáticas del diseño extraídas de herramientas de diseño vectorial o ráster se reemplazan con diseños renderizados en los que los diseñadores lo intentan directamente en el código sin saber realmente cómo codificar.

El nuevo conjunto de herramientas proporciona un nuevo flujo de trabajo donde:

• Tanto los diseñadores como los ingenieros establecen una única fuente de información
• Sin ninguna experiencia en codificación, otorga a los diseñadores todo el poder de la codificación
• El dúo de diseñadores e ingenieros está conectado a través de un único proceso creativo colaborativo que genera una evolución espectacular del flujo de trabajo

Diseño basado en imágenes a basado en código con UXPin

La primera y básica pregunta aquí es qué no es bueno o ineficiente con el diseño basado en imágenes antes de hacer la transición del diseño basado en imágenes al diseño basado en código. Es posible que sepa que existen dos paradigmas de herramientas de diseño, es decir, herramientas de diseño basadas en código y basadas en imágenes.

Una herramienta de diseño basada en imágenes es un enfoque que se ha utilizado durante muchas décadas y es considerablemente antiguo. Los diseñadores tienen que construir gráficos vectoriales o rasterizados cuando dibujan algo que es la idea del enfoque de esta herramienta.

Con este enfoque, los diseñadores tienen la máxima flexibilidad. Desde ilustraciones avanzadas hasta íconos simples, todo se puede dibujar de manera efectiva, incluido el nivel de detalle más hermoso. Aunque cuando se trata de desarrollo profesional de productos digitales suele fallar. Aquí está la razón por la que sucede.

1. Falta de interoperabilidad: la interfaz real de un producto, excepto las fotografías, ilustraciones e íconos, nunca se construye con estos gráficos. Los diseñadores trabajan fuera de las restricciones establecidas en el código cuando trabajan en el diseño de interfaz en herramientas de diseño basadas en imágenes. Debido a esto, pueden crear cosas que son costosas de codificar y otras que son difíciles de una manera desconocida.

2. Falta de precisión: además de crear diseños maravillosos que son detallados, los resultados más inexactos durante el proceso de desarrollo suelen ser con herramientas basadas en imágenes. El trabajo del diseñador se representa con un proceso completamente diferente.

Por lo tanto, existe una diferencia en el código de gradientes, texto y color elegido por un diseñador y por un ingeniero, incluso con la aplicación de las mismas especificaciones. Los equipos se ven afectados por una desalineación masiva debido a esto.

3. Diseño estático: el enfoque del flujo de trabajo en la herramienta de diseño basado en imágenes está en la creación de mesas de trabajo estáticas para todos los estados de la interfaz que finalmente se vinculan entre sí. Para proyectos profesionales, este es un enfoque de interrupción. En la ventana estática, los patrones más simples se vuelven como un menú desplegable que es inmanejable.

Esto sucede debido a la falta de capacidad para preservar los componentes interactivos para su reutilización y debido a una cantidad considerablemente grande de mesas de trabajo. Además de todas estas herramientas, solo permiten la interacción básica sin la capacidad de establecer variables para el contenido, los estados de los elementos, la lógica condicional y otros.

4. Colaboración débil en diseño e ingeniería: el proceso de ingeniería es completamente diferente al de esta herramienta y no se puede fusionar. La salida de ambos mundos está desconectada de su propia naturaleza.

Las tecnologías utilizadas por los usuarios son el producto final del trabajo de los desarrolladores, mientras que el diseño basado en imágenes introduce capas adicionales de abstracción que están muy lejos de la experiencia final del usuario.

Los diseñadores e ingenieros están desconectados y frustrados entre sí debido a los componentes interactivos reutilizables, la falta de interacciones reales y la capacidad de importar conexiones desde el código.

Singularidad en el diseño basado en código

Es importante saber qué tiene de especial este diseño, ya que estamos haciendo hincapié en la transición del diseño basado en imágenes al diseño basado en código. Cuando un usuario dibuja algo utilizando una herramienta de diseño basada en código, crea CSS/HTML/JS relevantes y activa el navegador. Esto hace que el motor muestre los resultados visualmente.

Los siguientes son los beneficios para los diseñadores después de su transición del diseño basado en imágenes al diseño basado en código.

1. Fidelidad: hay una coincidencia del cien por cien entre la intención de un diseñador y un resultado codificable cuando se usa un diseño basado en código. Para renderizar todos los proyectos de diseño, la tecnología utilizada en el diseño basado en código es la misma que la del desarrollo web.

2. Elimina la diferencia de restricciones entre diseñadores y desarrolladores: los diseñadores pueden crear cosas que son difíciles de diseñar y que son imposibles de recrear en el código en herramientas basadas en imágenes. Estas mismas restricciones son aplicables tanto para diseñadores como para desarrolladores en herramientas basadas en código. Por lo tanto, garantiza que tanto los diseñadores como los desarrolladores permanezcan sincronizados.

3. Sustitución de tableros de arte con componentes interactivos: en lugar de tableros de arte vinculados, la herramienta de diseño basada en código utiliza las interacciones más avanzadas en los componentes. Este enfoque empodera directamente a los diseñadores para crear sistemas de diseño interactivo altamente reutilizables y también imita el desarrollo.

4. Interacciones realistas y potentes: con la transición de diseños basados ​​en imágenes a diseños basados ​​en código, los objetos pueden interactuar entre sí, moverse en la pantalla y crear patrones complejos. No es necesario saber codificar, lo que es más importante para la colaboración con los ingenieros y las pruebas con los usuarios.

5. Crea la colaboración más fuerte jamás vista: Se logra un enfoque completamente nuevo y revolucionario para la colaboración de ingeniería y diseño a través del paradigma basado en código.

Artículo relacionado

Diferencia entre diseñador web y desarrollador web