Todo lo que necesita saber sobre el boceto de UX

Si ha realizado algún tipo de trabajo creativo serio, está muy familiarizado con el bloqueo creativo. Se siente como golpear una pared de ladrillos: ninguna de las ideas que puede visualizar es lo suficientemente buena o no puede funcionar en la vida real.

Para los diseñadores, la sensación es demasiado familiar. Sin embargo, como cualquier problema complicado sin una solución clara, un proceso inteligente puede marcar la diferencia. Aquí es donde entra en juego el boceto de UX.

El boceto de UX es un aspecto crucial, aunque a menudo pasado por alto, del diseño de la experiencia del usuario. El boceto es una forma muy eficiente de comunicar el diseño al tiempo que permite a los diseñadores probar una multitud de ideas e iterarlas antes de decidirse por una.

En esta publicación, tengo la intención de cubrir todo lo que necesita saber sobre el boceto de UX, incluidos los siguientes puntos:

• Introducción a los bocetos y wireframes de UX
• Conceptos básicos, herramientas y técnicas de bocetos de UX
• Aclarar bocetos con notas, anotaciones, números.
• Consejos y trucos para dibujar UX
• Minimétodos diseñados para aumentar la calidad y la productividad
• Todo lo que necesitas saber sobre Wireflows
• Una guía rápida para el esbozo de flujo de UX

UX Sketching es un proceso de dos pasos

Muchas opciones deben ser consideradas en el diseño, lo que resulta en la elección y ejecución de la mejor. Los diseñadores consideran sus opciones y luego proceden a trabajar en los detalles, haciendo así que el diseño de UX sea un proceso de dos pasos:

• Generación de ideas

En el paso inicial, se generan múltiples ideas, pero dado que no se les puede dar forma completa, no es raro que algunos de los elementos estén incompletos o falten. Lo principal es considerar diferentes enfoques y decidir cuál es el más eficiente en el contexto de su tarea y las diversas limitaciones del proyecto.

• Adición de detalles y refinamiento

Paso a paso, te decides por algunas variantes prometedoras y procedes a trabajar en los detalles, lo que hace que algunas ideas no sean adecuadas.

Bocetos UX y Wireframes: Introducción y Clasificación

Sus wireframes pueden diferir dependiendo de factores como el nivel deseado de detalle, colores y estilo, si se los va a mostrar a alguien, etc.

Destaqué los siguientes tipos de bocetos:

• Boceto: generación de ideas

Estos son bocetos iniciales. Los detalles de nivel inferior simplemente se anotan. Se emplea un número limitado de colores.

Dibujo muchos bocetos básicos para considerar el problema desde diferentes ángulos y considerar diferentes soluciones. Mientras dibujo tales bocetos, también me esfuerzo por generar tantas variantes de solución como sea posible.

En este paso en particular, lo incompleto libera mi mente, razón por la cual es tan importante evitar atascarse en minucias en esta etapa. Mi objetivo es generar tantas ideas como sea posible y elegir las más prometedoras.

• Estructura alámbrica: especificación, fase detallada

Por lo general, elijo bocetos prometedores y reviso los detalles, después de lo cual elijo la mejor variante y la trabajo con mayor detalle.

Sin embargo, esto no significa cada detalle . Las cosas obvias pueden simplemente ser notadas. Además, algunos aspectos serán difíciles de describir en papel.

En este paso, dibujo todos los detalles importantes , pero todavía no dibujo los wireframes en Balsamiq. Después de que todo está hecho en el papel, empiezo a dibujar en Sketch.

Las herramientas digitales brindan mucha más libertad creativa que el papel y puede cambiar fácilmente la atención a cosas menores. Por ejemplo, puede centrarse en el "pulido de píxeles" en lugar del diseño.

• Borrador de diseño visual

