Patrones de Diseño Web Design

¿Sabías que el diseño web juega un papel crucial en el éxito de tu sitio web? Conocer y aplicar los patrones de diseño web adecuados puede marcar la diferencia entre un sitio que genera conversiones y otro que no logra cautivar a tu audiencia.

En este artículo, aprenderemos patrones de diseño web, qué son y cómo pueden ayudarte a crear una experiencia de usuario excepcional. Los patrones de diseño web son soluciones probadas y eficientes para problemas comunes de diseño. Al implementar estos patrones en nuestro sitio web, mejoramos su usabilidad, navegación y capacidad de respuesta.

¿Qué son los patrones de diseño web?

Los patrones de diseño web son soluciones generales a problemas de diseño recurrentes. Son enfoques probados y efectivos para abordar desafíos comunes en el diseño de sitios web. Estos patrones se basan en la experiencia acumulada de diseñadores y desarrolladores web a lo largo de los años.

Al utilizar patrones de diseño web, puedes aprovechar las mejores prácticas establecidas y evitar tener que reinventar la rueda en cada proyecto. Estos patrones son como "recetas" que puedes seguir para resolver problemas específicos de diseño web.

Algunos de los patrones más utilizados de diseño web son:

1. Dos columnas iguales

A continuación te mostraré dos formas de realizar esta tarea. Una de ellas consta de la propiedad display: grid, en la cual necesitamos definir un contenedor en el archivo HTML que será un <div> con la clase principal contenedor. Creamos una nueva clase con el nombre dos-columnas-iguales-grid para aplicar estilos en el archivo styles.css. Por ejemplo:

Ahora establecemos un @media, una regla de CSS que permite aplicar los estilos cuando el ancho mínimo de la ventana del navegador sea 768 px. El navegador asignará automáticamente cada elemento a una columna con la propiedad grid-template-columns, donde muestro cuatro formas de tener dos columnas iguales:

1. Con porcentajes indicamos que cada artículo ocupará el 50% del espacio de la ventana del navegador.
2. La función Repeat(2, 50%) en CSS se utiliza para crear un patrón de columnas o filas que se repiten dos veces y ocupan el 50% del espacio disponible. Por ejemplo, si se aplica a la propiedad grid-template-columns, se crearán dos columnas de igual ancho que llenarán el contenedor de la cuadrícula.
3. El valor 1fr significa que cada columna ocupa una fracción igual del espacio disponible. Por ejemplo, grid-template-columns: 1fr 1fr crea dos columnas de igual ancho.
4. Esta función de valor repeat(2, 1fr) consiste en que se crean dos columnas iguales, cada una con un tamaño de una fracción (fr) del espacio disponible. Por ejemplo, si el contenedor de la cuadrícula tiene un ancho de 768 px, cada columna tendrá un ancho de 384 px. Esta propiedad se aplica al elemento que tiene display: grid o display: inline-grid.
   

Seguidamente, debemos aplicar un espacio entre las columnas de un elemento. Para ello, utilizamos la propiedad column-gap con 2rem, equivalente a 32 px.

La segunda forma es con la propiedad display: flex, que permite crear un contenedor flexible que puede ajustar el tamaño y la posición de sus elementos hijos de forma automática de izquierda a derecha. Algunas ventajas de usar display: flex son:

• Podemos alinear y distribuir los elementos hijos en el eje horizontal y vertical con facilidad.
• Cambiamos el orden de los elementos hijos sin modificar el código HTML.
• Controlamos el espacio entre los elementos hijos con propiedades como justify-content, align-items y gap.

2. Dos columnas iguales y una más grande con display: grid

La estructura HTML estará compuesta de la siguiente manera:

1. La etiqueta <main> define el contenido principal, el cual contiene otra etiqueta  <article>, que en este caso es una entrada de blog, con una imagen y un párrafo.
2. Agregamos dos etiquetas <aside> para incluir dos párrafos sobre Nosotros y Misión.
   

Nos situamos en el archivo CSS con el fin de implementar esta condición con display:grid, al tiempo que utilizaremos grid-template-areas, propiedad de CSS que define áreas de una cuadrícula.

Asimismo, especificamos el número de columnas de la cuadrícula con la propiedad grid-template-columns. Con los valores 1fr 3fr 1fr, indicamos la distribución de los elementos de HTML.

El primer y tercer elemento tomarán una fracción, mientras que el segundo elemento tendrá tres fracciones del espacio disponible. Luego, asignamos un nombre a cada columna de la cuadrícula con una palabra entre comillas “izquierda contenido derecha”. Los nombres pueden ser cualquier valor válido de identificador de CSS, excepto el valor reservado none, que indica una celda vacía.

Por otra parte, los elementos hijos de la cuadrícula deben tener la propiedad grid-area con el nombre de la zona a la que pertenecen. Como es el caso de la sección del contenido principal, añadimos la propiedad grid-area: contenido. Aquí indicamos que este elemento estará en el centro con tres fracciones del espacio disponible. De igual manera pasa con el tercer elemento llamado panel-izq, que se muestra del lado izquierdo tomando una fracción del espacio.

3. Dos columnas iguales y una más grande con display: flex

