Adobe Illustrator está experimentando un regreso en el mundo del diseño web. No sólo es SVG cada vez más utilizado en línea, pero cada vez más diseñadores están utilizando vectores para wireframing. Los siguientes consejos le ayudarán a sacar el máximo partido a Illustrator como herramienta de wireframing.

El wireframing consiste en trabajar con rapidez y en iterar rápidamente. El objetivo no es crear interfaces atractivas; su prioridad número uno es diseñar información y experiencia.

1. Ir en monocromo

Los wireframes dejan clara la jerarquía en una página web; demuestran visualmente el orden en que los usuarios deben procesar la información disponible. Si quiere que los usuarios procesen el titular antes de pulsar el botón «comprar ahora», el titular tiene que «superar» al botón exigiendo más atención.

Esta jerarquía visual puede definirse de varias maneras. Podemos utilizar el tamaño para que el titular sea más impactante, podemos utilizar el posicionamiento (colocándolo antes del botón). Podríamos utilizar el color, el contraste y una serie de otras cosas, pero hacerlo en un wireframe sólo hace que las cosas sean más confusas.

Al eliminar el color de la ecuación, la relación visual definida por la posición, el tamaño y (si quieres dar un paso más) el contraste, es mucho más limpia.

Aquí no estamos construyendo kits de UI bonitos y perfectos en cuanto a píxeles. Limítese a una gama limitada de grises y utilice el color sólo para las etiquetas y las notas.

2. Mantenga las capas para fines específicos. Mantenga las capas para propósitos específicos

Hablando de etiquetas, notas y comentarios, es una gran idea colocar cada uno en una capa dedicada. Lo mismo ocurre con cualquier otra cosa que tenga un propósito específico, como el comportamiento, la interacción, los gestos, etc.

Coloque los elementos visuales en una capa, el comportamiento en otra y las etiquetas en otra, de modo que pueda alternar fácilmente su visibilidad cuando sea necesario.

3. Aproveche los símbolos

D.R.Y. se utiliza generalmente como un término de programación, pero es igualmente aplicable al flujo de trabajo de diseño. En cualquier wireframe dado, vamos a estar usando y reutilizando ciertos objetos. Convierte estos objetos en símbolos y cualquier cambio que hagas en uno de ellos se reflejará instantáneamente en el resto.

Por ejemplo, aquí tenemos un simple campo de formulario:

Arrastrémoslo al panel de Símbolos (Mayúsculas + Comando + F11)

Ahora podemos sacar este símbolo del panel de Símbolos, tantas veces como queramos, a la mesa de trabajo. Haciendo doble clic en cualquiera de ellos, lo aislaremos (un poco como los objetos agrupados) para poder editarlo. Cualquier cambio que hagamos, en este caso redondear las esquinas del rectángulo, se aplicará a todos y cada uno de los símbolos del campo de formulario que hayamos utilizado.

Una vez que tenemos una colección de símbolos, también podemos guardarlos como un conjunto:

Esto nos permitirá cargarlos en otros archivos para el futuro.

Si quieres aprender más sobre la paleta de símbolos, echa un vistazo a Consejo rápido: Trabajar con símbolos en Adobe Illustrator.

4. Las puntas de flecha son perfectas para señalar

Un gran consejo es aprovechar las puntas de flecha de trazo, algo fácilmente disponible en Illustrator directamente desde CS5. Los wireframes son la oportunidad ideal para describir visualmente las interacciones, el flujo de la aplicación, la navegación y el movimiento.

Hoy en día podemos añadir fácilmente puntas de flecha a los trazos, directamente desde el panel Trazo.

Incluso podemos editar el archivo fuente de Illustrator «Arrowheads.ai», como explica Ryan Cornwell, y añadir nuestras propias puntas de flecha a la mezcla.

Nota: Molestamente, la herramienta cuentagotas no aplica las puntas de flecha junto con otros estilos de trazo, por lo que no es tan fácil como podría ser duplicar el efecto que has elegido. Pero aún así, son perfectas para el wireframing.

5. Ajustar a la cuadrícula para unificar el espaciado y el tamaño

En muchos sentidos, esto es la consecuencia de no utilizar el color. Unificar las dimensiones y el espaciado elimina un elemento de distracción de los wireframes, ayudándonos a concentrarnos visualmente en lo que es importante.

No importa si las dimensiones exactas no reflejan cómo será la UI más adelante; mientras la jerarquía y las relaciones sigan siendo verdaderas, estaremos bien.

Aplica una cuadrícula a tu Artboard yendo a View > Show Grid. Seleccionando Ver > Ajustar a la cuadrícula te ayudará a posicionar tus objetos con precisión.

Para especificar exactamente cómo quieres que sea tu cuadrícula (y recuerda, no vas a buscar detalles minúsculos aquí) ve a Illustrator > Preferencias > Guías & Cuadrícula.. Una vez allí puedes definir la distancia entre las líneas de la cuadrícula, y luego indicar cuántas subdivisiones quieres dentro de esas líneas.

Nota: Siéntete libre de colorear tu cuadrícula en algo que no sea gris; no formará parte del producto final.

6. Utilizar estilos gráficos para botones flexibles

Dependiendo del nivel de fidelidad (lo fiel que sea al sitio web final que pretende) puede tener texto real dentro de, por ejemplo, los botones. Para conseguir que estos botones crezcan y se encojan dependiendo del contenido dentro de ellos, no use objetos, use estilos gráficos.

Comencemos con una cadena de texto ficticio.

Ahora abramos el panel de Apariencia yendo a Ventana > Apariencia.

