Minimal design

La pantalla tiene un trabajo. Ese trabajo cabe en una frase. Lo que no sirve a esa frase se va.

Minimal significa que la tarea se entiende sola. El contenido es el diseño. El espacio es la estructura.

Proceso

Hazlo en este orden. No dibujes antes del paso 1.

1. La tarea. Una frase: quién llega y qué vino a hacer. Si no puedes escribirla, pregunta. No inventes una pantalla para tapar la duda.
2. El inventario. Lista solo lo que esa frase necesita. Corta el resto antes de maquetar.
3. La composición. Un título. Una acción primaria, y es lo más visible. Jerarquía con espacio, escala, peso y alineación. El color entra después, y solo si todavía hace falta.
4. El copy. Al final, contra las reglas de abajo. Léelo en voz alta.
5. La revisión. Recorre el checklist. Si doblas una regla, di cuál y por qué.
6. El conflicto. Si un requisito y una regla no caben juntos y no sabes cuál gana, pregunta. No agregues chrome para salir del paso.

La pantalla

• Una acción primaria. Es el elemento más prominente.
• Un título. Si el título ya dice qué es, no hay subtítulo.
• El botón se llama por lo que hace. Una sola línea. Sin heading encima. Sin estado, subtítulo o segunda línea adentro.
• Descargar y exportar van arriba.
• Como máximo una etiqueta, badge o estado por card, fila o header.
• El empty state es una frase y una acción.
• Agrupa por proximidad. Una caja, una línea o una sombra es el último recurso, y un contenedor lleva como máximo una de las tres.
• Íconos en trazo. Si la acción no se entiende sola, el ícono va con texto.

Color y superficie

• Tres roles: fondo, texto, un acento.
• El acento es la acción primaria, el estado activo, o un solo punto focal. El resto es neutro.
• Fondo plano. La jerarquía no sale de gradientes, retículas, ruido, rayas ni formas decorativas.
• Una familia tipográfica. Dos o tres tamaños en la pantalla. El espaciado sale de la escala que el proyecto ya tiene.
• En un sitio, el header lleva una marca. Un wordmark solo no cuenta. El favicon es esa misma marca.

Copy

• Corto. Si una frase repite el título, se borra.
• Concreto. Di la cosa.
• En español, como se habla en Lima.
• El punto medio (·) no separa datos. Apila los datos, o escríbelos como una frase.
• No etiquetes nada como Gratis.
• Sentence case. Sin relleno.

Checklist

Antes de entregar:

• ¿Se puede quitar un elemento, una etiqueta o una frase y la tarea sigue clara?
• ¿Hay más de una acción primaria?
• ¿Algo carga más de una etiqueta?
• ¿El acento está en más de un punto focal?
• ¿Un contenedor junta borde, sombra y divisor?
• ¿Un botón tiene dos líneas, o un heading sentado encima?
• Con la pantalla desenfocada, ¿la acción y el contenido se leen primero?

Ejemplos

Pantalla

Antes: título "Facturas", subtítulo "Administra y descarga tus facturas", tres botones del mismo peso, dos badges por fila.

Después: título "Facturas". Botón "Descargar" arriba. Cada fila es el documento y la fecha. Un estado, solo si cambia lo que la persona hace.

Separador

Antes: Lima · 12 min · S/ 18

Después: tres líneas, o "Lima, 12 min, S/ 18".

Botón

Antes: un heading "Exportar" y un botón de dos líneas, "CSV" arriba y "Últimos 30 días" abajo.

Después: un botón, "Descargar CSV", arriba.

Al entregar

Primero la decisión, después la razón. Corto. Si doblaste una regla, nómbrala.