Herramientas para crear un wireframe

gauss-recursos-para-hacer-un-wireframe-herramientas-online-mini

Ejemplo de wireframe.

El wireframe es un gran desconocido para muchos diseñadores. Aunque la palabra suene a chino, no es tan complicado como parece. Un wireframe es una guía visual a modo de boceto que hacemos antes de empezar a desarrollar el diseño de una web o aplicación móvil. Aunque parece un paso muy simplón, puesto que es un simple boceto de la web, es esencial para empezar a trabajar y tener las ideas claras, y no sólo para ti, sino también para dejárselas claras a tu cliente.

Hay muchas formas de crear un wireframe, se puede hacer con Photoshop, online o incluso en papel. El otro día nos contaban en Sleepydays cómo hacer un wireframe desde cero. Hoy te vamos a mostrar unas cuantas herramientas útiles para desarrollar el tuyo.

1. Pidoco

Con sólo registrarnos, Pidoco nos permite crear wireframes para todo tipo de dispositivos. Dispone de varias plantillas donde elegir el tamaño de nuestro lienzo según el dispositivo para el que vamos a diseñar y, una vez acabado, podemos archivarlos en la propia web o descargarlos en varios formatos como SVG, PNG o PDF.

gauss-recursos-para-hacer-un-wireframe-herramientas-online

2. Google Drive Drawings

Desde vuestro propio Google Drive también existe la posibilidad de crear un “Archivo de Dibujo”, en el cual podemos insertar imágenes, hacer formas y poner textos. Así que, aunque no sea una herramienta propiamente creada para wireframes, es totalmente funcional y además los archivos se quedarán guardados en nuestra cuenta de Drive, lo cual es muy cómodo.

gauss-recursos-para-hacer-un-wireframe-herramientas-online2

3. Flairbuilder

Flairbuilder es una herramienta muy útil para diseñar wireframes. Al principio pensé que sería una lata tener que instalar un programa sólo para esto, pero al ser de los pocos que eran gratuitos decidí probar a ver qué tal funcionaba. Viene con muchos elementos de web prediseñados, como menús, calendarios, botones, etc., pero lo mejor que tiene es que te permite crear versiones responsive de tablet y móvil con el mismo wireframe que estemos diseñando para escritorio. Sólo moviendo elementos podremos hacer las tres vistas de nuestra web en wireframe en un mismo documento.

gauss-recursos-para-hacer-un-wireframe-herramientas-online3

4. Wireframe.cc

Esta web quizás es un poco más simplona, pero tiene la ventaja de que al ser todo online, sin necesidad de registrarte, es muy cómodo para hacer un wireframe rápido con el cliente delante. Una forma fácil de aclarar tus dudas de estructura. También dispone de vistas en responsive, pero no son demasiado realistas así que en ese aspecto no es muy útil.

gauss-recursos-para-hacer-un-wireframe-herramientas-online4

5. UI Stencils

Para los que prefiráis la libreta como yo, puesto que la única herramienta que tenéis es el propio lápiz, ya hay alguien que ha pensado en los que diseñamos wireframes a papel. En UI Stencil han creado el maravilloso invento de ¡la regla de pixeles con iconos incluidos! Al principio me pareció una frikada, pero tras ver la cantidad de detalles y de herramientas que han desarrollado en UI Stencil para facilitar el trabajo de crear wireframes, he de reconocer que me parece una maravilla. ¡Creo que es el regalo perfecto para un diseñador web!

Y tú ¿qué herramientas usas para diseñar wireframes?

3 comentarios en “Herramientas para crear un wireframe”

Dinos lo que piensas

Tu email no se mostrará ;)