Este es un enfoque que rara vez se usa, pero a veces puede ser útil. Se consideran varias soluciones visuales en una etapa temprana del proyecto, pero puede llevar mucho tiempo crear bocetos digitales para todas ellas. Es por eso que primero dibujo bocetos de diseño en papel, para considerar diferentes opciones y elegir una dirección de diseño visual.

• Desglose de componentes/elementos

Esta técnica me parece útil cuando ya tengo una idea general y estoy pensando en la funcionalidad de una página en particular o en las partes integrales de los componentes de la interfaz. Dibujo diferentes elementos de la página, entrando en detalles, y luego dibujo diferentes posiciones posibles de los elementos de la página.

Los elementos, incluso los más simples, deben tener un estado; se puede presionar un botón y tiene un bloque de texto flotante que puede o no estar vacío. Cuanto más complejo es, más estados tiene.

Comenzando con los conceptos básicos

• Prepara tus herramientas. Encuentra el lugar más conveniente posible, una mesa grande con mucho espacio. Tome mucho papel y prepare algunos bolígrafos y marcadores.
• Calentamiento. Para estar listo, recomiendo dibujar algunas líneas, círculos, plantillas básicas e íconos.
• Defina sus objetivos. Decide qué quieres dibujar. Establece tu objetivo y decide qué historia tienes que contar. Determine el nivel de detalle deseado. Decide si estás listo para dibujar mucho.
• Defina su público objetivo. Si está haciendo esto por sí mismo, no necesita preocuparse por la apariencia de su boceto. Sin embargo, si tiene la intención de mostrar sus dibujos a un cliente, asegúrese de permitir algo de tiempo adicional para agregar más detalles a su boceto.
• Establezca un marco de tiempo. Habiendo decidido la cantidad de tiempo que está listo para asignar para dibujar, digamos 30 minutos, lo ayudará a concentrarse en su trabajo.

Ahora, ya está todo listo y puede comenzar:

• Dibuja los bordes. Dibuja los marcos, una ventana del navegador o del teléfono, una parte de la interfaz, etc.

• Agregue los elementos más grandes o básicos: menú, pie de página, contenido principal.

• Agregar detalles Agregue detalles relevantes, pero manténgalos simples en esta etapa.

• Agregar anotaciones y notas. Estos son necesarios solo si planea compartir los bocetos. Sin embargo, pueden ser útiles incluso si los haces solo para tus ojos.

• Esbozar alternativas. Bosqueje algunas alternativas rápidas a su solución.

• Elige la mejor solución. Elige las mejores opciones.

• Añade sombra y bisel. Esto es particularmente importante para propósitos de compartir. Agrega una sombra para que tu boceto sea visualmente atractivo, lo cual es importante si planeas compartirlo con miembros del equipo y/o clientes.

• Guarde el boceto. Tome una foto o guárdela en una carpeta. Tengo algunas bandejas de papel en mi mesa para bocetos.

• Cuota. Usualmente uso uno de los siguientes métodos para compartir:
  • Escanee bocetos a través de Evernote y proporcione un enlace permanente a otros miembros del equipo o partes interesadas.
  • Tome una foto y cárguela en InVision.
  • Cargue y asigne imágenes a Realtimeboard.
  • O simplemente envíe una foto por correo electrónico .
• Revise los bocetos y agregue notas. Tómese un descanso y luego regrese a sus bocetos un poco más tarde. Échales un vistazo de nuevo. ¿El boceto todavía tiene sentido para ti? Un buen boceto debe ser fácil de seguir.

Aclaración de bocetos con elementos adicionales

Encuentre o dibuje un boceto adecuado y luego agréguele los siguientes detalles:

1. Título. A veces, agregar un título es una buena opción. Escribe una descripción y una fecha, si es necesario, en la parte superior del boceto. El título te ayudará a comprender lo que estás viendo y si el boceto es relevante o no. Esto es especialmente útil si tiene muchos bocetos o los va a mostrar a otros.

