Creación de wireframes de contenido para un diseño receptivo

Mientras dirigía mi curso de diseño web receptivo entre 2011 y 2012, seguí tropezando con el proceso de creación de esquemas. Mis alumnos tendían a centrarse en el wireframe como el juego final en el proceso de planificación. No entendieron que el diseño receptivo se enfoca en cómo los usuarios accederán al contenido.

Solo puede imaginar mi alivio cuando me encontré con un video de Stephen Hay hablando en la conferencia Beyond the Desktop en 2012. Allí, en su charla sobre diseño receptivo, presentó el concepto de wireframe de contenido. Esto fue un gran alivio para mí.

Lectura adicional en SmashingMag:

• La guía del escéptico para la creación de prototipos de baja fidelidad
• Cómo la creación de un lenguaje de diseño puede optimizar su diseño de UX
• Más allá del wireframing: el proceso de diseño de UX de la vida real

Solo sabía que había un paso antes de que el proceso se volviera real, pero no podía articularlo. En esta publicación, describiré los métodos que utilizo para pasar del contenido a la estructura alámbrica receptiva , y cómo puede hacerlo usted también.

Introducción al Wireframe de contenido

El concepto de wireframe de contenido es bastante simple de entender porque es una rama de la filosofía de diseño más básica: Enamórate del usuario, no de la tecnología.

Los wireframes de contenido hacen precisamente eso. Bloquean las categorías generales de contenido y te obligan, como lo dice tan bellamente Stephen, a diseñar desde el contenido hacia afuera.

Realmente no es complicado. De hecho, implica dos pasos:

1. crear un inventario de contenido,
2. crear una jerarquía visual de los sobrevivientes de esa lista.

Haz eso y tendrás un producto potencial para tu cliente. Lo que tiende a hacer es desviar la atención del cliente de lo que la “cosa” va adónde y hacia lo que es importante: el flujo de información.

No ciencia espacial

El problema clave con los wireframes, para mis alumnos y otros diseñadores, es que tienden a adquirir una importancia injustificada. Es casi como el final de un programa de renovación en la televisión, cuando todos dicen "Oohs" y "Ahhs" cuando el cliente camina por la casa.

No para mí. Prefiero la escena de la renovación de la cocina, cuando el contratista saca una hoja de papel y un lápiz de carpintero y se sienta con el cliente en la mesa de la cocina. Luego, dibujan un contorno simple de la habitación y dicen: "¿Qué tal si quitamos esta pared, ponemos una isla aquí y movemos el mostrador allá?"

El carpintero establece la "intención" de su enfoque del proyecto, y el cliente se enfoca en las partes importantes del proyecto, en lugar de las baldosas, los accesorios, la pintura y la iluminación.

En su libro Responsive Design Workflow, Hay usa el término "estructura de referencia de contenido" porque "describe cómo las estructuras de alambre tratan el contenido: simplemente se refieren a él en lugar de representarlo ".

Una estructura alámbrica de contenido, como el boceto de nuestro contratista, representa la ubicación (una pared, un mostrador, un encabezado, un pie de página) y establece una jerarquía y un flujo de información . Debido a que el proceso es iterativo, comenzar la conversación con un simple "¿Qué tal..." en lugar de "Así es como..." lo aleja del ámbito de la ciencia espacial y lo coloca donde comenzó originalmente: cajas y flechas de la vieja escuela.

Una vez que se establece, podemos pasar al proceso de desarrollo de estructura alámbrica de alta y baja fidelidad. Veamos cómo un wireframe de contenido puede enfocar la conversación deconstruyendo una página simple.

Deconstrucción hecha a mano

Visito Made by Hand regularmente. Como sugiere el nombre, el sitio web celebra a los artesanos que hacen las cosas a mano. La página de inicio presenta una serie de videos, y cuando la visitas por primera vez, parece bastante austera, con pocas florituras. Esto tiene sentido porque las películas mismas son lo importante, no cualquier otro contenido.

El inventario de contenido de la página de inicio es, comprensiblemente, bastante básico y consta de:

• un encabezado y navegación,
• cinco videos (a los que nos referiremos aquí como el principal y los videos 1 a 4),
• un pie de página

Aún así, podemos ver una jerarquía de información definida en juego. La lista de contenido principal es un poco vaga, pero una vez que comprende que la intención es presentar una serie de videos que destaquen a los artesanos individuales, la prioridad de cada pieza de contenido queda clara:

• vídeo principal,
• vídeos 1 a 4,
• el pie de página,
• el encabezado y la navegación.

Ver el encabezado y la navegación en la parte inferior de la pila puede parecerle extraño. Sin embargo, el propósito de la página es que veas los videos y, si te gustan, te suscribas para recibir notificaciones periódicas de contenido nuevo. El encabezado y la navegación simplemente están ahí para facilitar la navegación del sitio web.

En muchos aspectos, el viejo adagio "El contenido es el rey", generalmente atribuido a Bill Gates, impulsa este sitio web. El foco es la colección de videos y nada más. Esto plantea un punto importante: una estructura alámbrica de referencia de contenido establece la precedencia del contenido, no el flujo de la página.

Con esa lista en la mano, puede pasar a crear los esquemas de referencia de contenido.

Creación de wireframes de referencia de contenido

