Diseño geométrico: cuadrículas, formas y patrones

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.

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 trata sus métodos, y diseño Bauhaus 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.

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.

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 y diseño Memphis 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 tiene muchos más, y degradado lineal repetido explica las paradas duras en detalle.

/* 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;
}

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

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