Hola y bienvenidos hoy un post sobre UX en el que hablaremos precisamente de Wireframes, o primeros bocetos para ir desarrollando una web o aplicación, producto digital o como le quieras llamar.Hablaremos del Uso del wireframes, cómo diseñar tus primeros bocetos y hablaremos de las herramientas con que la gente trabaja para el desarrollo de estas maquetas.
Los wireframes no son más que los bocetos previos al diseño de una aplicación. Es el primer paso para pensar en soluciones y el momento para tirar sobre el papel lineas y rectangulos para insertar el contenido de la mejor forma. Los wireframes pueden ser desarrollados de diferentes maneras, hay gente que directamente utiliza una aplicación, otros lo hacen en papel, otros pizarras y emplean procesos de brainstorming y así acelerar el proceso. Este proceso depende además del factor tiempo.Si el tiempo para el desarrollo de esta etapa del proyecto es poco lo mejor es hacer un brainsorming, porque las ideas que puedas sacar en conclusión las podrás dibujar rápido en papel y en equipo poder análizar si la solución responde a las necesidades que se busca resolver. De verdad que lo recomiendo, dos o más personas y a dibujar pantallas, de verdad que ayuda y soluciona bastante el proceso creativo. Por supuesto que más tarde estos prototipos deben ser análizados por el grupo para evaluar cuál de ellos soluciona la problemática del proyecto.
A ver es importante haber hecho antes una investigación, tener claro al usuario que va a necesitar de esta aplicación, la usabilidad, los procesos, un producto mínimo viable y lo más importante una arquitectura del sitio para tener claro las pantallas que hay que diseñar.Te dejo aquí los 12 pasos del proceso de UX en el que puedes ver en que punto se encuentran los wireframes. Por eso es bueno antes de irse directo al diseño poder resolver unas preguntas antes.
Sin antes estos procesos mencionados no podemos empezar a crear un prototipo o maqueta.
A ver los primeros bocetos nacen del papel, nacen de un lápiz y hoja así que lo mejor que puedes hacer es el diseño de tu propio material de UX dibujando el perfil de una pantalla de teléfono en blanco y que te sirva como lienzo para tus diseño. Puedes descargarte esta imagen adjunta.
Puedes diseñar también una cuadrícula dividida en cuadrados de 20px y acada 100px hacer una linea más gorda, así podrás ayudarte a tener una medida para diseñar el contenido. Utiliza lápices de colores o permanentes para poder resaltar ciertos elementos gráficos como botones, call to actions, etc. Siéntete libre de copiar y pegar todos los elementos posibles que crees son necesarios en la aplicación.Estos primeros bocetos darán una perspectiva más clara de lo que se requiere diseñar en la aplicación, una visión amplia que nos ayudará a ver si necesitamos integrar neuvos elementos o descartar otros.Si quieres hacerlo con una herramienta digital yo te recomendaría que utilizaras el que mejor se te de para esta situación. Yo en mi caso antes de que existieran programas como Sketch o Adobde XD realizaba los bocetos en illustrator, hacía elementos inteligente en el caso de querer repetir el mismo menú, etc. Ahora la verdad es que hay muchas herramientas que ayudan bastante en este proceso pero no hay que olvidar que la creatividad y el encontrar una solución eficaz es más importante que el programa que vayas a emplear.
Nosotros utilizamos Illustrator y Sketch, todo depende de las necesidades del equipo con el que vayamos a trabajar. Sketch no cambia mucho de cualquier programa de vectores y la verdad que es muy fácil de entender y usar en el caso que vengas de utilizar alguna herramienta como illustrator o photoshop. Ahorra bastante el tiempo y no tiene un coste considerable.Otra herramienta que sirve bastante en el caso de trabajar en un equipo y tener que compartir información es InvisionApp. Por otro lado Skecth viene con la posibilidad de conectarse con InvisionApp lo que te ayudará a sincronizar tu proyecto y tener un prototipo con una URL para poder ver en diferente dispositivos.Bueno esto es todo de momento en este artículo, si te ha gustado por favor recomiendanos, siguenos en nuestras rede sociales y nos vemos en una próxima entrega.Si tienes alguna duda o quieres participar con algun comentario nos puedes escribir a hello@markos-esther.com
