martes, 17 de mayo de 2016

Prototipos Wireframes



En esta actividad debes evaluar el funcionamiento de varias herramientas de dibujado de prototipos y debes seleccionar la que creas que ofrece las mejores características. Publica en el foro los resultados de tu investigación, indica cuál es la mejor herramienta de dibujado según tu opinión.
En general, un wireframe debería ser un prototipo del proyecto visual del diseño de la interfaz, para dibujar la arquitectura de un sitio web y las relaciones entre sus páginas, todo ello sin tener que preocuparte de los detalles de tu diseño gráfico.
Estos son los criterios utilizados para la comparación en las dos (2) Tablas siguientes:
  • Tipo de software: Para descargar / herramienta basada en web (en caso de descarga, el sistema operativo compatible se especifica).
  • Biblioteca de símbolos GUI: gratuito, botones fácilmente disponibles, barras de desplazamiento, menús y otros objetos para elaborar wireframes.
  • Wireframes interactivas: Los modelos que simulan la navegación entre las páginas web donde se puede hacer clic.
  • Colaboración en tiempo real: Interacción con los clientes y los empleados para recibir información en vivo.
  • Formatos de exportación: Formatos soportados para exportar los proyectos en wireframes.
  • Limitaciones de cuentas: Restricciones en cuenta gratuita (si las hay) y tiempo de uso, número de wireframes que puedes crear, etc

Tabla 1
Tabla de Comparación basada en el tipo de software, en la Biblioteca de Símbolos GUI e interactividad
Wireframes Tools
Software Type
GUI Symbol Library
Interactive Wireframes
1
Gliffy
Web-based
YES
YES
2
Jumpchart
Web-based
NO
YES
3
Mockflow
Web-based / Windows / Mac
YES
YES
4
Iplotz
Web-based / Windows / Mac
YES
YES
5
Mocklinkr
Web-based
NO
YES
6
Pencil Project
Firefox Add-on
YES
YES
7
Lumzy
Web-based
YES
NO
8
Mockingbird
Web-based
YES
YES
9
Fluidia
Web-based (Firefox only)
NO
NO
10
Balsamiq Mockups
Web-based / Windows / Mac / Linux
YES
YES



Tabla 2
Tabla de Comparación basados en colaboración en tiempo real, el formato de exportación y limitaciones de la cuenta
Wireframes Tools
Collaboration
Export Formats
Account Limitations
1
Gliffy
YES
SVG, Gliffy XML, JPG, PNG
Ads, free up to five wireframes, no wireframe encryption
2
Jumpchart
YES
CSS / XHTML, WordPress
Free up to two wireframes with max two shared collaborators
3
Mockflow
YES
PPT, PDF, PNG
Free for one wireframe with up to four pages and two shared collaborators. Exported files are watermarked.
4
Iplotz
YES
PDF, PNG, JPG, HTML
Free for one wireframe with up to five pages
5
Mocklinkr
YES
N/A
Free for up to ten wireframes
6
Pencil Project
NO
HTML, PDF, PNG, MS Word, OpenOffice.org
N/A
7
Lumzy
YES
PDF, PNG, JPG
N/A
8
Mockingbird
YES
PDF, PNG
N/A
9
FluidIA
YES
N/A
N/A
10
Balsamiq Mockups
YES
XML, PDF, PNG
Free for seven days








Herramientas para Wireframing y Prototipos de Sites
1.    Gliffy     http://www.gliffy.com/
Gliffy es una herramienta para wireframing y prototipos de sitios web basada en la web que permite seguir a tu sitio, con la capacidad de crear wireframes estáticos e interactivos para simular la navegación entre las páginas web y sacar provecho de una amplia biblioteca de símbolos GUI. Puedes colaborar con otros para recibir comentarios en tiempo real sobre tu trabajo. Cuando hayas terminado, puedes exportar tus wireframes para archivos SVG, XML Gliffy, JPG o PNG. La cuenta gratuita permite hasta cinco wireframes Gliffy sin cifrados, pero es compatible con anuncios.
2.    Jumpchart       http://jumpchart.com/
Jumpchart es una aplicación de planificación basada en navegador que te permite dibujar un wireframe para tu sitio. Puedes crear wireframes estáticos e interactivos para simular la navegación entre las páginas web de tu modelo. Jumpchart también te permite compartir tus proyectos con los clientes para obtener retroalimentación y comentarios sobre tu trabajo sin el uso de adjuntos de correo electrónico. Si es necesario, puedes exportar tus wireframes en CSS / XHTML o en un formato compatible con WordPress. Jumpchart es gratuita para hasta dos wireframes con un máximo de dos colaboradores para el compartimiento. No está disponible la biblioteca GUI.

