He construido y diseñado aplicaciones y sitios web y también ayudado a escalar productos en compañías pequeñas y grandes, sea desde el tamaño de mis propios emprendimientos (startups) hasta compañías de la talla de Google.

He aprendido sobre las mejores prácticas de diseño digital a través de una mezcla prueba y error, ciclos de desarrollo, lanzamientos exitosos, productos fallidos, retroalimentación de los usuarios y las inevitables iteraciones que han seguido a estos eventos.

Aquí quiero transmitir y compartir lo que he aprendido.

Mis experiencias podrían permitirte mejorar tu comprensión de cómo funciona el diseño digital y el rol del diseñador en la conceptualización de productos.

Por medio de estas lecciones serás capaz de introducir productos al mercado en una manera más rápida y eficiente, y brindar un mejor servicio a tus usuarios.

¿Qué es Diseño Digital y por qué es Importante?

La definición formal de diseño de productos digitales es; un método de diseño iterativo, empleado de manera formal para la resolución de un problema práctico. Lo cual suena complicado, ¿Verdad?

No tiene por qué serlo.

Expresado en un lenguaje más sencillo, podemos decir que el diseñador de productos digitales descubre un problema existente, propone la mejor solución posible utilizando una mezcla de tecnologías y lo introduce al mercado.

El diseño digital es considerado un subconjunto del diseño de productos, pues trata completamente acerca de la creación de los mismos, solo que a través del uso de software.

Las habilidades que estás aprendiendo y desarrollando en freeCodeCamp te ayudarán a pensar estratégica y tecnológicamente para la resolución de problemas. Lo cual está ampliamente relacionado con la práctica del diseño digital.

Para modo de implementar diseños digitales necesitarás identificar oportunidades y conocer los deseos de tus usuarios, consumidores o clientes.

El Diseño Digital y el Mundo Real.

El diseño digital se centra en los usuarios.

La obsesión con el usuario, comienza literalmente con el usuario, y se lleva a cabo en reversa.

Si eres nuevo en el diseño digital hay algunos pasos tácticos que puedes tomar para aprender lo que los usuarios valoran y cómo puedes aprovechar una mezcla de UI, UX y la mentalidad de diseñador para resolver problemas tangibles.

¿Qué Problema estás Resolviendo?

En primer lugar, trabaja arduamente en ganar y conservar la confianza del usuario, entendiendo que problema deben solucionar tu producto y diseño. Responde las siguientes preguntas: ¿Por qué existe este producto? ¿Cómo será utilizado?

El diseño digital bien elaborado puede tener un profundo impacto en los usuarios.

Crear experiencias de usuario intuitivas y simples puede ayudarlos a entender mejor cómo funciona tu producto.

Un amigo mío trabajo en el desarrollo de la experiencia de lectura del iPad. Una historia que él comparte conmigo, es como los diseñadores digitales hicieron que "pasar la página" en los libros digitales sea una experiencia que no requiere esfuerzo.

La acción de deslizar la página con el dedo, como se hace en un libro real de papel, evidencia cómo el trabajo de diseño, UX y UI pueden crear experiencias de usuario realmente exquisitas.

La próxima vez que pases la página en tu iPad, piensa en porque la experiencia se siente simple y natural. El diseño digital bien llevado a cabo, es mágico.

Innova y Simplifica

En segundo lugar, los diseñadores digitales buscan y requieren de la innovación , la invención y siempre encontrar formas de simplificar.

Así como es necesario enfocarte en tus clientes o usuarios, necesitas estar consciente de tu entorno, buscar nuevas ideas en todas partes, y no debes limitarte a la mentalidad de "no se inventó aquí".

Al diseñar sitios web, por ejemplo, es importante hacer algunas cosas realmente bien. Aprendí esto al construir y optimizar mi más reciente creación, Work From Home Adviser, que ayuda a las personas a trabajar desde casa de forma remota.

Uno de mis mentores me aconsejó:

“Conoce qué es lo que sabes hacer bien y como lo puedes hacer mejor. Si diseñas tu website, sabes que el tiempo es valioso y cada segundo adicional que tus usuarios pasen en tu página, mejor. Un fuerte diseño puede rasurar la latencia excesiva de las páginas de tu sitio y aumentar la eficiencia del entorno del servidor y eso es algo por lo que vale la pena trabajar.”

Fíjate que este consejo es específico (ej. diseña buscando velocidad) pero también es de criterio amplio (mejora la experiencia de tus usuarios en la mejor forma posible).

Cuando pienses en diseño digital, toma tiempo para entender profundamente que palancas puedes jalar y como estas resultarán en mejores experiencias y resultados para tus usuarios.

La Experimentación es Clave

En tercer lugar, experimenta.

El diseño digital a diferencia del diseño de cosas físicas, puede ser mejorado rápidamente a través de sprints y despliegues del código. El software es ajustable.

Al empezar por tus usuarios y trabajar hacia atrás buscando simplificar e iterando constantemente, puedes asegurar que tu diseño eventualmente logre satisfacer tus expectativas. Si no has llegado a ese punto continúa intentándolo.

