Si usted NO ha hecho ningún tipo de trabajo creativo en serio, no estás muy familiarizado con bloqueo creativo. Se siente como golpear una pared de ladrillo: Ninguna de las ideas que usted es capaz de visualizar son lo suficientemente buenos, 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 hacer que todas las diferencias. Aquí es donde entra en juego UX dibujo.

UX dibujo es un aspecto crucial, sin embargo, a menudo se pasa por alto, de diseño de experiencia de usuario. El bosquejar es una forma muy eficaz de comunicación de diseño al tiempo que permite a los diseñadores probar una gran cantidad de ideas e iterar ellos antes de decidirse por uno.

En este post, tengo la intención de cubrir todo lo que necesita saber sobre UX bosquejar, incluyendo los siguientes puntos:

  • Introducción a los bosquejos y wireframes UX
  • UX bosquejar fundamentos, herramientas y técnicas
  • Clarificación de bocetos con las notas, anotaciones, números
  • UX bosquejar consejos y trucos
  • Mini-métodos diseñados para aumentar la calidad y la productividad
  • Todo lo que necesita saber acerca de Wireflows
  • Una guía rápida de flujo UX bosquejar

UX bosquejar es un proceso de dos pasos

 

Muchas opciones deben ser consideradas en el diseño, lo que se traduce en la elección y la ejecución de las mejores one.Designers consideran sus opciones, y luego proceder a trabajar en los detalles, haciendo así UX diseñar un proceso de dos pasos:

 

  • Generación de ideas

En la etapa inicial, se generan ideas múltiples, pero dado que no se pueden conformar plenamente, no es raro que algunos de los elementos que está incompleta o faltante. Lo más importante es tener en cuenta los diferentes criterios ya decidir cuál es el más eficiente en el contexto de su tarea y las diversas limitaciones del proyecto.

  • Detailization y refinamiento

Paso a paso, que se asientan en unas pocas variantes prometedoras y procede a llevar adelante los detalles, haciendo así inadecuados algunas ideas.

UX bosquejos y wireframes: Introducción y Clasificación

Sus estructuras alámbricas pueden variar dependiendo de factores tales como el nivel de detalle deseado, los colores y el estilo, si se va a mostrar a alguien, y así sucesivamente.

Los buenos bocetos le ayudarán a pensar más clara, encontrar mejores soluciones y ahorrar tiempo.

Me señaló a los siguientes tipos de dibujo:

  • Boceto: Generación de Ideas

Estos son los bocetos iniciales. Menores detalles de nivel se limita a tomar nota. Se emplea un número limitado de colores.

Dibujo un montón de bocetos básicos a considerar el problema desde distintos ángulos y considerar diferentes soluciones. Mientras dibuja dichos bocetos, yo también me esfuerzo por generar tantas variantes de soluciones posibles.

En este paso en particular incompleto libera mi mente, que es por qué es tan importante evitar empantanarse en detalles particulares en esta etapa. Mi objetivo es generar tantas ideas como sea posible y elegir los más prometedores.

  • Estructura metálica: Especificación, Fase detallada

Yo suelo elegir bocetos prometedores y repasar los detalles, después de lo cual se eligen las mejores variante y trabajarla de manera más detallada.

Sin embargo, esto no significa que cada uno de los detalles. cosas obvias sólo pueden tenerse en cuenta. Por otra parte, algunos aspectos serán difíciles de describir en el papel.

En este paso, saco todos los detalles importantes, pero que todavía no dibujar wireframes en Balsamiq. Después de todo se hace en el papel, comienzo a dibujar en el croquis.

Las herramientas digitales proporcionan mucha más libertad creativa que el papel y se puede cambiar fácilmente la atención a las cosas de menor importancia. Por ejemplo, usted puede centrarse en “pulir pixel” en lugar del diseño.

  • Proyecto de Diseño Visual

