8 técnicas para crear sitios web mínimos con div Div

Los sitios web mínimos se han vuelto muy populares en los últimos años. Le permiten concentrarse en dar a sus visitantes una sensación fresca y limpia al navegar. El estilo mínimo de diseño web está influenciado por el estilo de diseño de interiores escandinavo. Ciertamente viste fotos con salas de estar escandinavas en Internet. Al reducir los muebles y usar principalmente colores blancos o grises, la luz y la serenidad son libres de ingresar a la habitación. Eso es exactamente lo que hacen los sitios mínimos. Se centra en ofrecer a sus visitantes una sensación de calma para que puedan centrarse en el contenido que trae sin abrumado.
Esta es una segunda publicación en la serie de estaciones en las que administraremos 4 estilos de sitios web y cómo hacerlos usando Div:
Limpio y abstracto
Mínimo
Departamento
Audaz y colorido
¡Vamos a eso! 1. Menos es lo primero que deberá recordar al crear un sitio web mínimo es intentar reducir los elementos de diseño que usa en su sitio web. En lugar de usar más, intente obtener los mejores resultados de los pocos elementos que usa. Se sorprendería tanto como pueda obtener de su diseño, ajustando los elementos de diseño de una manera que se vuelva complementaria. El uso de menos elementos en su sitio también le permite mantener una descripción general y enviar el mensaje de una manera más consistente y clara.
2. El margen y el forro son sus mejores amigos, los sitios web mínimos generalmente tienen mucho espacio en blanco. El espacio en blanco en sus páginas y publicaciones permite a los visitantes respirar durante su visita a su sitio web. Ofrecen una sensación de serenidad y le permiten concentrarse en el contenido que desea compartir. La mejor manera de agregar espacio en blanco a su sitio web es mediante el uso de fondo blanco y / o gris claro, en combinación con relleno y / o borde adicionales. No tengas miedo de jugar con diferentes valores para ver qué resultado está saliendo. Use un acento de color si desea mantener su sitio web lo menos posible, entonces 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 nervioso, 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, es aconsejable elegir entre imágenes o ilustraciones en la vida real al crear su sitio web. El uso de ambos al mismo tiempo realmente puede complicar su sitio web y mezclar diferentes estilos de sitios web, que ciertamente desea evitar.

Pero hay una excepción. Siéntase libre de usar imágenes en combinación con ilustraciones de iconos en módulos de propaganda, por ejemplo. Si son mínimos y aceptan el contenido en su página, está listo para comenzar.
5. Considere el uso de módulos de texto en lugar de botones para CTA ¿Alguna vez ha intentado usar un módulo de texto en lugar de un módulo de botón? Definitivamente deberías serlo. Aunque los módulos de botones le brindan la mayoría de las opciones a las que está acostumbrado en Visual Builder, tiende a agregar bordes en todos los lados del botón. Con un módulo de texto, puede evitar esto. Simplemente puede hacer clic en la copia y agregar un borde inferior como puede ver en la pantalla de impresión a continuación. Los divisores pueden ayudar a equilibrar el espacio en blanco si desea agregar una nota moderna a su sitio web, definitivamente debe intentar usar más separadores en su sitio web y estilizarlos para que coincida con el resto del aspecto que tiende a conectar diferentes elementos de diseño entre ellos y crear un resultado coherente.

7. Use formas simples y sutiles, esta es una de mis favoritas. A veces, tendemos a descuidar las características con las que nos hemos acostumbrado más, como los antecedentes degradados. Claro, el uso de una imagen de fondo tiene su encanto, pero ¿alguna vez ha intentado usar un fondo de gradiente radial? Permita que los visitantes se concentren en sus títulos y lo ayuden a activar la acción.

8. Use animaciones sutiles (si es absolutamente necesaria), no menos importante, un sitio web mínimo generalmente se vuelve aún mejor cuando se usa animaciones sutiles. Y cuando decimos sutiles, nos referimos realmente sutilmente. Te sorprendería lo suave que puede probar un efecto, solo reduciendo drásticamente la intensidad de la animación. Mientras la animación sea sutil, puede agregarla a cualquier elemento y no afectará la legibilidad y la experiencia del usuario de su sitio web. Recrearemos el siguiente ejemplo paso a paso:

Comencemos a crear: agregue una nueva configuración de configuración de sección estándar para crear el ejemplo anterior, necesitaremos dos secciones en total. Comencemos a agregar el primero en una página nueva o existente y agregamos el siguiente espacio:

Revestimiento superior e inferior: 50 px

Agregue una nueva estructura de fila de la columna Continuar agregando una nueva fila que contiene una columna.

El fondo del gradiente de columna abre la configuración de esta fila y agregue el siguiente fondo de gradiente:
Color # 1: #ffffff

Color # 2: #efefef

Tipo de gradiente de columna: radial
Dirección radial de la columna: Centro
Posición de inicio de la columna: 40%
Posición final de la columna: 40%
Dimensión luego aumente el ancho de la fila haciendo los siguientes cambios en la configuración de tamaño:
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2
Finalmente espaciado, agregue el siguiente espacio a su turno:
Revestimiento superior e inferior: 0 px
Junta superior e inferior de la columna: 250 PX

Columna de revestimiento izquierdo: 150 px (escritorio), 20 px (tableta), 0 px (teléfono) la primera configuración del módulo de texto Después de cambiar la configuración de 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:
El peso de la fuente de texto: semi audac.
Text -Text estilo: mayúscula
Texto de la carta de espacio: 8 PX

Animación agregamos animaciones muy sutiles y a este aspecto, comenzando con este módulo de texto. Abra su configuración de animación y agregue la siguiente animación:
Estilo de animación: diapositiva
Dirección de la animación: correcto
Intensidad de animación: 5%

Segundo módulo de texto Configuración de texto H1 Justo en el módulo de texto anterior, continúe y agregue un módulo de texto H1 que contenga la siguiente configuración de texto H2:
Título de la fuente: Georgia
Texto Pre -Text: # 666666
Encabezado de texto de tamaño: 78 PX (escritorio), 50 px (tableta), 40 px (teléfono)

Distancia entre las letras del encabezado: 3 PX
Espacio crearemos el espacio alrededor de este módulo utilizando la siguiente configuración de espaciado:
SUS y margen inferior: 100 PX
Margen izquierdo: 100 PX (escritorio y tableta), 20 PX (teléfono)
Junta izquierda: 40 PX

Border también necesitaremos un borde izquierdo, así que continúe y agregue un borde izquierdo con la siguiente configuración:
Ancho del borde izquierdo: 6 PX
Color del borde izquierdo: # D67787
El botón de texto Agregue un enlace en lugar de usar un módulo de botón, usamos un módulo de texto al que agregaremos un enlace. Agregue CTA y enlace al cuadro de contenido.

Configuración del enlace de texto y luego aplique la siguiente configuración del enlace de texto para su módulo de texto:
Enlace de peso de la fuente: semi audaz
Estilo de fuente de enlace: cursiva y mayúscula

Alineación del texto del enlace: izquierda

Enlace de texto de color: # 666666 Separación del enlace Carta: 8 PX
Dimensión porque usaremos un borde inferior, más tarde, también reduciremos el ancho de este módulo de texto:
Ancho: 46%
Alineación del módulo: izquierda
Espacio y para garantizar que el borde inferior no esté demasiado cerca de nuestro texto, también agregaremos el relleno inferior “10 PX”.
Finamiento inferior: 10 PX

Borde ahora podemos continuar con la adición de un borde inferior utilizando la siguiente configuración:
Ancho de borde inferior: 1 PX
Color del borde inferior: # 666666

Animación agregamos una animación sutil:
Estilo de animación: diapositiva


Dirección de la animación: correcto
Animación de retraso: 100 ms
Intensidad de animación: 5%

Agregue una visibilidad del módulo divisor El último modo que necesitamos en esta fila es un módulo divisor. Asegúrese de dejar activada la opción “divisor”.
Color Usamos el mismo color para este divisor que para el borde izquierdo del módulo de texto del módulo: “# D67787”.
Dimensión luego abra la configuración del tamaño y cambie el peso del divisor a “2 PX”.
Espacio empujaremos el módulo divisor hacia la derecha utilizando la siguiente configuración de espaciado:
Margen izquierdo: 200 PX

Margen derecho: -100px

Animación por último, pero no menos importante, incluiremos la siguiente animación:

Estilo de animación: diapositiva

Dirección de la animación: izquierda
Retraso de animación: 150 ms
Intensidad de animación: 5%

