Unidades de Espaciado en Diseño de Interfaces
Contenido del curso
Luis Glex
Laura Páez
Luis Glex
Roger Carlos Ariel Alba
Carlos Corona Pestana
Yusting Andrés Mora González
Salvador Salva
Daniel Idarraga
Platzi Team
Platzi Team
Angel David Castiblanco Sepulveda
Esteban Vásquez Quesada
Ivan Gomez
Freddy Gonzalez
Naza maurice
Karem Benique
Raúl González
Profesor
Antonio Alexander Estrella Gómez
Juan David ROJAS
Manuel Martínez Ortiz
juan pablo carrasquilla
Daniel Peñaloza
Pedro Isaac Aguilar
Tania Ramírez
Wilson Marino Pablo Mendez
Andres Mauricio Blanco Medina
Juan Germán Guzmán Riaño
Emeli Nahir Fernandez
Ada Rosa Quispe Mamani
Nicoll Diaz
ROCIO DEL PILAR CANTILLO PEÑATE
Adobe 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