Este es un enfoque rara vez se utiliza, pero a veces puede ser útil. Varias soluciones visuales son considerados en una etapa temprana del proyecto, pero se puede tomar un largo tiempo para crear bocetos digitales para todos ellos. Es por eso que dibujo bocetos de diseño en el papel en primer lugar, la decisión de considerar diferentes opciones y elegir una dirección diseño visual.

  • Desglose Componentes / Elementos

Encuentro que esta técnica útil cuando ya he tener una idea general y estoy pensando acerca de una funcionalidad de la página en particular, o de las partes integrantes de componentes de la interfaz. Dibujo diferentes elementos de la página, entrar en detalles, y luego dibujar diferentes posiciones posibles de los elementos de la página.

Elementos, incluso las más simples, deben tener un estado; un botón puede ser presionado y tiene un bloque de texto emergente que puede o no puede estar vacío. Cuanto más complejo es el más estados que tiene.

Introducción a los conceptos básicos

  • Prepare sus herramientas – Encontrar el lugar más conveniente posible, una mesa grande con un montón de espacio. Tomar una gran cantidad de papel y preparar algunas plumas y marcadores.
  • Caliente – Con el fin de estar listo Recomiendo dibujar algunas líneas, círculos, plantillas básicas y los iconos.
  • Definir sus metas – Decida lo que quiere dibujar. Establecer su objetivo y decidir qué historia usted tiene que contar. Determinar el nivel deseado de detalle. Decidir si usted está listo para sacar una gran cantidad.
  • Definir su público objetivo – Si usted está haciendo esto por sí mismo, no es necesario preocuparse por la forma en que el dibujo se ve. Sin embargo, si usted tiene la intención de mostrar sus dibujos a un cliente, asegúrese de que tiene un tiempo extra para añadir más detalles a su dibujo.
  • Establecer un marco de tiempo – Después de haber decidido sobre la cantidad de tiempo que está dispuesta a destinar para dibujar, digamos 30 minutos, le ayudará a centrarse en su trabajo.

Ahora, usted está listo y usted puede comenzar:

  1. Dibuja los bordes – Dibujar los marcos, una ventana del navegador o por teléfono, una parte de la interfaz, y así sucesivamente.
  2. Añadir elementos de los mayores o básicos – Menú, pie de página, la página principal.
  3. Añadir los detalles – Añadir los detalles relevantes, pero de manera sencilla en esta etapa.
  4. Añadir anotaciones y notas – Estos son necesarios sólo si usted está planeando para compartir los bocetos. Sin embargo, pueden ser útiles incluso si usted los está haciendo sólo para sus ojos.
  5. alternativas de croquis – bosquejo algunas alternativas rápidas a su solución.
  6. Elija la mejor solución – Elija las mejores opciones.
  7. Añadir la sombra y bisel – Esto es particularmente importante para los propósitos de uso compartido. Añadir una sombra para que su boceto atractivo a la vista, lo cual es importante si va a compartirlo con los miembros del equipo y / o clientes.
  8. Guarde el boceto – Tome una foto o ponerlo en una carpeta. Tengo un par de bandejas de papel en mi mesa de bocetos.
  9. Compartir – Yo suelo usar uno de los siguientes métodos de intercambio:
  • Analiza bocetos a través de Evernote y proporcionar un enlace permanente con otros miembros del equipo o partes interesadas.
  • Tome una foto y subirla a InVision.
  • Sube y mapa de imágenes a Realtimeboard.
  • O enviar por correo electrónico una foto.
  1. Revisión de los bocetos y añadir notas – Tome un descanso y luego volver a sus bocetos de un tiempo más tarde. Echar un vistazo a ellos de nuevo. ¿El esbozo aún tiene sentido para usted? Un buen boceto debe ser fácil de seguir.

Si usted como el diseñador no puede entender algo que tiene en su bosquejo, a continuación, la solución no tendrá éxito. O bien el boceto no permite visualizar bien sus ideas, o las ideas son demasiado complejas.

