El diseño web receptivo requiere una forma muy diferente de pensar sobre el diseño que es a la vez desafiante y emocionante. El arte del diseño ya era lo suficientemente complejo para los siglos en que estaba definido por elementos fijos, ahora las cosas se están volviendo exponencialmente más complicadas a medida que los diseños se vuelven cada vez más adaptables.
Para ayudar a reprogramar su cerebro para que considere los diseños de nuevas formas, vamos a echar un vistazo a algunos patrones de diseño de respuesta interesantes que están implementando diseñadores con talento en toda la web.
Comenzando pequeño
Una de las formas más populares en las que veo que se está implementando el diseño responsivo es simplemente asignar un ancho fluido a las columnas de contenido en la página, que se vuelven cada vez más estrechas a medida que el ancho de la página disminuye hasta el salto principal a un diseño móvil de una sola columna . Podemos ver esta técnica en funcionamiento en el sitio web del hotel de lujo 137 Pillars House.
Como puede ver, el diseño realmente solo pasa por una transformación importante. El resto de la adaptación es muy gradual y es simplemente un estrechamiento del diseño inicial.
Esto parece ser la cantidad de diseñadores que están metiendo sus proverbiales dedos para probar las aguas del diseño receptivo. Es un buen lugar para comenzar, ya que puede requerir mucho menos tiempo y esfuerzo que múltiples transformaciones importantes, al mismo tiempo que ofrece el beneficio de ofrecer una página web que se ve muy bien en cualquier tamaño de vista.
Sin embargo, en lugar de simplemente coquetear con capacidad de respuesta, quiero alentarlo a dar el paso y explorar las vastas posibilidades que ahora están disponibles para usted en términos de diseño de diseño. No me malinterpretes, no hay nada de malo en el enfoque anterior, pero siempre es una buena idea llevar tus habilidades un paso más allá y estirar lo que consideras capaz de lograr.
Mondrian
Nuestro primer patrón de diseño web sensible fue uno que Piet Mondrian hubiera apreciado. Utiliza tres áreas simples y grandes de contenido separadas por líneas gruesas. El estado inicial en sí es bastante versátil y puede resistir bien bajo una reducción de ancho bastante intensa.
Una vez que se vuelve demasiado estrecho para el estado inicial, el diseño de pantalla ancha se adapta y se convierte en un diseño vertical. Esto se logra tomando los dos cuadros más pequeños a la derecha y moviéndolos debajo del cuadro grande y destacado. Este diseño luego se desglosa en nuestra vista móvil de una sola columna estándar donde cada parte del contenido simplemente se apila debajo de la última.
En la naturaleza
Encontramos este patrón utilizado en el sitio web de Andersson-Wise, una firma de arquitectura. Podemos ver que es perfecto para mostrar fotos grandes y hermosas. Para complementar el enfoque principal, la foto, los dos cuadros del lado son simples y están rellenos con un color sólido muestreado de la imagen. El tipo es fuerte y limpio, lo que le da al sitio una sensación muy sofisticada.
Dado que el diseño está tan controlado por la caja, es un patrón de respuesta bastante simple para envolver su mente. Si tiene una cantidad mínima de contenido para trabajar, debería darle una oportunidad.
Galeria basica
Las galerías de miniaturas son un patrón de diseño popular que ha existido durante casi tanto tiempo como la web. En estos días, los diseñadores suelen mantenerlos en un nivel mínimo: rectángulos simples dispuestos de manera uniforme sobre un fondo sólido. Este formato es muy fácil de refluir a medida que cambia la ventana gráfica. Simplemente tienes que reducir el número de columnas unas cuantas veces.
Repasamos en profundidad este proceso en nuestro artículo sobre cómo crear una galería de miniaturas receptiva, así que asegúrese de verificar si está buscando una guía paso a paso del proceso.
En la naturaleza
Para ver este patrón en un sitio real, consulte la cartera de Brad Sawicki. Justo en su página de inicio, comienza con una galería simple de tres columnas que se colapsa en una doble y, finalmente, un diseño de columna única. El beneficio aquí es que los tamaños de imagen de vista previa del trabajo aprovechan al máximo la ventana gráfica disponible para que el espectador siempre pueda verlos en un formato agradable y grande.
Elementos destacados
Este es muy parecido al diseño de la galería, solo que está más orientado a resaltar algunos elementos en lugar de varios. El ejemplo aquí utiliza cuatro elementos destacados, pero es tan popular, o incluso más, ver tres elementos en su lugar.
Como puede ver, el diseño comienza con los cuatro elementos destacados, junto con algunos de los contenidos introductorios anteriores. Luego sigue el camino de la galería mientras salta a dos columnas y finalmente una. Observe cómo el contenido introductorio también se adapta: la navegación va desde el lado derecho hasta que quede a la izquierda debajo del título o logotipo principal.
En la naturaleza
La empresa de desarrollo web Splendid hace un uso perfecto de este patrón en su sitio. Incluso animan las transiciones, algo que se hace únicamente por nerds de diseño que cambian el tamaño de su navegador solo para ver la transformación.
Este sitio en particular es una gran implementación del diseño web sensible. Nunca se siente un poco apagado, pero maneja cada tamaño de vista que se le puede lanzar con una delicadeza de píxeles perfectos.
Flip de columna
Este es uno de los patrones más complicados hasta ahora. La parte superior del diseño presenta algunos elementos realmente grandes que llaman su atención e introducen el sitio. La siguiente parte se divide en tres columnas, pero a medida que reduce el tamaño del navegador, la primera columna se voltea hacia un lado y se convierte en una fila que se encuentra sobre las otras dos columnas.
Es una transformación bastante complicada pero es bastante efectiva. Puede hacerlo fácilmente simplemente agregando una consulta de medios que haga flotar los elementos en esa columna hacia la izquierda, luego borre el flotador para que las otras dos columnas permanezcan intactas.
El paso final es, por supuesto, hacer que todo vuelva a fluir a una amplia columna. Puede hacer mucho desplazamiento, pero siempre que no desbordes la página con contenido, no es tan malo.
En la naturaleza
La inspiración para este diseño proviene de Palantir, otra compañía de desarrollo. Tenga en cuenta que los desarrolladores web están experimentando primero con diseño responsivo en sus propios sitios, lo que puede ser una gran experiencia de aprendizaje y un ejemplo para los clientes.
Palantir es un brillante ejemplo de lo drásticas que pueden ser sus transformaciones en el diseño web sensible. Esto es más que simplemente reducir el ancho de una columna o eliminarlo por completo, representa un importante reflujo del contenido de la página para maximizar continuamente el ancho disponible.
Función aleatoria
Este último patrón es una versión diferente de la idea de los elementos destacados. Realmente me gusta porque arroja una ligera curva durante el primer reflujo. En lugar de simplemente caer a dos columnas y flotar a la izquierda, crea un diseño escalonado de dos columnas donde las secciones se flotan a cada lado.
Para el diseño de una sola columna, las imágenes en miniatura se eliminan por completo para permitir un mayor énfasis en el contenido del texto. Esto es opcional, por supuesto, uno de los formatos de una sola columna anterior podría implementarse con la misma facilidad.
En la naturaleza
Orestis utiliza este patrón en su sitio. Los tres elementos destacados son los servicios que ofrecen, cada uno de los cuales está representado por una ilustración colorida.
Cuando cambia el tamaño del navegador, los servicios se apilan y las imágenes se desplazan hacia la izquierda o hacia la derecha. Es un sitio divertido y peculiar en el que tienes que visitarte para sentir realmente cómo funciona todo.
Más patrones
En mi investigación para esta pieza encontré un artículo existente de Luke Wroblewski sobre el mismo tema. En lugar de ver patrones muy específicos como lo he hecho aquí, Luke hace un trabajo increíble al descomponer diseños comunes en sus ideas más básicas y mostrarle cómo funcionan. Es una pieza realmente genial y me gusta mucho la forma en que muestra cómo funciona el diseño tanto dentro como fuera del lienzo.
Conclusión
Espero que su mente esté ahora en overdrive pensando en diseños sensibles. La comunidad de diseño web ha pasado un montón de tiempo discutiendo los aspectos técnicos sobre cómo se lleva a cabo el CSS responsivo a través de las consultas de los medios; definitivamente es hora de que comencemos a reflexionar profundamente sobre los aspectos reales del diseño de esta nueva y emocionante frontera.
Deje un comentario a continuación y déjenos saber qué piensa de estos patrones de diseño receptivos. ¿Usarías alguno de ellos en tu propio trabajo? ¿Por qué o por qué no?