A continuación un experimento mental que me gusta hacer con mis amigos:

Piensa en la última vez que compraste un boleto de avión en línea. ¿Cuántos pasos tomó navegar desde la página de destino hasta la confirmación de la página de pago?

¿Por qué crees que las aerolíneas hacen que los usuarios pasen por este proceso de pago? ¿Cómo podrías mejorar y simplificar el proceso?

Una grandiosa forma de mejorar tus habilidades de diseño digital es practicar en la página de otro diseñador. Y ver si la puedes mejorar.

Los diseñadores ven ser grandiosos como un punto de inicio, no el final. Mediante la iteración y experimentación, un diseñador digital puede tomar cosas que funcionan bien (o  mal) y mejorarlas en maneras novedosas y sorprendentes.

Si eres nuevo en el ámbito del diseño digital, lo anterior debería emocionarte.

Ejemplos de Diseño Digital Bien Hecho y Como Ayuda a los Usuarios.

Quiero concluir con ejemplos de diseño digital bien realizado. Les proveo de ejemplos e imágenes, y les explico por qué el diseño es intuitivo, simple y relevante.

Si quieres desarrollar tus habilidades en este campo, invierte el tiempo no solo en pensar cómo puedes mejorar los sitios de otras personas y por qué. Si no también aprende de los líderes de la industria.

Ejemplo #1

Elemental Labs brinda un gráfico increíblemente intuitivo para ayudar a sus usuarios a entender la diferencia entre su producto y el producto de un competidor. Sin leer nada más, puedes intuitivamente entender que su producto es mercadeado como más claro, puro y simple.

El contraste entre colores ayuda al ojo a entender visualmente el mensaje y es un ejemplo de un gran diseño digital.

También, observa como los gramos (una unidad de medida común) es reemplazada con miligramos. Esto hace que el usuario sienta que el producto de la competencia contiene más azúcar (29,000 miligramos de azúcar se siente como mucho).

dMOMnxMdp0yAMtJOG6KgYhHfrC1KBuf3rUtawdeybUX5n0AhSDnQA-IOU6juJIFWLEkKvgm7IkhgcFCvEI-hMPnJOvd0-yorpni-Rn7ERLSBwSglqfcF2iO3lrTnCXYDhFhuttjr

Ejemplo #2

Woven es un divertido calendario que facilita las encuestas de grupo. He utilizado una variedad de herramientas de software para coordinar grupos y siempre es algo complicado.

Observa cuán limpios son el infográfico y la llamada a la acción. Sin pensar mucho acerca del producto puedes entender claramente cómo funciona y por qué te beneficiará: simplemente encuesta a las personas y elige qué fecha es mejor para el grupo.

Me encantan los productos que combinan diseño atractivo, UX, UI y son increíblemente fáciles de navegar.

WARBB40pnd91sabZQxBRlziA0z9lFED5omWj68fDfhSeQySahKidCsyTycJKIwApb2B0DAAJhuJd1KDziBNKsrfXPaTE0FZdyboKBrZ4KPlbsjCOCx3n-DyL6HmmXZ2YBlreXQ6U

Ejemplo #3

Para quienes quieren un ejemplo de diseño del mundo real, un favorito muy particular es LFA Machines.

Su grupo de productos es complicado, ofrecen ambos; máquinas semiautomáticas y automáticas para embotellar o empacar cápsulas. Para mucha gente esta tecnología es abstracta, pues no han visto este tipo de máquinas en persona.

Así que ¿Qué  es lo que hace el sitio? Ofrece un video que se reproduce automáticamente cuando visitas el sitio para que puedas ver como funciona el dispositivo y los beneficios que brinda. Este diseño digital reúne simplicidad, claridad y una obsesión por la satisfacción del cliente. Todo en uno.

9pedLTgYTzxzIDue_Wnv5JNgSfeatkKdRIMS8FJzs04Vb6I5V0wyedLR3s3NP8kBByZB-hnTUQeM2vZnJXdZDjYAXwmPb-vCgLcNG-jD_QqNmDS1kfmx4gsGD7HAn1a-bbWMkeCy

Ejemplo #4

Aquí un ejemplo final.

Si quieres iniciar un podcast podrías experimentar con diferentes tipos de software para podcast. Una opción que combina simplicidad, facilidad de uso y un estándar de diseño genial es Buzz Sprout.

Cuando un usuario visita su sitio por primera vez es invitado mediante atractivos tutoriales, guías y consejos a aprender acerca de cómo crear un podcast.

Estos radio-botones lo dicen todo:  hacen el proceso de selección muy amigable y aceleran el proceso de creación de podcasts. En solo un botón el diseño reúne una fuerte estética y gran facilidad de uso.

8CO0xVCyEV2LIqXegXwNjfRIR5XbF54AsGoORsQFbVsYWwRUr2b0FeB1bUuP30kLN2YFwDZFIFyxtJfY5Ft32osgOnik1paDzH73Q2qzBqf2SwyK0ZzpGv-LLFEu73k2qrxVP2H4

Traducido del artículo de Adam Naor - What is Digital Design and Why Does It Matter? UX + UI + Web Designer Jobs Explained