¿Recuerda los buenos viejos tiempos? Sabes de qué días estoy hablando; los días no hace mucho tiempo cuando solíamos diseñar sitios web para anchos fijos. Mirando hacia atrás ahora parecen un momento más simple; un tiempo más feliz; un momento en el que podía recitar cada fuente que estaba disponible para usar en línea sin pensarlo dos veces. La verdad es que el Diseño Web Adaptable cambió todo. El mundo era plano y ahora es redondo, estaba ciego y ahora veo, la red era píxeles y ahora es porcentajes.
Con la introducción de RWD, es vital que nosotros, como diseñadores, desarrollemos nuestro flujo de trabajo para adaptarnos mejor a las demandas de la nueva web. Muchos de nosotros hemos expresado nuestras frustraciones sobre cómo el enfoque de píxeles fijos de Photoshop no es adecuado para diseñar los diseños fluidos necesarios para un sitio web receptivo, pero no se han ofrecido alternativas útiles. El mundo del diseño web está desesperado por un software a medida que se construya desde cero con RWD en mente. Productos como Adobe Reflow son un gran comienzo, ya que muestra que Adobe está trabajando al menos en una solución, pero después de pasar unas pocas horas con ella durante el fin de semana, puedo ver que todavía tiene un largo camino por recorrer antes de que se convierta en un agregado útil a mi flujo de trabajo. Con nosotros en el limbo entre un software prehistórico y la promesa de lo que vendrá mañana, tenemos que crear flujos de trabajo alternativos para acomodar las deficiencias de nuestro actual 'software de diseño' mediante la introducción de otras herramientas y procedimientos que ayudarán a cerrar la brecha entre píxeles fijos y capacidad de respuesta de fluidos.
Lo siguiente no es de ninguna manera una lista de cómo se deben abordar los proyectos de RWD, sino más bien cómo he adaptado mi flujo de trabajo para adaptarme al nuevo paisaje.
Me he mantenido en el límite entre Photoshop / Fireworks / Illustrator, ya que cada uno ha luchado por la supremacía y ha sido testigo de personas inocentes quedar atrapadas en un fuego cruzado de píxeles. Los diseñadores tienden a tener su favorito y preferirían morir con una muerte lenta y dolorosa que admitir que otro software tiene una característica que en realidad podrían querer. Mi opinión es que debe diseñar en cualquier software que le permita trabajar de la manera más eficiente y explorar sus ideas rápidamente, ya sea Photoshop, Powerpoint o Paint.
Es casi irrelevante que elija, ya que debería ser solo un punto de partida para experimentar rápidamente con diferentes diseños. Personalmente, prefiero Fireworks ya que cumple más de las cajas de lo que quiero en un software. Trato de no meterme en los detalles en esta etapa y realmente tratar de tomar algunas decisiones preliminares sobre el diseño y la estructura, al igual que algunos wireframes elegantes.
Todo lo que hay que decir sobre el uso de Lorem Ipsum en las maquetas del sitio ha sido dicho, así que confía en mí en este caso y, cuando sea posible, utiliza contenido real para diseñar. Donde no sea posible, use el contenido de los últimos años, escriba su propio contenido o use la letra de "Vela en el viento", pero no use Lorem ipsum. Si no usa contenido real, será difícil ver en qué punto de interrupción deben ajustarse ciertos elementos.
Este es solo el ancho en el que me gusta comenzar, ya que está cerca de una pequeña experiencia de escritorio, que luego es fácil de ampliar para pantallas más grandes y más bajas para tablets / experiencias móviles. Algunas personas prefieren comenzar más amplias, mientras que otras prefieren diseñar primero para dispositivos móviles, solo se reduce a lo que funciona para usted.
RWD se trata de contenedores de fluido que crecen y se contraen para llenar el área disponible del navegador, por lo que diseñar en porcentajes en lugar de píxeles asegurará que sus diseños fluyan en proporción al navegador y requieran menos puntos de interrupción que el diseño basado en píxeles equivalentes.
Tiendo a tener In-Design abierto en segundo plano para poder encontrar fácil y rápidamente un porcentaje de elemento basado en píxeles. InDesign es excelente para manejar este tipo de cálculos y puede averiguar fácilmente qué tamaño tendrá un elemento de 428px x 333px al 46% de su ancho original, mientras mantiene sus proporciones o tal vez descubra el 27% de un ancho de navegador de 889px en segundos. Los resultados siguen apareciendo en píxeles para que pueda volver al software en el que está diseñando y crear ese contenedor en píxeles, sabiendo que será relativo al porcentaje del espacio de trabajo que haya definido.
Si crees que me exploto sobre el uso de contenido real dentro de tus diseños, deberías escucharme hablar sobre diseñando estilos de tipografía en Photoshop (o equivalente). La tipografía se verá muy diferente en el navegador de lo que parece en los paquetes usuales de Adobe, lo que significará más trabajo para usted ajustar el diseño una vez que esté construido.
Ahórrate el dolor de cabeza y usa aplicaciones como typecast.com para experimentar y crear tus estilos de fuente con. Una vez que esté satisfecho con el diseño y el estilo de su tipografía, puede exportar su espacio de trabajo completo como PNG transparente para colocar dentro de sus maquetas de diseño. No necesitará tener ninguna de las fuentes elegidas instaladas en su sistema, ya que solo se tratará de una imagen, pero tampoco podrá editarla sin tener que regresar al encasillado.
Por ahora, debe tener su diseño de 1000px de ancho (o el ancho que elija al principio) completado con el ancho de los contenedores que mantienen sus diversos contenidos traducidos en porcentajes. Ahora comenzaría a crear una grilla a medida que imita el ancho de los contenedores que uso dentro de mi diseño. Entonces, si tengo una barra lateral que es 30% de ancho y un área de contenido que es 55% de mi navegador con 5% de relleno en cada lado, mi cuadrícula puede parecerse a 5%, 30%, 5%, 55%, 5%.
Puedes usar aplicaciones como Gridset para construir su grilla a medida, pero de nuevo, prefiero usar InDesign ya que puede agrupar elementos y hacer que se redimensionen en proporción entre sí.
Ahora tomo mi cuadrícula que he creado usando InDesign y la pego en un documento de 1600px de ancho (o el ancho máximo que desea que tenga su sitio). Luego empiezo a cambiar el tamaño de mi grilla más y más estrecha en incrementos de 100px hasta 300px de ancho. En cada incremento, compruebo el ancho de cada contenedor de contenido y me aseguro de que aún sea lo suficientemente grande como para albergar su contenido. Cuando llego a un ancho que creo que hace que un contenedor sea demasiado pequeño, simplemente edito la cuadrícula para que encaje. Así que si a 800px de ancho la barra lateral que había creado al 30% del ancho del navegador se vuelve demasiado estrecha, podría agregarle un 10% extra, haciendo que ahora sea el 40% del ancho de mi navegador y lo suficientemente amplia como para albergar el contenido deseado .
La clave para recordar es que si haces un contenedor más ancho, necesitas hacer otro contenedor más estrecho en la misma cantidad para mantener el ancho total del 100%. Esta es la mejor manera que he encontrado para definir los puntos de ruptura (el punto en el que cambiará el diseño) ya que solo agrega otro punto de interrupción cuando el contenido se rompe y no al ancho de un dispositivo nuevo. Este procedimiento puede consumir mucho tiempo, ya que terminará con 14 vistas previas diferentes de su cuadrícula, ya que crece de 300px a 1600px de ancho, pero es la mejor manera que he encontrado para comprobar cómo su diseño verá anchos de pantalla diferentes antes de que esté desarrollo.
Otra opción es usar una herramienta como Adobe Reflow eso también le permite agregar contenido a contenedores y luego arrastrar su espacio de trabajo y ver la escala de elementos. También puede determinar sus puntos de quiebre cambiando el tamaño de su área de trabajo hasta que se rompa el contenido y simplemente agregue una consulta de medios. Reflow aún está en versión Beta pública y se puede descargar desde aquí .
Después de haber escalado sus diseños en incrementos de cada 100px, identificaría algunos anchos en los que el contenido se rompe y lo rectifica al agregar un punto de interrupción. Ahora puede volver al software en el que creó los diseños originales y cambiar el diseño de su diseño en los anchos que identificó como puntos de ruptura. Esto significa que terminará diseñando solo 2, 3 o 4 diseños diferentes (dependiendo de la complejidad de su grilla y de la cantidad de puntos de corte que necesite) que abarcarán desde 300px hasta 1600px.
Si ha seguido este proceso, ahora debe tener un conjunto de diseños que coincidan con sus puntos de quiebre, un documento que muestra cómo su cuadrícula está compuesta por porcentajes del ancho del navegador y cómo se derrumba para pantallas más pequeñas, así como todos sus estilos de tipografía ya creados y probados en el navegador. Este debería ser un punto muy fuerte para que un desarrollador pueda comenzar a construir sus diseños con precisión y sin tener que lidiar con el contenido que se rompe en ciertos anchos más adelante.
Este proceso puede parecer muy largo pero sin una herramienta específica diseñada completamente para RWD, es la mejor manera que he encontrado para probar fácilmente mi diseño receptivo utilizando un software no receptivo y comunicar claramente mis ideas a un desarrollador. Esta no es, de ninguna manera, la única forma de abordar un proyecto de RWD, pero es lo mejor que he encontrado.
¿Qué ha cambiado el diseño receptivo sobre su flujo de trabajo? ¿Qué consejos compartirías? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de flujo a través de Shutterstock.