MEJORA TUS HABILIDADES CON DIVERTIDOS JUEGOS EN LÍNEA PARA DISEÑADORES

Los diseñadores exitosos rutinariamente mejoran y vuelven a capacitar para reforzar los fundamentos utilizados en todas las herramientas, proyectos y disciplinas. Sin embargo, encontrar tiempo adicional para aprender durante la semana laboral no es fácil. Afortunadamente, los juegos en línea son una forma divertida y educativa para que los diseñadores de UI/UX mejoren sus habilidades y adquieran otras nuevas. A través de experiencias de juego en línea interactivas e inmersivas (ya menudo gratuitas), puede perfeccionar habilidades técnicas como la alineación, la tipografía y la teoría del color.

Además de aprender nuevas técnicas de diseño, descubrí que jugar juegos en línea me relaja, aumenta mi creatividad y me ayuda a hacer un mejor uso de los principios básicos de diseño. Cada vez que tengo tiempo libre o me enfrento a un problema de diseño obstinado, juego uno de estos juegos y obtengo una nueva perspectiva.

MEJORE SU SENTIDO DE ALINEACIÓN

La alineación es un principio de diseño fundamental que guía la composición visual y respalda la usabilidad y la legibilidad .

Está centrado Eso es excelente para entrenar su sentido de alineación y ayudarlo a detectar errores de espaciado rápidamente. El objetivo es determinar si un punto está centrado dentro de una forma. Es un concepto simple, pero el juego es desafiante porque los puntos a menudo se colocan angustiosamente cerca del centro. El juego crea conciencia de composición al obligarte a considerar la geometría y encontrar puntos de referencia en formas superpuestas y adyacentes.

Está centrado Eso prueba el sentido de alineación de los jugadores al pedirles que determinen si un punto está centrado.

AMPLÍE SU CONOCIMIENTO DE DISEÑO TIPOGRÁFICO

Comprender los matices de los tipos de letra puede ayudar a los diseñadores a establecer una jerarquía visual, garantizar que el texto sea legible y comunicar mejor el significado de la copia.

El juego I shot the serif prueba qué tan rápido puedes reconocer las fuentes serif . Para comenzar, se le presentan dos letras, una de las cuales es una fuente serif, y debe “disparar la serif” haciendo clic en ella antes de que se le acabe el tiempo. A medida que avanza, se le muestran más y más letras simultáneamente, lo que dificulta encontrar y fotografiar los diferentes estilos serif.

¡Este juego te mantendrá alerta! Lo juego todas las semanas y siempre me sorprende lo desafiante que es después de algunas rondas.

Disparé los desafíos serif con qué rapidez los jugadores pueden reconocer y “disparar” diferentes fuentes serif.

Typewar es otro entrenador tipográfico, uno que desafía tu capacidad para identificar diferentes tipos de letra. En cada ronda, se le muestra un glifo y debe elegir el nombre de tipo de letra correcto entre un par de opciones. Ganas o pierdes puntos por la forma en que respondes la pregunta, y la cantidad de puntos otorgados al final depende de cuántos otros jugadores respondieron la misma pregunta correctamente. Los comentarios instantáneos, las estadísticas en tiempo real y la exposición a fuentes poco conocidas lo motivarán a seguir aprendiendo.

Typewar ayuda a los jugadores a mejorar su capacidad para identificar diferentes tipos de letra.

MEJORE SU OJO PARA KERNING

Una forma de mejorar la legibilidad del texto digital es garantizar un interletraje eficaz o el espaciado entre caracteres. Kerning a menudo pasa desapercibido para los diseñadores porque está predefinido en los archivos de fuente de cada tipo de letra. Pero es útil saber cómo ajustar el interletraje cuando la relación entre los caracteres parece defectuosa, o si necesita crear un logotipo o una fuente a medida para un cliente .

Kern Type lo ayuda a afinar sus habilidades de interletraje al probar su capacidad para espaciar correctamente las letras dentro de las palabras. Por cada palabra que kern, recibe una puntuación de 100 y la opción de alternar entre tres vistas: su espaciado, el espaciado óptimo y una combinación de ambos para comparar.

Sigo volviendo a este juego porque es difícil anotar 100 y me recuerda que siempre hay espacio para mejorar.

Kern Type pone a prueba la capacidad de los jugadores para optimizar los espacios entre letras.

MEJORA TU JUEGO DE COLORES

Al actualizar sus habilidades de color, puede tomar decisiones más inteligentes y significativas en un espectro de disciplinas y proyectos de diseño. Color es un juego que te desafía a identificar tonos y saturaciones, así como combinaciones de colores complementarios, análogos, triádicos y tetrádicos. La interfaz muestra una rueda de color interactiva con un color resaltado en el centro. Debe determinar el color (o colores) dentro de la rueda de colores en 10 segundos o menos, una tarea que se vuelve cada vez más difícil a medida que intenta combinar colores para esquemas de colores triádicos y tetrádicos.

El color ayuda a los jugadores a mejorar sus habilidades de combinación de colores al desafiarlos a identificar tonos, saturaciones y paletas de colores específicos.

REFINA TU TÉCNICA DE VECTORES

Las herramientas basadas en vectores, como Figma, Sketch y Adobe Illustrator, permiten a los diseñadores crear gráficos digitales que se escalan sin perder calidad, a diferencia de las imágenes de píxeles, que pierden resolución a medida que aumentan de tamaño. Pero dibujar y manipular formas y curvas vectoriales puede ser un proceso complicado.