Aunque Stephen Hay es un gran defensor de la creación de estos wireframes de referencia de contenido con un editor de código como Coda o Adobe's Brackets, para aquellos de nosotros que tenemos, digamos, problemas con el código, un editor visual como UXPin o Adobe's Illustrator o un un editor receptivo como Macaw o Webflow sería una opción sólida. Cada uno tiene sus usos, aunque un editor receptivo tiene la ventaja de brindarle al diseñador más de una perspectiva sobre su trabajo, específicamente, cómo responde su trabajo a diferentes tamaños de pantalla. Eso es crucial, dada la amplia gama de pantallas de hoy.

No hay una mejor herramienta; elige el que mejor se adapte a ti. En este tutorial, recorreremos Illustrator. Este es el por qué:

• Si bien Illustrator no es una herramienta realmente receptiva, sus mesas de trabajo le permiten comenzar con un enfoque móvil primero y, mediante el uso de puntos de interrupción preestablecidos o personalizables, para desarrollar rápidamente una versión de escritorio.
• Sus cuadrículas personalizables permiten la consistencia del diseño.
• Le permite crear cuadros de tamaño preciso para estructuras alámbricas haciendo clic y configurando las dimensiones.
• Si prefiere Photoshop para maquetas de mayor fidelidad, puede copiar y pegar su estructura de alambre de contenido desde Illustrator para establecer la base.

Nota: Si prefiere trabajar en código cuando realiza una estructura alámbrica o crea prototipos de manera receptiva, no dude en pasar a la sección "Pasos siguientes" en la parte inferior para obtener otros recursos útiles.

Un enfoque móvil primero para los wireframes de contenido

Para este breve tutorial, usaremos Illustrator como parte de un enfoque móvil primero, para centrarnos en el contenido más importante. Crearemos cinco ventanas gráficas para sentar las bases de un esquema de contenido receptivo.

1. Crea los Documentos

En Illustrator, cree cinco documentos nuevos con los siguientes anchos y altos (en píxeles):

• 320 × 800
• 768 × 1200
• 992 × 1400
• 1224 × 1600
• 1440 × 1800

(Dependiendo de la versión de Illustrator que utilice, también puede crear diferentes mesas de trabajo en el mismo documento).

2. Crea los Contenedores

En el documento de 320 píxeles de ancho, haga siete cuadros sin líneas llenos de gris neutro.

3. Crea las etiquetas

Coloque texto sobre cada cuadro, en orden descendente: encabezado, video principal, video 02, video 03, video 04, video 05 y pie de página. He usado texto blanco para contrastar con los cuadros relativamente oscuros.

4. Cambiar el tamaño de las cajas

Haga que el cuadro de video principal sea un poco más grande que los demás para indicar su prioridad . Si es necesario, reduzca el tamaño del encabezado y el pie de página, pero manténgalos a todo lo ancho .

5. Copia las cajas

Ahora que tiene sus tamaños y etiquetas relativos, copie los cuadros a los otros documentos o mesas de trabajo.

Cambie su tamaño según sea necesario y recuerde que estos cuadros son aproximados. Representan la existencia del contenido, no el tamaño o el espacio precisos del contenido.

Próximos pasos

No hay gran revelación u otro entusiasmo con la creación de estructuras de referencia de contenido.

Se ajustan al flujo de trabajo entre el inventario de contenido y los wireframes de baja fidelidad. Esto se debe a que su propósito es simplemente establecer una jerarquía de información y, si el cliente está involucrado, hacer que piensen más en el concepto de contenido y flujo de información, en lugar del contenido real en sí.

Todo el proceso es más una conversación de "¿Qué tal..." que un "Así es como..." Una vez que todos estén de acuerdo, la siguiente iteración del proyecto consistirá en verter contenido real de baja fidelidad en los cuadros que conforman los esquemas de referencia de contenido.

Como hemos visto, puede practicar la estructuración de contenido mediante la deconstrucción de sitios web populares en sus componentes básicos . Comience con contenedores de información aproximados, agregue el contenido real y luego comience a cincelarlos en formas más finalizadas. Al hacerlo, podrá diseñar mejor en torno a lo que realmente les importa a los usuarios: el contenido.

• UXPin Esta herramienta de diseño colaborativo es útil para diseñar una estructura alámbrica aproximada y luego agregar interacciones para crear un prototipo rápido.
• “Flujo de trabajo de diseño receptivo” (diapositivas), Stephen Hay, Mobilism 2012 Estas diapositivas resumen de manera concisa cómo diseñar de manera eficiente para diseños receptivos. Hay ofrece excelentes consejos sobre la auditoría del contenido, la priorización del contenido, la estructuración del contenido y el uso de marcos de desarrollo.
• “Wireframes de referencia de contenido (PDF), Neil Hao Esta es una buena descripción general de un enfoque basado en código para el wireframing de contenido, descrito a través de un escenario de diseño realista.
• "Mobile First", ZURB University ZURB, una agencia de diseño, ofrece este útil portal de recursos, que brinda contexto para la estructuración de contenido.
• “Sumérgete en la creación de prototipos receptivos con Foundation”, Jonathan Smiley, el útil tutorial de A List Apart Smiley muestra cómo estructurar y crear prototipos de diseños receptivos en el código. Si bien no es totalmente móvil primero, Smiley hace un buen trabajo al explicar cómo mostrar contenido de manera consistente en todos los dispositivos.
• “Design Last”, Rik Schennink, Smashing Magazine Este interesante artículo trata sobre cómo diseñar de manera receptiva con contenido y HTML primero. Al hacerlo, combinará el contenido con la estructura desde el principio.