Recomendamos las mejores herramientas para wireframing, sketching y planificación de diseños web, además de resaltar la importancia de la planificación previa al trabajo creativo en un diseño web. Diseñadores… ¡no os lo podéis perder!

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

La importancia de planificar antes de actuar

Muchos diseñadores en algún u otro momento hemos caído en la tentación de comenzar a diseñar un nuevo proyecto sin ningún tipo de planificación previa. Ya sea por pecar de novatos, perezosos o simplemente no creer en que la planificación debe formar parte de nuestro proceso creativo.

La planificación debe formar siempre parte de nuestro proceso creativo, no es algo “opcional”.

Con planificación previa no estoy sugiriendo numerosas horas de escrupulosa planificación y organización de todo lo que haremos, ha de ser práctico y en ningún momento debe ser peor el remedio que la enfermedad, recordad que nos interesa planificar para ahorrar tiempo y ganar en calidad.

En este proceso previo de planificación es importante que obtengamos respuesta a preguntas tan básicas como:

  • 1. ¿Qué tipo de web voy a crear?
  • 2. ¿Qué clase de público visitará la web?
  • 3. ¿Cuál es la finalidad / objetivo final de la web?
  • 4. ¿Cumplirá el diseño en mente los objetivos? ¿Es usable e intuitivo?

Contestando a este tipo de preguntas (seguro que añadiríais / quitaríais alguna) nos enfrentamos a problemas que a pesar de ser demasiado obvios nos ahorrarán más de un dolor de cabeza… ¿cuántas veces hemos no desechado diseños visualmente atractivos pero que no cumplen los objetivos básicos?

Diseñar con unos objetivos básicos bien definidos nos ahorrarán más de un “borrón y cuenta nueva“.

Si bien para proyectos “for fun” (por mera diversión) se puede entender que no se planifique nada, sino que simplemente experimentemos y trasteemos sobre la marcha… me resisto a pensar que no se pueda necesitar / dedicar media 30 o 60 minutos a la planificación de lo qué queremos conseguir y cómo hacerlo.

Herramientas para planificación de diseños web

Si bien no están todas las existentes del mercado (otra cosa no, pero de esto hay mucho), he querido resaltar aquellas que me han parecido más interesantes y que he utilizado en algún momento a modo de prueba o en proyectos reales.

Como siempre, si conocéis alguna herramienta interesante que no aparezca en este listado, ya sabéis para qué están los comentarios ;) .

Balsamiq Mockups

Balsamiq Mockups

Balsamiq Mockups es una herramienta multiplataforma (Linux, Windows, Mac) que nos permite arrastrar y soltar todo tipo de elementos web, móviles y otros controles comunes para agilizar el brainstorming y bocetos iniciales de cualquier tipo de proyectos.

No es casualidad que aparezca de primero en la lista, actualmente es el que utilizo para la mayoría de proyectos en Cokidoo.

Entre otras cosas se nos permite crear documentos con múltiples páginas (algo así como las hojas de Excel) así como editar los propios elementos pudiendo añadir de manera rápida y por pseudocódigo contenido a los mismos: items en un menú de navegación, registros en una tabla… etc.

HotGloo

HotGloo

HotGloo Una herramienta de wireframing con un aspecto e interfaz muy cuidada que no sólo está pensada para diseñadores, sino también para programadores. Como buen servicio web, no necesitaremos preocuparnos ni de descargas ni actualizaciones constantes, tan sólo crearemos nuestra cuenta y comenzaremos a disfrutar del servicio.

HotGloo favorece la relación entre clientes y miembros del mismo equipo pudiendo editar y comentar casi cualquier parte de nuestro trabajo mediante un sistema en tiempo real de colaboración con chat integrado. Por momentos algunas de sus características recuerdas a Basecamp (salvando las distancias).

Gliffy

Gliffy

Gliffy es un aplicación online para la creación de diagramas, permitiéndonos crear de manera fácil y cómoda todo tipo de planos y diagramas con un acabado bastante profesional.

Lógicamente entre planos de viviendas, gráficas, diagramas base, dibujos técnicos y otro tipo de diseños podremos esbozar nuestros diseños web.

iPlotz

iPlotz

iPlotz permite crear de manera rápida y cliqueable todo tipo de prototipos web, pero además soporta elementos para la planificación de todo tipo de aplicaciones de software. Es multiplataforma pudiendo ser ejecutado en Linux, Windows, Mac o embebido en navegador web mediante flash.

Incorpora un gestor de proyectos de manera que podamos tener múltiples proyectos bajo una misma cuenta, además de incorporar un sistema de discusión con el que valorar las distintas creaciones con el fin de mejorar el trabajo final.

Pencil Project

Lapiz y papel

Pencil Project es un plugin para Firefox que nos permite realizar prototipados de interfaces de usuario directamente en nuestro navegador.

Incluye las herramientas de dibujado típicas que se pueden esperar de este tipo de programas, además de ser multiplataforma y aceptar plantillas predefinidas por nosotros mismos. Como curiosidad está apoyado por la fundación Mozilla.

Lápiz & Papel

Lapiz y papel

Si bien me decanto por Balsamiq Mockups como herramienta de sketching, previo a su utilización siempre hay una ronda de lápiz y papel con la que empezar a desatascar la mente y empezar a generar buenas ideas.

Por lo general plasmar los primeros bocetos o garabatos en un papel de forma rápida y cómoda suele ser una buena práctica para luego “pasarlos a limpio” y completarlos con uno de estos programas. Posteriormente podremos enseñárselos a clientes o resto del equipo de trabajo.

Reflexión final

Realmente no hemos descubierto nada nuevo, la planificación es siempre una parte importante de cualquier tipo de tarea o proyecto, dedicando unos pocos minutos a pensar en los posibles problemas y objetivos podremos minimizar las horas perdidas y de improvisación.

En cuanto a las herramientas para la creación de bocetos y previas a nuestros diseños web, son realmente interesantes de cara a evitar discusiones tontas iniciales, ya que nos aleja de formas y colores y nos enfoca en lo importante, en la estructura y objetivo del diseño final. El tiempo es oro :) .

¡Nos vemos en el próximo artículo!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (10 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

¡Muy bueno el artículo! Añadiría esta que es para hacer wireframes ONLINE: http://makiapp.com/, que acabo de ver en Twitter :)

juan jose

Gomockingbird.com esta muy muy bien

Muy buen artículo, de calidad, informativo y de gran ayuda para todos. Defitivamente la planificación es algo muy importante. Contar una idea ya es siempre mucho mejor que aventurarnos a crearlo todo en poco tiempo.

Siempre me he decantado por el mockups, aunque siento que sería mejor si también tuviera una función a la hora de crear diagramas de flujo de información que luego es bueno por para que el equipo entienda el como van a funcionar las cosas y no tener que explicar varias veces todo jajaja ¿a quien no le ha pasado eso de discutir con alguien que esta diciendo exactamente lo mismo que uno?

Excelente tema.

Muchas gracias por el artículo. No conocía muchas de las herramientas que mencionas. Probare a ver que tal.

oliverastro

ocupo Balsamiq y ultimamente estoy ocupando Fireworks para el prototipado, ya que viene en la Suite de Adobe que ocupo

matías

Muy buen articulo esto me va ahorrar mucho tiempo… gracias

tamudo

Justamente había visto capturas de diseños hechos con Balsamiq y estaba tirandome de los pelos por saber que software habían utilizado. Muchisimas gracias! :D

Guido Velasco

Muchas gracias por el Articulo

Justo lo que necesitaba para hacer brainstorm, Me gusto mucho el Balsamiq Mockup, Grax