No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Reglas de espaciado

14/23
Recursos

Las reglas de espaciado son muy útiles cuando trabajamos nuestros sistemas de diseño para anticipar la visualización de nuestras interfaces en diferentes dispositivos.

  • Ritmo: Qué tan seguido aparecen elementos arriba o debajo de otros.
  • Padding: Es el espacio dentro de nuestros elementos, nos ayuda a enfocar y transmitir los estilos de nuestra marca.
  • Margin: Es el espacio entre elementos pero hacia afuera, nos permite generar ritmo visual o para separar elementos de secciones diferentes.
  • Border: Trabajamos con el borde de los elementos, recuerda que las dimensiones o medidas de nuestros objetos se verán afectadas al aplicar o no aplicar estos bordes.
  • Layout: Vamos a definir la forma general en que combinamos las columnas, headers y barras de navegación de nuestras plataformas, gracias a estas reglas podemos garantizar que nos adaptamos a todos los tamaños y dispositivos.

Aportes 55

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Acá les dejo una imagen, ojalá les sirva.

Aclaro: El elemento de 50 x 50px con borde de 1px tendría un tamaño de 52 x 52px. Si agregamos un margen de 1px pasaría a medir 54px x 54px. Recuerda que si agregas un borde de 1px se agregará en todas las aristas, arriba, derecha, abajo e izquierda, sumando 2px a cada eje.

En CSS Diego de Granda nos enseño a utilizar la unidad “rem” ya que esta toma el valor del tamaño de fuente del elemento padre mas lejano (html) que al asignarle a este elemento un font-size de 62.5% hacia que un “rem” fuera igual a 10px lo cual considero que podría utilizarse para el ejemplo de esta clase.

tamaño de las distancias o espaciados
size = 32px

margin = azul
margin = size/2

padding = rojo
padding = size/2

Podemos añadir bootstrap a adobe XD ??? para probar como va a quedar la app antes de empezar a programar??

Gracias!!!

px=pixeles Si un elemento mide 50px por 50px y le poner un border de 1px el elemento medirá 52px y le ponemos una margen de 1px el elemento mide 54px Esto por que pues que al colocar un margen, border, etc este se coloca a la derecha e izquierda arriba y abajo.(Hay excepciones)

Composing Layout

Concepto clave
Los Layouts son la culminación de reglas espaciales y de la organización de contenido en una simple composición.

.
Definiendo el escalado lógico, es posible definir nuestros puntos de cambio (Break points) para escalar los tamaños y la variedad de tamaño de nuestros elementos.
.

Adaptativo

ℹ️ Definición
Es un layout que cambia enteramente en el formato que será presentado.

.
Generalmente, se trabajan diferentes experiencias según sea el dispositivo (Desktop, Tablet, Mobile, etc.).
.

.

Responsivo

ℹ️ Definición
Es un layout que adapta el contenido con base en la dimensión actual, mantenido el mismo a escala.

.
Generalmente, el más costoso ya que se busca homologar un misma experiencia a lo largo de todos los tamaños de ventanas.
.

.

Estricto

ℹ️ Definición
Ya que se omite la interacción, se degrada la flexibilidad por la legibilidad.
Utilizada por gráficas o tablas de información.

.
Ya que se omite la interacción, se degrada la flexibilidad por la legibilidad.
.
Utilizada por gráficas o tablas de información.
.

Cuando no están definidas las reglas de espaciado, es muy común que la gente de Front-end según el dispositivo tienda a separar los elementos de manera subjetiva.

Regla de espaciado: Definir el espacio que va a tener un elemento del otro. Esto permite generar Ritmo en la aplicación. Hay 3 tipos de espacios que podemos encontrar cuando estamos diseñando (Padding, border, margin)

Padding: Es el espacio que se encuentra entre el borde y el interior del elemento.

Margin: es un espaciado que tiene el elemento hacia afuera.

Border: Es el espacio que le damos al borde del elemento.

Es importante definir los distintos tipos de layout que tiene nuestra aplicación. Layout es un template donde se define las posiciones y distribución de los elementos que componen la pagina.

En el momento de documentar, tener en cuenta dejar claro como se manejan las unidades de espaciados. Y definir las unidades de espaciado que va a llevar los padding, border y margin de cada elemento.