Aclarando bosquejos con elementos adicionales

Encontrar o dibujar un boceto adecuado, y luego agregar los siguientes datos a la misma:

  1. Título – A veces la adición de un título es una buena opción. Escribir una descripción y la fecha, si es necesario, en la parte superior del boceto. El título le ayudará a entender lo que está viendo y si es o no el boceto es relevante. Esto es especialmente útil si usted tiene una gran cantidad de bocetos o que se va a mostrar a los demás.
  2. Anotaciones – Las anotaciones son nombres y notas colocados cerca de un elemento, para explicar su contenido u otros atributos. Añaden detalles que aclaran otros elementos, y por lo general son 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, y así sucesivamente. Puede visitar uno de mis ejemplos para ver lo que es un boceto de anotación se parece.
  3. Números – Número de los elementos de su dibujo, o los propios bocetos. Usted puede decidir cómo ordenar ellas (por ejemplo, por el flujo de la interacción, el orden en el que se han creado, etc.). También puede ser útil durante las discusiones (especialmente discusiones a distancia), como sus colegas y clientes solo pueden señalar el número boceto en sus comentarios y se entenderán que se refieren a sus comentarios.
  4. Flechas – Puede utilizar las flechas para indicar las transiciones de pantalla. También pueden ser utilizados para conectar las diferentes partes de bocetos, para indicar una secuencia de acciones, y así sucesivamente. Puesto que el significado de una flecha puede variar, justo por encima de la flecha se puede añadir una descripción o explicación de lo que la flecha se pretende que signifique. Aquí está un ejemplo de un esquema básico que muestra una transición y varios estados difrerent.
  5. Notas – Al igual que las anotaciones, las notas se utilizan para explicar conceptos. Sin embargo, las notas difieren de anotaciones en su colocación. Ellos no están unidos a un elemento o situados cerca del elemento descrito, similar a este ejemplo. Las notas pueden ser colocados en la parte superior o inferior de la página. Incluso pueden describir los elementos que no están incluidos en el diseño, las preguntas que pueda tener, explicaciones generales, ideas unsketched y así sucesivamente.
  6. Los gestos – Los gestos son relevantes en el caso del diseño del dispositivo táctil. Dibujo de un gesto de la mano puede requerir la práctica. Hay varias variantes de gestos que se utilizan para indicar los diferentes tipos de acciones, por lo que es mejor decidir de antemano cómo crear o modificar una acción en particular (si no es obvio, por supuesto) y de practicar su elaboración.
  7. Comentarios – Puede recibir sugerencias para solucionar o mejorar el boceto después de mostrar a los demás, o después de tomar otra mirada en usted mismo. A menudo es útil para marcar dicha retroalimentación en un color diferente con el fin de ayudar a diferenciar la retroalimentación del boceto original.

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

