Diseño VS Code: ¿por qué deberían ir de la mano?

¿Deberían los diseñadores centrarse solo en el arte de la marca visual de un sitio web? ¿Se supone que los desarrolladores solo deben saber codificar? ¿Cuál es la importancia del desarrollo front-end en Drupal? Encontremos respuestas a todas sus preguntas en este artículo.

Cuando profundizamos en este dilema de diseño versus código, se nos ocurre que ambos son, de hecho, complementarios entre sí. Pero la pregunta es ¿porqué? ¿Por qué los diseñadores de UI / UX tienen que aprender el código y sus fundamentos? Lo mismo ocurre con los desarrolladores en términos de diseño.

Ambos dominios implican ser creativos, comprender a los usuarios y su comportamiento. Ser un diseñador sin conocer las habilidades básicas de codificación y la estructura del código es como preparar un pastel a medio hornear, que después de comer puede llevarlo a una juerga de baño.

Pero antes que nada, vayamos a lo básico con un ejemplo.

Diseñar Vs Codificación: la similitud con una diferencia

Para un escritor, uno tiene que imaginar y concluir sus pensamientos antes de escribirlos. Nadie simplemente toma un diario o va a un blog o plataforma de redes sociales y comienza a escribir de inmediato. Es por eso que todo el procedimiento se llama componer. Y sí, escribir un correo electrónico en Gmail también se llama "redactar". Ahora, ¿por qué estamos hablando de escritores, composiciones y todo? Vamos a cortar por lo sano. En este caso, la imaginación es su diseño y escribir sus pensamientos es desarrollo. Espero que ahora tengas una mejor imagen; Pasemos a un lado diferente de este tema.

¿Deben los diseñadores aprender a codificar y los desarrolladores aprender sobre UI / UX?

Durante los sprints de código de diseño, es posible que se encuentre con situaciones en las que todos los diseños creados no sean factibles. Eventualmente, el producto final termina siendo una versión modificada del diseño original. Las discusiones ocurren, el cliente cambia los requisitos, pero el problema sigue siendo constante. Estas situaciones pueden evitarse si los equipos de diseño y desarrollo trabajaran juntos simultáneamente desde el principio. De esa manera, el trabajo se hace de manera más eficiente porque reciben retroalimentación continua entre ellos sobre lo que es factible y lo que no.

Comprender ambos dominios no es tan difícil como parece. En cualquiera de ellos, se necesita imaginación, proceso de pensamiento y práctica. Y sí, sin mencionar que las habilidades fundamentales son el diseño y el código, que es una opción para aprender, pero no es obligatorio si conoces alguna.

Un diseñador debe conocer la viabilidad, la posibilidad y los desafíos de un diseño y solo puedes llegar a saberlo cuando sabes cómo lograrlo a través del código. Lo mismo ocurre con los desarrolladores. Cuando los desarrolladores comprenden los diferentes escenarios por los que pueden pasar los usuarios, su experiencia de usuario, resolución de problemas, solución, etc., puede simplificar y hacer las cosas mucho más eficientes.

Estas son las razones por las que una persona debe aprender los conceptos básicos de cualquiera de las habilidades (código o diseño) además de su experiencia principal.

1. Más control sobre la apariencia del producto: lo que esto básicamente significa es que cuando un desarrollador sabe cómo funciona el análisis de diseño y qué proceso de diseño está involucrado, puede adaptar esas ideas de diseño y tener más control sobre el producto final. y por lo tanto resulta en una entrega más rápida del producto.
2. Comprenda a los usuarios y aplíquelo al diseño: cuando un desarrollador comprende el producto desde la perspectiva de un usuario, le da un poder enorme para construir algo que los usuarios realmente necesitan y desean. Por ejemplo, comprenderá cómo reaccionarán los usuarios ante diferentes tipografías, diferentes estilos de botones, esquemas de color, etc.
3. Adaptación del diseño: es igualmente importante que los diseñadores sepan codificar. Cuando sabe cómo se estructurará el producto diseñado mientras se desarrolla, idealmente puede mejorar el diseño y hacerlo más eficiente, reduciendo así el tiempo y el esfuerzo invertido por los desarrolladores.

Elaborar las consecuencias de tener solo conocimientos básicos con ejemplos

Para comprender mejor por qué el diseño y la codificación deben ir de la mano, analicemos algunos ejemplos.

Lo anterior es un ejemplo clásico del uso de estructura no secuencial. Aquí la estructura se reordena mientras se desarrolla para dispositivos móviles. Esta no es solo una mala práctica; también consume mucho tiempo y es engorroso. Sin embargo, si un diseñador conocía la estructura del código que se está desarrollando, podría haberse evitado fácil y posiblemente.