2. Anotaciones. Las anotaciones son nombres y notas que se colocan cerca de un elemento para explicar su contenido u otros atributos. Añaden detalles que aclaran otros elementos y suelen ser difíciles de dibujar. Por ejemplo, podría ser el nombre del bloque, algunos detalles de interacción, una explicación de una imagen, algunas ideas para futuras variaciones de diseño, etc. Puede consultar uno de mis ejemplos para ver cómo se ve un boceto de anotación.

3. Números. Numere los elementos de su boceto, o los bocetos mismos. Puede decidir cómo ordenarlos (por ejemplo, por flujo de interacción, el orden en que los creó, etc.). También puede ser útil durante las discusiones (especialmente las discusiones remotas), ya que sus colegas y clientes pueden simplemente señalar el número de boceto en sus comentarios y comprenderá a qué se refieren sus comentarios.

4. flechas Puede usar flechas para indicar transiciones de pantalla. También se pueden usar para conectar diferentes partes de bocetos, para indicar una secuencia de acciones, etc. Dado que el significado de una flecha puede variar, justo encima de la flecha puede agregar una descripción o explicación de lo que significa la flecha. Aquí hay un ejemplo de un boceto básico que muestra una transición y varios estados diferentes.

5. notas Al igual que las anotaciones, las notas se utilizan para explicar conceptos. Sin embargo, las notas difieren de las anotaciones en su ubicación. No están adjuntos a un elemento ni ubicados cerca del elemento descrito, como en este ejemplo. Las notas se pueden colocar en la parte superior o inferior de la página. Incluso pueden describir elementos que no están incluidos en el diseño, dudas que puedas tener, explicaciones generales, ideas no esbozadas, etc.

6. gestos Los gestos son relevantes en el caso del diseño de dispositivos táctiles. Dibujar un gesto con la mano puede requerir práctica. Hay varias variantes de gestos que se utilizan para indicar diferentes tipos de acciones, por lo que es mejor decidir de antemano cómo designar una acción en particular (si no es obvio, por supuesto) y practicar dibujándola.

7. Realimentación. Es posible que reciba sugerencias para corregir o mejorar el boceto después de mostrárselo a otras personas o después de volver a verlo usted mismo. A menudo es útil marcar dichos comentarios en un color diferente para ayudar a diferenciar los comentarios del boceto original.

Puede utilizar diferentes colores para diferentes tipos de elementos. A veces uso el negro para los dibujos, el azul para los enlaces, el verde oscuro para las notas, el rojo para los títulos y los comentarios. Trate de usar diferentes colores en sus bocetos, ¡pero asegúrese de que su elección de colores sea consistente!

Consejos y trucos más específicos

1. No te preocupes por la calidad. No mires los bocetos en Dribbble; se trata de algo completamente diferente . Tenga en cuenta que el objetivo principal de los bocetos es ayudarlo a pensar con mayor claridad, encontrar mejores soluciones y ahorrar tiempo.

2. Práctica. Para empezar, puedes intentar dibujar algunas aplicaciones. Abra una aplicación web o móvil e intente copiar la pantalla, describiendo los elementos en las notas. Siempre que tenga algo de tiempo libre, practique dibujando los componentes básicos de sus diseños. En general, la práctica hace al maestro. En un tiempo, se convertirá en parte de tu yo de diseñador.

3. Compra una carpeta. A menudo no trabajo desde mi oficina, sino desde una cafetería o desde mi casa. Los bocetos en papel son muy propensos a dañarse, así que compre una carpeta simple para mantenerlos sanos y salvos.

4. Lleva las herramientas contigo dondequiera que vayas. Esto ayuda a garantizar que pueda plasmar su idea en papel en cualquier momento, de lo contrario, puede perder el pensamiento o no ser capaz de recordarlo con suficiente detalle. Siempre tengo un bloc de notas, algunas hojas A4 y bolígrafos conmigo.