Consejos y trucos más específicos

  1. No se preocupe por la calidad – No mire a los bocetos en Baba; que están a punto somethingcompletely diferente. Tenga en cuenta que el objetivo principal de bocetos es para ayudarle a pensar más clara, encontrar mejores soluciones y ahorrar tiempo.
  2. Práctica – Para empezar, se puede tratar de sacar algunas aplicaciones. Abrir una web o aplicación móvil y tratar de copiar la pantalla, la descripción de los elementos en las notas. Siempre que tenga algo de tiempo libre, practicar el dibujo de bloques de construcción básicos de sus diseños. En general, la práctica hace al maestro. En un tiempo, se convertirá en parte de su ser diseñador.
  3. Comprar una carpeta – A menudo no trabajo de mi oficina, sino más bien de un café o de mi casa. bocetos de papel son muy propensos a sufrir daños, a fin de comprar una carpeta sencilla para mantenerlos a salvo y sonido.
  4. Llevar herramientas con usted dondequiera que vaya – Esto ayuda a asegurar que usted puede capturar su idea sobre el papel, en cualquier momento, de lo contrario es posible que sólo pierde el pensamiento o no ser capaz de recordar que con el suficiente detalle. Siempre tengo un bloc de notas, un par de hojas A4 y bolígrafos conmigo.
  5. Compartir con los demás – Es muy importante involucrar a otras personas y comunicarse con su equipo. La participación de los demás y recibir su opinión, sobre todo al principio, ayuda a ahorrar tiempo y recursos en el largo plazo. También puede animar a otros para dibujar la forma en que se imaginan el diseño.
  6. Las bandejas de papel – Piense en la colocación de las bandejas de papel en su mesa de trabajo. Por ejemplo, tengo tres de ellos: Para las tareas entrantes, para bocetos y sábanas limpias de papel.
  7. Experimento y personalizar – Mis recomendaciones se basan en mi experiencia. Con el tiempo, se dará cuenta de lo que más le convenga; qué métodos, cuya secuencia de pasos, que precisamente cumple su potencial creativo. Va a llegar allí sólo si se intenta constantemente algo nuevo, que es por eso que es importante experimentar con diferentes formatos, estilos, y probar nuevas plantillas.
  8. Utilizar las plantillas – Plantillas ahorrarán tiempo y forma implícita tener en cuenta las restricciones de formato, dejando más tiempo para centrarse en lo que es importante.

 

No es basura. A sólo grandes de ingeniería y diseño mensajes.

Adicionales Mini-métodos para mejorar sus bosquejos

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

  1. Crear un Consejo Bosquejo – Uno de los mayores beneficios del uso de la pluma y el papel en lugar de una herramienta de dibujo digital es que en realidad se puede pegarse a una pared. Todos en su equipo lo puede ver y participar (aunque recomiendo la creación de sesiones de revisión).
  • Usted verá sus bocetos a sí mismo, y esto va a estimular su pensamiento y le permiten ver el panorama general, las piezas no aisladas, sino a todo el sistema. Podrás ver las interacciones entre las partes y la forma en que encajan entre sí.
  • Crear la tabla de dibujo – adjuntar sus bocetos de pizarra. Si no hay una pizarra en su oficina, puede usar cinta adhesiva o después de la nota hojas de tamaño doble para pegar sus dibujos en la pared. Si no desea pegarse a la pared, se puede encontrar una gran hoja de papel cartón en su lugar. Recomiendo encarecidamente el uso de tableros de dibujo, ya que son una de las mejores herramientas de diseño.
  1. Utilizar una pizarra blanca – Una pizarra es una gran herramienta de dibujo. Tiene una serie de ventajas: Es de colaboración; es fácil involucrar a otros miembros del equipo en la discusión y en el dibujo también. Incluso si sus ideas no encajan bien, va a entender su forma de pensar y que le ayudará a estar en la misma página.
  • Los marcadores no le permiten centrarse en los detalles, hay que pensar en las cosas generales. Bocetos están abiertos a la interpretación.
  • Una pizarra es fácil de limpiar y hacer las correcciones en.
  • Hay una gran cantidad de espacio y se puede pensar fácilmente a través de todo el flujo del sistema.
  • Puede adjuntar dibujos, impresiones y materiales de referencia que utilizan los imanes.
  1. Prototipos – Hacer un prototipo puede hacer clic para evaluar su diseño. Trate de obtener retroalimentación acerca de algunos elementos. Esto funciona especialmente bien cuando se está utilizando plantillas – sus bocetos son del mismo tamaño. Obviamente, será mucho más fácil dibujar bocetos de tamaño mismos si está utilizando una plantilla. Voy a tratar de hacer aún más fácil que le proporciona un par de plantillas que se pueden descargar y utilizar: móvil, el navegador multi-ventana, desplazamiento del navegador, las Personas.
  2. Use su impresora y el escáner – Dibujar el marco con la mano (se puede utilizar la regla para trazar con mayor precisión), a continuación, sólo escanear utilizando un escáner o una aplicación móvil, e imprimirlo. Puede editar la plantilla en la imagen redactor antes de imprimir. Puede eliminar detalles innecesarios o duplicados algunos elementos. También puede imprimir una página web de ready-made, fotos y otros elementos descriptivos. Puede pegar los recortes en el boceto.
  3. Uso Evernote para Escaneo – Evernote es una gran herramienta de diseño. Puede guardar y compartir sus dibujos en ella, puede crear temas, y utilizar etiquetas para organizar sus bocetos. Las capacidades del modo de “escáner” son particularmente impresionantes. Usted pone su boceto en frente de ella y se “escanea”, por lo que la copia del boceto. A continuación, puede invitar a sus colegas a Evernote y darles su enlace nota. Dado que existe una aplicación móvil para tabletas y los teléfonos, siempre se puede tener sus bocetos a mano.
  4. El bosquejar híbrido – Para poner un poco de vida y realismo a sus bocetos se pueden combinar con fotos. Eso significa que usted tiene que tomar una foto y luego dibujar una historia con elementos de la interfaz en él. Esto también puede ayudar a que se dé cuenta algunos problemas de interacción y detalles.
  5. Seguimiento de Real World – Si necesita crear un guión gráfico, ilustran una experiencia en un contexto específico (por ejemplo, una persona que utiliza un teléfono inteligente en una estación de autobuses), es necesario incluir representaciones de personas, lugares, y diversos objetos de la vida real . Estos pueden ser difíciles de traducir dibujar, especialmente si usted no ha dominado las habilidades de dibujo, pero aquí es simple consejo:

Tome una foto del objeto o de la situación, y luego obtener el contorno de los objetos clave utilizando un editor de imágenes. Puede utilizar el contorno que resulta en sus bocetos después.

Por supuesto, si usted tiene una tableta y el lápiz que será aún más fácil.

 

Wireflow: Flujo del Sistema contornea y la ramificación

El wireflow es esencialmente una secuencia del flujo del sistema, la pantalla después de la pantalla, con las ramas y los puntos de decisión. Debemos tener en cuenta cómo un usuario se dirige a su tarea, su forma de moverse de una pantalla a, y su experiencia global del producto en el tiempo.

 

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

  • Secuencia – Una secuencia es un viaje directo, la pantalla tras pantalla. También puede ser una historia con puntos de decisión; mostrar no sólo el viaje, sino también los puntos de decisión y los diferentes caminos que el usuario puede elegir. Puede mostrar la estructura de interacción con la pantalla.
  • Los cambios de estado – Representan diferentes estados de pantalla de algún elemento y las condiciones o acciones que causan las transiciones entre estos estados.
  • Pantalla contra elementos de la pantalla – Se puede dibujar el conjunto de pantallas o considerar microinteracciones e interacciones.
  • Plataformas – Se puede considerar una experiencia de una plataforma o plataformas múltiples.
  • Alcance – Usted representar una parte del viaje usuario o todo el viaje? Una interacción del usuario con el sistema, o la interacción de varios usuarios?

