Contenido
- Una metodología receptiva
- ¿Cómo mantengo el contenido primero?
- ¿Por qué?
- 01. Defina sus objetivos comerciales y de usuario
- 02. Consúltelos cada vez que pueda
- 03. No tenga miedo de retroceder
- 04. Empuja a tu propio equipo también
- 05. Defina todas sus necesidades de contenido por adelantado
- ¿Cómo abstraigo el contenido de la presentación?
- Necesitamos dejar de pensar en el contenido en términos de diseño.
- Obliga a tus clientes a planificar su contenido independientemente del diseño.
- Finaliza tu contenido antes de diseñar
- Utilice contenido real, siempre
- Entonces, ¿cómo funcionan los wireframes para proyectos de diseño receptivo?
- Dibujar
- Marco en el navegador
- Anotaciones
- Usa contenido real en wireframes
- ¿Cómo diseño primero para pantallas pequeñas?
- Diseños abstractos de dispositivos al principio
- Usar mosaicos de estilo
- Crea armonía en la interfaz
- Ver todo en el navegador
- Logra un equilibrio con programas estáticos
- Conclusión
Seamos claros: el diseño es la solución solo si se enfoca en los problemas más profundos, el por qué detrás de todo. Un proceso sólido siempre debe guiar nuestro trabajo, pero debemos adoptar algo más flexible. Nuestro medio finalmente ha demostrado ser fluido, ¿no debería hacerlo nuestro proceso? Piense en el diseño del sistema: necesita ver tanto la imagen completa como los pequeños detalles. ¿Imposible? ¡Lejos de ahi!
Frank Chimero lo expresa maravillosamente en su libro The Shape of Design: “Hay una parte en la que el artista se aparta del caballete para obtener una nueva perspectiva de la obra. La pintura es a partes iguales cerca y lejos: cuando está cerca, el artista trabaja duro para dejar su huella; cuando está lejos, evalúa la obra para analizar sus cualidades. Da un paso atrás para dejar que el trabajo le hable ".
Necesitamos dejar que nuestro trabajo, nuestro medio, nos hable. Con el auge del diseño receptivo, finalmente estamos adoptando nuestro medio como se suponía que debía ser: fluido. Es un momento brillante para dar un paso atrás y evaluar el trabajo, analizar y adoptar una nueva forma de hacer las cosas, un nuevo proceso. Atrás quedaron los días de las maquetas estáticas y los diseñadores web que no entienden el código. Es hora de un proceso receptivo.
Una metodología receptiva
Vamos a revelar el gran secreto de un proceso sólido desde el principio de este artículo. Porque estamos locos así. ¿Listo? Un proceso receptivo es un proceso responsable. ¿Vago? Quizás. ¿Tonto? No. Al igual que el movimiento de estándares web anterior, el diseño receptivo está impulsando la web con métodos amigables para el futuro.
Como cualquier proceso de diseño, debe centrarse en el "por qué" detrás de todo. Entonces, ¿por qué existen los sitios web? Para entregar contenido. Eso podría ser basado en tareas, social, informativo ... no importa. Todo se reduce a esto: comience con el por qué, el contenido bien estructurado y las interacciones que importan.
Estas son las preguntas que escuchamos con más frecuencia sobre nuestro proceso de diseño receptivo.
¿Cómo mantengo el contenido primero?
Todos somos muy optimistas al comienzo de un proyecto. "¡Contenido primero!" decimos. “¡Objetivos del usuario! ¡Recuerda lo que es importante! " Es cierto. Pero, ¿qué significa? ¿Cómo se implementa un proceso de contenido primero?
Incluso si lo sabe (o cree que sabe), es fácil olvidarlo a medida que avanza un proyecto. Los proyectos a largo plazo tienen una tendencia a alargarse y seguir (y seguir… y seguir…). Dejamos de pensar en el por qué y empezamos a centrarnos en el cómo. Nos engañamos pensando que nuestros proyectos se pueden dividir en fases separadas de "descubrimiento" y "desarrollo" que pueden existir de forma independiente.
La verdad es que tenemos que seguir preguntando por qué, todo el tiempo. No importa cuánto crea que sabe, no importa cuánta planificación haya hecho: cada vez que toma una decisión, cada vez que diseña un botón o escribe un título, debe preguntar ...
¿Por qué?
¿Por qué estoy haciendo esto? ¿Para quién? ¿Qué objetivo comercial ayudará a que mi cliente logre? ¿Qué necesidad ayudará a abordar a mis usuarios? No se limite a mantener el contenido primero. Mantén el por qué primero.
Esto hace que parezca fácil. Pero para hacerlo bien, tendrás que esforzarte. Empuje a sus clientes y a su equipo a definir sus porqués primero. No Lorem Ipsum, no "llegaremos a eso más tarde". ¡Haz tu tarea! Todos tus cómo deben comenzar con un por qué sólido. En Yellow Pencil, esto ha significado grandes cambios en la forma en que presentamos, estimamos, presupuestamos y planificamos proyectos. Tuvimos que esforzarnos por obtener presupuesto y tiempo para realizar una investigación, una estrategia y una planificación sólidas. Tú también podrías. Pero una vez que sus clientes y sus equipos vean los enormes beneficios de definir las necesidades de contenido desde el principio, nunca mirarán hacia atrás.
Y es nuestro trabajo educarlos. (Lea el excelente libro de Mike Monteiro Design is a Job si desea obtener más información sobre cómo tratar con los clientes). Los clientes pueden tener dificultades para comprender el valor de hacer toda esa investigación y trabajo por adelantado. ¿Y por qué deberían hacerlo? No obtienen nada "terminado" al final y, con demasiada frecuencia, solo reciben una factura y un gran documento de Word.
Eso no es culpa de ellos, es culpa nuestra. Es nuestra responsabilidad hacer un mejor trabajo demostrando ese valor. En cada paso del camino, debemos traer todo de vuelta al por qué tan importante.
Esto es especialmente importante para el diseño receptivo. Un sitio web receptivo no requiere mucho más esfuerzo de desarrollo, pero significa mucha más planificación. Sin embargo, es una planificación que deberíamos haber estado haciendo todo el tiempo. Sea testigo del ciclo de proyecto actual de rediseño cada tres años. ¿Quieres seguir haciendo eso? Seguro que no.
Así que aquí hay tres pasos para mantener el contenido en primer lugar en el proceso de su proyecto.
01. Defina sus objetivos comerciales y de usuario
Establezca una lista priorizada de objetivos comerciales y de usuario para su proyecto. ¿Qué es lo que más quieren saber o hacer sus usuarios? Haz tu investigación. Haga inferencias informadas, no conjeturas descabelladas. Consiga que todas las partes interesadas estén de acuerdo.
02. Consúltelos cada vez que pueda
Cada vez que tome una decisión, cada vez que alguien proponga una nueva característica o elemento de diseño, o una página de contenido, haga que asigne la solicitud a un objetivo comercial y de usuario. ¿Qué necesidad real satisfará esta función? ¿Cuál es la verdadera razón? (Pista: "Porque quiero", "Me gusta mucho el azul" o "Todos están en Facebook" no cuentan).
03. No tenga miedo de retroceder
Esta puede ser complicada. Las relaciones con los clientes pueden ser delicadas y puede resultar tentador abandonar la batalla para ganar la guerra. Pero recuerde, ¡estamos todos juntos en esto! No es negocio contra usuario; nosotros contra ellos.
Satisfacer las necesidades de los usuarios es la mejor manera de satisfacer las necesidades comerciales. ¡Porque sin nuestros usuarios, no tenemos negocio! Los clientes (buenos clientes) no te están contratando para decir "sí" a todo. Por lo tanto, si su cliente solicita algo que no cumple con sus objetivos o las necesidades de sus usuarios, no tenga miedo de desafiarlos. No se trata de ego. Se trata de crear la mejor solución posible.
04. Empuja a tu propio equipo también
Esto también puede ser un desafío cuando se trabaja en un equipo creativo. La separación de funciones (diseño visual, experiencia del usuario, arquitectura de la información, estrategia de contenido, producción de contenido) puede provocar problemas de comunicación. Nos ocupamos, nos abruman los correos electrónicos. Es difícil quedarse con un proyecto de principio a fin, especialmente una vez que "su" trabajo está terminado.
La relación de su equipo es al menos tan importante como la relación con su cliente. Tenemos que recordarnos a nosotros mismos el por qué, al igual que hacemos con nuestros clientes. La colaboración es clave. No puede simplemente "entregar" un plan de contenido, o wireframes o diseños. En la medida de lo posible, tenemos que trabajar de la mano. Es fácil "terminar" un entregable y pasar a otra cosa. Es mucho más difícil quedarse con un proyecto cuando las cosas se ponen difíciles.
Un enfoque en cascada del trabajo creativo simplemente no funciona. El trabajo ágil y colaborativo entre los miembros del equipo genera mejores resultados.
05. Defina todas sus necesidades de contenido por adelantado
Aquí está la cuestión: los sitios web receptivos tardan más en planificarse. Ya no estamos planeando solo para un contexto único. Estamos planificando todos los contextos que conocemos ahora y algunos que aún no existen.
Pero lleva mucho menos tiempo planificar todas esas complejidades desde el principio que volver atrás y actualizar características y funciones que no tuvo en cuenta. Así que dedique el tiempo / esfuerzo / presupuesto. Obliga a tus clientes y a tu equipo a definir (¡y comprometerse con él!) Todo su contenido antes de comenzar con el diseño. Utilice tablas de páginas. Utilice contenido estructurado. ¡Prepara tu contenido ahora mismo! O llorar más tarde.
¿Cómo abstraigo el contenido de la presentación?
Escuchas esto mucho en la esfera de Internet. Pero espera, ¿qué? Y espera, ¿por qué?
Porque la presentación puede (y cambiará). La forma en que diseñamos los sitios web hace 15 años es casi irreconocible por cómo los presentamos ahora. ¿Pero sabes qué no ha cambiado? Palabras. Todavía los usamos. Internet existe principalmente para contenido (basado en texto). Todavía lo usamos para resolver problemas de información; para realizar tareas. Pero si su contenido depende de un medio de presentación (páginas de introducción Flash, ¿alguien?), Es muy probable que no se pueda utilizar en unos años. Y eso apesta.
Necesitamos dejar de pensar en el contenido en términos de diseño.
Nosotros (como industria) hemos capacitado a nuestros clientes para que piensen en el contenido en términos de diseño. “Ponlo en la barra lateral”, decimos. "Eso debería ir en el pie de página". ¡Detener! Para. Detener. No se trata de la ubicación. Se trata de prioridad. ¿Cuál es el contenido más importante para sus usuarios? Porque adivinen qué: el diseño cambia según los contextos. Probablemente no habrá una barra lateral en el diseño de su pantalla pequeña.
¿El supermenú gigante que quiere su cliente? No volaré en un iPhone.
Obliga a tus clientes a planificar su contenido independientemente del diseño.
De acuerdo, no tienes que forzarlos. Motívalos. Animar fuertemente. Las tablas de páginas son excelentes para esto. Si aún no lo ha leído, continúe inmediatamente con la Estrategia de contenido para la Web de Kristina Halvorson y Melissa Rach para obtener más información sobre cómo crearlos. Organícelos en orden de prioridad. No haga referencia a la ubicación ni al diseño. Esto ayudará a sus clientes a pensar en su contenido de una manera más productiva, y también hará que el proceso de creación de contenido se mueva, antes de finalizar los wireframes o el diseño.
Finaliza tu contenido antes de diseñar
De acuerdo, esto no siempre es posible. Pero cuanta más incertidumbre pueda eliminar antes de comenzar a diseñar, menos tendrá que volver atrás y cambiar las cosas más adelante.
Utilice contenido real, siempre
Si es posible, utilice contenido de casos extremos: muestre a sus clientes las páginas, imágenes y menús más complicados. Esto evitará sorpresas más adelante en el proceso, cuando vean su contenido más desordenado en el producto terminado.
Los wireframes funcionales en el navegador marcan una gran diferencia. Permita que sus clientes observen cómo su contenido se mueve y cambia en una variedad de tamaños de pantalla. Indíquelo mientras presenta sus wireframes (está haciendo presentaciones en persona, ¿verdad?) Demuéstreles cómo la prioridad de su información sigue siendo la misma en todos los tamaños de pantalla, mientras cambia el diseño.
Entonces, ¿cómo funcionan los wireframes para proyectos de diseño receptivo?
Creemos firmemente que el diseño de interacción para RWD debe ingresar al navegador de forma rápida y frecuente. Es prácticamente imposible crear un documento estático que describa todo. Claro, podríamos crear un documento que demuestre tres, cuatro o cinco puntos de quiebre, pero eso es solo una fracción de la historia. ¿Qué pasa con todos los momentos entre los puntos de ruptura? Eso sucede en el navegador.
Dibujar
Aún así, es bueno poder esbozar rápidamente sus ideas de manera colaborativa. No es necesario que esto suceda en ningún medio en particular, pero hay algo sobre el lápiz sobre el papel. El objetivo aquí es sacar ideas de forma rápida e iterativa. Nos encanta hacer bocetos siempre que sea posible, e incluso hay una aplicación para eso: UI Sketcher.
Marco en el navegador
Aquí está el boleto real para nosotros. Nos encanta reutilizar patrones y sistemas al demostrar RWD en el navegador. Por supuesto, podríamos crear nuestro propio sistema desde cero cada vez, pero eso no nos ayuda a nosotros ni a nuestros clientes.
También nos gusta utilizar marcos de creación de prototipos de respuesta rápida, como Bootstrap de Twitter o Zurb's Foundation. Personalmente, nos inclinamos por Foundation porque se adapta a nuestro flujo de trabajo. Sería genial si cualquiera de los dos adoptara un enfoque de pantalla pequeña y bajo ancho de banda primero, pero así es como lo hacemos.
Anotaciones
Las anotaciones para los wireframes de RWD son esenciales pero, encontramos, a menudo se pasan por alto. Dígalo en voz alta: documentación, documentación, documentación! Hemos visto algunos ejemplos de esto de amigos y creemos que el jurado aún está deliberando sobre la "mejor" forma de anotar correctamente los wireframes receptivos en el navegador. Como se mencionó anteriormente, usamos regularmente Foundation by Zurb y nos gusta usar su complemento Reveal para mostrar nuestras anotaciones. Estas anotaciones solo aparecen para pantallas más grandes y, idealmente, se pueden activar y desactivar.
Usa contenido real en wireframes
Ha habido mucho debate en torno a Lorem Ipsum en wireframes y maquetas de diseño, pero si no tienes contenido real en tus wireframes, lo estás haciendo mal. El contenido informa las decisiones de interacción y le dice cuándo se romperá un diseño. ¿Cómo puede Lorem Ipsum hacer eso?
¿Cómo diseño primero para pantallas pequeñas?
Durante años diseñamos con una resolución específica en mente. Era una configuración predeterminada. Ya sea dibujando en cuadernos, haciendo wireframes en OmniGraffle, trabajando en Photoshop o diseñando en el navegador, sabíamos cuál sería el tamaño de nuestro lienzo. Esos días pasaron. Creemos firmemente en el diseño para la pantalla pequeña primero y en la mejora progresiva. Entonces, ¿cómo cambia un diseñador su flujo de trabajo de un tamaño de lienzo fijo a uno fluido?
Diseños abstractos de dispositivos al principio
A menos que estemos diseñando para un dispositivo específico, es esencial que dejemos de pensar en dispositivos y empecemos a pensar en experiencias. Todas las siguientes técnicas ayudan a los diseñadores a crear sus experiencias mientras pueden permanecer independientes del dispositivo (hasta cierto punto).
Usar mosaicos de estilo
Utilice Style Tiles para establecer la dirección e iterar rápidamente. Style Tiles permite al diseñador establecer la dirección de un sistema de diseño sin ser demasiado específico. Su creadora, Samantha Warren, los describe de esta manera:
“Los mosaicos de estilo son para cuando un moodboard es demasiado vago y una composición es demasiado literal. Style Tiles establece una conexión directa con los elementos reales de la interfaz sin definir el diseño ".
Crea armonía en la interfaz
Imagina un lienzo con todos los elementos visuales e interactivos reunidos. No para ver un diseño de interfaz de usuario en particular, sino para ver cómo funcionan todos los elementos juntos. Este es un lienzo de armonía de interfaz. Un lienzo de armonía de interfaz permite al diseñador mantener las ideas juntas, pero sin centrarse en un tamaño de pantalla único. Además, es una excelente manera de comunicar y documentar de manera eficiente los elementos diseñados en lugar de producir una guía de estilo completa.
Si está interesado en seguir leyendo, puede encontrar dos artículos excelentes sobre el tema de la armonía de la interfaz aquí y aquí.
Ver todo en el navegador
Todo debe reunirse en el navegador. Aquí es donde el diseño de la interfaz de usuario realmente cobra vida. Ver cómo el contenido real interactúa con los elementos visuales es crucial. No hay forma de hacer esto correctamente en un entorno estático. Necesita ver cómo responderá en el medio nativo.
Logra un equilibrio con programas estáticos
Existe un flujo entre el navegador y los programas estáticos como Photoshop. Debe existir un equilibrio que permita crear el sistema de diseño de forma fluida y natural. Claro, esto sucederá en Photoshop, pero un diseñador que diseña de manera receptiva también necesita aprender a pensar de manera creativa en el navegador.
Conclusión
Una vez más, con sentimiento: comience con el por qué, con contenido bien estructurado e interacciones importantes. Concéntrese primero en la pantalla pequeña y el ancho de banda bajo, y mejore progresivamente sus conceptos de respuesta. Nuestro medio está llegando a la mayoría de edad. Tenemos la oportunidad de hacer las cosas bien y cambiar el mundo, un proyecto web a la vez.
Descubra las 20 mejores herramientas de wireframing para diseñadores
Steve Fisher coordina la investigación, el análisis, el diseño y la estrategia en Yellow Pencil en Canadá, y habla sobre temas como RWD, UX y código abierto. Alaine Mackenzie es estratega de contenido en Yellow Pencil.
