Guía del Principiante para Wireframes y Herramientas para Crearlos

Los Wireframing, o prototipos, durante la fase de diseño, no cuestan casi nada, pero puede volver a dar tanto. Mientras que muchos diseñadores comienzan con un bosquejo en su mente y, a continuación, sólo ponerlo en Photoshop o incluso el código inmediato, algunos otros inicios sobre el papel. Sí, el papel, que (la mayoría de las veces) lo blanco que escribimos con nuestras manos. Suena muy año 2000, pero incluso hoy en día los mejores diseñadores no utilizan esta técnica para su beneficio. Los prototipos Web ahorran un montón de frustraciones más tarde, durante la fase de desarrollo de los proyectos, como se asegura de que no hay cosas para deshacer o rediseñar. Si el prototipo es correcto, puede estar seguro de que el rediseño de hecho nunca será algo de lo que se debe tener en cuenta.

Lo que básicamente significa wireframing está poniendo sus ideas de diseño en el papel - para cada una de las múltiples páginas de un sitio web. Todas las páginas probablemente comparten algunos elementos, por lo tanto, la primera de ellas será un poco más difícil de hacer, mientras que el resto de ellas será un poco menos difícil, como ya tiene una idea básica sobre los patrones generales de diseño.

Tenga en cuenta que estos elementos comunes son una necesidad para cualquier diseño. Al cambiar entre las páginas, el usuario tendrá que reconocer de inmediato el hecho de que él está en el mismo sitio y no en otro lugar. Siempre mantenga la navegación y las secciones importantes (contenido, barra lateral, pie de página) en el mismo lugar. Pero esto tiende a convertirse en una guía del principiante para el diseño web, así que vamos a seguir adelante.

General – el wireframe

Con el fin de ser capaz de utilizar una estructura metálica, lo que necesita saber es cómo funciona realmente. Lo que esto hace es simple - que ilustra el diseño de un sitio web y de sus principales componentes en el papel. Se pueden utilizar diferentes formas, tales como cajas y óvalos para dibujar contenido, navegación y otros elementos funcionales. Podría preguntarse ¿por qué usamos formas? La respuesta es sencilla, ya que permite que nos centremos más en el diseño y nos olvidamos de la codificación, la compatibilidad entre navegadores, imágenes, etc. Es puro y básicamente diseño.

¿Wireframing o el diseño Photoshop?

La alternativa al papel es la creación de prototipos web para el diseño visual en Photoshop. Si bien tiene sus ventajas en cierta medida, crear el diseño en Photoshop no es tan eficaz, porque no le permite centrarse en los elementos básicos de concepción. Si se empieza a diseñar en Photoshop, probablemente también empezará a pensar en los colores, las imágenes y las fuentes. No hay necesidad de esto si se hace en papel. Y el proceso es mucho más rápido en papel, así que, ¿por qué no intentarlo? Obviamente puede empezar a diseñar en Photoshop en una fase posterior, pero no recomendaría hacerlo antes de que tenga una idea clara de lo que quiere obtener de este proyecto. La única manera de lograr esto es iniciar en el papel. 

Puede llamar a una trama de superficie un boceto si desea. De hecho, la trama es un básico, un boceto simplificado de un sitio web. Algunas ideas que se comunica al cliente que puede aceptar o no. Si no lo hace, es muy fácil para que tome otra hoja de papel y dibujar otras ideas desde la parte superior. La razón principal detrás de la trama es para que pueda centrarse en lo que realmente es importante, en la creación de un sitio web: como cada aspecto de la página, donde están los elementos más importantes y cómo lograr el saldo general positivo que necesita. 

Después de qu consigue la idea para el cliente y él lo acepta, es bienvenido a evolucionar el boceto básico en algo más detallado. Ahora quizás es hora de empezar a pensar en las fuentes, los colores y las imágenes.

Imagen de Denkbeelhouwer.

La etapa de prototipos 

Es de vital importancia para los diseñadores y los clientes trabajar juntos durante esta etapa del proyecto. Mientras que el cliente no tiene demasiado que decir durante la  fase de codificación, ésta es donde habitualmente le proporciona una gran cantidad de insumos que se deben tener en cuenta. Recuerde que una vez que aceptó el diseño, con mucho gusto en la nuevas ideas, en este momento que ya cree en usted y sus habilidades. Será un duro y largo proyecto si no obtiene la aceptación de la trama básica de él. 

Si es un cliente recuerde que no debe insistir mucho sobre la falta de colores, imágenes, fuentes y otros estilos. El trabajo de un diseñador por ahora es darle una idea básica de lo que él considera que es bueno para usted. Si pide más detallados esquemas de él y rechaza los tres o cuatro veces, le va a costar mucho dinero. Por otro lado, si pide esquemas básicos y rechazar, no cuesta tanto, porque son más fáciles de dibujar y pensar. 

Herramientas para prototipos web 

Aquí está una lista de algunas de las herramientas que recientemente he probado para ver cuánto los diseñadores pueden confiar en ellos para crear esquemas. Si el papel no es lo suficientemente buena para usted, en cualquier orden, aquí están las otras soluciones posibles: 

1. iPlotz

Esta herramienta le permite crear wireframes, puede hacer clic en y navegar a través. Esto ayuda a la creación de la experiencia de un sitio web real. Mientras que puede obtener una cuenta gratuita en iPlotz, recomiendo una de las formas premium si es serio acerca de cómo iniciar con prototipos web a partir de ahora.

2. Balsamiq

Si le gusta dibujar, a continuación, esta herramienta le dará la sensación de que puede, sólo que ahora es digital. Los elementos pueden ser cambiados fácilmente y se han reorganizado y el control sobre ellos es bastante fácil. Los resultados están limpios y una de sus ventajas es que todo puede ser reiterado en tiempo real. 

3. Pencil Project

Esta herramienta se puede utilizar fácilmente para hacer diagramas y GUI de prototipos. 

4. templatr

Aunque no le permitirá dibujar cualquier cosa, esta herramienta le permite crear diseños individuales para su sitio web sobre la marcha. No necesita saber nada de HTML y se puede descargar la plantilla al final con un solo clic.

5. Flair Builder

Esta es una herramienta capaz de crear wireframes interactivos muy rápidamente. Es bastante fácil de usar y viene con una paleta de componentes funcionales que facilitan el proceso de creación de prototipos. Flair Builder también es interactivo y mejorará mucho su experiencia.

Imagen de Michael Lancaster.

Conclusión

Los Wireframes, o la creación de prototipos web, es un proceso que se lo conoce muchos diseñadores, aunque sólo un puñado de ellos lo utilizan. Aunque podría parecer que se tarda mucho tiempo, en el largo plazo le ayudará mucho. Si sabe cómo comunicarse correctamente y trabaja en estrecha colaboración con el cliente durante la creación de prototipos, el resto del proyecto irá más suave de lo esperado. Estoy totalmente de animo para crear prototipos de sus diseños antes de realmente empezar a codificar o crear todo el diseño visual en Photoshop.

Hasta la próxima vez, deje que la chispa de un debate aquí para mi primer artículo sobre este tema. ¿Con qué frecuencia hace prototipos en sus diseños? ¿Cuán efectivo ha sido para usted? Si no lo hace, ¿cómo es eso?