Herramientas Web para Diseñar Interfaces (Mockups, Wireframes, Prototipos)

Si eres un diseñador web o un programador y necesitas realizar los bocetos preliminares de tu sitio o aplicación, es necesario que tengas claro cada interfaz a desarrollar, para esto exísten herramientas en linea y de escritorio que te permiten diseñar la estructura de tu aplicación.

A continuación dejo una lista de algunas herramientas Web para realizar este tipo de diseños, comunmente conocidos como Mockups, Wireframe o prototipos.

Hot Gloo
Hot Gloo

Es una aplicación en línea desarrollada en Flash para crear Wireframes, cuenta con funciones como arrastar y soltar elementos, capas y más, además recibes una URL para compartir tu trabajo con tus colegas.

Mockingbird
Mockingbird

Mockingbird es una herramienta popular para la creación de maquetas y wireframes. Te permite fácilmente crear, previsualizar, relacionar entre sí, y compartir todos tus wireframes con quien quieras.

Pencil Project
Pencil Project

Esta es una extensión para Firefox que nos permite hacer diagramas detallados e interfaces de usuario increíbles, viene con una variedad de características tales como documentos de varias páginas, en la edición de texto en pantalla, soporte de texto enriquecido, páginas de fondo, la exportación de HTML, PNG y Openoffice.

ProtoShare
ProtoShare

ProtoShare proporciona un herramienta de colaboración fácil de utilizar que permite la creación de proyectos dinámicos que requieren de prototipos y wireframes.

Balsamiq
Balsamiq

Balsamiq es una herramienta interactiva de wireframing que se siente como si estuvieras dibujando con un lápiz y papel, sólo una en la web. La diferencia es con esta herramienta tendrás el control total de los elementos y te permite mover con facilidad o cambiar la posición de los elemntos.

Flair Builder
Flair Builder

FlairBuilder te permite un rápido despliegue de wireframes mediante el uso de una plataforma cruzada que alberga las diferentes funciones y características útiles dentro de una sola paleta.

Cacoo
Cacoo

Cacoo es una gran herramienta de trabajo para dibujo en línea que te permite desarrollar varios diagramas como los gráficos de una red alámbrica, o los mapas de un sitio, además puedes permitir que varios usuarios accedan a tus prototipos para hacer cambios o simplemente ver tu progreso, por lo que lo converte en una herramienta de colaboración.

Serena: Prototype Composer
Serena: Prototype Composer

Prototype Composer te permite ver como se verá una aplicación antes de que empieces a escribir código.

MockFlow
MockFlow

MockFlow viene con una amplia biblioteca en línea de plantillas que te permiten usarlas libremente y mejorar la calidad visual de tus wireframes. MockFlow es gratis, sin embargo tiene una versión premium que cuesta $59 dólares por año.

FluidIA
FluidIA

fluidIA es una herramienta ágil para el diseño de prototipos de interfaces de usuario ricas. La gran idea detrás de este experimento es si nosotros, como diseñadores podemos crear nuestra propia herramienta de creación de prototipos de una manera abierta. fluidIA también proporciona velocidad, agilidad, colaboración increíble, y una rica interacción entre el diseñador y la interfaz de usuario.

Lumzy
Lumzy

Lumzy le permite crear varios prototipos de un sitio web o una aplicación que funcionará mediante la adición de eventos a través de su panel de control

GUI Studio Design
GUI Studio Design

GUI Design Studio es una herramienta de diseño de software especializado para cualquiera involucrado en el diseño de interfaz de usuario de aplicaciones, incluyendo diseñadores de experiencia de usuario, analistas, desarrolladores, administradores de proyectos y consultores.

iPlotz
iPlotz

iPlotz te permite crear wireframes en los que se puede hacer clic y puedes navegar a través de ellos, esencialmente se trata de crear o recrear la experiencia de un sitio web real.

OmniGraffle
OmniGraffle

OmniGraffle puede ayudarte a hacer alucinantes documentos gráficos rápidamente por gracias a la técnica de líneas conectadas como diagramas, proporcionando herramientas de diseño de gran alcance, además te permite importar y exportar archivos de Microsoft Visio.

MockupScreens
MockupScreens

MockupScreens es una herramienta interactiva que te permite dibujar maquetas en pantalla, crear un sistema de retroalimentación, y obtener los mejores resultados posibles. Así podrás ver cómo interactúan todos antes de empezar con el código.