Creación de un sistema de dimensiones y espacios con variables de diseño Divi 5

Divi 5 le brinda una forma estructurada de definir, administrar y reutilizar las decisiones del tamaño y el espacio en todo su sitio. Usando variables de diseño y preajustes, puede crear un sistema de diseño escalable que sea fácil de mantener, ajustar y replicar.

En esta publicación, le mostraremos cómo pensar en los sistemas, y lo guiaremos a través de la construcción de un sistema integral de tamaño y espaciado.

Divi 5 está listo para usarse en cualquier sitio nuevo que cree, pero se sugiere que espere en la migración de sitios existentes (por ahora).

¿Por qué utilizar un sistema de dimensiones y espacios?

La mayoría de los usuarios de Divi quieren consistencia en diseños, márgenes y tipografía. Pero pocos se toman el tiempo para definir estos estándares desde el principio. O si lo hace, es probable que lo haya hecho a través de un tema infantil muy con estilo. Ahora puedes:

Suscríbete a nuestro canal de YouTube

1. Defina una variable de número una vez (como 16px o abrazadera (16px, 4VW, 48px)))
2. Asignarlo a presets de módulo/elemento
3. U preajuste de grupos de opciones (como espaciado o dimensionamiento)
4. Actualice la variable más adelante y vea los cambios reflejados en todo el sitio
5. Use menos CSS en general para páginas más delgadas

Con otros constructores de sitios, los diseñadores tienden a apoyarse en gran medida en los marcos CSS para aplicar un espaciado y dimensionamiento consistentes mientras usan un sistema que pueden tomar de un proyecto a otro. Con Divi 5, puede crear su propio "Marco de diseño" que funcione dentro de la UI Divi utilizando las variables de diseño de Divi sin necesidad de tocar una sola línea de código.

Tamaño del elemento, relleno y márgenes

Cada elemento web tiene tres componentes que afectan el espacio y el tamaño general:

• Tamaño del elemento : el tamaño de contenido central de un elemento, definido por ancho y altura.
• ROLDEN : espacio agregado dentro de un elemento, aumentando su área en el que se puede hacer clic y su tamaño visual.
• Margen : espacio agregado fuera de un elemento, alejándolo de otros elementos.

Ejemplos prácticos para elementos Divi

En general, así es como puede esperar usar relleno y margen en Divi:

• Las secciones generalmente tienen relleno superior e inferior (no margen) para crear un espaciado vertical dentro de una página.
• Las filas a menudo se benefician del relleno vertical, pero de lo contrario dejan que el contenido las llene.
• Las columnas se centran principalmente en el margen aplicado para crear espacios de columna.
• Los módulos comúnmente usan un margen inferior para separar los elementos apilados claramente, pero la cantidad de margen depende de las agrupaciones visuales.

Valores de espaciado predeterminados de Divi

Los principiantes del diseño web que usan Divi probablemente ni siquiera se dan cuenta de que Divi toma algunas decisiones de espaciado para usted fuera de la caja. Los diseñadores más experimentados a menudo ajustanlos para que coincidan con sus objetivos, pero estos valores predeterminados permiten que la mayoría de las personas comiencen sus proyectos rápidamente.

Estos valores predeterminados pueden ser útiles, pero los diseñadores a menudo prefieren establecer sus propios estándares de espaciado. Si quisiera ver cómo se vería su página sin el relleno predeterminado configurado, puede hacer esto:

1. Vaya a cualquier elemento y encuentre el grupo de opciones de espaciado en la pestaña de diseño .
2. Abra el grupo de opción predeterminado y configure el relleno superior e inferior en 0 (cero).
3. Guarde el espaciado predeterminado OG Preset para aplicarlo en todo el sitio a cada elemento.

Esto le mostrará cómo se ven sus páginas sin la configuración predeterminada de Divi. No se verá tan bien, pero comenzará a ver lo que necesita hacer para crear su propio sistema de diseño (o puede usar los valores predeterminados de Divi y realizar cambios a medida que se ve con el mejor momento).

Usando una escala de espaciado de 8 puntos

