Wireframes en Minutos: La Guía Completa v.1
Posted in Diseño on February 23rd, 2009 by Daniel Priego – 3 CommentsHace unos días un conocido me pidió que le ayudara con el diseño de su sitio web. Me contó que contrató a varios diseñadores, uno tras otro, y ninguno lo dejaba conforme: Cada diseñador había probado cien composiciones, mil tipografías, infinidad de esquemas de color, etc. y él seguía sintiendo que faltaba algo, que había algo que se estaban saltando pero no sabía qué.
Me envió todas las composiciones y ejemplos que habían hecho los diseñadores para ver qué podíamos reutilizar y me di cuenta de que todas tenían algo “en común“: Cada una utilizaba nombres, secciones, menúes, colores y opciones tan diferentes que parecía más un carnaval de diseño que composiciones para un sitio en especial. Decidí hablarle para pedirle que me enviara el Wireframe del sitio y en base a él trabajar y lo primero que me preguntó, muy sorprendido, fue para qué quería usar un <iFrame>?!”…. lo que sigue se lo pueden imaginar :)
Qué es un Wireframe?
Si bien es común que se utilice el anglicismo más que alguna traducción al castellano, podríamos decir que el Wireframe es una estructura, un esqueleto o bien un patrón inicial que se crea antes de pasar al diseño de un sitio web, aplicación online, de escritorio, etc. y que hará el proceso de diseño menos costoso, más rápido, sencillo y agradable.
Sea grande o pequeño el proyecto en el que estás trabajando, los Wireframes son una parte elemental del proceso de diseño y desarrollo y comúnmente se crean después de la creación de los Casos de Uso, donde trabajan los responsables de IT, Analistas de Negocio y Usuarios. En ellos se diagraman los elementos, opciones, menúes, y objetos que tendrá el sitio, aplicación, etc. final.
Interesante… pero sigo sin saber qué es un Wireframe!
Los Wireframes no son esqueletos con colores bonitos, degradados, fotografías, ilustraciones, efectos especiales, etc. NO! Los Wireframes son verdaderamente sencillos, composiciones sin aditamentos extra y generalmente hechos en color gris – monocromáticos, en los que nos concentramos en ubicar los elementos que compondrán nuestra ventana, página, aplicación etc. y que nos servirán para crear soluciones efectivas a problemas de usabilidad, accessibilidad, lógica, flujo de información, etc.
Ejemplos de Wireframes:
El Wireframe de Twitter en papel...
Wireframe para un SNS
Wireframes en pizarra
Vimeo.com
Wireframe de otro SNS
Wireframe de un buscador de imágenes hecho en papel
Ventajas de usar Wireframes
Las ventajas de utilizar Wireframes son muchas, pero quiero poner énfasis en las siguientes:
- Identificar problemas de Usabilidad, Accesibilidad, etc que puedan presentarse más adelante
- Definir qué quiere tu cliente y cuáles son sus objetivos (te habrá pasado que después de 1000 revisiones te dicen ” siento que ya no me gusta”?)
- Jerarquizar la información según su importancia
- Las correcciones son objetivas y basadas en funcionalidad y no en qué efecto, colores o tipografía usaste
- Se reducen los tiempos de trabajo y gastos
Seguramente se te habrán pasado por la cabeza muchas más ventajas, por lo que te pido que nos compartas aunque sea una que consideres importante.
Herramientas para crear Wireframes
Las herramientas y los métodos para hacer Wireframes son ilimitados: Desde lápiz + servilleta, aplicaciones online hasta software especializado, existe una gran cantidad de opciones que puedes utilizar para crear tus esqueletos y hacer más efectivo tu trabajo. A continuación te presento algunos que conozco y que me parecen muy útiles; y por supuesto! si conoces otros… comparte!
- Iplotz: Una aplicación online buenísima para crear Wireframes on the fly. Es MUY fácil de usar y puedes tener tus primeros wireframes en minutos. Eso sí, hay gente que ha comentado que el look de los elementos de su librería son algo rústicos pero bue… Gracias Migue por el dato!
- Axure: De los más usados a nivel PRO, es una herramienta para crear Wireframes y Prototipos de sitios, aplicaciones etc. Mi recomendación para trabajar en proyectos grandes con muchas especificaciones y para clientes exigentes :)
- SmartDraw: Aunque no lo he utilizado, algunas personas me han dicho que está bueno y es muy fácil de usar. Cuéntanos en caso de que lo hayas usado!
Ahora, si quieres tomarte las cosas más relax y empezar de a poco con los Wireframes, te recomiendo las siguientes alternativas:
- Expression Design: Está bueno para hacer Wireframes sin contar con experiencia previa. Es fácil de usar y tiene la ventana de que podemos exportar/copiar-pegar nuestros wireframes y diseños a otras aplicaciones como Blend o Visual Studio.
- Power Point: Si estás explorando el tema y quieres ver qué tan bien puedes componer, utiliza las herramientas de Power Point. Como dije antes, los Wireframes no tienen por qué tener muchos efectos, colores, etc. y con lo que te ofrece PP tendrás más que suficiente.
- Toma unas hojas de papel, servilletas o cartón, algo con qué dibujar/recortar y empieza a hacer tus composiciones. No te tomará mucho tiempo y verás que los resultados son buenos.
Conclusión
Para terminar, no me queda más que recomendarte utilizar Wireframes aunque seas un maestro diseñando cosas es-pec-ta-cu-la-res en pocos minutos. Personalmente puedo decir que los tiempos de trabajo/dolores de cabeza y costos son mucho mucho menores cuando se crean Wireframes al iniciar un proyecto en comparación de proyectos en los que no se hace y uno, como diseñador, desarrollador o encargado de un proyecto dedica más tiempo a correcciones subjetivas.
Seguramente tú, como mi amigo <iframe> le encontrarán mucha utilidad a los Wireframes y verán los resultados de inmediato. Hasta la próxima!
