Comentarios
Como se explica en Web UI Patterns 2016 Vol. 1, el diseño es sólo un medio para presentar el contenido de la manera más intuitiva y útil. En este artículo, exploraremos ejemplos, mejores prácticas y escenarios comunes para 12 patrones de diseño web exitosos. También hablaremos de qué problemas de diseño resuelven estos patrones de diseño web en términos de experiencia de usuario con ejemplos de marcas conocidas.
Las tarjetas permiten que los sitios presenten una gran dosis de contenido de manera digerible. Como explicamos en nuestro Libro de Tendencias de Diseño Web 2015-2015, las tarjetas están apareciendo por todas partes últimamente, y el éxito de este patrón está directamente relacionado con su utilidad.
Una estructura cuadriculada facilita la navegación. Las tarjetas están casi siempre dispuestas en un formato de cuadrícula, de un tipo u otro. Las cuadrículas ofrecen más opciones de navegación que las simples vistas de lista, lo que hace que este estilo sea muy eficaz en cuanto a espacio.
Las cuadrículas pueden variar en tamaño, espaciado y número de columnas. Sitios como Huffington Post escalonan sus opciones para evitar esa sensación de “rectitud”, mientras que YouTube juega con la organización estricta, con filas rectas y agrupadas en categorías (“Recomendados”, canales específicos, etc.).
Patrón del observador
Diseñar una página web que incorpore el equilibrio justo de contenido, imágenes, elementos gráficos y llamadas a la acción (CTA) puede ser una tarea difícil. Las páginas del sitio web varían en cuanto a su propósito, lo que puede hacer que sea un reto seguir una receta para un diseño exitoso. Aunque no hay un método adecuado para todos los propósitos, volver a los fundamentos del diseño y entender los patrones visuales, como la “F” y la “Z”, puede ayudar a simplificar el diseño del sitio web y permitirle comunicarse más eficazmente con sus visitantes.
Los diseñadores de sitios web deben esforzarse por crear diseños con una jerarquía visual clara y seleccionar intencionadamente la posición y el estilo de los elementos de diseño. La mayoría de las páginas web con altas tasas de conversión utilizan principios de diseño básicos como los que se indican a continuación para llamar la atención sobre los elementos más importantes de la página y mantener la atención de los usuarios.
El patrón F sigue el movimiento natural de los ojos del usuario cuando lee una página web. Leemos en inglés de izquierda a derecha, por lo que este patrón nos resulta natural. El ejemplo siguiente ilustra el patrón, mostrando que el ojo comienza en la zona superior izquierda de la página, se desplaza a través de ella y luego baja a la siguiente línea. La mayoría de los usuarios tienden a hojear grandes cantidades de texto una vez que han captado el concepto general, por lo que se puede ver que sus movimientos horizontales tienden a disminuir a medida que empiezan a buscar sólo los títulos de las secciones importantes o los comienzos de los párrafos a lo largo de la página.
Patrón de estrategia
Como propietario de un sitio web, sabe que sus usuarios pueden ser tanto su mayor activo como sus más duros críticos. El usuario típico de Internet pasa horas en línea cada día encontrando miles de interfaces. Saben lo que funciona bien, esperan que todos los sitios web funcionen bien, y su definición de “funcionar bien” puede diferir de la suya.
Por suerte, estás en buena compañía. Miles de diseñadores han jugado durante años para perfeccionar los componentes de la interfaz que usamos cada día, dejándonos lo que llamamos patrones de diseño web. No deberías tener que confiar en tus instintos para construir una gran experiencia. En su lugar, toma una pista de los que te precedieron.
En esta guía introductoria, explicaré la importancia de los patrones en el diseño de sitios web, cómo ayudan en el proceso de diseño, y exploraré algunos patrones de diseño comunes pero importantes que la mayoría de nosotros damos por sentado.
Un patrón de diseño web, también conocido como patrón de diseño de interfaz de usuario, es un conjunto de directrices para diseñar un aspecto o componente de la interfaz de usuario. Los patrones de diseño web se desarrollan para desafíos específicos de la experiencia del usuario y pueden ser adoptados e implementados por cualquier sitio web.
Patrón de decoración
Los fondos con motivos son muy populares en el diseño de sitios web, y suelen utilizarse como elemento de apoyo o como último toque de diseño. Pero a menudo, sin ellos, el diseño simplemente no parece acabado. En esta colección de ejemplos de fondos con patrones, hemos reunido algunos de los mejores diseños de sitios web con fondos con patrones, así que todo lo que tiene que hacer es sentarse y disfrutar de la inspiración.
Un diseño de página web para un juego de coches en movimiento online presentado con un patrón de fondo con líneas diagonales inclinadas hacia la derecha. Nos encanta que el lado hacia el que se inclinan las líneas esté sincronizado con la dirección hacia la que se mueve el coche. Además, el color naranja contribuye al ambiente optimista del juego.
Para la sección de héroes de este sitio web, el diseñador ha elegido iconos de arte lineal descoloridos con gruesos contornos sobre un fresco color de fondo frambuesa. Este patrón nos recuerda a los garabatos, una tendencia de diseño gráfico que está muy de moda ahora. ¿Quiere saber más sobre las tendencias del diseño gráfico?
Un gran ejemplo de un patrón de fondo simple hecho de cruces o pluses negros en pequeña escala sobre un fondo blanco. Nada especial a primera vista, pero bastante interesante cuando descubres que en realidad es un patrón dinámico que interactúa con tu cursor cuando lo mueves.