Agregue una segunda configuración de configuración de sección estándar, terminamos con la primera sección, para que podamos continuar y agregar una nueva sección justo debajo de la anterior. Abra la configuración de la sección y agregue el siguiente margen:
SUS y margen inferior: 80 PX
Agregue una nueva estructura de fila de la columna Continuar agregando una fila con la siguiente estructura de columnas: Dimensión y luego, abra la configuración de la fila y aumente el ancho utilizando la siguiente configuración:
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2
El espacio tendrá que agregar algunos rellenos en la columna 2:

Columna 2 Lineo izquierdo: 100 PX (escritorio), 0 PX (tableta y teléfono)

Agregue el módulo de imagen a la columna 1 Cargue la imagen Ahora podemos comenzar a agregar módulos a nuestras dos columnas. Comience agregando un módulo de imagen en su primera columna y cargue una imagen de su elección.
Espacio aumentaremos el ancho del módulo de imagen agregando un margen derecho negativo:
Margen derecho: -100px
Box Shadow También usaremos la próxima sombra del cuadro para crear un elemento de diseño adicional en la página:

Posición horizontal de la sombra de la caja: 100 px
Box Shadow Posición vertical: 100 PX

Poder de extender la sombra de la caja: -14px

Color de la sombra: #efefef
Modo de texto del botón clon y colocar debajo del módulo de imagen Localizar y clonar El módulo de texto del botón Reutilizaremos los tres módulos de texto en la primera sección comenzando con el módulo de texto. Continúa y clonalo.

Coloque debajo de la imagen y luego colóquela justo debajo del módulo de imagen en la primera columna.
Clone El primer módulo de texto en la primera sección y coloque en la columna 2 ubicada y clone el módulo de texto El siguiente texto que necesitamos es el primero en nuestra sección. Continúa y clonalo también.
Coloque en la columna 2 en lugar de colocarlo en la primera columna, tírelo en la segunda.
Clone El título del título y el lugar del título en la columna 2 ubicado y clone el módulo de texto al final, reutilizaremos el texto del título. Lugaremos en la columna 2 Después de clonarlo, colóquelo en la segunda columna de la nueva fila.
Cambie el contenido a H2 Cambie el contenido de su cuadro de contenido H2.

Configuración de texto H2 Luego agregue la siguiente configuración a la configuración de texto H2:

2 Sección de fuentes: Georgia

El color de texto de 2: # 666666

Rúbrica 2 Dimensión de texto: 58 PX

Rúbrica 2 Espaciación de litros: 3 PX

Agregue una configuración de texto del módulo descripción en el modo de texto del título, agregaremos un modo de texto con la siguiente configuración de texto:

El peso de la fuente de texto: luz

Texto de la carta de espacio: 1 PX
Dimensión continúa y cambia el tamaño de este módulo de texto:
Ancho: 70%
Alineación del módulo: correcto
Agregue el Módulo Divisor # 1 Visibilidad El siguiente modo que necesitaremos es un módulo Divisor. Asegúrese de que la opción Divisor del programa esté activada.

Cambio de color su color divisor a “# 66666”.
Espacio Agregar espacio debajo:
Margen superior: 100 PX

Margen izquierdo: 400 PX (escritorio), 300 PX (tableta), 200 PX (teléfono)
Margen derecho: -100px
Animación y, por supuesto, también usaremos una animación sutil:

Estilo de animación: diapositiva

Dirección de la animación: izquierda

Intensidad de animación: 5%
Agregue el Módulo Divisor # 2 Visibilidad No menos importante, agregaremos otro módulo Divisor. Nuevamente, asegúrese de que la opción Divisor del programa esté activada.
Cambio de color su color divisor a “# D67787”.
La dimensión usa “2px” para el peso del divisor.

Espacio y agregue la siguiente configuración de espaciado:
Margen izquierdo: 200 PX (escritorio y tableta), 150 PX (teléfono)
Margen derecho: -100pxanimation Para terminar, agregue una animación sutil a su división:
Estilo de animación: diapositiva

Dirección de la animación: izquierda

Animación de retraso: 100 ms

Intensidad de animación: 5%

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales En esta publicación, le mostré algunas técnicas de división maravillosas sobre cómo crear sitios web mínimos.Esta es la segunda publicación de la serie sobre cómo hacer hermosos estilos de diseño utilizando su creatividad y algunas de las mejores opciones divididas.En las siguientes publicaciones, compartiremos técnicas sobre cómo obtener más estilos de diseño increíbles.Si tiene alguna pregunta o sugerencia, asegúrese de dejar una sección de comentarios a continuación.