Tengo una duda, tratare de explicarlo en el sistema que uso para programar al poner los elementos en la pantalla, siempre me queda un espaciado diferente mas que nada por el pading, en este caso que recomendación me darías
1.-

  • En esta imagen es para mostrar que todos los elementos tienen el mismo tamaño de 20 puntos y los dejo pegados para que “tengan la misma distancia”

2.-

  • Esta otra imagen es la diferencia que existe al empezar el texto en los elementos se empieza hacer mas grande por los padings que tienen

Todos los elementos tienen la opción de centrado.

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

Pues, si sabes CSS esto se te hace muy fácil de entender porque es el día a día, el Box Model o modelo de caja:

Mírenlo así: Todo elemento está contenido en una caja o box,

  1. El espacio interno entre los bordes de la caja y el contenido se le dice padding.
  2. Luego los bordes, pues son los border, y pueden ser de 0px es decir, no estar, o ser de más píxeles.
  3. Luego están los márgenes, conocidos como margin, estos definen cuánto espacio hay entre este elemento y otro elemento que tenga hacia cualquiera de los lados, arriba (top), abajo (bottom), izquierda (left) o derecha (right).

A mí la que me funciona bastante bien es la Regla del 8. En la cual baso todas las medidas basadas en los números múltiplos de 8,

¿Qué es un Grid?

ℹ️ Definición
Un sistema espacial define las reglas de tamaño y espaciado, mientras una grilla ayuda a la organización de nuestro contenido en proposiciones estructuradas.

.
Tomando los principios de la impresión, se toma a las grillas para organizar bloques de texto e imágenes a jerarquías visuales con el objetivo de la legibilidad.
.

Column Grid

ℹ️ Definición
Una organización de contenido en una distribución de espacio vertical, uniformemente.

.
Un ejemplo común es el uso de 12 columnas, permitiendo dividir el área en mitad, tercias, cuartas y sextas.
.

.

Modular Grid

ℹ️ Definición
Una organización que toma columnas y renglones, distribuyendo el contenido en una matriz estructural.

.
Una matriz modular es ideal para el estricto formato, flexible donde se dicta su área.
.

.

Baseline Grid

ℹ️ Definición
Una organización usada para la distribución de texto, párrafos, etc.

.

Hay que definir el espacio que tendrán los elementos entre si, para generar un ritmo dentro del proyecto. Es mejor que haya un ritmo visual tranquilo, a uno acelerado. Tenemos 3 tipos de espaciado:

  • Padding: Es el espacio que hay del borde, hacia adentro.
  • Border: Es el espacio que le puedes dar al borde.
  • Margin: Es el espacio que hay por fuera del elemento

El layout son cosas que se tienen que definir, para saber el orden donde irán todas las cosas y contenido de nuestro proyecto.

Se pueden hacer reglas de espaciado, donde utilicemos unidades de acuerdo a una medida exacta, esto ayudara mucho al programador al momento de hacer la pagina.

¿Qué es un sistema espacial?

Concepto clave
Un sistema espacial, grid y layout proveen de reglas que dan a nuestros diseños un ritmo consistente, acotando la toma de decisiones, ayudando a los equipos a mantenerse alineados.

.

ℹ️ Definición
Un sistema espacial es un conjunto de reglas para gestionar las medidas, tamaños y espacio entre los elementos conformantes de un sistema de diseño.

.
Uniformemente, homologa una consistencia reduciendo el número de desiciones al momento de incorporar nuevos elementos visuales.
.
Como recomendación, se empieza definiendo una unidad base que servirá como referencia para crear una escala de valores
.
De ahí, puede variar los siguientes pasos a realizar porque supongamos:
.

.
En la imagen, podemos observer un tamaño de palabra (20px).
.
De aquí podemos suponer 2 tipos de transformación sobre un espaciado, del cual definiría un determinado comportamiento.
.

Debate
¿Cómo deberíamos priorizar nuestras medidas, elemento o contenido?

.

Priorizando elemento (tamaño)

Enfocándonos en el tamaño, tomamos prioridad de los elementos con contenido predecible, manteniendo el ritmo como conjunto de información.
.
Podemos mencionar botones (buttons) o entradas de texto (input text).
.

.

Priorizando contenido (margin / padding)

