Que es un Mockup o Wireframe
Cada diseñador y desarrollador web debe tener un wireframe (Mockup o prototipo) bueno y fiable. La importancia de esta herramienta se diferencia entre los diseñadores y desarrolladores web, algunos de ellos la utilizan, otros no. En Borchani.COM utilizamos diversos mockups como muestras para el cliente. Es en esta etapa inicial de desarrollo hace que el diseño web se vea agradable, la unión de las necesidades de los clientes y nuestras ideas creativas sobre quedan plasmadas sobre un lienzo blanco, lo que le permite planificar de manera efectiva la disposición visual de los sitios de contenido.
La desventaja es que una aplicación mockup o wireframe bueno y confiable puede llegar a un alto precio, ¿has visto el costo de una aplicación de un wireframe? Los precios pueden variar desde un mínimo de $ 100 todo el camino hasta más de $ 5000. ¿Quién tiene esta especie de mina para repartir? Ciertamente, ningún desarrollador independiente que conocemos realizan estos tipos de trabajo.
Entonces, ¿qué opciones tenemos?
Existen pocas aplicaciones web y herramientas gratuitas que podemos utilizar por eso hemos recopilando las mejores herramientas y lo compartiremos en este articulo:
Pencil Project
El Proyecto Lápiz popular y potente es una herramienta bastante Firefox addon gratuito y de código abierto para hacer diagramas y prototipos de interfaz gráfica de usuario con una multitud de características.
Con su base de plantillas de diagramación y creación de prototipos, la opción para documentos de varias páginas con las páginas de fondo, la de la pantalla de edición de texto con soporte de texto enriquecido y con su nueva cababiltity de exportación a HTML, PNG o Openoffice, hace que este complemento esencial para cualquier desarrollador o diseñador.
Web Site Wireframe Tool
La clave de esta herramienta es la simplicidad de uso, se presta a la velocidad, tanto en la creación del wireframe, así como ser capaces de compartir los resultados rápidamente sin tener que enviar algo más que una dirección web.
Esta herramienta en particular permite que el alambre que se construirá en cuestión de minutos, y si se desea, un enlace para ver la malla se puede enviar por correo electrónico, mensajería instantánea, o incluso el teléfono. Con las dos partes podrá ver la malla, incluso de diferentes lugares, la malla puede ser fácilmente actualizada basada en la interacción, discusión, ideas, sugerencias, etc.
Es gratis para registrarse y usar, y funciona en los navegadores modernos como Internet Explorer y Mozilla Firefox.
Hot Gloo – The Online Wireframe App
La primera cosa que usted necesita saber sobre Hot Gloo es que está en Beta, la segunda cosa que usted necesita saber es que se encuentra en libertad, pero con la intención de cobrar una cuota a finales de este año, así, apoderarse de su oportunidad, mientras que ahora es gratuito, vale la pena.
HotGloo es una herramienta fácil de usar y Flash incorporado intuitiva basada en Web de la aplicación de alambre, que puede crear prototipos conceptuales interactivos de una página web en la primeras etapas de desarrollo.
Las características incluyen las instalaciones de arrastrar y soltar, capas, la red y ajustar a la rejilla, una feria de elementos preestablecidos REW, la interacción entre los elementos y obtener su propia URL personalizada HotGloo que le permiten compartir su maqueta / alambre con sus clientes.
DUB – DENIM
El denim es una aplicación de escritorio gratuita que está disponible para Windows, Unix y Mac OS X. Se define así como “una herramienta informal para el sitio Web temprana etapa de diseño y la interfaz de usuario”.
Es una consecuencia del proyecto de seda original, una herramienta basada en el lápiz dibujo para el diseño de interfaces de usuario. SEDA combina muchos de los beneficios de papel basados en dibujar con las herramientas de creación de prototipos electrónicos. Que permite a los diseñadores a esbozar rápidamente una interfaz de uso de una almohadilla electrónica y el lápiz. SEDA conserva las propiedades importantes de lápiz y papel: un boceto se puede producir de forma rápida y el medio es flexible. Sin embargo, a diferencia de un boceto de papel, este esquema electrónico es interactivo y fácilmente se pueden anotar y modificar mediante gestos de edición. SEDA permite al diseñador para ampliar la interactividad de los widgets reconocido con storyboards
Mockingbird
Mockingbird es una herramienta en línea que hace que sea muy fácil para usted para crear, enlazar, ver y compartir maquetas de su sitio web o aplicación.
Con su interfaz limpia y clara, las funciones de arrastrar y soltar, complemento a la red, en la página ilimitado de enlace y casi todos los elementos de interfaz de usuario que pueda necesitar, todo ADSs a Mockingbird hacer nuestra aplicación alambre favorito en esta página.
MockFlow
Permítanme comenzar diciendo que MockFlow no es del todo libre, es un paquete gratuito (limitado a una maqueta con 4 páginas y 10 MB de almacenamiento) que, para ser honesto, realmente no sirve de mucho a nadie. El paquete anual de la prima cuesta $ 49 (precio razonable), que le da maquetas ilimitado, ilimitado colaboradores, 500 MB de almacenamiento y, lo más importante es que le da acceso a la Mockstore maravilloso.
MockFlow le da todo lo que usted esperaría de una aplicación en línea de alambre, con una ventaja adicional – su Mockstore. Esta es una gran biblioteca de plantillas y definiciones que pueden usar libremente (con el paquete premium) y ayudará a acelerar su flujo de trabajo y dar una profesionalidad añadido a su estructura metálica.
Prototype Composer – Free Prototyping Tool
Compositor prototipo hace que sea fácil para los usuarios empresariales y analistas de negocio para colaborar en las necesidades de la construcción simple, prototipos de alta fidelidad que simulan una aplicación de trabajo.
Es una herramienta para los datos de creación de prototipos, procesos, actividades y lo más importante, las interfaces de usuario. La aplicación también funciona como una herramienta de Gestión de Proyectos, que es bastante simple de usar, pero un poco demasiado para lo que necesito, lo que hace esta aplicación más adecuado para una gran empresa
FluidIA
FluidIA es un nuevo instrumento ágil diseño de interfaces de usuario ricas prototipos. Esta herramienta basada en web permite el refinamiento rápida y exploración de los conceptos con un enfoque orientado a objetos de diseño.
La gran idea detrás de este experimento es si un grupo de diseñadores de interacción, los profesionales de la IA UX y los desarrolladores pueden crear allí herramienta de creación de prototipos propios de una manera abierta. Tienen casi tuvo éxito. FluidIA sigue siendo un buggy poco, pero se ve muy prometedor.
Cacoo
Cacoo es una fácil herramienta de dibujo online que te permite crear una variedad de esquemas tales como mapas del sitio, marcos de alambre, UML y diagramas de red. Que permite que múltiples usuarios editen el mismo esquema en una colaboración simultánea con todas las herramientas y funciones que cabe esperar de una aplicación de alambre en línea
Diagramas creados con Cacoo pueden ser compartidos y le permite pegar el código en aplicaciones Web, tales como wikis y blogs, y cuando el diagrama original se edita el gráfico pegado se actualiza automáticamente, eliminando la necesidad de subir el diagrama cada vez que se actualiza
Lumzy
Con Lumzy, puede crear prototipos de cómo el sitio o la aplicación funcionará mediante la adición de eventos dentro de los controles Lumzy. Por ejemplo, ¿qué sucede cuando el usuario hace clic en un botón? Puede crear mensajes de alerta, la navegación de página o enlaces a contenido externo, cuando el cliente interactúa con su maqueta, pero con la sensación de dibujado a mano un bosquejo.
Con Lumzy, usted puede crear fácilmente sus maquetas y enviar a los clientes sobre la marcha. También cuenta con herramientas de colaboración para la edición de equipo, un motor de chat para deliberar sobre los diseños, las versiones de archivos y mucho más.
iPhone Mockup Web App
Esta aplicación web muy simple le permite crear su propia aplicación para el iPhone maquetas, compartirlas con otras personas, y hacer los cambios que por sincronizarse con todos los que han URL de la maqueta.
Esta aplicación se encuentra actualmente en alfa y no ofrece protección por contraseña (todos con la URL de la maqueta se puede acceder y cambiar), a fin de utilizar esta aplicación con cuidado.











jun 19, 2012 at 9:22
Gonzalo Lazaga says,
Buenas,
Alguien me podra explicar que diferencia hay entre un wireframes y un mokups ?
Gracias gente,
dic 24, 2012 at 16:53
Que es un Mockup o Wireframe | Digital Leaks says,
[...] Fuente:http://www.borchani.com/blog/que-es-un-mockup-o-wireframe.html Tu voto:Compartir:FacebookTwitterLinkedInPinterestGoogle +1Correo electrónicoMe gusta:Me gustaSe el primero en decir que te gusta. Tags: Diseño Web, Mockup, UX, Web, Web Design, Wireframe [...]