Transcripciones
1. Introducción: cuando tienes una idea de aplicación o una característica puesta para tratar de explicarla, tu equipo para clientes o incluso tus amigos. Todo el mundo tendrá una imagen diferente en su imaginación fuera de tu idea, y a veces esto puede llevar a malentendidos, y cuesta algo de tiempo y esfuerzo entregar La idea que tienes en mente esbozar es una parte
fundamental de la X proceso de diseñador y Sr Práctica. Para los diseñadores, hay bocetos que puedes proponer explorados y comunicar tus ideas en las primeras etapas fuera del proceso del diseñador. Mi nombre es Dimas Data y um, un diseñador de UX y diferente y desarrollo, y te voy a guiar a través de esta clase desde esbozar formas básicas hasta esbozar interacciones y navegación. No se puede dibujar. Eso está bien. No tienes que ser artista. Imex atrapa por buenas ideas. Al final de esta clase, podrás bosquejar interfaces de usuario para tu aplicación Para la clase de proyecto, estarás esbozando una interfaz de usuario sencilla para una aplicación móvil en mensajes para
esbozar una aplicación de entrega de alimentos para tus restaurantes favoritos. Podrás conocer más sobre el proyecto en la sección de proyectos
2. Por qué hacemos el boceto: Entonces, ¿por qué hacer un boceto? Echemos un vistazo a este ejemplo. Estos son algunos bocetos que hice para mi valor de puerto de sitio, y como lo puedes ver, solo pantalla contiene unos componentes o ideas específicos. Entonces básicamente, utilizo el boceto para generar ideas antes de comenzar los pasos de diseño y desarrollo puedes anotar las características son los componentes de cada boceto en tiro tantas ideas como
quieras . Entonces aquí estaba generando ideas. Conocí diferentes bocetos para cada página para elegir el mejor diseño entre ellos y aplicarlo. Podrás utilizar los bocetos para sesiones de lluvia de ideas con tu equipo para generar ideas se proponen y comunicar ideas con tus clientes. Ahora hablemos de las herramientas que necesitas en esta clase. Básicamente, necesitamos un bolígrafo. Debería estar por un boleto. Líneas son este piloto gemelo? ¿ Cómo se puede usar un lápiz? Usaremos también micrófonos. Aplica algún color para botones o hizo tu atención a elementos específicos. La segunda cosa, nosotros conmigo, esto algunos papeles. ocasiones bosquejo en mi indudable cuaderno de bocetos, pero en esta clase, estaré usando para plano un papel de cuatro se puede utilizar el papel punteado que proporcioné en la sección de
material de clase . También he incluido algunas plantillas. Puedes sacarlos y usarlos para bosquejar. Son muy útiles, y te ahorraremos tiempo y ayudaremos a Pedro comparte con mayor precisión. Usaremos algunas notas pegajosas en para las interacciones en las próximas gafas.
3. Dibujar formas básicas: Empecemos dibujando las formas básicas en las que consiste cada diseño. Voy a calentarme haciendo unas líneas rectas. Vamos a un boceto, los bordes o las líneas de construcción desde una pantalla de bolas. Como pueden ver, estoy lanzando descensos, y no tienen por qué ser perfectos. Considera mover el brazo y la pluma con el hombro en lugar de con los Orestes disponibles . Esto te permitirá hacer ya no líneas más y más rectas. Si tienes alguna dificultad durante una línea recta en todas las direcciones, protege el papel para trazar fácilmente una línea en la dirección que encontrarás la mejor para ti. Hay que tener en cuenta que los bocetos deben ser rápidos y sencillos, ya que estamos haciendo todo ideas o conceptos. Ahora, lanzemos algunos círculos. Dibujar círculos es más difícil. Recomendé lanzar el círculo dos o tres veces al aire antes de lanzarlo sobre el papel. , practica Practica, practicay practica lanzando esas líneas y círculos. Si quieres hacer que un elemento parezca clicable como un botón, puedes darle algo de sombra para que destaque. Vamos a lanzar un botón que se quede enviar y darle la sombra puedes usar un gran color en lugar de negro. Como se puede ver, se destaca y se ve un clickable. Vamos a lanzar otro botón, y se va a decir somete, Dale la sombra y golpea el ego. Destaca y explicable. El sombreado es otra técnica utilizada para crear efectos escalofriantes dibujando
líneas muy espaciadas . Tomemos un ejemplo que voy a sacar a un lado, lo que significa que se superpone en la parte superior del menú. Yo añadiría algunos artículos dentro del dinero lateral. Dibujemos una línea recta que su botella en el menú lateral y luego empezamos a lanzar una respuesta
rápida las líneas agonales lado a lado para crear el efecto derramamiento. Entonces, como puedes ver, eclosión es una técnica sencilla que ayuda a hacer que el elemento destaque.
4. Dibujo un boceto de elementos UI: en esta lección, te
mostraré cómo dibujarte yo elementos como textos,
imágenes, imágenes, controles
foráneos y algunos fuera de los iconos de uso común. Entonces empecemos tirándolos a mi pantalla. Bocetos fijos es bastante simple, sólo que hay algunos que se internaliza para representar un texto. Podrás usar el texto real dentro de ti. Por qué, cuando se necesita llamar la atención sobre ella, o simplemente un poco de líneas horizontales Si no tienes un texto específico, a
veces nos encarcelamos textos como una línea ondulada o su exacta así. Ahora bien, si quieres bosquejar rumbo a un título, puedes hacerlo dibujando ángulo correcto y llenarlo con una línea en zigzag. O simplemente puedes usar un marcador para rellenar el rectángulo. No, vamos a un boceto de imágenes. Simplemente dibujaría un rectángulo, y luego tiraría a las líneas agonales que corren por el rectángulo. Vamos a bosquejar unas cuantas imágenes más, a veces dibujando imágenes, y de esta manera podría ser aburrido para que puedas tirar variantes simples fuera de los objetos. Por ejemplo, yo representaría imágenes arrojando montañas y la arena encima. Se utilizan formularios para recabar información de los usuarios. Los utilizamos y las páginas de registro actualizadas utilizan su influencia y así sucesivamente. Voy a dibujarlos de en pantalla. Y antes de empezar a bosquejar, sólo
añadiría el título de la página para que cuando tenga otros bocetos, pueda encontrarlo fácilmente. Podrás dejar un poco de espacio a otro título en otras notas, como la fecha, Así que voy a empezar dibujando un círculo. Esto indicaría que el usuario puede hacer clic en él para actualizar su imagen de perfil. Entonces dibujaría un rectángulo. Esto representaría un campo de entrada que el usuario puede sentir. Le daré un marcador de posición que diga su nombre. No Es eso, a diferencia de los botones, no le
dimos sombra. Los campos de entrada se pueden utilizar para rellenar información como nombre para número y contraseña. Ahora voy a dibujar otro rectángulo para el usuario. Es como la zona desde una serie de áreas. Entonces lo que vamos a hacer es dibujar en auto así. Esta carta indicará que se trata de un menú desplegable que tiene múltiples elementos para seleccionar de Vamos a lanzar otro campo, defender la dirección del usuario. El domicilio puede contener Número de edificio Nombre de calle otra información que requirió un control un poco mayor que el Campo de entrada, que es un área de texto. Ahora te voy a mostrar cómo dibujar otros países extranjeros, como casillas de verificación, radio y botones de interruptor. Las casillas de verificación son sencillas. Apenas un dramático ten en la pequeña garrapata dentro. Al igual que esto. Casillas de verificación argumenta que usar múltiples elementos para no dibujar un botón de radio dibujó un círculo, luego otro pequeño círculo dentro de él. Radio Buttons argumenta que muestra sólo un elemento. Ahora, si quieres encender y apagar la opción puedes cambiar los botones,
por ejemplo, por ejemplo, hizo grandes notificaciones encendidas o apagadas. lo presentamos así en forma ovalada en el círculo. Dentro de ella se puede representar como este rectángulo y otro pequeño rectángulo en su interior. Se puede escribir en él. Le voy a dar algo de color. Voy a dibujar otro para mostrarle los estados de oficina. Ahora vamos al fondo. Eso es una caja fuerte y dale algo de color. Y la sombra. Ahora tenemos un paged sobre la muerte los detalles del usuario. Ahora te voy a mostrar cómo bosquejar algunos de los iconos de uso común. Los iconos son simples. Las representaciones fuera de los objetos de la vida real. Voy a empezar haciendo el campo de búsqueda. Entonces aquí está el ícono de búsqueda. Es sólo un círculo en la línea corta. Eso es lo que hacen. Otro, un círculo. Y entonces me gustaría. Es bastante sencillo. El siguiente ícono que vamos a dibujar es el excursionista usuario, así que solo estoy para echarle un círculo. En el interior. Habrá un círculo más pequeño que representen la insinuación, luego despegó las líneas representan un cuerpo. Vamos allá con un par de veces más pit y el cuerpo. Ahora salgamos a la carretera. El icono de ubicación. Basta con lanzar una forma de globo a un pequeño círculo en su interior. Al igual que esto. No No tires
el ícono que se utiliza para abrir el menú lateral. Este ícono en la escuela se llama Humber Good Menu, porque parece hamburguesa en él. Simplemente lucha a tres líneas horizontales paralelas. Por último, vamos a volver a crecer a continuación iconos arriba y abajo como este. Entonces como se puede ver todo en el año yo bosquejo, incluyendo iconos, es solo una combinación off lines y circle
5. Dibujar interacciones de bocetos: En ocasiones es posible que desee utilizar elementos de interacción como consejos de herramientas, modelos, menús
laterales u otros elementos, pero no desea volver a dibujar toda la pantalla. Para eso, estaremos usando notas pegajosas o pequeños papeles y bolígrafos. Si quieres fijarlo en una pizarra de alfileres. Sí, estaré usando diferentes colores y tamaños para representar diferentes tipos de elementos. Vamos a un boceto de comida ordenando tono. Aquí voy a escribir el título. El primero que tendremos es una imagen fuera de la comida puesta, después su nombre. Tiene que ser bueno, por ejemplo. Después tendremos un menú desplegable para que el usuario seleccione la salsa. Quieren actuar ante el trabajador. Usaré esta nota pegajosa para escribir las posibles opciones de fuente. Por ejemplo, no salsa jitomate, nuestra salsa especial. Ahora, esto indica que cuando el usuario haga clic en el botón desplegable, se mostrarán estas opciones. Por lo que cuando quieras explicar qué se activará al hacer clic en ciertos elementos, puedes usar este método. Lo siguiente que tendremos en esta pantalla es un área de texto para agregar notas, información
y información. Yo puedo Ok, entonces cuando el usuario haga clic en él en absoluto, se
mostrarán. Voy a utilizar. Esto es más pequeño, pegajoso, señala Andre. Se mostrará información, por ejemplo, no porque esto tendría al usuario saber qué nariz entrar en el área de texto. Ahora tendremos un botón para ordenar esta reunión. Yo le daré el color y la sombra. Al hacer clic en este botón se mostrará un mensaje ya sea un mensaje sexista. Recibí un mensaje de error en él se mostrará como un moderno o un pop up en la pantalla para el mensaje de éxito. Yo realmente era este verde notas pegajosas. Contendría un título, algún texto y el botón para ver las devoluciones del pedido. Entonces, en caso de
sexistes, esto debe, como se mostrará ahora para el mensaje. Voy a utilizar este Karanja notas adhesivas. Es con Contienen un Titán, algún texto y sobre detalles de entrevista sobre esta área. Por lo que este método será útil para generar ideas y sesiones de lluvia de ideas, o cuando quieras explicar lógica y comportamiento para los desarrolladores de tu equipo. No, te
voy a mostrar cómo explicar acciones. Entonces por qué lo usan, como un deslizamiento de clic, acercar y alejar. Tomemos un ejemplo. Este es el pez guardia, y contiene los elementos que el usuario quiere ordenar en el botón que tiene algún texto. Él lo revisó. La tarjeta contiene una imagen y el texto que es, y cuando el usuario desliza el elemento hacia la izquierda, un botón será visible. Hagamos un icono. ¿ Se movió icono? Cuando el usuario haga clic en él, el artículo será retirado de la cancha. Ahora tiraría una mano andan auto para mostrar la dirección deslizante, así que cuando lo usan, mentiras. El artículo a la izquierda. El botón quitar será visible. Adelante y hagamos otra mano. Esto representa una larga prensa. Ahora vamos a vomitar ém. Y esta vez voy a demostrar de nuevo el zoom en acción. Yo me saldría de las manos entonces otros dos estaban señalando y contrastando direcciones como ésta. Esto explicará el zoom en acción en el mapa. Si lo encuentras lanzando latas desafiante, puedes trazar o copiar imagen de mano. O bien puedes escribir anotaciones para explicar comportamiento o gestos. Lo último que les voy a mostrar en esta lección es cómo bosquejar navegaciones. Tomemos un ejemplo que es esto es una página de menú de restaurante en ella. Contiene significa que cada media en este menú tiene una imagen, un nombre en su precio. Al hacer clic en una comida, me dirigieran a otra página que contiene muchos detalles como imagen,
nombre, descripción, descripción, tal vez un número de otras imágenes de este botón de Onda significan para pedirlo. Entonces para mostrar la navegación, dibujaré en auto y le daré la sombra. No solo que esta foto no sea parte de la U I. Es solo un indicador para mostrar navegación.
6. Gracias: gracias chicos, y espero que hayan disfrutado de esta clase. Si tiene alguna pregunta o pensamiento, por favor hágamelo saber en la sección de revisión sobre. Recuerda que hacer bocetos se trata de sacar ideas. Es la forma más rápida de explorar y compartir el pensamiento con los demás y obtener retroalimentación. Me encantaría ver tu idea empezando a bosquejos. Si necesitas ayuda para crear tu proyecto, puedes ver los videos anteriores y tomar notas, y ahí
y puedes usar los documentos del horno de impresión adjuntos para un poco más de ayuda. Toma fotos de tu proceso y compártelo en tu proyecto para inspirar a otros y obtener retroalimentación.
Dima Steiteyeh, UX Designer/Front-end Developer
