Wireframe
Fases de desarrollo del diseño (Parte II)
Soy una diseñadora UX/UI y Product Owner entusiasta y apasionada por crear productos digitales que hagan la vida de las personas más fácil y agradable. Me encanta trabajar en equipo y colaborar estrechamente con desarrolladores y stakeholders para asegurarme de que el producto final cumpla con las necesidades del cliente y del negocio. Como Product Owner, lidero el proceso de definición y priorización de los elementos del backlog del producto y trabajo en estrecha colaboración con el equipo de desarrollo y los interesados para asegurarme de que se cumplan los requisitos del cliente y del negocio. Me emociona ver cómo un producto evoluciona y mejora a medida que trabajamos juntos para superar los desafíos. Esto sin dejar de lado las metodologías agiles que causan un impacto positivo en el equipo y en el desarrollo del producto.
Te doy la bienvenida una vez más a mi blog 😊
En esta entrega estaremos hablando de la segunda fase del diseño y es la creación de los wireframes a partir de tu sketch. En la entrega anterior te comentaba que para realizar un prototipo pasamos por estas fases:
Conozcamos de una vez, que es un wireframe:
El objetivo de los wireframes es priorizar el contenido, determinar los espacios y las formas que se incluirán en el diseño, así como presentar las primeras funcionalidades de tu desarrollo.
Para esta parte se recomienda no emplear iconografía, colores o imágenes que desvíen la atención del propósito de visualizar la infraestructura. De igual forma la tipografía debe ser genérica aunque puedes aplicarle peso (tamaño) para comprender la jerarquía.
Para realizar esta parte del desarrollo te recomiendo una super herramienta, muy fácil de usar y que te provee de elementos básicos de diseño. Me refiero a Whimsical y puedes acceder a ella desde https://whimsical.com/, crear una cuenta y comenzar a crear tus wireframes.
Elementos como frames de ventanas de navegador o mobile, rectángulos, rectángulos que simulan una imagen y un video, botones, inputs, check list, radio button, avatars y textos como los que ves a continuación, son herramientas muy útiles para plasmar tu diseño:
Te muestro por aquí algunos wireframes que he creado para distintos proyectos, como verás me encanta diseñar mobile first 😅:
En resumen, los wireframes nos van a permitir mostrar de una forma mas clara nuestra idea, en este punto ya podemos hacer pruebas con usuarios, recuerda, mientras mas rápido comencemos a testear, más rápido podemos iterar e ir mejorando nuestro diseño ofreciendo una UX acorde a las necesidades del usuario final. Este tema es apasionante y jugar en estas partes del diseño nos ayudan a desatar la creatividad, no dudes de comenzar a hacerlo de aquí en más para enriquecer tu proceso creativo.
Esto es todo por esta semana, espero verte en la siguiente entrega para que conozcamos de la tercera fase del desarrollo de un diseño que será: Mockup
Hasta la próxima semana...
