Los sitios web mínimos se han vuelto muy populares en los últimos años. Le permiten concentrarse en brindar a sus visitantes una sensación fresca y limpia al navegar. El estilo de diseño web mínimo está influenciado por el estilo de diseño de interiores escandinavo. Seguramente has visto fotos de salas de estar escandinavas en Internet. Al reducir los muebles y usar colores mayoritariamente blancos o grises, la luz y la serenidad entran libremente en la habitación. Eso es exactamente lo que hacen los sitios web mínimos también. Se enfocan en brindarles a sus visitantes una sensación de calma para que puedan concentrarse en el contenido que trae sin sentirse abrumados.
Esta es una segunda publicación en la serie de publicaciones donde manejaremos 4 estilos de sitios web diferentes y cómo lograrlos usando Divi :
- Limpio y abstracto
- Mínimo
- Departamento
- Audaz y colorido
¡Hagámoslo!
Lo primero que deberá tener en cuenta al crear un sitio web mínimo es tratar de reducir los elementos de diseño que utiliza en su sitio web. En lugar de usar más, trate de sacar lo mejor de los pocos elementos que usa.
Se sorprenderá de lo mucho que puede obtener de su diseño ajustando sus elementos de diseño de manera que se vuelvan complementarios. El uso de menos elementos en su sitio web también le permite mantener una visión general y entregar su mensaje de una manera más consistente y clara.
2. El margen y el relleno son tus mejores amigos
Los sitios web mínimos suelen tener muchos espacios en blanco. Los espacios en blanco en sus páginas y publicaciones permiten a los visitantes respirar durante su visita a su sitio web. Dan una sensación de serenidad y te permiten concentrarte en el contenido que quieres compartir.
La mejor manera de agregar espacios en blanco a su sitio web es usar colores de fondo blanco y/o gris claro en combinación con relleno y/o margen adicionales. No tenga miedo de jugar con los diferentes valores para ver qué resultado se obtiene.
3. Use un color de acento
Si desea mantener su sitio web lo más mínimo posible, también debe evitar usar demasiados colores diferentes. Vaya lo más neutral posible usando mucho blanco y gris. Use colores más oscuros para su contenido escrito. Y para que su diseño sea un poco más atrevido, elija un color de acento. Este color generalmente será el mismo que usa en su logotipo.
4. Imágenes o ilustraciones, no ambas
En general, se recomienda elegir entre imágenes de la vida real o ilustraciones cuando construyas tu sitio web. Usar ambos al mismo tiempo realmente puede complicar su sitio web y mezclar diferentes estilos de sitios web, algo que definitivamente desea evitar.
Sin embargo, hay una excepción. Siéntase libre de usar imágenes en combinación con ilustraciones de iconos en sus Módulos de Blurb, por ejemplo. Si son mínimos y admiten el contenido de su página, está listo para comenzar.
¿Alguna vez ha intentado usar un módulo de texto en lugar de un módulo de botones? Definitivamente deberías. Aunque los Módulos de botones le brindan la mayoría de las opciones a las que está acostumbrado en Visual Builder, tiene la tendencia de agregar bordes a todos los lados de su botón. Con un módulo de texto, puede evitar eso. Simplemente puede hacer que se pueda hacer clic en su copia y agregar un borde inferior como puede ver en la pantalla de impresión a continuación.
6. Los divisores pueden ayudar a equilibrar los espacios en blanco
Si desea agregar un toque moderno a su sitio web, definitivamente debe intentar usar múltiples divisores en su sitio web y diseñarlos para que coincidan con el resto de su diseño.
Tienden a conectar diferentes elementos de diseño entre sí y crear un resultado coherente.
7. Usa formas simples y sutiles
Este es uno de mis favoritos. A veces, tendemos a descuidar las funciones a las que estamos más acostumbrados, como los fondos degradados. Claro, usar una imagen de fondo tiene su encanto, pero ¿alguna vez has intentado usar un fondo degradado radial de una manera sutil? Permite a sus visitantes concentrarse en sus titulares y lo ayuda a desencadenar acciones.
8. Use animaciones sutiles (si es necesario)
Por último, pero no menos importante, un sitio web mínimo suele mejorar aún más cuando se utilizan animaciones sutiles. Y cuando decimos sutil, queremos decir realmente sutil. Te sorprendería lo suave que puede resultar un efecto con solo reducir drásticamente la intensidad de la animación. Siempre que la animación sea sutil, puede agregarla a cualquier elemento y no afectará la legibilidad y la experiencia del usuario de su sitio web.
Avance
Ahora que hemos repasado todas las técnicas, comencemos a ponerlas en práctica. Vamos a recrear el siguiente ejemplo paso a paso:
Comencemos a crear: agregue una nueva sección estándar
Ajustes de sección
Espaciado
Para crear el ejemplo anterior, necesitaremos dos secciones en total. Comencemos agregando el primero a una página nueva o existente y agregando el siguiente espaciado:
- Relleno superior e inferior: 50px
Agregar una nueva fila
Estructura de la columna
Continúe agregando una nueva fila que contenga una columna.
Fondo degradado de columna
Abra la configuración de esta fila y agréguele el siguiente fondo degradado de columna:
- Color #1: #ffffff
- Color #2: #efefef
- Tipo de gradiente de columna: Radial
- Columna Dirección radial: Centro
- Posición de inicio de columna: 40%
- Posición final de la columna: 40%
Dimensionamiento
Luego, aumente el ancho de la fila haciendo los siguientes cambios en la configuración de Tamaño:
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
Espaciado
Por último, agregue el siguiente Espaciado a su fila también:
- Relleno superior e inferior: 0px
- Relleno superior e inferior de la columna: 250 px
- Relleno de la columna izquierda: 150 px (escritorio), 20 px (tableta), 0 px (teléfono)
Primer módulo de texto
Configuración de texto
Una vez que haya modificado la configuración de su fila, puede comenzar a agregar los módulos que necesita. Comenzaremos con una breve descripción del módulo de texto utilizando la siguiente configuración de texto:
- Peso de fuente de texto: semi negrita
- Estilo de fuente de texto: Mayúsculas
- Espaciado entre letras de texto: 8px
Animación
También estamos agregando animaciones muy sutiles a este diseño, comenzando con este módulo de texto. Abra la configuración de Animación y agregue la siguiente animación:
- Estilo de animación: Diapositiva
- Dirección de animación: Derecha
- Intensidad de animación: 5%
Segundo módulo de texto
Configuración de texto H1
Justo debajo del módulo de texto anterior, continúe y agregue un módulo de texto H1 que contenga las siguientes configuraciones de texto H2:
- Fuente del encabezado: Georgia
- Color del texto del título: #666666
- Tamaño del texto del encabezado: 78 px (escritorio), 50 px (tableta), 40 px (teléfono)
- Espaciado entre letras de encabezado: 3px
Espaciado
Vamos a crear el espacio alrededor de este módulo usando la siguiente configuración de Espaciado:
- Margen superior e inferior: 100px
- Margen izquierdo: 100 px (computadora de escritorio y tableta), 20 px (teléfono)
- Relleno izquierdo: 40px
Borde
También necesitaremos un borde izquierdo, así que continúe y agregue un borde izquierdo con la siguiente configuración:
- Ancho del borde izquierdo: 6px
- Color del borde izquierdo: #d67787
Añadir enlace
En lugar de usar un módulo de botones, estamos usando un módulo de texto al que agregaremos un enlace. Agregue su CTA y enlace dentro del cuadro Contenido.
Ajustes de texto de enlace
Luego, aplique la siguiente configuración de texto de enlace a su módulo de texto:
- Peso de la fuente del enlace: semi negrita
- Estilo de fuente del enlace: cursiva y mayúscula
- Alineación del texto del enlace: Izquierda
- Color del texto del enlace: #666666
- Espaciado entre letras de enlace: 8px
Dimensionamiento
Como usaremos un borde inferior, más adelante también reduciremos el ancho de este módulo de texto:
- Ancho: 46%
- Alineación del módulo: Izquierda
Espaciado
Y para asegurarnos de que el borde inferior no esté demasiado cerca de nuestro texto, también agregaremos un relleno inferior de ’10px’.
- Relleno inferior: 10px
Borde
Ahora podemos continuar agregando un borde inferior usando la siguiente configuración:
- Ancho del borde inferior: 1px
- Color del borde inferior: #666666
Animación
También estamos agregando una animación sutil:
- Estilo de animación: Diapositiva
- Dirección de animación: Derecha
- Retardo de animación: 100ms
- Intensidad de animación: 5%
Agregar módulo divisor
Visibilidad
El último módulo que necesitaremos en esta fila es un módulo divisor. Asegúrese de dejar habilitada la opción ‘Mostrar divisor’.
Color
Estamos usando el mismo color para este divisor que usamos para el borde izquierdo del módulo de texto del título: ‘#d67787’.
Dimensionamiento
Abra la configuración de Tamaño a continuación y cambie el Peso del divisor a ‘2px’.
Espaciado
Empujaremos el módulo divisor hacia la derecha usando la siguiente configuración de espaciado:
- Margen izquierdo: 200px
- Margen derecho: -100px
Animación
Por último, pero no menos importante, incluiremos la siguiente animación:
- Estilo de animación: Diapositiva
- Dirección de animación: Izquierda
- Retardo de animación: 150ms
- Intensidad de animación: 5%
Agregar una segunda sección estándar
Ajustes de sección
Espaciado
Hemos terminado con la primera sección, así que ahora podemos continuar y agregar una nueva sección justo debajo de la anterior. Abra la configuración de la sección y agréguele el siguiente margen:
- Margen superior e inferior: 80px
Agregar una nueva fila
Estructura de la columna
Continúe agregando una fila con la siguiente estructura de columnas:
Dimensionamiento
Luego, abra la configuración de la fila y aumente el ancho de su fila usando la siguiente configuración:
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
Espaciado
Tendremos que agregar algo de relleno en la columna 2 también:
- Relleno izquierdo de la columna 2: 100 px (escritorio), 0 px (tableta y teléfono)
Agregar módulo de imagen a la columna 1
Cargar imagen
Ahora podemos comenzar a agregar módulos a nuestras dos columnas. Comience agregando un módulo de imagen a su primera columna y cargue una imagen de su elección.
Espaciado
Aumentaremos el ancho del módulo de imagen agregando un margen derecho negativo:
- Margen derecho: -100px
Sombra de la caja
También usaremos la siguiente sombra de cuadro para crear un elemento de diseño adicional en la página:
- Posición horizontal de la sombra del cuadro: 100 px
- Posición vertical de la sombra del cuadro: 100 px
- Fuerza de propagación de la sombra del cuadro: -14px
- Color de sombra: #efefef
Módulo de texto del botón Localizar y clonar
Vamos a reutilizar los tres módulos de texto de la primera sección, comenzando con el botón Módulo de texto. Adelante, clónalo.
Colocar debajo de la imagen
Luego, colóquelo justo debajo del Módulo de imagen en la primera columna.
Clonar el primer módulo de texto en la primera sección y colocarlo en la columna 2
Módulo de localización y clonación de texto
El siguiente módulo de texto que necesitaremos es el primero de nuestra sección. Adelante, clona este también.
Colocar en la Columna 2
En lugar de colocarlo en la primera columna, suéltelo en la segunda.
Módulo de texto de título clonado y lugar en la columna 2
Módulo de localización y clonación de texto
Por último, también vamos a reutilizar el título Módulo de texto.
Colocar en la Columna 2
Después de clonarlo, colóquelo en la segunda columna de su nueva fila.
Cambiar contenido a H2
Cambie el contenido de su cuadro de contenido a H2.
Configuración de texto H2
Luego, agregue la siguiente configuración a su configuración de texto H2:
- Encabezado 2 Fuente: Georgia
- Título 2 Color del texto: #666666
- Encabezado 2 Tamaño del texto: 58px
- Encabezado 2 Espaciado entre letras: 3px
Agregar módulo de texto de descripción
Configuración de texto
Debajo del título Módulo de texto, agregaremos una descripción Módulo de texto con la siguiente configuración de texto:
- Peso de fuente de texto: ligero
- Espaciado entre letras de texto: 1px
Dimensionamiento
Continúe y cambie el tamaño de este módulo de texto:
- Ancho: 70%
- Alineación del módulo: Derecha
Agregar módulo divisor n.º 1
Visibilidad
El siguiente módulo que necesitaremos es un módulo divisor. Asegúrese de que la opción Mostrar divisor esté habilitada.
Color
Cambia el color de tu separador a ‘#666666’.
Espaciado
Agregue algo de espacio a continuación:
- Margen superior: 100px
- Margen izquierdo: 400 px (escritorio), 300 px (tableta), 200 px (teléfono)
- Margen derecho: -100px
Animación
Y por supuesto, también vamos a usar una animación sutil:
- Estilo de animación: Diapositiva
- Dirección de animación: Izquierda
- Intensidad de animación: 5%
Agregar módulo divisor n.º 2
Visibilidad
Por último, pero no menos importante, vamos a agregar otro módulo divisor. Nuevamente, asegúrese de que la opción Mostrar divisor esté habilitada.
Color
Cambia el color de tu separador a ‘#d67787’.
Dimensionamiento
Use ‘2px’ para el peso del divisor.
Espaciado
Y agregue la siguiente configuración de Espaciado:
- Margen izquierdo: 200 px (computadora de escritorio y tableta), 150 px (teléfono)
- Margen derecho: -100px
Animación
Para terminar, agregue una animación sutil a su divisor:
- Estilo de animación: Diapositiva
- Dirección de animación: Izquierda
- Retardo de animación: 100ms
- Intensidad de animación: 5%
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
En esta publicación, le mostramos algunas excelentes técnicas de Divi sobre cómo crear sitios web mínimos. Esta es la segunda publicación de la serie sobre cómo crear hermosos estilos de diseño usando tu creatividad y algunas de las mejores opciones integradas de Divi. En las próximas publicaciones, compartiremos técnicas sobre cómo lograr estilos de diseño más impresionantes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar una sección de comentarios a continuación!