La escala de 8 puntos es un esquema de diseño donde los valores de separación se construyen utilizando incrementos de 8. Entonces, en lugar de usar valores arbitrarios como 13px o 27px, se adhiere a valores como 8, 16, 24, 32, 40, 48, etc.

Este sistema ayuda:

• Mantenga el ritmo vertical y horizontal utilizando una rúbrica consistente de tamaños
• Asegurar las pilas de espaciado limpiamente a través de los puntos de interrupción
• Acelerar la toma de decisiones (menos opciones = diseño más rápido)

Puede usar la escala en PX o REM, dependiendo de su preferencia o tipo de escala. Por ejemplo, 16px se convierte en 1REM cuando el tamaño de fuente base es 16px.

Maqueta de una página que agrupa su atención a las áreas seleccionadas y empuja a los visitantes por la página con espaciado vertical

El espacio vertical le dice al lector dónde concentrarse. Los elementos agrupados junto con un espaciado más ajustado se consideran naturalmente como relacionados entre sí. Las cosas separadas por más espacio indican una nueva idea.

Cómo crear un sistema de dimensiones y espacios

Un sistema para sus tamaños y espacios consta de dos cosas: establecer variables o tokens que se utilizarán en todo un diseño y utilizan constantemente esas variables en todo el diseño del sitio. Así es como puedes hacer eso con Divi.

Paso 1: Cree variables de número en el Administrador de variables de diseño

Divi 5 presenta una interfaz visual para definir valores numéricos reutilizables. Cada variable de número incluye:

1. Un nombre fácilmente recordable (por ejemplo, Gap-SM, Text-H1) que no es demasiado largo
2. Un valor o función numérica calc () o clamp ()
3. Una unidad CSS (PX, REM, %, VW, etc.)

Debido al gerente variable, no necesita escribir variables CSS en una hoja de estilo separada. Establece todo esto en el Administrador de variables de diseño y luego selecciona los campos de entrada en el Visual Builder.

A continuación se muestra un conjunto inicial completo de variables numéricas para que coincida con un sistema de diseño de 8 puntos. No tiene que usar esto, pero le da una idea de lo que es posible.

Y así es como parece que esto se complete en el Administrador de variables.

Tenga en cuenta que estos valores de espaciado serán útiles en la próxima función de FlexBox de Divi 5

Paso 2: Planificación de su sistema de espaciado de 8 puntos

Sus páginas generalmente contendrán patrones repetidos de elementos. Busque grupos o grupos comunes como:

• Encabezado, párrafo, botón
• Encabezado pequeño, rumbo grande, párrafo
• Ícono, párrafo
• Tarjetas que contienen múltiples elementos

Con sus wireframes iniciales (o diseños de marcadores de posición), tendrá la oportunidad de crear patrones potenciales. También creará cosas que no encajan en patrones que tendrá que decidir cómo manejar. Pero todo eso es parte del diseño.

Puede hacer esto en Figma o creando directamente una página de estructura de alambre con elementos de marcador de posición en Divi. Solo consigue todo lo que puedas presentar en una página. Puede usar una extensión de Chrome llamada Medido Everything para ayudarlo a visualizar el espacio (al principio con el espacio predeterminado de Divi) a medida que comienza a ajustarlos.

Para usar la extensión, activela desde la barra de herramientas de extensión de Chrome. Luego haga clic en un elemento en la página que le interesa, enfocando la herramienta en ese elemento. A partir de ahí, mueva el mouse para medir varios aspectos entre el elemento seleccionado actualmente y otros elementos a medida que se desplaza sobre ellos.

Paso 3: Asignar variables de número a los preajustes del grupo de opciones

Con una estructura de alambre de una página configurada y una variable de diseño en su lugar, puede comenzar a hacer cambios relacionados con el espacio y el tamaño en su página. Puede comenzar con grupos de contenido primero. Centrémonos en el encabezado, el párrafo y el botón en la sección Hero.

Mañana con contenido de marcador de posición y dimensionamiento de fuente/fuente en su lugar