5. Comparte con otros. Es muy importante involucrar a otras personas y comunicarse con su equipo. Involucrar a otros y obtener sus comentarios, especialmente desde el principio, ayuda a ahorrar tiempo y recursos a largo plazo. También puede alentar a otros a dibujar de la forma en que imaginan el diseño.

6. Bandejas de papel. Piense en colocar bandejas de papel en su mesa de trabajo. Por ejemplo, tengo tres de ellos: para tareas entrantes, para bocetos y hojas de papel en blanco.

7. Experimenta y personaliza. Mis recomendaciones se basan en mi experiencia. Con el tiempo, descubrirá qué es lo que más le conviene; qué métodos, qué secuencia de pasos, qué satisface exactamente su potencial creativo. Lo logrará solo si intenta constantemente algo nuevo, por lo que es importante experimentar con diferentes formatos, estilos y probar nuevas plantillas.

8. Usa plantillas. Las plantillas ahorrarán tiempo e implícitamente tendrán en cuenta las restricciones de formato, liberando más tiempo para concentrarse en lo que es importante.

Mini-métodos adicionales para mejorar sus bocetos

Estos no son necesariamente consejos y trucos, pero son una colección de métodos, herramientas y sugerencias que deberían aumentar su productividad o mejorar la calidad de sus bocetos.

1. Crea un tablero de bocetos. Uno de los mayores beneficios de usar lápiz y papel en lugar de una herramienta de dibujo digital es que puedes pegarlo en la pared. Todos los miembros de su equipo pueden verlo y participar (aunque recomiendo configurar sesiones de revisión).
   
   • Verá sus bocetos usted mismo, y esto estimulará su pensamiento y le permitirá ver el panorama general, no piezas aisladas, sino todo el sistema. Verá las interacciones entre las piezas y la forma en que encajan entre sí.
     
   • Cree el tablero de bocetos: adjunte sus bocetos de pizarra. Si no tienes una pizarra en tu oficina, puedes usar cinta adhesiva de doble tamaño o hojas de post-it para pegar tus bocetos en la pared. Si no quieres pegarte a la pared, puedes encontrar un gran trozo de papel de cartón. Recomiendo encarecidamente usar tableros de bocetos, ya que son una de las mejores herramientas de diseño.
2. Usa una pizarra. Una pizarra es una gran herramienta de dibujo. Tiene una serie de ventajas:
   • Es colaborativo y es fácil involucrar a otros miembros del equipo en la discusión y también en el dibujo. Incluso si sus ideas no encajan bien, entenderás su forma de pensar y te ayudará a estar en la misma página.
     
   • Los marcadores no te permiten concentrarte en los detalles, tienes que pensar en las cosas generales. Los bocetos están abiertos a la interpretación.
     
   • Una pizarra es fácil de limpiar y hacer correcciones.
     
   • Hay mucho espacio y puede pensar fácilmente en todo el flujo del sistema.
     
   • Puede adjuntar bocetos, impresiones y materiales de referencia mediante imanes.

3. Prototipos. Haz un prototipo en el que se pueda hacer clic para evaluar tu diseño. Trate de obtener retroalimentación sobre algunos elementos. Esto funciona particularmente bien cuando usa plantillas: sus bocetos son del mismo tamaño. Obviamente, será mucho más fácil dibujar bocetos del mismo tamaño si está utilizando una plantilla. Intentaré hacerlo aún más fácil brindándole algunas plantillas que puede descargar y usar: Móvil, Ventana múltiple del navegador, Desplazamiento del navegador, Personas.

   

4. Utilice su impresora y escáner. Dibuje el marco a mano (puede usar una regla para dibujar con mayor precisión), luego simplemente escanéelo con un escáner o una aplicación móvil e imprímalo. Puede editar su plantilla en el editor de imágenes antes de imprimir. Puede eliminar detalles innecesarios o duplicar algunos elementos. También puede imprimir una página del sitio preparada, fotos y otros elementos descriptivos. Puede pegar los recortes en su boceto.

