6 Div

El diseño web plano es popular debido a sus valores básicos. Se centra en el uso y prioriza primero la experiencia del usuario. Esto, en combinación con un diseño elegante y moderno, es un buen sitio web. Cada elemento de diseño en un sitio web plano debe estar bien pensado antes de agregar a una página. También debe centrarse en la simplicidad, pero hermosa y la participación al mismo tiempo. No olvidemos que deben atraer la atención de los visitantes y hacerlos curiosos para averiguar cuál es su empresa. En esta publicación, compartiremos algunas técnicas para crear un diseño web plano con Div. Esta es la tercera publicación de la serie de estaciones en las que administramos 4 estilos de sitios web y cómo hacerlos usando Div:
Limpio y abstracto
Mínimo
Departamento
Audaz y colorido
¡Vamos a eso! 1. Mantenga la sección de héroe limpia y comprensible como se menciona en la introducción de esta publicación, la usabilidad es un aspecto muy importante del diseño de la red plana. Le permite llegar al sujeto y compartir información relevante a los visitantes sin sobrecargarlos. Al mismo tiempo, use un aspecto hermoso que se ajuste a la marca de su empresa. Hay muchas maneras de crear modelos web planos, pero lo que noté casi en todas partes es la simplicidad de la sección de héroes. Y el diseño simple no significa aburrido. Significa que no tienes que latir alrededor del monte. Puede llegar al sujeto sin tener que exagerar el diseño que crea para tratar de impresionar a los visitantes.

2. Enfatice las estructuras de la caja, otra cosa que es típica en los estilos de diseño de la red plana es el uso de estructuras de caja. Si conoce la división, sabe que puede encontrar estructuras de cajas prácticamente en todas partes del constructor. Proporcionan una determinada estructura a su sitio web y le permiten construir un marco con anticipación. Dentro de los proyectos planos, las estructuras de la caja generalmente se acentúan. Esto permite a las personas navegar fácilmente y encontrar lo que están buscando en cuestión de tiempo. Elija 3 colores brillantes que he mencionado hasta ahora el uso de cajas y una sección simple de héroes. En teoría, suena aburrido, ¿verdad? Para equilibrar este factor de uso en su sitio web, puede darle vida a una paleta de colores brillantes. Puede elegir dos o tres colores brillantes que personalizarán su sitio web y hará que coincida con los valores de su empresa.

4. Use combinaciones de colores con gradiente muy sutil, otra cosa que puede ayudarlo a detener el ciclo es el uso de combinaciones de colores de gradiente muy sutiles. Use el mismo color, pero un tono diferente para ambos colores degradados. Uno de ellos debe ser más brillante, mientras que el otro tiene una sensación más profunda. No parecerán de inmediato como un gradiente para las personas, pero lo ayudarán a darle a su sitio un poco más de profundidad y detalles.

5. Combine un estándar con una familia de fuentes elegantes Por lo general, muchos sitios web usan una familia de fuentes más elegante para los títulos y un estándar para el texto del cuerpo. ¿Por qué no cambiar las cosas? Esto definitivamente hará un cambio. Además, las personas tienden a omitir descripciones y solo leen títulos. Si este es el caso, desea que sus títulos sean tan fáciles de leer, ¿verdad? Una excelente combinación de familias de fuentes usa Arial para títulos y Georgia para el texto del cuerpo. Georgia sigue siendo muy fácil de leer, solo un poco más sofisticada y ofrece el contraste necesario con su sitio web. Juega con Heights El último consejo es jugar con la altura de los elementos de diseño en tus páginas. Te sorprendería cuánto puede contribuir a la apariencia general de su sitio web. Todavía mantenga la estructura de la caja recomendada para diseños planos, pero al mismo tiempo, ofrezca la interacción de los visitantes.

Vista previa He visto varias técnicas en la parte anterior de la publicación, ahora es el momento de poner en práctica el consejo. Crearemos paso a paso el siguiente resultado sorprendente:

Comencemos a crear: agregue la sección estándar no. 1 Configuración de la sección de fondo de gradiente Comience creando una nueva página y agregando una sección a esa página. Sin agregar líneas, abra la configuración de la sección. Utilizamos un fondo de gradiente sutil con la siguiente configuración:

Color 1: # 5214ff

Color 2: # 420FC1
Tipo de gradiente: lineal
Dirección de gradiente: 146 grados
Posición inicial: 30%
Espacio agregamos algunas secciones superior e inferior a nuestra sección:
Revestimiento superior: 55 px