Tenga en cuenta que en este punto, querrá tener un primer borrador de su configuración de tipografía ya. Esto incluye fuentes, dimensiones de fuentes y altura de línea/espaciado de letras. Sin esto, es muy probable que reequilibre todo su tamaño una vez que establezca su sistema tipográfico.

Ejemplo de opciones de tamaño de tipografía configuradas como variables numéricas

Ahora, queremos evaluar qué espaciado predeterminado se aplica en el diseño. Para hacer esto, puedes mirar el cuadro anteriormente en la publicación y compararlo con lo que tenemos en la sección Hero. Obviamente, hay una sección (#1) y dos filas (#2 y#3). Por ahora, estableceremos el relleno de la fila superior/inferior de fila predeterminada en cero.

A continuación, tenemos dos opciones para el espacio de sección: podemos configurar el relleno en cero y resolverlo más tarde, o podemos establecer un relleno preliminar superior e inferior en el elemento predeterminado preestablecido para que las secciones se vean como esto:

• Desktop : relleno superior e inferior configurado en Space-XXXL
• Tableta : relleno superior e inferior establecido en Space-XXL
• Móvil : el relleno superior e inferior establecido en Space-XL

Pero lo que hace es para usted y las variables de diseño de espaciado que termina configurando (o usando los valores predeterminados si prefiere adoptarlas como suyas). Lo que tenemos en este momento (con el relleno de fila predeterminado establecido en cero y el relleno de sección personalizado):

Paso 4: espaciado del módulo

Lo siguiente que debe hacer es trabajar en el espacio entre los módulos dentro de las secciones/filas. La clave es elegir una forma consistente de aplicar espaciado a los módulos.

Tiene opciones, puede dividir el espacio de múltiples maneras:

• Aplicar espaciado al margen-top
• Aplicar espaciado al fondo del margen
• Aplicar espaciado uniformemente entre el margen-top y el fondo del margen

Es importante recordar que muchos módulos tienen un fondo de margen aplicado por defecto, por lo que le recomiendo que vaya con esa convención y comience allí al configurar su paradigma de espaciado. Para empezar, puede configurar los márgenes superior/inferior en cero para ver cómo se ve el espacio entre los módulos sin valores predeterminados que se aplican a ellos.

Dentro de esta sección, aplicamos 0px al margen superior e inferior para ver todos estos módulos sin espaciar predeterminados

Ahora, podemos comenzar a asignar variables de diseño de espaciado al fondo del margen de estos módulos para crear un sistema de espaciado. Comenzaremos con el encabezado y el texto del cuerpo.

A medida que comienza a ver patrones con el espacio de su módulo, es posible que desee agregar estas opciones de espaciado a los presets de elementos predeterminados. Y como necesita crear reglas de espaciado para elementos que se desvíen, puede crear presets de elementos personalizados. Los nuevos elementos utilizarán el preajuste predeterminado desde allí, pero puede seleccionar rápidamente un elemento preestablecido personalizado para varias situaciones.

¿Cómo usarás Divi 5 para el dimensionamiento y el espacio?

Crear un sistema de espaciado y dimensionamiento con el que esté satisfecho se reduce a practicar los fundamentos y apoyarse en las herramientas en cuestión. Divi 5 está en camino para crear el sistema de diseño de facto para sitios web de WordPress. Golpea el punto óptimo de tener mucha flexibilidad, pero es fácil envolver la cabeza.

Si nunca ha considerado crear sistemas de diseño, Divi le permite pensar en ello desde una variable de diseño y nivel preestablecido, no solo en un módulo individual o nivel de elemento. Esto le ayuda a aplicar constantemente las decisiones de diseño base a los elementos más rápido que nunca.

¿Probarás el sistema de 8 puntos o tienes otras cosas planificadas? Además, ¿esta es la primera vez que piensa en el espacio predeterminado de Divi? Hace que el diseño con Divi automático, pero para los diseñadores profesionales, es posible que desee cambiar algunos de esos valores predeterminados para lograr su visión perfecta de píxeles.

Divi 5 está listo para usarse en cualquier sitio nuevo que cree.