5. Usa Evernote para escanear. Evernote es una gran herramienta de diseño. Puede guardar y compartir sus bocetos en él, puede crear temas y usar etiquetas para organizar sus bocetos. Las capacidades del modo "Escáner" son particularmente impresionantes. Pones tu boceto frente a él y lo "escanea", para que obtengas la copia del boceto. Luego puede invitar a sus colegas a Evernote y darles el enlace de su nota. Dado que existe una aplicación móvil para tabletas y teléfonos, siempre puede tener sus bocetos a mano.

6. Dibujo híbrido. Para darle un poco de vida y realismo a tus bocetos puedes combinarlos con fotos. Eso significa que tienes que tomar una foto y luego dibujar una historia con elementos de la interfaz. Esto también puede ayudarlo a notar algunos problemas y detalles de interacción.

7. Rastreo del mundo real. Si necesita crear un guión gráfico, ilustrar una experiencia en un contexto específico (por ejemplo, una persona que usa un teléfono inteligente en una estación de autobuses), debe incluir representaciones de personas, lugares y diversos objetos de la vida real. Estos pueden ser difíciles de dibujar, especialmente si no ha dominado las habilidades de dibujo, pero aquí hay un consejo simple: tome una foto del objeto o la situación y luego obtenga el contorno de los objetos clave usando un editor de imágenes. Puede usar el contorno resultante en sus bocetos después. Por supuesto, si tienes una tableta y un lápiz óptico , será aún más fácil.

Wireflow: delinear el flujo del sistema y la ramificación

El flujo de alambre es esencialmente una secuencia del flujo del sistema, pantalla tras pantalla, con ramificaciones y puntos de decisión. Debemos considerar cómo un usuario aborda su tarea, la forma en que se mueve de una pantalla a otra y su experiencia general del producto a lo largo del tiempo.

Wireflow, o lo que está dibujando y la forma en que está conectado, podría organizarse de acuerdo con los siguientes enfoques:

• Secuencia. Una secuencia es un viaje directo, pantalla tras pantalla. También puede ser una historia con puntos de decisión; no solo muestra el viaje, sino también los puntos de decisión y los diferentes caminos que el usuario puede elegir. Puede mostrar la estructura de la interacción de la pantalla.
• Cambios de estado. Representar diferentes estados de pantalla de algún elemento y las condiciones o acciones que provocan las transiciones entre estos estados.
• Pantalla contra elementos de pantalla. Puede dibujar las pantallas completas o considerar microinteracciones e interacciones.
• Plataformas. Puede considerar una experiencia de plataforma o múltiples plataformas.
• Alcance. ¿Representará una parte del viaje del usuario o el viaje completo? ¿Una interacción de usuario con el sistema o múltiples interacciones de usuarios?

Generalmente trato de definir los siguientes tipos de flujo de alambre, según la organización y el uso práctico:

1. Mapeo de flujo general y flujo de alto nivel. Dibuje rápidamente los cambios de pantalla y dibuje el recorrido general del uso de su producto. Aquí puede incluir algo de contexto y, opcionalmente, puede mostrar alguna interacción del usuario. Por ejemplo, un servicio de compras de comercio electrónico es un viaje bastante largo que puede incluir muchos pasos: cómo el usuario encontró la tienda, los pasos que siguió para pedir el producto, cómo pagó, etc.

2. Flujo de pantalla. Esto se enfoca en un flujo funcional específico a través del sistema. Puede ser una pequeña secuencia recta de pantallas o un viaje con ramificaciones. Por ejemplo, un usuario que sube unas fotos o un vídeo.

