Sitemap

Los WIREFRAMES

3 min readJun 25, 2021

--

Los wireframes tiene como objetivo probar la funcionalidad, el comportamiento, y la jerarquización de información a mostrar. Estos son esquemas de diseño de la organización de contenidos de un interfaz, que muestra en funcionamiento en conjunto de un sitio web o una app.

Los wireframes nos permite asentar la idea que tenemos en mente a un plano material, a través de un lápiz y un papel, plasmar la idea en trazos para ir conceptualizándola. Este es un proceso de creación, generando así un primer prototipo.

Press enter or click to view image in full size

Para el prototipo tenemos varias fidelidades:

Fidelidad baja: dibujos de rápida elaboración.
Fidelidad media: diseño básico incluyendo flujo de usuario y arquitectura de la información.
Fidelidad alta: diseño mas desarrollado, incluyendo diseño visual (colores, tipografía, imágenes, etc.)

Press enter or click to view image in full size

Como prueba, he copiado un diseño UI de alta fidelidad y realizarlo en una fidelidad media utilizando la aplicación web Moqups en su versión gratuita.

Press enter or click to view image in full size
Interfaz de Moqups

En mi experiencia Moqups me pareció una app con una interfaz muy intuitiva, ya con conocimiento de otros programas de dibujo y edición como: Photoshop, illustrator e incluso autocad. Son muy parecidas y en mi experiencia fue fácil trabajar en ella.

Get Emily Márquez’s stories in your inbox

Join Medium for free to get updates from this writer.

También cuenta con los iconos y plantillas utilizados en el UX/UI como el teclado del móvil, hoja de acción, lista de contacto, etc. Y para la dimensión de la página, cuenta con gran variedad de opciones, según proyecto que necesites realizar o incluso personalizar las dimensiones de la página (o mesa de trabajo).

Tal vez, lo que vi menos intuitivo fue el agregar una nueva página o una nueva mesa de trabajo (como se diría en illustrator) tampoco logre ver todas las páginas en el mismo espacio de trabajo.

Y el otro punto es que, en la versión gratuita, no permite la exportación del proyecto y limitan la cantidad de objetos que puedas utilizar en el proyecto, esto no esta mal, aunque hay que tomarlo en cuenta en caso de realizar un proyecto grande, aquí te muestro la practica que realice en Moqups:

Press enter or click to view image in full size
Wireframes de fidelidad media

En conclusión Moqups es un app web muy intuitiva y fácil de usar, es completa para realizar prototipos de media y alta fidelidad como también mapas de sitio, diagramas, flujo y gráficas.

--

--

Emily Márquez
Emily Márquez

Written by Emily Márquez

Soy diseñadora y arquitecta, actualmente trabajo en el diseño UX UI, ayudó con la creación y mejoras de la usabilidad y la estética de los productos digitales.