Enfocándonos en las dimensiones, tomamos prioridad de los elementos con contenido menos predecible, del cual tomamos cuidado de su puesta en escena.
.
Podemos mencionar que tablas o descriptores (hero).
.

.

Borde interior o exterior


.

Concepto clave
Herramientas como Figma exponen bordes internos y externos, los cuales en la web podemos manipularla mediante la propiedad box-sizing.

.
De esto, tenemos que tomar la decisión de aquel aspecto que deberá comportarse a lo largo de un sistema de diseño un elemento, y no como una sola unidad.
.
El uso de box-sizing dependerá de:

  • content-box - Al darle la propiedad al elemento, todas las medidas encapsuladas será sumadas al rederizado final, pudiendo superar la medida final.
    .
  • border-box - Al darle la propiedad al elemento, todas las medidas encapsuladas será sumadas, dando una medida exacta.
    .

Es importante para el border conocer si es Inner, center o outter. con ello influye o no en el tamaño del elemento.

¡Yo también te quiero profe!

Interesante información. Normalmente, no nos preocupamos (yo), hasta que, ya estoy escribiendo el código.

Este tema al principio puede ser un poco confuso yo la unica forma de poder entenderlo bien es
Padin = border transparente desde la caja hacia dentro
Border = border con cualquier color desde la caja hacia fuera
Margin = espacio de separación entre las cajas las cuales pueden estar con bordes o sin ellos

Este curso me gusta cada vez mas.

Es importante dejar claras las reglas de diseño para que el programador no trate de reparar como el creé que debe hacerse.

Reglas de espaciado Cuando hacemos sistema de diseño tenemos elementos de espacio Ui designado \_ software lOS DISEÑADORES TIENEN QUE SABER LAS RELGAS DE ESPACIO DEFINIR QUE ESPACIO VA A TENER UN ELEMENTO DEL OTRO PARA GENERAR UN RITMO DE LA APLICACION ESPACIO QUE SE VE CUANDO UNA ESTE ARRIBA Y OTRA ABAJO DEFINIR EL ESPACIO ENTRE ELEMENTO Y ELEMENTO NOS DA GERARQUIA VISUAL HAY 3 COSAS QUE INTERVIENEN EN UN ELEMENTO MARGEN PADDIN BORDER PADDING: ESPACIADO DESDE EL BORDE HACIA EL INTERIOR DEL ELEMENTO Genera mayor espacio visual un ritmo MARGEN : ESPACIADO LOS ELEMETNOS HACIA AFUERA Cuando se unen sus cantidades se suman y el total son el espaciado entre un elemento y otro BORDE: Es el espacio que le das al BORDE IMPORTANT: LAYOUT: Orden donde ya sabemos donde van las cosas Se divide en columnas Hace mas chico el espacio de contenido Donde se definen las reglas COMO DEFINIMOS LAS UNIDADES DE ESPACIADO: UNIDADES

a esta clase le falto animaciones, pudo mostrar un cuadrado en el navegador e ir variándole las cosas que mencionó

14. Reglas de espaciado

  • Las reglas de espaciado deben pensarse con los diferentes tamaños de pantalla
  • Estandarizar espacios con gráfica y software
  • El espacio se usa para generar ritmo visual
  • Espacio
    • Padding
      • No afecta el tamaño del objeto
    • Border
    • Margin
  • Layout
    • Columnas
    • Grillas
  • Unidades: son la cantidad que se usa en un espacio
  • Se hacen reglas de espaciado para los elementos de forma general
  • Crear la lógica de las unidades de espaciado

un pan ahhhahahahah grande rulotico, siempre tan particular XD

equisde

son mas conceptos que se usan en web, bueno yo lo uso solo en css

este tema de espaciado,en vez de escribirlo, ¿seria mejor ponerlo en zeplin y ahi nos respetaria los px de los espaciados?

Wow! Todo ha cambiado tanto desde que se grabó este curso! Adobe Xd ya trabaja con padding, ya no solo es algo de programación!

Podemos añadir bootstrap a adobe XD ??? para probar como va a quedar la app antes de empezar a programar??

Gracias!!!

Que hermosaaaaa claseeeeee 😱