Si el ancho es mayor o igual a 768 px, se activa el modo flexbox para el contenedor-flex y se distribuyen sus elementos en una sola fila con espacio entre ellos. El contenido-principal ocupa el 60% del ancho disponible, restando un margen de 1rem. Los paneles ocupan el 20% del ancho disponible, restando también un margen de 1rem. El panel-izq se coloca al principio de la fila con la propiedad order.

Con esta propiedad order asignamos un valor positivo o negativo con el fin de cambiar el orden de los elementos. Por ejemplo, si se asigna order: 1 a un elemento, este se colocará al final de la columna, y si se asigna order: -1, se colocará al principio. La propiedad order solo afecta al orden visual de los elementos, no a su orden.

4. Distribución de columnas con column Drop

Es un patrón de diseño que permite adaptar una página web con columnas a diferentes tamaños de pantalla. Consiste en que, cuando la pantalla se hace más pequeña menor de 480 px, las columnas se apilan verticalmente en el orden que hayamos definido, creando un efecto de caída de las columnas. Con esta técnica, adaptamos el contenido a diferentes dispositivos y resoluciones, manteniendo una buena legibilidad y usabilidad.

Para implementar column drop con grid en CSS, se puede usar la propiedad grid-template-columns para definir el número y el tamaño de las columnas en cada punto de ruptura. Por ejemplo:

En este código definimos dos puntos de ruptura: uno para pantallas con un ancho mínimo de 480px y otro para pantallas con un ancho mínimo de 768 px. En cada punto de ruptura, el código cambia el número de columnas y la posición de algunos elementos usando la propiedad grid-template-columns y las propiedades grid-column y grid-row.

Por ejemplo, el elemento con la clase .segunda ocupa dos columnas en pantallas pequeñas, pero se mueve a la tercera columna en pantallas más grandes.

5. Column Drop con Flexbox

La clase .column-drop-flex que aplica la propiedad display: flex al elemento que la contiene. Esto hace que sus elementos hijos se distribuyan en una sola fila, con espacio entre ellos y permitiendo que se envuelvan si no caben.

También se define las propiedades flex-basis para las clases .contenido-principal, .primera y .segunda, que son los elementos hijos de .column-drop-flex. La propiedad flex-basis determina el tamaño inicial de cada elemento.

En este ejemplo usamos dos consultas de medios para cambiar estas propiedades según el ancho de la pantalla. La primera consulta se aplica cuando el ancho es mayor o igual a 480 px y establece que el tamaño inicial de .contenido-principal y .primera sea el 50% menos 1rem del contenedor, dejando un espacio entre ellos.

La segunda consulta se aplica cuando el ancho es mayor o igual a 768 px, y establece que el tamaño inicial de .contenido-principal, .primera y .segunda sea el 33.3% menos 2rem del contenedor, creando tres columnas con espacio entre ellas.

6. Sidebar con Grid

Para crear un sidebar de CSS con grid, necesitamos definir un contenedor que tenga display: grid y dos columnas, una para el sidebar y otra para el contenido. Luego, asignamos el sidebar a la primera columna y el contenido a la segunda, usando la propiedad grid-column.

Este código es una regla de CSS que se aplica cuando el ancho mínimo de la pantalla es de 768 píxeles. Lo que hace es crear un diseño de cuadrícula con dos columnas, una de 3 fracciones y otra de 1 fracción, separadas por un espacio de 4 rem. La propiedad grid-auto-flow indica que los elementos se colocan en orden de columna. El elemento aside se posiciona en la segunda columna, ocupando todo el espacio disponible.

7. Sidebar con Flex

Para crear una barra lateral con Flex, se utiliza la propiedad CSS display: flex en el contenedor principal de la página que llamamos .con-sidebar, y se asignan valores a las propiedades flex-direction, flex-wrap, justify-content y align-items para definir el comportamiento y la posición de los elementos flexibles. La barra lateral se crea como un elemento flexible con un ancho fijo o relativo, y el resto del contenido se adapta al espacio disponible.

Herramientas para implementar patrones de diseño web

Existen numerosas herramientas y recursos disponibles en línea para ayudarte a encontrar e implementar patrones de diseño web. Algunas de las herramientas más populares incluyen:

• Pattern Lab:  Es una herramienta de diseño de interfaz que nos permite crear y organizar patrones de diseño web.
• UI Patterns: Es un sitio web que recopila y muestra una amplia variedad de patrones de diseño de interfaz de usuario.
• Dribbble: Es una plataforma en línea donde muchos diseñadores comparten ejemplos de diseños web y patrones de diseño.
• Codepen: Es un entorno de desarrollo en línea que te permite experimentar y compartir código relacionado con el diseño web.
  

El diseño web es un elemento fundamental para el éxito de tu sitio web. Al utilizar los patrones de diseño web adecuados, puedes mejorar la experiencia del usuario, aumentar la participación y generar conversiones. Recuerda adaptar los patrones a tu marca y objetivos específicos y utilizar las herramientas disponibles para encontrar e implementar los patrones de diseño web adecuados.

¡Prepárate para destacar en línea y llevar tu negocio al siguiente nivel!