Usando el panel Apariencia, puedes añadir múltiples rellenos a un objeto. Podemos superponer esos rellenos en el orden que queramos que se muestren; en esta imagen puedes ver varios, todos apilados uno encima de otro.

Por ahora, sólo necesitamos dos rellenos, así que vamos a añadir un relleno oscuro para el texto, y luego un color más pálido para el fondo.

Actualmente, no podemos ver el fondo gris pálido, porque tiene exactamente la misma forma que el relleno superior. Sin embargo, podemos aislar y manipular cada relleno por separado. Selecciona el relleno inferior en el panel Apariencia, luego ve a Efecto > Convertir en forma > Rectángulo redondeado…

Introduce algunos ajustes, lo que consideres oportuno, sólo asegúrate de que el tamaño es relativo al objeto al que estamos aplicando esto.

El relleno gris pálido de la parte inferior ha tomado ahora la forma de un rectángulo redondeado, relativo al tamaño del texto. ¡Un botón! Para aplicar esta apariencia a otros objetos, abra el panel de Estilos Gráficos y arrastre todo el botón hacia él. Su apariencia se guardará como un estilo que podrás reutilizar.

Por ejemplo, aquí tienes una cadena de texto más larga. Con el texto seleccionado, haga clic en el estilo gráfico recién creado (sobre el que he hecho doble clic y al que he cambiado el nombre) para aplicarlo al instante.

7. Configurar algunas mesas de trabajo de uso común

¡La velocidad es el nombre del juego con el wireframing! Garabatear un diseño, seguir adelante, garabatear otro, seguir adelante. Por lo tanto, tiene sentido tener un punto de partida listo al que puedas acceder fácilmente. Puede que te resulte más fácil trabajar primero en una mesa de trabajo masiva, y que los objetos finalizados se guarden en un archivo separado, o puede que prefieras trabajar directamente con mesas de trabajo de tamaño adecuado.

Aquí, por ejemplo, hay un diseño con una pantalla de iPad (1536x2048px) y cuatro pantallas de iPhone 4S (640x960px), aunque puedes preparar un archivo con cualquier número de ejemplos de pantallas de dispositivos. Establezca sus dimensiones preferidas manualmente, o elija uno de los preajustes disponibles en las Opciones de la mesa de trabajo:

Incluya cualquier guía común, nombres de capas, conjuntos de símbolos, etc. Este punto de partida estará disponible al ir a Archivo > Nuevo desde Plantilla…, completo con todos los pedazos que dejó allí.

8. Utilice TextExpander para el texto ficticio

Illustrator no viene con ninguna herramienta de texto ficticio. Hay algunos scripts con los que vale la pena jugar, pero la forma más fácil de conseguir texto ficticio en sus Wireframes de Illustrator es utilizar TextExpander.

Nota: si eres un usuario de Windows, PhraseExpress ofrece una funcionalidad similar a TextExpander

Añade una serie de fragmentos de texto que utilices habitualmente para los wireframes (como un título grande, un título corto, una copia del cuerpo de diferente longitud, el texto típico de los botones, los elementos del menú, etc.) para que estén fácilmente disponibles desde Illustrator.

Al definir una frase clave para cada fragmento, TextExpander sustituirá esa frase por su contenido cada vez que lo escriba, ahorrándole bolsas de tiempo. También puede utilizar las opciones de carpeta para asegurarse de que estos fragmentos sólo tengan efecto en Illustrator, si así lo desea.

Para saber más sobre cómo optimizar su flujo de trabajo con TextExpander, eche un vistazo a Domine TextExpander con estos útiles consejos &trucos.

9. Practica la nomenclatura lógica de los archivos

Ser capaz de visualizar rápidamente los cambios y las ideas es la esencia del wireframing, pero esto puede conducir a una enorme pila de archivos desorganizados si no tienes cuidado. La clave es guardar en etapas significativas y con convenciones lógicas de nomenclatura de archivos.

Por ejemplo, podríamos querer empezar cada nombre de archivo con el nombre de la página en la que estamos trabajando. Luego podría ser sensato utilizar algún tipo de nombre de variante, después del cual el número de versión: page-variant-version.ai

Por ejemplo, podríamos estar trabajando en una página de aterrizaje; una que se concentra en la promoción de una campaña de correo electrónico, o un libro electrónico. Podríamos tener nombres de archivo como:

No sólo mantiene las carpetas del proyecto organizadas, sino que actúa como una forma de versionado manual. Matt Smith discute la idea más en su artículo Wireframing With Illustrator and InDesign.

10. Guardar en Dropbox para facilitar el versionado

Tomando la idea del versionado aún más lejos, guardar tus archivos directamente en Dropbox eliminará esa tarea de tu lista de tareas por completo. Incluso el plan gratuito de Dropbox almacenará una copia de tus archivos cada vez que los guardes, durante treinta días.

Así mismo, Layervault ofrece una maravilla similar en su plan gratuito.

En cualquier caso, esto es especialmente útil si estás colaborando con un equipo. Tener a todos los miembros trabajando desde una ubicación central, con la opción de restaurar cualquier versión si alguien hace algo extraño, es ideal para el trabajo en equipo.

Conclusión

Muchos de estos consejos son totalmente personales para mi propio flujo de trabajo y puede que no se traduzcan perfectamente a tu propia forma de hacer las cosas. Sin embargo, espero que al menos provoquen algo de curiosidad, para que pienses en la forma en la que diseñas los diseños web. Si tienes otros consejos, por favor, compártelos en los comentarios.

Más lecturas

• Creación de alambre con InDesign e Illustrator
• Creación de alambre con Illustrator e InDesign (¡sutil diferencia!)
• Guía para principiantes de creación de alambre
• Illustrator y las puntas de flecha

.