3.    MockFlow   http://www.mockflow.com/
MockFlow es un servicio para prototipos de sitios web, disponible como una aplicación basada en web y como software para Windows y Mac. Los wireframes creados con MockFlow son interactivos y simulan la navegación del usuario a través de las páginas web. Para diseñar tus wireframes, puedes utilizar su gran biblioteca de símbolos GUI. La colaboración en la distribución de wireframes es también totalmente compatible. Cuando hayas terminado, puedes exportar tus proyectos a PPT, PDF o PNG. Ten en cuenta que con la cuenta gratuita, todos tus archivos se exportarán como filigrana. Las cuentas gratuitas te permiten construir un wireframe en MockFlow con un máximo de cuatro páginas y un máximo de dos colaboradores para el compartimiento.

4.    Iplotz   http://www.iplotz.com/
Iplotz es una herramienta que te permite crear prototipos de sitios web y aplicaciones de software. iPlotz está disponible como un servicio basado en la web y cómo software se puede descargar para Windows y Mac El servicio cuenta con una amplia biblioteca de símbolos GUI que proporciona botones listos para el uso, barras de desplazamiento, barras de menús y otros objetos que se pueden utilizar el diseño de tus modelos. También puedes compartir tus proyectos en tiempo real y recibir información en vivo, además de comentarios. Una vez concluido el proyecto, puedes exportar tus wireframes a PDF, PNG, JPG y archivos de HTML. La cuenta gratuita de iplotz te permite crear un wireframe con un máximo de cinco páginas navegables.

5.    Mocklinkr      http://www.mocklinkr.com/
Mocklinkr es un servicio basado en web para la creación de prototipos para tu sitio, el diseño de wireframes interactivos puede ser navegado como lo harías en un sitio real. También puedes compartir tu wireframing con otros desarrolladores para proporcionar comentarios directamente utilizando Mocklinkr. La cuenta gratuita permite hasta diez wireframes con páginas ilimitadas. No disponibiliza función de exportación, tampoco una biblioteca GUI de símbolos está disponibles.

6.    Pencil Project http://www.evolus.vn/Pencil/Home.html
The Pencil Project es un complemento de navegador de código abierto de Firefox que te permite crear wireframes y prototipos dentro de Firefox. Puedes crear un wireframe interactivo que simula la navegación web y también utilizar la biblioteca de símbolos para agregar objetos GUI, botones, barras de desplazamiento y otros dispositivos para hacer tu wireframe más realista. Todos los wireframes creados pueden ser exportados a HTML, PDF, PNG o MS Word compatible con archivos y OpenOffice.org. No trae funciones de colaboración.

7.    Lumzy http://www.lumzy.com/
Lumzy es una herramienta para crear maquetas gratuitas que te permiten diseñar el prototipo de su sitio. Una amplia biblioteca de símbolos para la interfaz gráfica del usuario está disponible para agregar gráficos a tu prototipo con el fin de añadir más realismo a tu proyecto. Además, puedes invitar a que otros colaboren en tu proyecto y recibir retroalimentación del modelo. Los formatos de exportación disponibles son: PDF, PNG, JPG. Los modelos interactivos no son compatibles.




8.    Mockingbird http://gomockingbird.com/
Mockingbird es una herramienta de wireframing interactivo gratuita basada en la web que te permite crear prototipos de tu sitio. Puedes crear un sitio dentro de tu navegador, aprovechando una gran biblioteca de interfaz gráfica de usuario con varios objetos para personalizar tu modelo. Una vez que el trabajo esté terminado, puedes compartir tu diseño con otros desarrolladores o exportarlo en los formatos PDF y JPG.

9.    Fluidia http://www.fluidia.org/
Fluidia es una herramienta para el wireframing de sitios web y para la creación de prototipos de interfaces de usuario. En una etapa inicial de desarrollo, FuidIA sólo funciona correctamente con Firefox 2.5. Las funciones de colaboración están disponibles en FuidIA, para que puedas compartir e interactuar con otras personas. No hay biblioteca GUI disponible, tampoco la exportación de recursos o wireframes interactivos son compatibles.

Balsamiq Mockups es una herramienta que te permite dibujar wireframes y prototipos interactivos. Balsamiq Mockups está disponible como una aplicación basada en la web y cómo software se puede descargar para Windows, Mac y Linux. El servicio cuenta con una amplia biblioteca de símbolos para interfaz gráfica de usuario con botones listos para usar, barras de desplazamiento y otros objetos que se pueden utilizar para diseñar tus modelos. La colaboración también te permite compartir tu proyecto para recibir comentarios y observaciones en tiempo real. Al terminar, puedes exportar tus wireframes para archivos XML, PDF, PNG. La cuenta gratuita te permite crear wireframes ilimitados durante siete días.
En mi opinión seleccionaría Pencil, por ser garatuita, permite crear un wireframe interactivo, utilizar la biblioteca de símbolos para agregar objetos GUI, botones, barras de desplazamiento y otros dispositivos para hacer tu wireframe más realista. Todos los wireframes creados pueden ser exportados a HTML, PDF, PNG o MS Word compatible con archivos y OpenOffice.org. La desventaja que tiene es que no trae funciones de colaboración.

Mayor información:


No hay comentarios:

Publicar un comentario