Yo por lo general trato de definir los siguientes tipos wireflow, dependiendo de la organización y el uso práctico:

 

  1. Mapeo de flujo general y de alto nivel de flujo – Inmediatamente esbozar la pantalla cambia y dibujar el recorrido general de su uso del producto. Aquí se puede incluir un poco de contexto y puede mostrar opcionalmente alguna interacción del usuario. Por ejemplo, un servicio de compras de comercio electrónico es un largo viaje que puede incluir una gran cantidad de pasos: ¿Cómo el usuario ha encontrado la tienda, los pasos que pasaron para pedir el producto, cómo se paga, y así sucesivamente.
  2. Flujo de pantalla – Este se centra en un flujo funcional específico a través del sistema. Podría ser una pequeña secuencia de pantallas recta o un viaje con ramificación. Por ejemplo, un usuario la posibilidad de subir algunas fotos o un vídeo.
  3. Sistema de Navegación – Dibujar la pantalla y las opciones que contiene. Esto no se supone que es un mapa del recorrido. Este paso incluye información que muestra las opciones de un usuario puede elegir, los usuarios tienen direcciones, y varias partes de la aplicación. Por lo general crear un esquema de navegación al inicio de un proyecto. Sirve para entender cómo la navegación debe ser estructurado (qué puntos deben ser incluidos, cuántos niveles son necesarios).
  4. Los estados de pantalla – Dibujar la pantalla o elemento de estados (un ejemplo podría ser un diálogo de carga de archivos). En este caso, por ejemplo, la pantalla tendrá los siguientes estados:
  • Blanco
  • Un usuario tira del archivo en el área activa
  • El archivo sube
  • El archivo se carga
  • Hay un error

El bosquejar flujo UX: A How-To Guía rápida

El proceso de diseño wireflow es similar a la estructura metálica una. Muchos de los pasos son similares o idénticos, pero hay algunas diferencias importantes:

Definir lo que necesita para dibujar – Decidir exactamente lo que quiere dibujar (por ejemplo, la historia general o un fragmento de su diseño). ¿Quieres generar diferentes opciones o para pensar a través de los detalles de un viaje? Decidir si se va a mostrar sus dibujos a otra persona o no.

Definir lo fotogramas clave y las transiciones que debe incluir en su dibujo – Si agrega todas las pantallas y los cambios de su wireflow va a ser muy largo y complejo. Tenga en cuenta, que las pantallas de teclas que debe mostrar para transmitir la esencia de la interacción que ayuda a realizar la tarea. Lo mismo ocurre con los cambios de pantalla. Usted tiene que elegir que desplaza serán más útiles para expresar su idea. Echa un vistazo a este ejemplo de referencia.

Definir 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 inician sesión en su aplicación. Como alternativa, puede iniciar en el punto medio o con las pantallas más interesantes / importantes difíciles / o etapas del proceso. O bien, puede empezar por el final, con el resultado final alcanzado por un usuario, y describir los pasos que el usuario tomó para llegar a este punto.

 

Definir su enfoque y hacer un boceto de papel en general.

Decidir lo que viene después – Después de dibujar los pasos de partida, decidir lo que pasa junto al contestar las siguientes preguntas:

  • ¿Qué hace esta manera los usuarios paso de plomo?
  • ¿De qué forma queremos que se vayan?
  • ¿Qué tienen que hacer para llegar allí?

rutas alternativas de croquis, entradas – pensar en formas alternativas, el usuario puede llegar a cada paso:

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

Piense en los flujos alternativos – Analizar la historia, el diseño de un flujo alternativo, y dibujarlo.

Añadir anotaciones, notas, detalles – Añadir los elementos explicativos que permitan esclarecer los detalles no evidentes.

Guardar – Haga una copia digital del bosquejo.

Compartir – Comparte el boceto (por ejemplo, a través de Evernote o Invision).

Flujo esencial UX bosquejar Consejos y trucos

Redactar una primera wireflow – Si va a pensar un largo viaje encima, usted sería mejor hacer un boceto rápido a fin de comprender la cantidad de espacio que necesita y con el fin de no pasar por alto algunos pasos o detalles importantes. Sería difícil para agregarlos al boceto de papel después.

No cree un mapa enorme con demasiados detalles – bocetos de papel no tienen un botón de deshacer, por lo que será difícil hacer cambios. Es posible dibujar los detalles demasiado precisa y esto distraerá a la imaginación de la generación de diferentes variantes de alto nivel. En lugar de crear un enorme esquema que ilustra todo el sistema, tratar de centrarse en las secuencias de comandos clave y tratar de dedicar una página individual para cada guión.