Considere el ejemplo anterior de una superposición emergente con un desplazamiento. Una superposición emergente está diseñada de manera que debe desviar la atención del usuario a un solo tema y solo se usa como foco cuando se necesita mostrar cierta información. Aquí, la superposición de la ventana emergente tiene un desplazamiento en el fondo que puede distraer al usuario y no probar que la ventana emergente sea ineficaz.

Un desarrollador siempre se enfoca en completar la tarea de manera más eficiente y a un ritmo más rápido, y en el proceso se pierde algunos aspectos del diseño, que él / ella puede pensar que es innecesario o podría hacerse modificando un poco el diseño. El ejemplo mencionado anteriormente muestra el escenario exacto cuando un desarrollador hace su trabajo pero termina comprometiendo el diseño. Por lo tanto, si el desarrollador tuvo una exposición a UI / UX básica, este problema podría haberse evitado fácil y posiblemente.

Como otro ejemplo, tomemos las capturas de pantalla anteriores que son de una aplicación de ahorro de dinero. La tarea en sí no tiene ningún campo de entrada para una firma digital. Además, al enviar el formulario, el mensaje de error no le da al usuario ninguna guía o sugerencia sobre cómo obtener una firma digital válida. Si un desarrollador conocía los conceptos básicos de UI / UX, podría haber guiado fácilmente al usuario en el siguiente proceso o podría haber mostrado el mensaje de una manera más simple con una referencia adecuada al campo o sugerencias.

¿Donde empezar?

Empezar siempre es una buena idea. Para los diseñadores, lo básico para aprender es HTML, CSS y un poco de JS / jQuery. Hay muchas plataformas de aprendizaje en línea y sitios web con herramientas IDE en vivo para que practique y aprenda.

HTML: la estructura básica de cualquier diseño es lo primero, y es el código de cualquier producto.
JS / jQuery: se pueden lograr controles deslizantes, ventanas emergentes, menús desplegables y mucho más con estos
Sandbox: herramienta en vivo para jugar con su código
CSS / SCSS : diseñar la estructura es un proceso creativo y puede lograrlo mediante CSS / SCSS
W3Schools: una plataforma de aprendizaje en línea simple y una buena para comenzar
Codrops (Tympanus): una vasta biblioteca con mente de desarrollador y de diseño en la misma plataforma

Para los desarrolladores, pueden comenzar siguiendo las mejores prácticas sobre UI / UX con:
Behance: conjunto de diseño completo para una cartera e inspiración profesionales
Dribbble: ideas de diseño para publicar e inspirarse
Muzli: blogs, inspiraciones, ideas
Medio: blogs sobre cualquier campo (casi), mejores prácticas y tutoriales
Awwwards: sitios web nominados al mejor diseño y ganadores con los que inspirarse
XD / Figma / Sketch: herramientas para diseñar maquetas, wireframes para UI / UX

Para diseñadores

Para desarrolladores

Desarrollo front-end en Drupal

Drupal 8 como CMS es un marco de gestión de contenido amigable para diseñadores de UI / UX porque tiene mucho que ofrecer desde el primer momento, el más significativo es la variedad de temas disponibles y diseños receptivos. Por supuesto, hay muchas más funciones en las que puedo pensar en este momento, pero dejémoslas para otro día.

Mientras que los diseñadores de UX aplican sus habilidades creativas y se centran en la presentación visual de un sitio web de Drupal, los desarrolladores de Drupal front-end cierran la brecha entre los diseñadores de UX y los desarrolladores de Drupal back-end. Ellos son los que implementan los componentes visuales entregados por el diseñador en un sitio web de Drupal. Aunque tanto el diseñador UX como el desarrollador Front-end de Drupal piensan en términos de la experiencia del usuario y la resolución de problemas relacionados con UX, adoptan diferentes enfoques para resolverlos. Este último, sin embargo, siempre encuentra una resolución a través del código.
Los desarrolladores de front-end de Drupal son responsables de ofrecer hermosos sitios web de Drupal trabajando y personalizando los temas de Drupal. Deberían poder solucionar problemas de front-end para los que necesitarían estar equipados con conocimientos de PHP, CSS, jQuery, CSS, HTML y, lo que es más importante, el diseño de sitios web para dispositivos móviles.

Con la creciente popularidad de los sitios web Drupal sin cabeza y la arquitectura desacoplada, los desarrolladores de front-end de Drupal que conocen los marcos de desarrollo de frontend como Angular, ReactJS, Vue.js, siempre tienen una ventaja competitiva.
Entonces, en general, para poder sobresalir en el desarrollo de Front-end Drupal, uno necesita salir de su zona de confort y aprender cómo pueden crear e implementar experiencias digitales modernas equipadas con las últimas tecnologías.