El juego booleano le enseña las operaciones booleanas que se utilizan para construir y modificar rápidamente formas 2D en herramientas de diseño basadas en vectores. En el juego, se te muestra una forma para replicar. Después de unos segundos, la forma se transforma en un contorno. A la izquierda de la pantalla hay varias formas que puede arrastrar al contorno para reproducir la forma final. En la parte inferior de la pantalla hay cuatro operaciones booleanas: unión, resta, intersección y diferencia. Al hacer clic en el botón Continuar, se activa una animación paso a paso que le muestra cómo fusionar las formas usando la operación booleana elegida. Cuando se elige una operación incorrecta, esta animación le ayuda a visualizar sus errores.

El juego booleano enseña a los jugadores cómo utilizar operaciones booleanas en gráficos vectoriales.

Shape Type es otro juego de vectores para probar. En él, al jugador se le presenta una letra que debe remodelarse en su forma correcta arrastrando diferentes puntos de anclaje y se le otorga una puntuación de similitud de 100. Al igual que Kern Type, también puede alternar entre tres vistas para comparar su resultado con el forma original. Además de refinar sus habilidades de dibujo vectorial, Shape Type es una excelente manera de ver de cerca los elementos anatómicos de diferentes tipos de letra.

Shape Type desafía a los jugadores a practicar la remodelación de formas de letras vectoriales.

Un último juego que te ayudará a potenciar tus habilidades vectoriales es The Bézier Game , que te ayuda a crear gráficos más precisos con la herramienta Pluma. Los tutoriales de introducción explican cómo usar los controles, como Alt y Mayús, para ubicar los puntos de anclaje y manipular los controles de Bézier. El juego te enseña a dibujar formas geométricas simples junto con formas más complejas, como un corazón y un automóvil, con la menor cantidad posible de puntos de anclaje o nodos. Para mantener las cosas interesantes, obtienes una cierta cantidad de nodos para cada nivel, y el juego mantiene un registro continuo de los nodos que no usas.

Me gusta este juego porque me ayuda a visualizar la relación entre la ubicación del punto de anclaje y los ángulos de manejo de Bézier, lo que conduce a líneas y curvas más suaves.

El juego Bézier ayuda a los jugadores a refinar importantes habilidades con el lápiz, como colocar puntos de anclaje y arrastrar manijas de Bézier.

REPASE LA CODIFICACIÓN BÁSICA

Ya sea para el desarrollo profesional o la colaboración con desarrolladores, comprender los conceptos básicos de HTML y CSS convierte a un diseñador en un activo considerable para los equipos multidisciplinarios. Además, el conocimiento de la programación front-end ayuda a los diseñadores a moderar sus ideas con parámetros realistas.

Flexbox Froggy desglosa los conceptos básicos de la codificación paso a paso. Enseña CSS flexbox , un modelo de diseño web CSS3 que facilita el posicionamiento de los componentes de la interfaz de usuario al permitir el control de la alineación, el espaciado y el ajuste de elementos en las páginas web con solo una o dos líneas de código.

En el juego, ayudas a una rana traviesa y a sus amigos a saltar por la pantalla escribiendo líneas de código CSS. En cada nivel, un mini tutorial sobre el editor de código describe los diferentes comandos que puede usar. A medida que escribe el código en el lado izquierdo de la pantalla, los cambios correspondientes ocurren en el lado derecho. Si la rana llega al nenúfar, el código es correcto.

Flexbox Froggy enseña a los jugadores a escribir código CSS flexbox básico.

AUMENTE SU CONOCIMIENTO DE UI/UX

Los juegos en línea también pueden ayudar a los diseñadores a mejorar su conocimiento de UI/UX y crear experiencias fluidas que aumenten las tasas de conversión y el ROI .

Can’t Unsee enriquece sus habilidades generales de UI/UX al probar su conocimiento de los conceptos de diseño, como la jerarquía, el contraste, la alineación, la tipografía y el estilo de los componentes. La pantalla muestra dos componentes de diseño y le pide que seleccione la opción más fácil de usar. Los componentes pueden parecer idénticos para el ojo inexperto, pero un diseñador experto debería poder distinguirlos al notar pequeñas diferencias entre los elementos, como texto desalineado o relleno irregular.

Can’t Unsee les pide a los jugadores que identifiquen la opción más fácil de usar de dos diseños.

APROVECHA AL MÁXIMO LOS JUEGOS DE DISEÑO EN LÍNEA

A menudo me sorprende lo rápido que evoluciona la industria del diseño. A veces, la presión de seguir el ritmo de las nuevas herramientas y técnicas puede resultar abrumadora y sofocar mi creatividad. Hago mi mejor trabajo de diseño cuando abordo los problemas con un espíritu infantil, por eso disfruto tanto de estos juegos: me permiten aprender y practicar mientras mantengo un sentido de juego y asombro.

Ya sea que esté buscando volver a capacitarse, mejorar o aprender una nueva técnica de UI/UX, los juegos de diseño en línea pueden ayudarlo a probar y aumentar sus habilidades artísticas y técnicas. Como dijo una vez Pablo Picasso: “Siempre estoy haciendo lo que no puedo hacer, para poder aprender a hacerlo”.

LECTURAS ADICIONALES EN EL BLOG DE DISEÑO DE TOPTAL:

  • Lo que Game UX puede enseñarnos sobre el diseño de productos
  • Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
  • Los 10 entregables de UX que usan los mejores diseñadores
  • Un enfoque práctico para el diseño de gamificación
  • Psicología del diseño y la neurociencia de Awesome UX

Leave a Comment