Faragiri

Aprender Fundamentos del diseñoDiseño

Qué tan lejos y qué tan distinto: las dos preguntas de los fundamentos, contestadas con números sobre una hoja de precios que se lee a 60 centímetros y en un celular.

8Secciones
8Minutos
2Profundidad

Fundamentos

Cada carpeta de aquí es una de dos preguntas, a distinto tamaño

Tres celdas preguntan qué tan lejos, dos preguntan qué tan distinto, y la sexta es cómo se contesta cualquiera de las dos sin adivinar.

Distancia y diferencia
  • ComposiciónQué tan lejos, al tamaño de una hoja entera
  • Retículas y diagramaciónQué tan lejos, decidido una vez y reutilizado
  • TipografíaLas dos: la familia es una diferencia, el espaciado es una distancia
  • JerarquíaQué tan distinto, y con cuántas propiedades se pagó
  • ColorQué tan distinto, en la propiedad que falla primero
  • Aprender a verNinguna de las dos. Cómo se contestan sin adivinar
  • ComposiciónQué tan lejos, al tamaño de una hoja entera
  • Retículas y diagramaciónQué tan lejos, decidido una vez y reutilizado
  • TipografíaLas dos: la familia es una diferencia, el espaciado es una distancia
  • JerarquíaQué tan distinto, y con cuántas propiedades se pagó
  • ColorQué tan distinto, en la propiedad que falla primero
  • Aprender a verNinguna de las dos. Cómo se contestan sin adivinar

Las celdas se tocan porque la falla de una se repara casi siempre en otra, y mal. Lo que llega devuelto como problema de color en un primer borrador suele ser un problema de distancia al que se le pidió al color que tapara.

La lista de precios de la papelería de la esquina tiene 34 renglones y un solo tamaño de hueco entre todos, así que hay que leerla completa para encontrar el precio de una copia. No es fea. Está sin ordenar, que es otro defecto y tiene otro arreglo.

Antes de que alguien lea una palabra, el ojo ya contestó dos preguntas sobre esa hoja: qué tan lejos está cada cosa de las demás y qué tan distinta es. Las dos se contestan con números que se pueden escribir, y ninguno depende de qué se esté diseñando. Por eso este tema se lee antes que los otros seis de Diseño.

Rebeca rehace esa hoja para la Papelería El Compás, en Coyoacán: 34 servicios en cuatro grupos, pegada por dentro del vidrio del mostrador, donde se lee a 60 centímetros, y mandada además por WhatsApp, donde se lee a 20 en un celular. Dos distancias de lectura.

Seis carpetas que entre todas hacen dos preguntas

Todo lo que cuelga de aquí es una de esas dos preguntas a distinto tamaño. Qué tan lejos: Composición, Retículas y diagramación y la mitad de la tipografía que es espaciado. Qué tan distinto: Jerarquía, Color y la otra mitad, la que elige familia. La sexta no es una tercera pregunta: es cómo se contesta cualquiera de las dos con exactitud, y por eso va al lado y no encima.

La división sirve el día que algo se ve mal y no puedes decir por qué, porque deja dos movimientos: cambiar una distancia o cambiar una diferencia. Casi todo lo que se devuelve corregido como problema de color es lo primero disfrazado de lo segundo.

El hueco de adentro tiene que perder contra el de afuera

Agrupar es aritmética y la aritmética es una línea: el hueco de afuera mide al menos el doble que el de adentro. Al menos el doble, no un poco más, porque abajo del doble la diferencia se discute. La hoja anida cuatro niveles y cada uno cumple esa cuenta contra el que trae adentro.

El nombre del servicio queda 4 px arriba del renglón que dice el detalle. El precio se separa 8 px de ese par, y eso vuelve una sola cosa a los tres renglones. Entre un servicio y el siguiente hay 24 px, y donde termina un grupo y arranca el otro hay 48 px: la hoja corre con gap 8 adentro de un grupo, gap 24 entre grupos, y el doble de eso en el cambio de grupo.

El escalón que carga más es el de 8 px a 24 px: abajo de él las tres líneas son una cosa y arriba dejan de serlo. Si esa proporción queda mal, ninguna paleta la arregla, porque el color no sabe decir que dos cosas son un solo objeto.

Una diferencia se paga con dos propiedades, no con una grande