Es muy interesante este enfoque ya que a la hora de programar en el frontend una de las medidas que se usa es el REM y se puede configurar para que valga 10px. • Configuramos la etiqueta principal html para que se aplique una herencia de 1REM = 10px css3 ``` html { font-size: 65.5%; } body { // 1rem = 10px margin: 1rem; // 0.5rem = 5px border: 0.5rem solid black; // 2rem = 20px; padding: 2rem; } ```
Gracias
Las reglas de espaciado son muy útiles cuando trabajamos nuestros sistemas de diseño para anticipar la visualización de nuestras interfaces en diferentes dispositivos. * **Ritmo**: Qué tan seguido aparecen elementos arriba o debajo de otros. * **Padding**: Es el espacio dentro de nuestros elementos, nos ayuda a enfocar y transmitir los estilos de nuestra marca. * **Margin**: Es el espacio entre elementos pero hacia afuera, nos permite generar ritmo visual o para separar elementos de secciones diferentes. * **Border**: Trabajamos con el borde de los elementos, recuerda que las dimensiones o medidas de nuestros objetos se verán afectadas al aplicar o no aplicar estos bordes. * **Layout**: Vamos a definir la forma general en que combinamos las columnas, headers y barras de navegación de nuestras plataformas, gracias a estas reglas podemos garantizar que nos adaptamos a todos los tamaños y dispositivos.

Mantener un espaciado consistente entre elementos similares brinda coherencia y facilita la comprensión del diseño. Asegúrate de establecer medidas uniformes para el espaciado vertical y horizontal en elementos como botones, campos de formulario y bloques de contenido.
Esta uniformidad no solo contribuirá a una apariencia estéticamente agradable, sino que también mejorará la legibilidad y la comprensión de la interfaz por parte de los usuarios, independientemente del dispositivo que utilicen. La coherencia en el espaciado es un aspecto fundamental para garantizar la usabilidad y la percepción visual positiva de tu sistema de diseño.

Interesante esto de que el layout sea en columnas, toca averiguar más xd

Que gran profesor!!

Cabe recordar que es siempre mejor emplear las medidas “rem” que “px” debido a temas de accesibilidad y facilidad en cuanto a la construcción de nuestro sitio o app. Esto se puede alterar escribiendo en la etiqueta de html en nuestro archivo de css:

html {
	font-size: 62.5%;
}

.
Así no sólo alteramos el tamaño base de nuestas fuentes sino también estandarizamos todo con las medidas rem

Unidades de espaciado, muy util

se puede enviar el link de notion por aca?

El border es el borde basicamente!!!😁
pos sí

El ritmo es el espacio que se da a un elemento arriba y a otro abajo. Afecta directamente en la estructura y la jerarquización de la información. Se genera ritmo visual al generar espacio entre un elemento y otro.

Hay tres componentes de espaciado que intervienen en los elementos gráficos web y de interfaces, y que afectan el ritmo:

  • Padding. Espaciado alrededor de un elemento, hacia adentro.

  • Margin. Espaciado de los elementos hacia afuera.

  • Border. Espacio que se le puede dar al contorno del elemento.

Por otro lado, está este componente de las interfaces, el cual es importante en la arquitectura de información:

  • Layout. Es el ordenamiento de los elementos. Se divide en columnas, que son las que construyen los diferentes tamaños de pantalla.

Spacing

Layout

Ritmo

Me parece o el profesor tiene la voz de Sasuke? xD

El notion de Rulotico no esta completo!!!

cv

alguien en pleno 2021 tiene accesos al documento de Notion ?

¿Soy yo o no funciona el enlace de Notion?

Apuntes de la clase:

<h3>Reglas de espaciado</h3>

Esto es importante por todos los distintos tamaños de pantallas que tenemos actualmente. Al definir el espaciado entre los elementos generamos un ritmo visual.

Tenemos 3 elementos (en CSS) que afectan nuestro espaciado:

  • Padding : Espaciado que se encuentra desde el borde hacía el interior del elemento.
  • Margin : Espaciado que tienen los elementos hacía afuera.
  • Border : Pues es el borde.
  • Layouts : Una de las cosas primordiales que tienes que definir desde un principio. Es un orden en donde ya sabemos dónde van las cosas. Lo más común es usar Bootstrap.

El espaciado entre 2 componentes se llama unidaddes.

De igual forma debes documentar esto.

https://youtu.be/rYx7W49dF2E yo quede con dudas sobre padding y margin que este video de 3 minutos me dejo claro.

I’m 🦄