Contenido del curso
Unidades de Espaciado en Diseño de Interfaces
Los grids nos sirven para definir el tamaño horizontal que podrán tener nuestros elementos, para una aplicación móvil suele usarse una retícula de 4 columnas, así, nuestros componentes podrán tener un ancho de 1, 2, 3 o 4 columnas.
Las unidades de espaciado: sirven para separar rítmicamente componentes, así estandarizaras los espacios entre componente y componente basándote en una unidad básica de espaciado.
Al definir la unidad básica, sobre esa se definen unidades complementarias de:
Luis Glex
Estudiante
Laura Páez
EstudianteLuis Glex
Estudiante
Roger Carlos Ariel Alba
Estudiante
Carlos Corona Pestana
Estudiante
Yusting Andrés Mora González
Estudiante
Salvador Salva
Estudiante
Daniel Idarraga
Estudiante
Platzi Team
EstudiantePlatzi Team
Estudiante
Angel David Castiblanco Sepulveda
Estudiante
Esteban Vásquez Quesada
Estudiante
Ivan Gomez
Estudiante
Freddy Gonzalez
Estudiante
Naza maurice
Estudiante
Karem Benique
Estudiante
Raúl González
Profesor
Antonio Alexander Estrella Gómez
Estudiante
Juan David ROJAS
Estudiante
Manuel Martínez Ortiz
Estudiante
juan pablo carrasquilla
Estudiante
Daniel Peñaloza
Estudiante
Pedro Isaac Aguilar
Estudiante
Tania Ramírez
Estudiante
Wilson Marino Pablo Mendez
Estudiante
Andres Mauricio Blanco Medina
Estudiante
Juan Germán Guzmán Riaño
Estudiante
Emeli Nahir Fernandez
Estudiante
Ada Rosa Quispe Mamani
Estudiante
Nicoll Diaz
Estudiante
ROCIO DEL PILAR CANTILLO PEÑATE
EstudianteAdobe xd tiene la opción de "mostrar cuadrícula" justo debajo de "mostrar grillas", la ventaja es que podemos definir el tamaño de la cuadrícula (8px por ejemplo) y facilitarnos el trabajo de los espaciados y ritmo.
Maravillosa opción ;)
@LauraPaez sí, es bastante útil. Saludos!!
En el curso de Adobe XD, Carlos (El profesor), recomienda unidades de medida basadas en 8 y multiplos. 8 como una unidad 16 dos unidades 24 tres unidades Pero podría ser también 8 como una unidad 12 unidad y media 16 dos unidades 20 dos unidades y media
Muy útil esto. Gracias!
⭐ Bienevenidos al 2022, en donde Figma SÍ muestra los valores de los margenes, paddings y demás valores de manera completamente automática, (Obviamente lo tienes que ajustar a tu gusto pero eso hace que sea múcho más fácil a demásde práctico.
Muchas grandes compañías usan el grid basado en 8px, pueden verlo por ejemplo en el Design System de Trello: [Nachos] (https://design.trello.com/style/layout)
También pueden aprender sobre espaciado revisando la documentación de Design Systems. Les recomiendo Carbon el Design System opensource de IBM.
Alguien sabe de algún software o página para documentar las guías de diseño como lo hace Atlassian.design?
Viéndolo bien, el logo tiene mucho peso con respecto a los otros elementos (que deben ser más relevantes). Mala mía.
Tienes razón, aún así está genial!
Creo que Figma ya tiene esa funcionalidad, o me equivoco?
Es correcto se llama autolayout y ahi puedes darle padding y espaciado
Concuerdo con el tema de las unidades de medida, sobretodo me va muy bien utilizando 8px como valor. Ademas de esto es muy útil igualar el valor de NUDGE del programa que estemos empleando con el valor unitario (8px en mi caso) , de esta manera lo movimientos que se realicen utilizando SHIFT + FLECHA a través del teclado, se harán en intervalos de 8px , garantizando así el espaciado correspondiente a la unidad escogida
Mi perfil
Estoy amando este curso! Son detalles que en otros cursos los pasan en 4 segundos pero Platzy se tomo un video entero en esto. Genialisimo!!! Si alguien esta interesado en tener un study partner, agreguenme a IG kaabstract. Yo estoy empezando el curso, pero tengo muchas ganas :)
💛
25. Diseñando con grid y espaciado
XD no es malo, pero Figma es otro nivel.
mi pregunta es , el profe utiliza 4 columnas pero en otros cursos utilizan 12 entonces hay momentos donde es mejor usar unas u otras o es lo mismo, gracias =)
12 columnas es muy usado en web, pero en apps móviles se usa mucho más 4 columnas. Te dejo acá el link de Material Design, que es muy usado es muy usado en la industria. Acá te dejo el link de columnas y acá el link de espaciado que tiene una base de 8px (Son espaciados con múltiplos de 8, 8px, 16px, 24px, etc.)
Espero te sirva.
Hasta la fecha, no hay ningún software de diseño que ofrezca la funcionalidad de controlar perfectamente los espaciados de cada elemento de la interfaz (como en el desarrollo web, que se utilizan parámetros como el padding, margin y border), por lo cual, valiéndonos de los grids que tienen tanto XD como Figma y Sketch, con los que podemos crear de manera manual ritmo y armonía en nuestras interfaces asegurándonos de que los espaciados no estén improvisados, sino que sigan una estructura precisa y bien planeada. Una forma sencilla de hacer esto es trazando cuadrados de diferentes tamaños de espaciado y alineando los elementos de la interfaz conforme a esas medidas repetidas según cada elemento (títulos, párrafos, imágenes, botones, secciones, etc.).
Tener decimales en la posición de los elementos es un dolor de huesos
Exacto! Saludos
A veces visualmente se ve mejor cuando ciertos elementos manejan un espaciado menor o distinto que otros... ¿esa clase de decisiones se pueden documentar/sistematizar también? ¿o siempre se debe manejar un único espaciado para todo?
La idea es que puedas poner espacios mayores o menores, pero que estén relacionados, en el video él nos da el ejemplo de 10 (1 unidad) 20(2 unidades) 30(3 unidades). Es decir, son bloques de diez píxeles y para alguna necesidad aún más pequeña utiliza media unidad, es decir 5