Finamiento inferior: 130 PX
Agregue la estructura de columna de configuración de fila # 1 de fila Continuar agregando la primera fila. Esta sección consistirá, en total, de tres filas diferentes. Para el primer lugar, utilizamos la siguiente estructura de columnas: Dimensión abrir inmediatamente la configuración de la fila y activar la opción “Hacer este ancho completo” en la configuración del tamaño.
Agregue una configuración del módulo de texto de título H1 necesitará agregar solo un módulo de texto H1 a esta fila. Después de haber agregado el contenido (y asegúrese de ser H1), abra la configuración de texto H1 y aplique los siguientes cambios:

Fuente del título: Arial

Alineación del texto del encabezado: izquierda

Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño: 86 PX (escritorio), 65 PX (tableta), 45 PX (teléfono)
Altura de la línea de dirección: 1.2em
Agregue la configuración de la fila # 2 La estructura de la columna para pasar la siguiente fila. Nuevamente, usamos una sola fila de columna.
Dimensión Antes de agregar módulos, abra la configuración de la fila y aplique la siguiente configuración de tamaño:
Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Agregue un módulo de divisor de color Continúe agregando un módulo divisor a su columna. Usamos “# EDF000” como un color de separación.
La dimensión es ajustar la configuración de dimensionamiento de nuestro módulo divisor adicional:
Peso del divisor: 10 PX

Ancho: 64%

Alineación del módulo: correcto
Agregue la fila # 3 Row de la estructura de la columna por última vez, pero no menos importante, agregue una fila con dos columnas.
Dimensión Abra la configuración de la fila y active la opción “Hacer todo este ancho” en la configuración de tamaño.
Espaciado Elimina el relleno personalizado de la fila agregando “0px” al relleno superior y abajo. Agregue un módulo descripción en la columna 2 Configuración de texto Continuar agregando una descripción del módulo de texto en la segunda columna usando la siguiente configuración de texto:

Texto de fuente: Georgia

Color de texto: #ffffff

Tamaño de texto: 27 PX (escritorio), 22 PX (tableta), 18 PX (teléfono)

La altura de la línea de texto: 1.9em
Alineación del texto: Derecho
Agregue un módulo de botón al botón de alineación de la columna 2 alinee el giro hacia la derecha y en la configuración de alineación del módulo de texto.
Botón de configuración Siguiente y último módulo Tendremos que agregar a la sección Hero es un módulo de botón. Después de agregar la copia, aplique la siguiente configuración del botón:
Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 27 PX


El color del texto del botón: # 303030

El color de fondo del botón: # EDF000
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Georgia
Agregue la sección estándar no. 2 Configuración de configuración ¡Podemos pasar a la segunda sección! Abra la configuración de la sección y use el siguiente relleno:
Revestimiento superior: 155 PX
Finamiento inferior: 200 PX
Agregue la estructura de columna de configuración de fila # 1 La primera fila que agregaremos contendrá nuestro círculo rojo. Elija la siguiente estructura de columna para su turno:


Gradiente de fondo de la columna 1 En lugar de cargar un módulo de imagen, usaremos un jardinero radial de la columna 1. Usamos el color rojo en nuestra paleta de colores en combinación con un color completamente transparente.
Color 1: # FF3233
Color 2: RGBA (255,255,255.0)


Columna 1 tipo de gradiente: radial

Columna 1 Posición de inicio: 45%
Columna 1 Posición final: 45%Dimensión Continúe cambiando 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: 1
Agregue un módulo divisor Ocultar el divisor para asegurarse de que aparezca el fondo de nuestra columna, agregaremos un módulo divisor en la primera columna. Sin embargo, no queremos que aparezca el divisor. Es por eso que desactivaremos la opción “Muestra el divisor”.

Espacio y para el fondo del gradiente de columna que se exhibirá, agregaremos el siguiente margen al módulo divisor:
Up: 150 PX (escritorio), 200 PX (tableta y teléfono)
Abajo: 150 PX (escritorio), 200 PX (tableta y teléfono)
Regrese a la configuración de fila Agregar espacio. Haremos que este círculo rojo se superponga en ambas secciones en nuestra página. Para hacer esto, reabriremos la configuración de la fila y agregaremos un margen negativo:

Margen superior: -350px (escritorio), -400px (tableta y teléfono)

Margen izquierdo: -250 PX (escritorio y teléfono), -400 PX (tableta)
Agregue la fila # 2 Row de la estructura de la columna para pasar el segundo. Esta fila contendrá un texto de texto y divisor. Elija la siguiente estructura de columnas:
El espacio reduce el espacio que esta línea crea usando “0PX” para el revestimiento superior.