El segundo movimiento es la diferencia, y quien empieza la gasta de una en una. Para levantar el nombre del grupo sube el tamaño de 16 a 32 puntos, y termina con un encabezado que se lee desde la banqueta y una columna con un tercio menos de espacio. Cambiar dos propiedades a la vez en lugar de una mucho cuesta casi nada: de 16 a 21 puntos y de regular a seminegra.

Si la diferencia es de verdad se comprueba en cuatro segundos: pasar el archivo a gris y ver si la jerarquía sobrevive. Si se aplana, estaba hecha de color, y el color falla primero: en una fotocopia, con el sol de frente y para quien no separa el rojo del verde. La del Compás se fotocopia, así que se arma en gris y se colorea después.

Papelería El Compás

Los cuatro huecos de la hoja de precios, y el que hace el trabajo

Cada nivel mide por lo menos el doble del que trae adentro, y eso es lo que convierte 34 renglones en cuatro grupos de ocho o nueve.

Píxeles sobre una hoja tamaño carta. La papelería es inventada; el anidado es el caso normal.

  1. Dentro de un renglónEl nombre del servicio sobre la línea que dice el detalle4 px
  2. Del precio a su parLo bastante cerca para que las tres líneas se lean como una cosa8 px
  3. De un servicio al siguienteEl escalón que decide si la hoja es una lista o un bloque24 px
  4. De un grupo al siguienteEl único hueco que se alcanza a ver desde el otro lado del mostrador48 px

Los números no son sagrados y las proporciones sí. Divide los cuatro a la mitad y la hoja sigue funcionando; pon el tercero en 12 px y deja de funcionar, a cualquier tamaño.

La alineación es la misma diferencia, hecha por resta

Contar cuántos bordes izquierdos distintos hay. La versión vieja tenía nueve, uno por cada cosa arrastrada a su lugar en cuatro años, y nueve puntos de arranque se leen como nueve papeles pegados juntos. La nueva tiene dos. Esa corrección no agrega nada, quita.

La razón la decide la distancia de lectura

Los tamaños salen de un número multiplicado, y cuál número lo decide a qué distancia está parado quien lee: una razón de 1.2 para una hoja y de 1.5 para un cartel. Desde un cuerpo de 16, el 1.2 da 16, 19, 23 y 28; el 1.5 da 16, 24, 36 y 54. El mostrador se lee en la primera; compuesta en la segunda, el nombre del grupo se traga el renglón del precio.

El interlineado se aprieta conforme crece el tamaño: el cuerpo de 16 va sobre 24, la mitad otra vez, y un título de 54 va sobre 58, porque una línea de dos palabras no necesita aire abajo y el automático le daría 65.

Aquí entra la parte que ninguna página en inglés trae. El automático mide la familia y no tu cadena, y tu cadena lleva acentos. COPIAS EL MISMO DÍA a 54 puntos sobre 58 parte en dos renglones y pone la tilde de la Í contra la línea de arriba, así que el hueco que se ve ya no es 58 sino lo que sobra después de la tilde. Hay que medir el interlineado sobre el título con acentos, no sobre el espécimen, que casi siempre viene compuesto en inglés y nunca sube nada arriba de las mayúsculas.

Y una cuenta más que casi todos se saltan: el centro óptico queda arriba del centro medido. Centra el nombre del grupo en su banda con la regla y se lee como si se estuviera cayendo; súbelo una cuadragésima parte de la banda y se lee centrado. El ojo se equivoca siempre para el mismo lado, que es la única razón por la que se puede escribir una regla.

El orden

El color va al final porque es lo que menos rescata

Cada parada repara menos de la página anterior que la parada de antes, así que la falla más barata de arrastrar es la que está más adelante.

  1. primero, y lo más baratoDistanciaAgrupar, alinear, y los huecos que hacen que un grupo sea un grupo01
  2. 02segundoDiferenciaDos propiedades a la vez, revisadas en gris
  3. de aquí en adelanteLa costumbre de medirRearmar algo bueno a tamaño real y anotar en números dónde se fue el tuyo03
  4. 04terceroTipoDonde vive casi todo lo que parece una falla de acomodo
  5. al finalColorEncima de una página que ya funciona sin él05

Sin fechas y sin duraciones, porque nada de esto es un calendario. Lo que afirma es el orden: una parada tomada antes de tiempo no es temprana, es una parada tomada contra nada.

