Herramientas de prototipado

Para la elaboración de prototipos de páginas web existen una serie de herramientas online que podemos utilizar, para la elaboración de diagramas de flujo, wireframes y mockups.

Algunas son gratuitas, como la siguiente:

http://pencil.evolus.vn/

Con esta herramienta se pueden realizar prototipos fáciles GUI, para interfaz de usuario de Android  y IOS con plantillas preinstaladas. 

Contiene formas de uso general, elementos de diagrama de flujo, escritorio/ formas de interfaz de usuario web, Android y IOS GUI formas.

También se pueden realizar diagramas de apoyo dibujo y tiene una galería de imagenes prediseñadas de OpenClipart.org.

Además los archivos son exportables en diferentes tipos de formatos: Png, como página Web, Pdf, Svg, documento de OpenOffice, etc.

Otras son de pago, como:

https://balsamiq.com/

Esta herramienta se utiliza para la elaboración de wireframes de baja fidelidad que se centren fundamentalmente en la funcionalidad. Permite la colaboración en línea de diferentes usuarios y pueden compartirse públicamente los proyectos. Cuenta con una colección de más de 75 modelos que se pueden utilizar. Su característica principal es que es rápida y fácil de usar.

https://www.gliffy.com/home/

Con esta herramienta podemos elaborar diagramas de flujo, de red, mapas de piso, organigramas, mapas mentales, diagramas de Venn, análisis FODA, wireframes, mapas de sitio, UML, dibujos técnicos, etc.

Aquí os dejo un Manual de usuario de la aplicación.

Wireframes

En diseño web los wireframes son elementos de  representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. 

Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para comprobar la usabilidad de un sitio web.

La principal ventaja es que ofrece una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc.).