# Diseño geométrico: cuadrículas, formas y patrones [Canonical HTML page](https://gradiently.design/es/guide/geometric-design) Círculos, cuadrados, rayas y cuadrículas son las herramientas más antiguas del diseño gráfico, y siguen siendo las más fiables. Una guía práctica de cuadrículas, formas e ideas de patrones, con código que puedes pegar. ## The short version - El diseño geométrico construye imágenes y composiciones con formas regulares como círculos, cuadrados, triángulos y líneas rectas, normalmente dispuestas sobre una cuadrícula. - Una cuadrícula con márgenes, columnas y medianiles coherentes es lo que hace que las composiciones geométricas se sientan ordenadas y no meramente angulosas. - Los círculos tienden a leerse como amables y completos, los cuadrados como estables y los triángulos como direccionales y enérgicos. - Las rayas, los cuadros, los puntos, los rayos y los anillos se pueden dibujar con degradados CSS, sin ningún archivo de imagen. - Los patrones geométricos funcionan mejor con dos o tres colores y una escala clara, para apoyar el contenido en lugar de competir con él. El **diseño geométrico** construye lo visual con formas regulares (círculos, cuadrados, triángulos y líneas rectas) colocadas sobre una cuadrícula. Es el lenguaje de la Bauhaus, los carteles suizos, el Art Déco y la mayoría de los logotipos modernos. Se siente ordenado, seguro y atemporal porque las reglas se ven: las cosas se alinean, se repiten y se relacionan. A continuación verás cómo montar la cuadrícula, elegir formas a propósito y hacer patrones geométricos, incluidos varios que puedes dibujar solo con CSS. ## Empieza con una composición en cuadrícula Las formas por sí solas no hacen geométrico un diseño; lo hace la alineación. Una cuadrícula da a cada elemento un sitio: márgenes alrededor del borde, columnas a lo ancho del cuadro y medianiles entre ellas. Una vez que existe, cada círculo, bloque y línea de texto se ajusta a ella, y todo el diseño empieza a sentirse construido. | Formato | Tamaño | Margen | Cuadrícula | | --- | --- | --- | --- | | Publicación de Instagram | 1080×1350 | 72 px | 6 columnas, medianiles de 24 px | | Publicación cuadrada | 1080×1080 | 72 px | 6 columnas, medianiles de 24 px | | Historia | 1080×1920 | 72 px a los lados, 250 px arriba y abajo | 4 columnas, medianiles de 24 px | | Cartel A4 a 300 dpi | 2480×3508 | 177 px (15 mm) | 12 columnas, medianiles de 59 px | | Cabecera web | 1920×1080 | 120 px | 12 columnas, medianiles de 32 px | Cuadrículas de partida para formatos habituales. No son reglas de ninguna plataforma, solo valores razonables: ajústalos y luego mantenlos en toda una serie. Los maestros de este enfoque fueron los diseñadores suizos de los años 50 y 60, cuyos carteles siguen pareciendo actuales. [Diseño suizo](https://gradiently.design/es/guide/swiss-design) trata sus métodos, y [diseño Bauhaus](https://gradiently.design/es/guide/bauhaus-design) muestra dónde empezó el amor por el círculo, el cuadrado y el triángulo. ## Elegir formas a propósito Cada forma básica lleva asociaciones muy extendidas en la enseñanza del diseño, aunque ninguna es absoluta. Úsalas como tendencias y deja que el color y el contexto hagan el resto. - **Círculo:** completo, amable, concentrado. Bueno para destacar una sola cosa, como una fecha o un rostro. - **Cuadrado y rectángulo:** estable, honesto, estructural. El contenedor natural para texto e imágenes. - **Triángulo:** direccional y enérgico. Guía la mirada, sugiere movimiento o tensión. - **Línea y raya:** ritmo y velocidad. La horizontal se siente serena, la diagonal dinámica. - **Semicírculo y cuarto de círculo:** suavizan una composición estricta sin dejar de ser geométricos, un favorito de los carteles modernos. Un cartel vertical dividido en dos bloques, con el título de una conferencia alineado en un lado Una composición dividida: una división vertical fuerte, con el texto fijado a la cuadrícula en un lado. Una publicación vertical con una cifra grande que dice 12 columnas y una pequeña línea de detalle alineada Un número grande colocado sobre la cuadrícula. El contraste de escala entre cifra y detalle es un movimiento geométrico clásico. ## Ideas de patrones geométricos Los patrones son el diseño geométrico en su forma más visible. Los clásicos son rayas, cuadros, puntos, rayos, anillos, galones y cuadrículas de líneas. Quédate con dos o tres colores, elige una escala y decide si el patrón es el protagonista (un cartel, un papel de regalo) o un fondo discreto, en cuyo caso baja mucho su contraste. - Rayas diagonales: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` - Rayas de toldo: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)` - Anillos de diana: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)` - Rayos de sol: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)` - Cuadrado en cuartos: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)` - Líneas pautadas: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)` Seis patrones geométricos dibujados enteramente con degradados CSS. Las paradas de color duras (la misma posición dos veces) dan bordes nítidos en lugar de mezclas. El Art Déco tomó rayos, abanicos y formas escalonadas en oro y negro; Memphis rompió la cuadrícula con garabatos y confeti. [Diseño Art Déco](https://gradiently.design/es/guide/art-deco-design) y [diseño Memphis](https://gradiently.design/es/guide/memphis-design) son fuentes ricas si quieres un patrón con sabor de época. ## Cuadros, puntos y cuadrículas en CSS Algunos patrones necesitan que el tamaño de la tesela se fije aparte con `background-size`, para que se repitan por todo el elemento. Estos tres son los más pedidos. El artículo [patrones css](https://gradiently.design/es/guide/css-patterns) tiene muchos más, y [degradado lineal repetido](https://gradiently.design/es/guide/css-repeating-gradient) explica las paradas duras en detalle. ```css /* Checkerboard: one conic gradient, tiled */ .checks { background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px; } /* Polka dots */ .dots { background-color: #fef3c7; background-image: radial-gradient(circle, #b45309 6px, transparent 7px); background-size: 32px 32px; } /* Graph paper grid */ .grid { background-color: #f8fafc; background-image: linear-gradient(#cbd5e1 1px, transparent 1px), linear-gradient(90deg, #cbd5e1 1px, transparent 1px); background-size: 24px 24px; } ``` Tablero de ajedrez, puntos y papel milimetrado. Cambia los colores y el tamaño de la tesela; deja intacta la estructura. La diferencia de 1px en los puntos suaviza su borde. ## Ideas de diseño geométrico para probar esta semana - **Un círculo grande:** un solo círculo que llena la mitad de un cartel, con la fecha del evento dentro. - **Borde de rayas:** una banda de rayas de toldo en la parte superior de una carta o lista de precios, y nada más con patrón. - **Esquinas en cuarto de círculo:** un cuarto de círculo en cada esquina de una publicación cuadrada, en dos colores alternos. - **Número sobre la cuadrícula:** una cifra enorme (un año, un precio, una cuenta de días) alineada a la columna izquierda, con texto pequeño al lado. - **Rayos de sol detrás de un producto:** rayos de bajo contraste que salen de detrás de una botella o caja en un banner de tienda. - **Notas en papel milimetrado:** un carrusel de consejos sobre un fondo de cuadrícula tenue, con una regla escrita en cada diapositiva. Cada idea usa un recurso geométrico y deja todo lo demás liso. Suele bastar para dar a una publicación un punto de vista claro, y es fácil de repetir en toda una serie. ## Cómo mantener legibles los diseños geométricos ### Evita - Patrón de alto contraste justo detrás del texto - Cinco colores en un patrón - Formas que casi se alinean pero se salen de la cuadrícula - Rayas finas que vibran en pantalla - Mezclar tres escalas de patrón sin relación ### Haz - Un bloque sólido o tranquilo donde vayan las palabras - Dos o tres colores, uno dominante - Todo ajustado a la misma cuadrícula - Rayas de al menos 8 px de ancho al tamaño de publicación - Una escala de patrón, repetida con seguridad Las rayas finas y de alto contraste pueden parpadear en pantalla y convertirse en muaré cuando una app redimensiona tu imagen, así que prueba al tamaño que la gente verá de verdad. El orden geométrico también combina bien con un elemento suave: una sola [forma orgánica](https://gradiently.design/es/guide/organic-shapes-design) sobre una cuadrícula estricta aporta calidez sin romper el sistema. En Gradiently, el Designer puede maquetar una publicación sobre una cuadrícula limpia con el Mark de tu marca y hacer a partir de ella todos los demás tamaños, de modo que la alineación sobreviva a cada formato. ## FAQ ### ¿Qué es el diseño geométrico? Un estilo de diseño gráfico construido con formas regulares como círculos, cuadrados, triángulos y líneas, normalmente alineadas a una cuadrícula. ### ¿Cómo hago un patrón geométrico en CSS? Usa degradados repetidos con paradas de color duras, como `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` para rayas. Para cuadros y puntos, añade `background-size` para fijar la tesela. ### ¿Qué cuadrícula debo usar para una publicación de Instagram? Una publicación de 1080×1350 funciona bien con márgenes de 72 píxeles y seis columnas con medianiles de 24 píxeles. Usa la misma cuadrícula en todas las publicaciones de una serie. ### ¿Qué movimientos de diseño usan formas geométricas? La Bauhaus, el estilo tipográfico suizo o internacional, el Art Déco y Memphis se apoyaron mucho en formas geométricas, cada uno con un espíritu muy distinto.