Cortar los detalles innecesarios y combinar varios niveles detalization – No es necesario sacar todas las descripciones de interacción, a fin de tratar de utilizar solamente los elementos clave de su viaje. Mientras dibuja un enorme mapa interacciones, que no tienen necesidad de trabajar cada pantalla individual de forma detallada. Algunas pantallas podrían ser simplemente representados por varias plazas, y otras pantallas, llave, podría ser trabajadas en detalle.

Prueba diferentes tamaños de papel – probar diferentes formatos de papel, A3 o A5. tamaño de la hoja de papel se limitará y afectará su proceso de diferentes maneras. Una hoja de papel pequeña no le permite añadir muchas pantallas o detalles, pero puede ayudarle a concentrarse en las ideas principales. El uso de una hoja de papel grande se puede dibujar un gran viaje, una gran cantidad de detalles y notas adicionales. Alternativamente, se puede colocar un número de pequeños desplazamientos en él.

Post-it puede ayudar también – Usted también puede tratar de utilizar notas Post-it. Puede dibujar pantallas separadas o algunas notas sobre ellos, o puede dibujar estados adicionales de elementos de su bosquejo. Su ventaja es que pueden ser reemplazados fácilmente, también puede simplemente mover la nota en otro lugar. Por ejemplo, en caso de que el flujo ha cambiado sólo se puede cambiar el orden de su notas Post-it.

Utilizar plantillas – Trate de usar plantillas. Se ahorrarán tiempo y le permitirá crear más se puede hacer clic, prototipos de alta calidad.

Trate de usar una pizarra – Una pizarra tiene una serie de ventajas. Se está volviendo cada vez más popular, ya que le permite dibujar un gran viaje con una gran cantidad de ramas. Puede dibujar una gran cantidad de componentes de aplicaciones en papel y luego simplemente adjuntarlas a la pizarra con imanes, añadiéndolos a la jornada.

Bosquejar una sombra – Sombras puede ayudar a marcar elementos importantes y añadir el atractivo visual a su boceto. Yo uso tres tipos diferentes de sombras

  • Las líneas siguientes de la dirección de la luz – esto no siempre se ve hermosa, pero se puede utilizar la graduación y recoger los objetos de hasta diferentes alturas “”
  • Esquema de alguna parte con un color más oscuro (sólo la parte inferior o la parte inferior y el lado derecho)
  • Uso de la Pro-marcador (o su equivalente en la aplicación que utiliza para el dibujo)

componentes de dibujo – 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 dibujos más complejos se componen generalmente de una serie de elementos básicos, como eneste ejemplo.

Si se puede dibujar un punto, una línea, un triángulo, un cuadrado y un círculo, entonces se tienen los elementos esenciales que necesita para dibujar cualquier cosa por su dibujo.

Poniendo todo junto – Los elementos básicos, los botones, botones de radio, menús desplegables y se componen de elementos básicos. Después de aprender a dibujar estos elementos, se pueden combinar y sacar los bloques y componentes complejos.

Envolver

El objetivo de este post no era crear lo último, una talla única para todos UX guía para dibujar, dibujar o, en general, porque los diseñadores tienen diferentes necesidades y preferencias personales.

Como se puede ver, se trata de una gran cantidad para cubrir. Los diseñadores utilizan una gran variedad de herramientas, técnicas y enfoques para producir bocetos UX, y es bastante subjetiva. Ciertas técnicas puede o no puede trabajar para diferentes personas que trabajan en diferentes proyectos. Si acaba de empezar, debería experimentar.

La práctica constante y la experimentación le ayudará a encontrar lo que funciona para usted.

Es hasta usted para elegir consejos y técnicas que serán la mejor opción para su proyecto y su enfoque de diseño. ¿Tiene algún consejo para bosquejar adicionales compañeros UXers? Siéntase libre para compartir en la sección de comentarios libres.