Criterio
Rompe las reglas
Rómpelas a propósito, no por accidente.
Las reglas del diseño existen para que tu trabajo se lea, se entienda y se vea ordenado. Cuando las dominas, puedes romper una a propósito, y eso es diseñar.
3 demos interactivas
Guía gratis por DM
Criterio
01
Qué es
Las reglas del diseño no son leyes: son atajos que ya probaron miles de diseñadores. Contraste para que se lea, grilla para que se ordene, jerarquía para que se entienda, aire para que respire.
Romper una regla no es ignorarla. Es conocerla tan bien que sabes qué pasa cuando la rompes, y lo haces para lograr algo: tensión, sorpresa, movimiento. La diferencia entre un error y una decisión es la intención.
Aquí están todas las reglas, cada una en una línea. Úsala como mapa: vuelve cada vez que diseñes y entra a la que necesites.
La regla de oro
Aprende la regla, úsala y, cuando la domines, rómpela sabiendo por qué.
02
Treinta reglas, una decisión
Una grilla perfecta, una regla que se rompe a propósito. Eso es diseñar.
03
Los principios en una página
Filtra por categoría y entra a cualquier regla para verla con ejemplos y demos.
Los principios en una página
30 reglas, una línea cada una. Toca cualquiera para ir a su página.
Color
Si recuerdas solo unaSi no se lee, no existe. Brillo opuesto entre texto y fondo.
- 01ContrasteBrillo opuesto: texto claro sobre oscuro, o al revés.
- 02Paleta de colorTres colores: principal, secundario y acento.
- 03Color y fondoUn color cambia según su fondo. Pruébalo encima.
- 04Temperatura de colorCálidos adelante, fríos atrás. Equilibra ambos.
- 05SaturaciónUn solo color a tope; lo demás, más calmado.
- 06Caída de luzLa luz no se corta: degradados suaves, no sombras duras.
Tipografía
Si recuerdas solo unaSi todo grita, nada se escucha. Un protagonista; lo demás, sutil.
- 07Combinación tipográficaSerif con carácter en titulares, sans simple en el texto.
- 08Jerarquía visualUn elemento grande y en negrilla. Lo demás, sutil.
- 09ÉnfasisQue destaque una sola cosa: tamaño, color o movimiento.
- 10TrackingCierra un poco el tracking en los titulares grandes.
- 11InterlineadoPárrafos a 1.5, titulares casi a 1.
Composición
Si recuerdas solo unaNada al azar: cada cosa se alinea con algo.
- 12GrillaLíneas invisibles que alinean textos, fotos y botones.
- 13AlineaciónElige un eje y respétalo. Nada al azar.
- 14ProximidadAcerca lo que va junto, separa lo que no.
- 15Lectura en ZLogo arriba, mensaje al medio, botón al final.
- 16Regla de terciosDivide en 3×3 y pon lo importante en un cruce.
- 17Simetría y asimetríaSimetría calma, asimetría da energía. Elige con intención.
- 18Tensión visualAcerca algo al borde y rompe un poco la simetría.
- 19EncuadreFormas, líneas o espacio para enfocar la mirada.
- 20MárgenesDale aire: nada pegado al borde.
- 21Balance ópticoCentra a ojo, no solo con la regla.
- 22Eco de formaRepite formas y ángulos para crear unidad y ritmo.
- 23PerspectivaGrande de cerca, pequeño a lo lejos.
Profundidad
Si recuerdas solo unaQue se sienta, no que se vea.
Criterio
Si recuerdas solo unaPregúntate por qué funciona, no si te gusta.
- 28Principio KISSCorto y simple. Quita hasta que no sobre nada.
- 29Ojo de diseñadorEstá en todas partes: obsérvalo y pruébalo en lo tuyo.
- 30Rompe las reglasEstás aquíRómpelas a propósito, no por accidente.
04
Por accidente / a propósito
Por accidente.
El titular se corrió 5 px, el subtítulo quedó 3 px afuera y el botón no cae en la grilla. Nadie lo lee como atrevido: se ve descuidado.
A propósito.
Una sola regla rota (el titular girado −6° que se sale del margen), exagerada para que se note. Todo lo demás respeta la grilla, por eso el quiebre se lee como decisión.
05
Cómo romper una regla a propósito
1
Domina la regla primero
Si no puedes hacerlo bien siguiendo la regla, romperla no lo va a arreglar. Primero que funcione ordenado.
2
Rompe una sola
Elige la regla que vas a romper y respeta todas las demás. El orden alrededor es lo que hace que el quiebre se lea.
3
Exagera
Si vas a girar, gira 6°, no 1°. Si vas a salirte del margen, sal de verdad. Un quiebre tímido parece error.
4
Ten un motivo
Tensión, movimiento, sorpresa, humor. Si no puedes decir en una frase para qué rompiste la regla, vuelve a la regla.
06
Antes de publicar
- ¿Sabes qué regla estás rompiendo?
- ¿Rompiste solo una y respetaste las demás?
- ¿Se nota que fue a propósito y no un descuido?
- ¿El mensaje se sigue leyendo y entendiendo?
COMENTA
“REGLAS”
y te envío
la guía
por DM
La guía de rompe las reglas en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Cuáles son las reglas básicas del diseño gráfico?
Contraste, paleta limitada, jerarquía, grilla, alineación, proximidad, márgenes y simplicidad son la base. En esta página tienes las 30 reglas, cada una resumida en una línea.
¿Se pueden romper las reglas del diseño?
Sí, cuando las dominas y lo haces con intención. Rompe una sola regla, exagérala para que se note y mantén todo lo demás en orden.
¿Cuál es la diferencia entre un error de diseño y romper una regla?
La intención y la claridad. Un error es un desvío pequeño y sin motivo; una regla rota a propósito es evidente, tiene una razón y está rodeada de orden.
Sigue aprendiendo
Conceptos
relacionados
Principio KISS
2 demos
Hazlo corto y simple: quita hasta que no sobre nada y el mensaje se lea en 3 segundos.
Ojo de diseñador
2 demos
5 preguntas para entender por qué un diseño funciona y llevar la idea al tuyo.
Tensión visual
3 demos
Acerca al borde, corta, gira un poco: un desequilibrio pequeño da vida.