Cómo crear Wireframes para Diseño Web

Bienvenidos a UXTips mi nombre es Eugenia y en el video de hoy voy a presentarles un nuevo segmento donde voy a compartir con ustedes diferentes temas sobre Diseño de Experiencia de Usuario Voy a hablar sobre wireframes de cómo se realizan pero algo muy importante es que el Diseño de Experiencia no se basa en entregables es decir que no es lo más importante cómo entreguemos nuestros proyectos sino de cuál va a ser el resultado final, cuál va a ser la experiencia final que va a tener el usuario por eso es que para poder proveer una muy buena experiencia, hay que realizar acciones previas al Wireframe que hay que hay que tener en cuenta y todas estas acciones tienen que ver con la investigación y son por ejemplo: el A/B Testing, Test de Usabilidad, Evaluaciones Heurísticas, Encuestas, etc todos estos temas los vamos a ir viendo a lo largo de estos videos Lo mínimo que tendríamos que tener para esta etapa son las Entrevistas y las Personas Así podemos conocer bien quién es nuestro usuario, cuáles son sus necesidades y descrubrir el problema y ofrecer las mejores soluciones

Un Wireframe es una representación de baja fidelidad de un diseño y tiene que contener tres cosas muy importantes: los bloques de contenido la estructura de la información y la descripción de la interacción Los wireframes deben ser creados rápidamente, no tenemos que darle mucho tiempo a esto Lo importante es, hacerlos rápidamente para compartirlos con nuestro equipo y obtener el feedback para poder continuar Bueno, ¿Cuál es la diferencia entre Wireframe y Prototipo? Hay mucha confusión con esto y es muy común que los diseñadores nos confudamos también La diferencia es que los Prototipos son representaciones de Media a Alta fidelidad En un Prototipo ya mostramos el contenido que tendrá el sitio o aplicación y lo más importante es que es funcional es decir que lo podemos usar ya que es una simulación del producto final Bueno hay muchas opciones para hacer Wireframes, hay aplicaciones muy complejas otras bastante simples, aplicaciones web, stickers que se pueden imprimir pero la más conocida es la metodología de realizar Wireframes con lápiz y papel y eso es lo que les voy a mostrar ahora 😉 Bueno aquí tengo mi cuaderno y como me encanta el café voy a hacer una aplicación para una cafetería que vende café online, así que bueno, vamos a empezar! Bueno lo primero que voy a hacer es crear los límites del dispositivo Lo dejo así abierto en la parte de abajo porque tengo la costumbre de hacer esto con los sitios web ya que siempre pueden crecer Y bueno aquí agrego el Logo Especifico que es un Logo y luego las opciones del formulario para que el usuario pueda ingresar Aquí va a ir el botón

Bueno, agrego otras secciones para ingresar por Facebook, por Twitter y aquí aclaro un poco la interacción Recuerden que en esta etapa no hace falta poner tantos detalles, pero si quieren lo pueden hacer Lo importante es concentrarnos en los bloques de contenido, la interacción Bueno ahora voy a hacer la otra pantalla Ah! aquí voy a agregar el usuario Tiene que tener los datos y el password Y bueno Aquí voy agregar un bloque de texto que va a decir que pueden ingresar con las redes sociales Y voy a generar la otra pantalla que no se porque lo hago del lado izquierdo Pero bueno es para que lo vean bien Y bueno ahora voy a agregar el logo Ya una vez que el usuario ingresa va a ver el logo nuevamente Y bueno, los productos! el café! Entonces aquí va a ir un producto, la descripción del producto, y el precio Aquí va a ir un botón para comprar Y aquí abajo un corazón voy a agregar, que van a ser los "Likes" y la cantidad de "Likes"

de "Me gustas" que tiene el café Y fijense que podemos marcar cuando es una imagen de ésta forma y agrego más información Bueno ahora voy a explicar también la interacción del botón y de los "Likes" Bueno, se me cortó la filmación así que

bueno, van a ver ahora el resultado final que he agregado un menú abajo con las opciones para poder ingresar a la Home a los Bookmarks, a las Notificaciones y al Perfil del Usuario Bien, luego de ésto podemos comvertir nuestro Wireframe de papel en un Prototipo de Media fidelidad o directamente de alta fidelidad, según los tiempos que tengamos en el proyecto Bueno, espero que empiecen a integrar los Wireframes en sus proyectos Si les gusto este video no se olviden de darle Like

Suscribanse para ver los próximos tutoriales y también pueden seguirme por twitter @uxtipsonline Y nos vemos en un próximo tutorial ¡Hasta Luego!