El atasco es tener las palabras y no haber medido nunca

Aquí es donde la gente de los fundamentos deja de avanzar sin enterarse. El vocabulario llega temprano y gratis, casi siempre en el mismo curso de tres horas: jerarquía, espacio en blanco, contraste, equilibrio. Los cuatro son adjetivos y se aplican a un trabajo terminado sonando bien.

Lo que casi nadie hace después es medir. La prueba es exacta y se corre esta tarde sobre uno mismo: puedes decir que una composición se ve desbalanceada y no puedes decir cuál número está mal.

Y aquí ese atasco llega con un empujón de más, porque la plantilla también viene en inglés. Rebeca armó la primera versión sobre una hoja estadounidense de renglones de una línea, y en español casi ningún servicio cabe en una: engargolado con pasta dura ocupa lo que allá ocupaba binding. La plantilla no se rompe de golpe, se acomoda: los renglones se parten en dos, el hueco de adentro se come al de afuera y los cuatro niveles vuelven a ser uno. Los huecos se miden sobre el texto ya partido.

La cura es lo único de este tema que es una práctica y no un valor: rearmar la pieza a tamaño real y anotar dónde se fue la tuya. Rehaz al tamaño en que de verdad se imprime una hoja que te parezca buena y escribe las diferencias como números: su hueco bajo el encabezado es 12 y el tuyo 20, su columna corre 62 caracteres y la tuya 94. Tres de esas y el vocabulario deja de ser adjetivos, que es de lo que trata Aprender a ver, la única carpeta de aquí cuyo resultado es una costumbre.

Distancia, después diferencia, y el color al final

Ese es el orden, y la razón es que cada parada rescata menos que la anterior. Una hoja con los huecos bien puestos y sin una gota de color está terminada; una con paleta y los huecos mal puestos no lo está.

Al revés falla en tres lugares que se pueden nombrar. Jerarquía antes que espaciado da la página donde todo crece: el tamaño es la única herramienta de la caja, así que todo queda grande y no queda nada callado contra lo cual algo pueda ser fuerte. Retícula antes que espaciado da una retícula sobre la que nada se sienta cómodo, porque un ancho de columna elegido sin conocer tus huecos es un número elegido contra nada. Y el color primero es el más caro: la paleta se pasa el proyecto entero reparando distancias.

El orden invertido llega servido aquí, porque el curso gratuito que casi todo el mundo hizo abre por color: es la única parte que cabe entera en una lección de veinte minutos.

Qué abrir, y ninguno es un programa de dibujo

Figma manda en pantalla desde 2019, cuando le quitó el lugar a Sketch por correr en el navegador, y su plan gratuito cubre todas las medidas de esta página. Lo que sirve aquí no es la parte de dibujo: seleccionas un objeto, dejas apretada la tecla Alt y pasas el cursor sobre otro, y la distancia entre los dos aparece en píxeles. Diez minutos de eso sobre trabajo que admiras instalan la costumbre de medir.

El contraste es aritmética y hay una calculadora gratuita: el verificador de contraste de WebAIM recibe dos colores y devuelve la razón entre ellos, y reemplazó a preguntarle a alguien del otro lado del cuarto si se alcanza a leer. Google Fonts es gratuito desde 2010, reemplazó a la licencia por proyecto y su ventaja aquí es que también cubre la imprenta, donde termina buena parte del trabajo de este mercado. Ninguno de los tres se cobra en dólares, y en este tema eso es toda la factura.

Lo que ninguna de las dos preguntas contesta es cuál diferencia gastar. Dicen que un encabezado tiene que distinguirse de su párrafo; no dicen si va en tamaño, en peso, en color o en espacio. La entrada más corta es Tipografía, porque en casi todas las hojas, la del Compás incluida, la diferencia que faltaba era una decisión de tipo y no de acomodo. Después se parte por lo que el trabajo tiene que aguantar: una hoja que se imprime una vez, o una pantalla que se vuelve a dibujar a un ancho que no elegiste, que es Diseño de interfaces. La costumbre de medir se entrena igual de bien con una cámara, decidiendo por el visor qué se queda fuera, y eso es Fotografía. Y cuál programa abrir para todo lo anterior es una pregunta aparte, con respuesta más corta de lo que parece, en Herramientas de diseño.

Al lado de esto

Arriba de esto