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 54

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 鈥渞em鈥 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 鈥渞em鈥 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)

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.

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.
.

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 鈥渢engan 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.

鈿ueden ver todas las notas de la clase en este Notion, adem谩s le agregu茅 recursos extras, espero les guste.

鉁擳ambi茅n escrib铆 el siguiente tutorial 8 atajados de teclado para ser un m谩ster en Notion.

Adem谩s del ritmo y el padding, la importancia del espaciado en la navegaci贸n del sitio es algo en lo que debemos poner mucha atenci贸n desde el momento de dise帽ar nuestro sistema鈥

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.

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 馃槺

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 鈥渞em鈥 que 鈥減x鈥 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鈥檓 馃