¿Cómo diseñar una maqueta? Parte 1.


El proceso de diseño tiene tres etapas esenciales que todo diseñador debe conocer para hacer mejor su trabajo: los bosquejos, las maquetas y los prototipos. En estas etapas, que integran a todo el equipo de trabajo y a veces a algunos usuarios, se evalúa la apariencia, estructura y funcionalidad del sitio o aplicación antes de pasar al proceso de desarrollo, permitiendo solucionar los problemas que puedan aparecer mientras todavía son pequeños.

Sin embargo, es con las maquetas donde los diseñadores hacen verdadera gala de su creatividad y estilo propio, por lo cual he preparado para ti una pequeña serie que te ayudará a comprender qué son, qué deben contener y cómo pueden realizarse para obtener un resultado satisfactorio.

Para ello veremos primero cuál es su lugar en el proceso de diseño y por qué no deben confundirse con los bosquejos y prototipos, ya que este es un error común debido a las semejanzas que presentan unos y otros. Siendo así, comencemos hoy por conocer en qué consiste cada etapa:

1. Bosquejos

Los bosquejos, o wireframes por su nombre en inglés, constituyen un plano de baja fidelidad del sitio o la aplicación, algo así como su esqueleto. Lo común es que se representen en escala de grises y especificando el lugar de cada uno de los elementos del contenido, pues su objetivo es ayudar determinar dónde va cada cosa sin tener en cuenta la estética por el momento.

A grandes rasgos, un buen bosquejo debe explicar cómo estará agrupado el contenido, cómo estará estructurada la información y cuáles serán los materiales visuales básicos relacionados con la interacción, ya que su propósito es “mapear” el sitio o aplicación:
![01][1]

Una vez realizado es el momento de mostrarlo a todo el equipo de trabajo, sobre todo a los desarrolladores, para determinar si existe algún elemento que pudiera presentar problemas de implementación y darle solución ahora, cuando aún es sencillo realizar cambios. Y lo mismo ocurre con el cliente, a quien se le puede mostrar el bosquejo para que nos dé sus impresiones.

2. Maquetas

La maqueta es el segundo paso, cuando establecemos la estética de nuestro diseño y su funcionalidad, o sea: es el momento de agregar colores, tipografías, iconos, imágenes… en fin, todos los detalles visuales que nos gustan a los diseñadores y que muestran cómo quedará el producto final y cómo se verá en funcionamiento.

Es aquí donde tomamos las decisiones más importantes en cuanto a jerarquía visual, navegación, flexibilidad, animaciones, etc. para conformar una visión precisa de nuestro contenido, y como posee una estética superior es mejor que el bosquejo para generar interés en el cliente:
![02][2]

Pues sí, la maqueta es la piel del producto, y además muy útil por varias razones, por ejemplo:

  • En la organización de los detalles: las maquetas ayudan a revelar cualquier choque estético, y por tanto detalles como el color, el contraste y la jerarquía visual se determinan aquí para después unificarse en la etapa de desarrollo.
  • En la implementación del diseño: desde la perspectiva de la usabilidad, una maqueta permite evaluar los detalles visuales y cambiarlos antes de que se conviertan en código.
  • Como inmersión en la perspectiva del usuario: cuando trabajas en una maqueta estás mirando y arreglando un diseño que está cerca del estado final. Es una diferencia sutil pero importante, ya que una disposición hi-fi te ayuda diseñar desde el punto de vista del usuario.
  • En la flexibilidad: los ajustes que provienen del bosquejo pueden amontonarse rápidamente, pero llevarlos a una maqueta es más fácil que hacerlo con CSS o HTML.

Y si a todo esto le sumas que es el momento de volverte creativo/a y mostrar de qué eres capaz, pues entonces comprenderás porqué es tan apreciada por la mayoría de los diseñadores. Por mi parte te confieso que es mi momento preferido en el proceso de diseño :)

3. Prototipos

El prototipo es la etapa final del proceso, y es cuando agregamos interacción a nuestra página o aplicación para mostrar cómo debe funcionar. Y no se trata de escribir códigos, ese es el trabajo de los desarrolladores, pero sí podemos apoyarnos en algunos recursos que están a nuestra disposición para mostrarles en vivo las animaciones que deseamos y la funcionalidad que queremos.

Para ello podemos apoyarnos, por ejemplo, en las facilidades que nos brindan algunos editores de gráficos para http://www.uxpin.com</a”>UxPin, que te muestro aquí:
![03][3]

Esto nos permite interactuar con la interfaz de usuario en una manera similar a la del producto final, así como pronosticar y solucionar los problemas de utilización antes del proceso de desarrollo.

No obstante, en mi caso te recomiendo comenzar por prototipos de baja fidelidad para ir evaluando y hacer cambios rápidos si son necesarios, y luego pasar a los prototipos de alta fidelidad con la seguridad de que todo funciona como debe ser. De esta manera te habrás aproximado al producto final con una idea clara que no hará perder tiempo al desarrollador y que además te asegurará el resultado que esperas.

Conclusiones

Como ves, el proceso de diseño nos es tan sencillo como algunos podrían pensar, y en él las maquetas cumplen un papel primordial, ya que son sumamente provechosas para analizar las decisiones de diseño visual antes llegar al código. Además, al constituir una fase de transición entre bosquejos y prototipos, son el cajón de arena para la experimentación visual que nos llevará a una decisión clara respecto a cómo será el producto final.

En la próxima entrada nos adentraremos en el contenido de las maquetas y aquellos elementos que debes tener en cuenta al diseñarlas, así que por ahora me despido esperando que el tema te haya interesado. ¡Hasta la próxima!