3. Esquema de navegación. Dibuja tu pantalla y las opciones que contiene. No se supone que esto mapee el viaje. Este paso incluye información que muestra las opciones que un usuario puede elegir, las direcciones que tienen los usuarios y varias partes de la aplicación. Normalmente creo un esquema de navegación al comienzo de un proyecto. Sirve para entender cómo se debe estructurar la navegación (qué puntos se deben incluir, cuántos niveles son necesarios).

4. Estados de pantalla. Dibuje la pantalla o los estados de los elementos (un ejemplo podría ser un diálogo de carga de archivos). En este caso, por ejemplo, la pantalla tendrá los siguientes estados:

   • Vacío
   • Un usuario extrae el archivo en el área activa
   • el archivo esta subiendo
   • el archivo esta subido
   • Hay un error

Sketching UX Flow: una guía práctica rápida

El proceso de diseño de flujo de alambre es similar al de estructura de alambre. Muchos pasos son similares o idénticos, pero hay algunas diferencias importantes:

Define lo que necesitas dibujar. Decide exactamente qué quieres dibujar (por ejemplo, la historia general o un fragmento de tu diseño). ¿Quieres generar diferentes opciones o pensar en los detalles de un viaje? Decide si vas a mostrar tus bocetos a otra persona o no.

Defina qué fotogramas clave y transiciones debe incluir en su dibujo. Si agrega todas las pantallas y turnos, su flujo de cables será muy largo y complejo. Considere qué pantallas clave debe mostrar para transmitir la esencia de la interacción que le ayudará a realizar su tarea. Lo mismo ocurre con los cambios de pantalla. Debe elegir qué turnos serán más útiles para expresar su idea. Mira este ejemplo como referencia.

Defina el punto de partida. ¿Cuál será el punto de partida de su viaje? Puede comenzar con el punto de entrada, es decir, el inicio del viaje, por ejemplo, lo que ve un usuario cuando inicia sesión en su aplicación. Alternativamente, puede comenzar en el punto medio o con las pantallas o pasos de proceso más interesantes/difíciles/importantes. O puede comenzar por el final, con el resultado final logrado por un usuario, y describir los pasos que el usuario tomó para llegar a este punto.

Decide qué viene después. Después de dibujar los pasos iniciales, decida lo que sigue respondiendo las siguientes preguntas:

• ¿Hacia dónde lleva este paso a los usuarios?
• ¿Hacia dónde quieres que vayan?
• ¿Qué tienen que hacer para llegar allí?

Esbozar rutas alternativas, entradas. Piense en formas alternativas en que el usuario puede llegar a cada paso:

• ¿Qué sucederá si falla la conexión a Internet del usuario?
• ¿Qué otras opciones tienen?
• ¿Qué puede salir mal en caso de error del usuario o de la aplicación? ¿Qué sucederá?
• ¿Qué pasará si el usuario cierra la aplicación en este paso?
• ¿Dónde comenzará el usuario la próxima vez que inicie la aplicación?

Piense en flujos alternativos. Analice la historia, diseñe un flujo alternativo y dibújelo.

Agregar anotaciones, notas, detalles. Agregue los elementos explicativos que aclararán los detalles no obvios.

Salvar. Haz una copia digital del boceto.

Cuota. Comparta el boceto (p. ej., a través de Evernote o InVision).

Sugerencias y trucos esenciales para crear bocetos de flujo de UX

Primero, dibuje un flujo de alambre. Si va a pensar en un viaje bastante largo, será mejor que haga un boceto rápido para comprender cuánto espacio necesita y para no perderse algunos pasos o detalles importantes. Sería difícil agregarlos al boceto en papel después.

No cree un mapa enorme con demasiados detalles. Los bocetos en papel no tienen un botón de deshacer , por lo que será difícil realizar cambios. Puede dibujar los detalles con demasiada precisión y esto distraerá su imaginación de la generación de diferentes variantes de alto nivel. En lugar de crear un gran esquema que ilustraría todo el sistema, intente concentrarse en los scripts clave y trate de dedicar una página individual para cada script.