Agregue una configuración del módulo de texto de título H2 Ahora podemos agregar nuestros módulos. Comience agregando un nuevo módulo de texto H2 con la siguiente configuración de texto:
Título 2 Fuente: Arial
Título 2 Alineación de texto: Centro

Text Pre -Text: # 303030

Título 2 Dimensión de texto: 50 PX (escritorio), 45 PX (tableta), 32 PX (teléfono)

Título 2 Altura de la línea: 1.3em
Agregue un módulo divisor de color justo debajo del módulo de texto, agregue un módulo divisor. Esta vez, queremos que aparezca el divisor. Déle el código de color “# 5214ff”. Dimension Modifique la configuración de dimensionamiento del módulo divisor a continuación:
Peso del divisor: 10 PX
Ancho: 30%
Alineación del módulo: centro
Agregar configuración de fila # 3 La estructura de la columna es hora de crear la última fila usando cuatro columnas.

Copie los antecedentes del gradiente de sección Utilizaremos los mismos antecedentes de gradiente que para la sección Hero. Entonces, para ahorrarnos por algún tiempo, simplemente copiaremos esa configuración.

Glind el fondo del jardín en las columnas 1 y 3 y péguelos en la columna uno y tres.
Dimensión Vaya a la siguiente configuración de tamaño y haga que el giro ocupe todo el ancho de la pantalla.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Espacio cambiaremos la configuración del espacio:

Margen superior: 100 PX

Revestimiento superior e inferior: 0 px
Agregue un módulo de propaganda Seleccione el icono ahora que hemos terminado con la configuración de las filas, ¡podemos comenzar a agregar nuestros módulos! Necesitaremos cuatro módulos de propaganda, uno para cada columna. En lugar de crearlos por separado, crearemos uno y lo copiaremos más tarde. Una vez que haya agregado el contenido de la propaganda, continúe y seleccione un icono de su elección.
Abra la configuración del icono Abra la configuración del icono aún más y use el color del icono “# EDF000”.
Configuración de texto Continuar utilizando la siguiente configuración de texto:

Orientación de texto: centro
Color de texto: Abierto
Configuración de texto de título Abra la configuración de texto de título y realice algunos cambios:

Fuente del título: Arial

Título del texto Tamaño: 31 PXCînțEity de la línea del título: 2.6em

Configuración de texto de Corp, haremos que el texto del cuerpo coincida con el aspecto que creamos:
Cuerpo de fuentes: Georgia
Tamaño del texto del cuerpo: 18 PX

La altura de la línea del cuerpo: 2.2em
Espacio y finalmente para darle al módulo de la propaganda un espacio para respirar, agregue el siguiente revestimiento personalizado:
Revestimiento superior e inferior: 50 px
Revestimiento izquierdo y derecho: 20 PX

Clon y modifique el módulo de la propaganda Clon el módulo de Blurb & Place en la columna 2 Clon El módulo de la propaganda que acaba de crear y coloque el duplicado en la segunda columna.
Cambiar Iconia Lo primero que necesitará cambiar es el icono.
Cambie el color del icono y cambie el color del icono a “# FF3233”.
Cambie el color del texto porque estamos tratando con un color de fondo blanco, deberá cambiar el color del texto en “oscuro” en la configuración del texto.

Espacio jugamos con la altura de los módulos de la propaganda para que todo parezca un poco más. Para esto, abra la configuración de espaciado y use los siguientes valores de margen superior:
Margen superior: 100 PX (escritorio), 0 PX (tableta y teléfono)
Box Shadow Además, agregaremos una sombra muy sutil:

Poder de poco claro de la sombra de la caja: 80 px

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

Color de la sombra: RGBA (0.0,0,0.11)

Clon tanto los módulos de la propaganda y colóquelos en los módulos de columna restantes Ahora tenemos los dos módulos de blurbs que reutilizaremos para las columnas restantes. Clon cada uno de ellos una vez.

Coloque en las columnas 3 y 4 ¡Coloque los módulos de propaganda duplicados en su columna apropiada y termine!
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo al resultado final en diferentes dimensiones de pantalla. Finales en esta publicación, compartimos algunos consejos y técnicas con respecto a la creación de un diseño web plano.El diseño web plano es muy popular hoy en día, porque permite a los visitantes navegar fácilmente a través de las páginas y procesar la información más rápido.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.