Krypton Solid

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

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

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

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

Solo puedes 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 estructura alámbrica de contenido. Fue un gran alivio para mí.

Otras lecturas en SmashingMag:

Sabía que había un paso antes de que el proceso se volviera real, pero no pude articularlo. En esta publicación, describiré los métodos que utilizo para pasar del contenido al wireframe receptivo – y cómo tú también puedes.

Presentamos The Content Wireframe

El concepto de estructura alámbrica de contenido es bastante simple de entender porque es una consecuencia de la filosofía de diseño más básica: enamorarse del usuario, no de la tecnología.

Stephen Hay presentación en Beyond the Desktop.

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

Realmente no es complicado. De hecho, se trata de dos pasos:

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

Haga eso y tendrá un posible entregable para su cliente. Lo que tiende a hacer es desviar la atención del cliente de qué “cosa” va hacia dónde y hacia lo que es importante: el flujo de información.

No es ciencia espacial

El problema clave con los wireframes, para mis estudiantes 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 «Oohs» y «Ahhs» cuando el cliente llega a caminar 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 sacamos esta pared, ponemos una isla aquí y movemos el mostrador para allá?»

El carpintero está exponiendo la «intención» de su enfoque del proyecto, y el cliente se centra en las partes importantes del proyecto, en lugar de en los azulejos, los accesorios, la pintura y la iluminación.

En su libro Flujo de trabajo de diseño receptivo, Hay utiliza el término «estructura alámbrica de referencia de contenido» porque «describe cómo las estructuras alámbricas tratan el contenido: simplemente referir a eso en contraposición a representando eso.»

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 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 cómo …» lo mantiene alejado del ámbito de la ciencia espacial y lo coloca donde comenzó originalmente: cajas y flechas de la vieja escuela.

Una vez establecido, podemos pasar al proceso de desarrollo de wireframes de baja y alta fidelidad. Veamos cómo un wireframe de contenido puede enfocar la conversación al deconstruir una página simple.

Deconstruyendo hecho a mano

Captura de pantalla de Hecho a mano
Hecho a manoLa página de inicio tiene una jerarquía de información distinta. (Ver versión grande)

yo visito Hecho a mano regularmente. Como su nombre indica, el sitio web celebra a los artesanos que hacen cosas a mano. La página de inicio presenta una serie de videos, y cuando la visita por primera vez, parece bastante austera, con pocas florituras. Esto tiene sentido porque lo que importa son las películas en sí mismas, no cualquier otro contenido.

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

  • 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 comprendes que la intención es presentar una serie de videos que destaquen a los artesanos individuales, la prioridad de cada contenido queda clara:

  • video principal,
  • videos 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 lograr que veas los videos y, si te gustan, que te suscribas para recibir notificaciones periódicas de contenido nuevo. El encabezado y la navegación están simplemente 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 realmente los wireframes 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 de Adobe Soportes, para aquellos de nosotros que somos, digamos, desafiados por el código, un editor visual como UXPin o de Adobe Ilustrador o un editor receptivo como Guacamayo o Webflow sería una opción sólida. Cada uno tiene sus usos, aunque un editor receptivo tiene la ventaja de darle al diseñador más de una perspectiva sobre su trabajo, específicamente, cómo su trabajo responde a diferentes tamaños de pantalla. Eso es crucial, dada la amplia gama de pantallas de hoy.

No existe una mejor herramienta; elija el que mejor se adapte a sus necesidades. En este tutorial, recorreremos Illustrator. Este es el por qué:

  • Aunque Illustrator no es una herramienta verdaderamente receptiva, sus mesas de trabajo le permiten comenzar con un enfoque centrado en los dispositivos móviles y, utilizando puntos de interrupción predefinidos o personalizables, construir rápidamente una versión de escritorio.
  • Sus rejillas personalizables permiten la consistencia del diseño.
  • Le permite crear cuadros de tamaño preciso para wireframes haciendo clic y estableciendo las dimensiones.
  • Si prefiere Photoshop para maquetas de mayor fidelidad, puede copiar y pegar su estructura alámbrica de contenido de Illustrator para establecer las bases.

Nota: Si prefiere trabajar en código al hacer wireframing o prototipos de manera receptiva, no dude en pasar a la sección «Pasos siguientes» en la parte inferior para ver otros recursos útiles.

Un enfoque centrado en los dispositivos móviles para los wireframes de contenido

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

1. Cree los documentos

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

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

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

Captura de pantalla de la interfaz de la herramienta UXPin
La interfaz de la herramienta. Fuente: Ilustrador Adobe) (Ver versión grande)

2. Crea los contenedores

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

Captura de pantalla de la interfaz de la herramienta UXPin
La interfaz de la herramienta. (Fuente: Ilustrador Adobe) (Ver versión grande)

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.

Captura de pantalla de la interfaz de la herramienta UXPin
La interfaz de la herramienta. (Fuente: Ilustrador Adobe) (Ver versión grande)

4. Cambiar el tamaño de las cajas

Haz que la caja de video principal sea un poco más grande que las demás para indicar su prioridad. Si es necesario, reduzca el encabezado y el pie de página: pero mantenlos a lo ancho.

Captura de pantalla de la interfaz de la herramienta UXPin
La interfaz de la herramienta. (Fuente: Ilustrador Adobe) (Ver versión grande)

5. Copie las cajas

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

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

Captura de pantalla de la interfaz de la herramienta UXPin
La interfaz de la herramienta. (Fuente: Ilustrador Adobe) (Ver versión grande)

Próximos pasos

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

Encajan en el 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 piense más en la concepto del contenido y el 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 «Aquí es cómo …» Una vez que todos estén de acuerdo, la próxima iteración del proyecto implicará verter contenido real de baja fidelidad en los cuadros que componen los wireframes de referencia de contenido.

Como hemos visto, puedes Practique el wireframing de contenido al deconstruir sitios web populares en sus bloques de construcción básicos.. Comience con contenedores aproximados de información, agregue el contenido real y luego comience a cincelarlos en formas más definitivas. 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 cómo auditar contenido, priorizar contenido, estructurar contenido y usar 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.
  • «Móvil primero, ”ZURB University ZURB, una agencia de diseño, ofrece este útil portal de recursos, que proporciona contexto para el contenido de wireframing.
  • «Sumérjase en la creación de prototipos receptivos con Foundation, ”Jonathan Smiley, el útil tutorial de A List Apart Smiley muestra cómo hacer wireframes y prototipos de diseños receptivos en 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, emparejará el contenido con la estructura desde el principio.

Deja un comentario