Corta detalles innecesarios y combina varios niveles de detalle. No es necesario dibujar todas las descripciones de interacción, así que trate de usar solo los elementos clave de su viaje. Al dibujar un gran mapa de interacciones, no es necesario que trabaje en cada pantalla en detalle. Algunas pantallas podrían estar representadas simplemente por varios cuadrados, y otras, pantallas clave, podrían trabajarse en detalle.

Pruebe diferentes tamaños de papel. Pruebe diferentes formatos de papel, A3 o A5. El tamaño de la hoja de papel lo limitará y afectará su proceso de diferentes maneras. Una pequeña hoja de papel no le permitirá agregar muchas pantallas o detalles, pero puede ayudarlo a concentrarse en las ideas principales. Usando una hoja de papel grande, puede dibujar un gran viaje, muchos detalles y notas adicionales. Alternativamente, puede colocar una serie de pequeños viajes en él.

Las notas post-it también pueden ayudar. También puede intentar usar notas post-it. Puede dibujar pantallas separadas o algunas notas al pie sobre ellas, o puede dibujar estados adicionales de los elementos de su boceto. Su ventaja es que se pueden reemplazar fácilmente, también puede simplemente mover la nota a otro lugar. Por ejemplo, en caso de que el flujo haya cambiado, simplemente puede cambiar el orden de sus notas adhesivas.

Usa plantillas. Trate de usar plantillas. Ahorrarán tiempo y le permitirán crear más prototipos de alta calidad en los que se pueda hacer clic.

Intenta usar una pizarra. Una pizarra tiene una serie de ventajas. Se está volviendo cada vez más popular porque te permite dibujar un gran viaje con muchas ramas. Puede dibujar muchos componentes de la aplicación en papel y luego adjuntarlos a la pizarra con imanes, agregándolos al viaje.

Dibujar una sombra. Las sombras pueden ayudarte a marcar elementos importantes y añaden atractivo visual a tu boceto. Utilizo tres tipos diferentes de sombras:

• Líneas que siguen la dirección de la luz: esto no siempre se ve hermoso, pero puede usar la graduación y recoger los objetos a diferentes "alturas".
• Delineando alguna parte con un color más oscuro (solo la parte inferior o la inferior y el lado derecho)
• Usando el Pro-marker (o su equivalente en la aplicación que usas para dibujar)

Dibujo de componentes. Una objeción como “No puedo dibujar tan bien” puede sofocar su iniciativa. En realidad es más fácil de lo que parece. Incluso los bocetos más complejos generalmente se componen de una serie de bloques básicos, como en este ejemplo. Si puede dibujar un punto, una línea, un triángulo, un cuadrado y un círculo, entonces tiene los bloques de construcción esenciales que necesita para dibujar cualquier cosa para su boceto.

Poniendolo todo junto. Los elementos básicos, botones, botones de radio y menús desplegables se componen de elementos básicos. Después de aprender a dibujar estos elementos, puede combinarlos y dibujar bloques y componentes complejos.

Envolver

El objetivo de esta publicación no era crear la guía definitiva y única para bocetos de UX, o bocetos en general, porque los diseñadores tienen diferentes necesidades y preferencias personales.

Como puede ver, esto es mucho para cubrir. Los diseñadores usan una miríada de herramientas, técnicas y enfoques para producir bocetos de UX, y es bastante subjetivo. Ciertas técnicas pueden o no funcionar para diferentes personas que trabajan en diferentes proyectos. Si recién estás comenzando, definitivamente deberías experimentar. La práctica constante y la experimentación te ayudarán a encontrar lo que funciona para ti.

Depende de usted elegir los consejos y las técnicas que mejor se adapten a su proyecto y su enfoque del diseño. ¿Tienes algún consejo de dibujo adicional para otros usuarios de UX? Siéntase libre de compartirlos en la sección de comentarios.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas