El Canon de Van de Graaf, un sistema de cuadrícula armonioso utilizado por los tipógrafos durante la Edad Media

Tipografía armoniosa y rejillas

¿De qué tamaño deberían ser tus fuentes? ¿Necesitas usar una cuadrícula? ¿Y qué hay del ritmo vertical?

Voy a esbozar un proceso para responder a todas esas preguntas, acelerar el tiempo que lleva llegar a una tipografía coherente que coincida con su sistema de cuadrícula y minimizar la agitación.

Una cuadrícula armoniosa y un sistema tipográfico es uno que es internamente consistente. Sistemas como este le ayudan a garantizar que todos los diseños y componentes encajen entre sí, como la forma en que cualquier ladrillo Lego es compatible con cualquier otro ladrillo Lego.

Por qué es importante

Al diseñar un nuevo producto o interfaz de usuario desde cero, hay muchas decisiones interdependientes que debe tomar. Cada decisión de diseño afecta a todas las decisiones de diseño anteriores, y algunas son más perjudiciales que otras.

Una analogía: imagina que estás construyendo una casa e interrumpes el proceso de pintura para mover algunas paredes. Lo que hubiera sido algo relativamente fácil de hacer durante la fase de planificación inicial se vuelve prohibitivamente costoso. Seguir una secuencia lo ayudará a eliminar este tipo de palizas.

Renuncia:
Esta publicación está escrita para personas relativamente nuevas en el diseño visual, que podrían desconcertarse sobre cómo implementar el ritmo vertical y qué tipo de sistema de cuadrícula usar. Esta es solo una secuencia que he encontrado que funciona para mí, y he perfeccionado este proceso durante años de práctica como diseñador visual, de experiencia de usuario y de producto, y en los últimos 2 años enseñando diseño en Tradecraft en colaboración con mi colega Jake Fleming. Esta no es la única forma de establecer un sistema tipográfico y de cuadrícula coherente internamente, y si tiene sugerencias para mejorar el proceso, déjelas en los comentarios a continuación. Las capturas de pantalla son de la aplicación Sketch, pero los principios son lo suficientemente generales como para seguirlos en cualquier aplicación de diseño.

La secuencia

Aquí hay una hoja de trucos, que describe la secuencia completa de 9 pasos para darle una buena base tipográfica + basada en cuadrícula. Voy a profundizar en cada uno de los pasos a continuación.

1. Define tus objetivos

Si bien puede parecer obvio, es crucial comenzar estableciendo sus objetivos y principios de diseño. Los principios de diseño son conceptos abstractos que describen la apariencia del producto final. Debido a que es difícil hablar sobre diseño, un puñado de adjetivos puede ser útil para imaginar cómo se vería la marca.

Por ejemplo, la tipografía que es “limpia y moderna” debería verse significativamente diferente de la tipografía que es “joven y fresca” o “estable y confiable”. Una buena regla general es reducir sus principios a 3-5 adjetivos o adjetivos. declaraciones. Las declaraciones adjetivas ayudan a definir los límites de la marca, p. "Minimalista, pero no moderno".

Armado con su lista de principios de diseño, puede reunir el diseño y la inspiración tipográfica que cree que ejemplifican sus principios de diseño. Ver el trabajo de diseño real puede ayudar a construir una visión compartida en su equipo de diseño, o en su propia cabeza si está diseñando solo. Busque sitios como pinterest, dribbble y compórtese con los adjetivos de su marca para encontrar la inspiración adecuada.

Cuando busque inspiración, tenga en cuenta que no está buscando trabajo de diseño para copiar. Además de ser éticamente grosero, también es malo que su marca sea derivada. La inspiración está diseñada para inspirarte a crear algo único y mejor que lo que has encontrado.

Para demostrar el armonioso proceso tipográfico, voy a usar el texto de Alicia en el país de las maravillas, y la inspiración visual que elija seguirá ese tema.

Algunas inspiraciones (de ilustradores, letras y diseñadores talentosos en Dribbble), junto con algunos adjetivos de marca.

2. Jerarquía de contenido

Una vez que haya definido sus objetivos, el siguiente paso es comprender el contenido para el que está diseñando (o escribir, si ese es su trabajo también). Principalmente, este paso está reservado para comprender la prioridad y la jerarquía del contenido, y para que el contenido sea lo más legible posible. La legibilidad se extiende más allá de la legibilidad, y habla sobre si es deseable mirar y leer un contenido.

Puedes pensar en diseñar para contenido de la manera en que los arquitectos piensan en diseñar para personas. En teoría, un edificio debe diseñarse en torno a sus habitantes, y todos sus hábitos y actividades diarias. Tienes que entender a esos habitantes y sus actividades para crear una buena solución para ellos.

Evita a Lorem Ipsum, si puedes evitarlo

De la misma manera, debe leer el contenido para comprender cómo debe presentarse y priorizarse. Evite diseñar alrededor de lorem ipsum y texto de relleno, que es como tratar de diseñar una vivienda para maniquíes.

Si tiene que diseñar y aún no sabe cuál es el contenido real, utilice al menos el texto en el idioma correcto adyacente a la marca para la que está diseñando. El texto de ejemplo que elegí, Alicia en el país de las maravillas, es una elección suficiente para una marca para niños, pero probablemente me extraviaría si estableciera el tipo para una oficina de abogados.

Diseñe todos los tipos de contenido

Durante esta etapa, revise la copia y asegúrese de tener al menos una instancia de cada tipo único de contenido. Créelo si no está representado en la copia que tiene. Además, agregue subtítulos, citas extraídas y otras cosas que mejoran la legibilidad.

Si bien no es totalmente completa, esta lista cubrirá la mayoría de los casos de uso:

  • Título (H1)
  • Subtítulos (H2 - H6, aunque en la práctica H2 y H3 son probablemente todo lo que necesita preocuparse)
  • Copia de párrafo principal
  • Citas en bloque y citas de extracción
  • Listas (ordenadas y no ordenadas)
  • Enlaces (estado predeterminado, estado de desplazamiento, estado activo / presionado)
  • Etiquetas de entrada de formulario
  • Subtítulos, texto pequeño y texto silenciado
Prefiero establecer esta lista inicial en algo llamativo, como Mónaco o Courier, que me obliga a tomar decisiones intencionales en lugar de basarme en los valores predeterminados. Obtenga más texto de ejemplo para configurar del Proyecto Gutenberg: https://www.gutenberg.org/

Una vez que haya presentado todo el contenido para el que necesitará diseñar, es hora de elegir sus tipos de letra.

3. Elija tipos de letra

Hay un arte en elegir tipos de letra que lleva mucho tiempo dominar. Estas son instrucciones simples para comenzar. Si ya sabes mucho sobre tipografía, esta simplificación excesiva probablemente te molestará, así que salta al paso 4.

Al elegir la tipografía, hay algunas preguntas iniciales para responder:

¿Cual es tu presupuesto?

Con la tipografía como con la mayoría de las cosas en el mundo, obtienes lo que pagas. Hay algunas excepciones a esta regla, pero comience por pensar cuánto puede gastar. Si tiene un presupuesto, comience por buscar fundiciones de tipos profesionales como House Industries y Hoefler & Co., o catálogos de tipos profesionales como Typekit (una buena opción si ya paga por Adobe CC) y MyFonts.

Si no tiene un presupuesto, ¡no se preocupe! Puede encontrar muchos tipos de letra geniales en las fuentes de Google, tanto para descargar como para usar en la web. Evite usar repositorios gigantes de fuentes gratuitas, a menos que encuentre un tipo de letra particular diseñado por un diseñador de tipos profesional. Los tipos de letra aficionados pueden parecer interesantes en la superficie, pero faltan muchas características y delicadeza de una cara profesional.

¿Dónde se usará esto?

¿Está configurando el tipo para la web, una aplicación nativa o para imprimir o todo lo anterior? Asegúrese de que cualquier tipo de letra que esté buscando tenga una licencia que funcione para su medio de salida previsto. Puede ser frustrante elegir un tipo de letra, solo para descubrir que solo puede usar esa cara en la web, pero no su computadora, o viceversa.

Elige un estilo para tus encabezados

¿Recuerdas los principios de diseño que estableciste en el paso 1? Son muy útiles para esta etapa. Mirando tus principios y la inspiración del diseño, busca patrones que puedas adoptar.

Por ejemplo, en tu biblioteca de inspiración, ¿notas que los encabezados con frecuencia usan serif dramáticas? ¿Quizás todos usan sans-serif audaces y condensados? Desarrolle una idea de cómo ciertos tipos de marcas usan la tipografía para comunicar sus valores. Si las palabras "condensado" y "serifa" no significan nada para usted, lea una introducción rápida sobre la anatomía del tipo.

Use estos patrones para guiarlo, pero no para restringirlo. No siempre es la decisión correcta seguir lo que hacen marcas similares; a veces tiene más sentido hacer exactamente lo contrario para destacar. La parte importante es que tome una decisión intencional.

Revise el catálogo de tipos elegido y escriba los tipos de letra que saltan a la vista. Tenga en cuenta los adjetivos de su marca y recuerde que la tipografía para los encabezados puede ser un poco más estilizada de lo que podría desear para una copia del cuerpo.

Limite su lista a 3–5 opciones y configure su título en cada una de esas caras antes de pasar al siguiente paso. Vas a guardarlos y emparejarlos con los tipos de letra del cuerpo que elegirás en el siguiente paso.

En orden desde arriba: Kabel, Raleway, Source Serif, Abril Titling

Elige un emparejamiento para tu copia corporal

Una vez que haya elegido 3–5 tipos de letra para sus encabezados, es hora de elegir un buen tipo de letra para emparejar para su copia del cuerpo.

Si bien la tipografía para los títulos debe ser interesante, la tipografía para la copia del cuerpo debe ser legible y legible (es decir, bastante aburrida).

El contraste debe guiar su toma de decisiones aquí. Si ha elegido un serif dramático para su rumbo, pruebe un sans-serif geométrico para su cuerpo. Si eligió un sans-serif delgado y moderno, intente emparejarlo con un serif clásico. El sitio fontpair.co puede ayudarlo a tomar una decisión con suficiente contraste. También puede usar un solo tipo de letra para sus encabezados y copia del cuerpo, y lograr contraste variando los pesos de las fuentes, como negrita para los encabezados y regular para la copia del cuerpo.

También me gusta google "emparejamiento de fuentes" + el nombre de mi servicio elegido (por ejemplo, "emparejamiento de fuentes de fuentes de google"). Existen muchos sitios de inspiración geniales que muestran cómo se ven algunas combinaciones de tipos. Estos son un par de favoritos.

Me gusta limitar los tipos de letra del cuerpo a no más de 2-3 opciones totales (no 2–3 por tipo de letra de encabezado).

En orden desde arriba: Source Serif, Open Sans, Abril Text

Pruébelo con una matriz de mesa de trabajo

Una vez que tenga 3–5 opciones para su encabezado y 2–3 opciones para su copia corporal, es hora de probarlas. Cree una matriz de mesa de trabajo que le muestre cómo se ve cada combinación posible cuando se combina. Hasta que tenga mucha práctica, es casi imposible tomar buenas decisiones sobre los tipos de letra sin verlos configurados con texto real. Esta matriz de mesa de trabajo le mostrará cómo se combina el carácter de cada tipo de letra.

Decidir

Recuerde: elegir la tipografía es difícil. No siempre estará seguro de que está tomando la decisión correcta, y eso está bien. Tome la mejor decisión que tenga disponible en ese momento y vuelva a dar la vuelta más tarde.

Observe los principios de su marca y comience a eliminar opciones hasta que la haya reducido a una sola opción. Pregúntese si lo que está mirando está más cerca o más alejado de los principios de su marca que sus vecinos. Las decisiones relativas (es decir, comparar una cosa con su vecino) siempre serán más fáciles que tratar de averiguar si una tipografía representa los adjetivos de su marca por sí solo.

Este proceso puede conducir a una mayor inspiración, que debe seguir. También puede encontrar que nada se siente del todo bien. No se desanime, esto sigue siendo un progreso. En ambos casos, retroceda un paso e intente encontrar mejores opciones para sus tipos de letra de encabezado y cuerpo, matrizelos y vea si se ha acercado.

Para nuestro ejemplo de Alicia en el país de las maravillas, terminé eligiendo una ligera variación:

Encabezado: Abril Titling Narrow; Cuerpo: Fuente Serif Regular

4. Tamaño de fuente base y altura de línea (proporción)

Aquí es donde el proceso comienza a ser más fácil. El tamaño de fuente base y la altura de la línea base son 2 números que puede usar para basar todas las demás medidas de tamaño y espaciado. Esto no solo facilitará su trabajo y eliminará muchas decisiones más adelante en el proceso, ser estricto con estos números también ayuda a garantizar que su diseño final tenga un buen ritmo.

El ritmo en el diseño, como en la música, presta un sentido de orden (o desorden) a una composición. El ritmo se puede lograr en los ejes horizontal o vertical, y cuando ambas direcciones son consistentes entre sí, creará diseños que se sentirán extremadamente bien ordenados. Esta es la salsa secreta para desarrollar un sistema tipográfico y de cuadrícula armonioso.

Elegir un tamaño de fuente base

Es una buena idea comenzar con los valores predeterminados para el dispositivo para el que está diseñando y ajustar desde allí. Si está diseñando para la web, el valor predeterminado es 16px. iOS es 17pt y Android 13sp.

Desvío técnico: si bien todas las unidades de medida parecen diferentes, y son diferentes en formas sutiles, las diferencias no son muy importantes en esta etapa. Sketch mide las fuentes en tamaños de puntos (pt), y eso se traducirá en las unidades utilizadas para la web y Android. Cuando necesite ayuda para conciliar el sueño en algún momento, busque en Google las diferencias entre puntos, píxeles y píxeles de referencia en la web, y sp / dp en Android.

Una vez que sepa el tamaño predeterminado, ajústelo según sus necesidades. Es una buena idea usar una extensión como font face ninja para saber qué tamaños usan otros sitios. El NY Times, por ejemplo, usa una copia del cuerpo de 13px, mientras que Medium usa 21px. Esas medidas sirven muy bien como límites inferiores y superiores.

Piense en la cantidad de contenido que deberá contener la interfaz, los lectores del contenido y el contexto en el que probablemente se verá. Por ejemplo, si estoy diseñando un blog para lectores mayores de 50 años (nuestra vista se nubla y se atenúa) con el tiempo), y supongo que leerán durante momentos de aburrimiento en sus dispositivos móviles, elegiría un tamaño de fuente de cuerpo más grande, posiblemente más cerca de 21px de Medium.

Por el contrario, si estaba diseñando una interfaz para coordinadores profesionales de redes sociales, que probablemente usarán el producto en el trabajo en dispositivos más grandes, entonces puedo reducir el tamaño de fuente predeterminado.

En última instancia, esto no es un sustituto de una buena investigación de usuarios que lo ayude a comprender mejor a sus usuarios, pero esos 3 factores lo ayudarán a asegurarse de tomar una decisión decente. En caso de duda, es más seguro errar al hacer que su tipo sea demasiado grande que demasiado pequeño. Al menos, esa es la tendencia actual.

En esta etapa, solo debe preocuparse por el tamaño base de su copia del cuerpo principal; nos preocuparemos por los tamaños para el resto de su tipografía en el paso 5.

Antes de aterrizar en un tamaño final, cree algunas opciones en mesas de trabajo del tamaño de su dispositivo móvil y pruébelas. Puede usar Sketch Mirror para esto o exportar esas mesas de trabajo de prueba como PNG y verlas en su dispositivo.

Izquierda: copia del cuerpo 20px; Derecha: copia del cuerpo de 18 px

Elegir una altura de línea base

Una vez que haya aterrizado en el tamaño de fuente base, el siguiente paso es pensar en la altura de su línea. Es más fácil pensar en la altura de su línea como una proporción del tamaño de fuente base.

Regla general: elija una altura de línea que esté en algún lugar entre 120% - 150% del tamaño de fuente de su cuerpo. Está bien romper esta regla si tiene una buena razón para hacerlo.

Cuanto más flojo sea el inicio (correspondiente a relaciones más grandes cercanas a 1.5), más espacio en blanco tendrá entre líneas. Eso puede facilitar que el ojo encuentre la siguiente línea de texto. Estilísticamente, las relaciones de altura de línea más grandes también se sienten más lujosas, estables y pacíficas.

Un guión más ajustado (correspondiente a proporciones más cercanas a 1.2 y, a veces, incluso menos) suavizará las líneas de texto más cerca. La densidad que esto crea puede ser algo bueno, dependiendo de los principios de diseño que estableció al principio. El liderazgo ajustado tiene la capacidad de aumentar la velocidad de lectura, pero debe tener cuidado de que las longitudes de sus líneas no sean demasiado largas o impactarán negativamente la velocidad de lectura. Discutiremos la longitud de la línea en el paso 6.

Si necesita ayuda para decidir, las herramientas como la escala de texto le brindan una manera fácil de visualizar las diferentes combinaciones de tamaño de fuente / altura de línea. Las proporciones corresponden a acordes musicales, que es una forma arbitraria pero interesante de decidir una proporción.

Independientemente de la proporción que elija, usará esos mismos números en los pasos posteriores para determinar su escala de tipo y cuadrícula de diseño para lograr el ritmo horizontal y vertical. Pero no se preocupe por establecer las alturas de línea para los encabezados todavía: manténgase enfocado en su copia del cuerpo por ahora y nos preocuparemos por eso en el siguiente paso.

Usa números enteros

Una nota final sobre cómo elegir la altura de su línea. Es una buena idea quedarse con números enteros y pares. Eventualmente usará la altura de su línea para determinar su espacio, y cuanto más fácil sea dividir, más limpio será su diseño. Esto tendrá más sentido una vez que comience a diseñar las cosas.

Aquí hay algunos combos de tamaño de fuente / altura de línea que uso con frecuencia.

  • 16/24 (relación: 1.5, o un quinto acorde perfecto)
  • 18/26 (relación: 1,44, o cerca de un cuarto acorde aumentado)
  • 20/30 (relación: 1.5)

Para nuestro ejemplo, he decidido usar un tamaño de copia del cuerpo predeterminado de 18 px, que es grande pero no demasiado grande, y una proporción inicial de 1.333 (o equivalente a un cuarto perfecto). Esto produce una altura de línea de 23.994, que voy a redondear a 24px. En este momento, es una buena idea modificar la mesa de trabajo original para que muestre los tipos de letra, los tamaños y las letras que ha elegido. No te preocupes por el espacio todavía.

Todavía no se ve muy bien, pero definitivamente es mejor que lo que teníamos cuando comenzamos.

5. Escala tipográfica

Una escala tipográfica nos ayudará a tomar buenas decisiones sobre cuánto más grandes deberían ser los títulos, subtítulos y títulos.

Una escala tipográfica no es más que una serie de tamaños de fuente que comparten la misma lógica interna, similar a una escala musical. La escala clásica progresa de 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, etc. Vamos a crear nuestra propia escala tipográfica basada en la proporción que elegimos en el paso 4 .

La escala de tipo de sitio será útil para este paso. Ingrese el tamaño de fuente base, seleccione la proporción que usó y la escala de tipo le mostrará cómo se ve esa progresión de tamaños. La escala de tipo muestra los tamaños en ems, y la forma más fácil de pensar en un em si eres nuevo en ellos es que 1em es igual al tamaño de fuente base. Entonces, si mi tamaño base es 18px, entonces 2em = 36px (18 * 2). Para traducir eso a Sketch, simplemente tome el valor em que aparece en la escala de tipos y multiplíquelo por el tamaño de fuente base.

Consejo profesional: Sketch también te permite hacer cálculos matemáticos directamente en la aplicación, una característica que deberías aprovechar. Supongamos que el tamaño base y la altura de la línea son 16px / 24px (relación: 1.5). Para obtener el siguiente paso en su escala de tipos, puede escribir "16 * 1.5". Para avanzar 2 pasos, escriba "16 * 1.5 * 1.5". Y así…

Asigne su escala de tipos a su jerarquía de contenido

Una vez que haya determinado los "pasos" en su escala de tipos, es hora de asignar esos pasos a su jerarquía de contenido que estableció en el paso 2. El texto del párrafo debe ser igual al tamaño de fuente base, o 1em. Sus H2 / subtítulos deben estar un paso por encima de eso, y su H1 / título debe estar un paso por encima de eso. Por otro lado, sus subtítulos y texto pequeño deben estar un paso por debajo de su tamaño de fuente predeterminado.

Especialmente cuando se trata de relaciones más grandes o cuando necesita más de 2 niveles de subtítulos, es posible que necesite medios pasos para mantener sus tamaños razonables. Se pueden lograr medios pasos dividiendo la distancia entre 1.0 y su relación. Si su tamaño base es 16px, y su proporción es 1.5, un paso completo sería 24px. Un medio paso (con una relación de 1.25) sería 20px.

6. Espaciado horizontal (medida tipográfica)

Una vez que haya configurado los tamaños correctos para todos los elementos para los que está diseñando, el siguiente paso es asegurarse de que la longitud de su línea (o medida) sea el tamaño correcto. Una longitud de línea adecuada mejorará la legibilidad y reducirá los errores de seguimiento.

Regla de oro: mantenga una longitud de línea de 65–85 caracteres para su copia del cuerpo, o aproximadamente 2 1/2 alfabetos de largo. La forma más fácil de hacer esto es buscar en Google una herramienta gratuita de conteo de caracteres.

En el boceto, reduzca el ancho de su cuadro de texto hasta que se ajuste al número correcto de caracteres. No se preocupe por hacerlo demasiado exacto, ya que lo ajustaremos a la cuadrícula en el paso 8.

Solo necesita preocuparse por la medida adecuada para su copia corporal. Sus títulos y subtítulos más grandes no caben en el mismo número de caracteres en una sola línea, y eso está bien.

7. Espaciado vertical (ritmo vertical)

A continuación, debe asegurarse de que las alturas de sus líneas sean todas consistentes internamente. El primer paso es asegurarse de que las alturas de línea para todos los párrafos de la copia del cuerpo estén establecidas en la altura de la línea base.

Para los niveles posteriores en su jerarquía de contenido, la altura de su línea debe ser un entero o medio múltiplo de la altura de su línea base. Al mantener las alturas de línea basadas en el mismo número, se asegurará de que varias columnas de texto siempre se alineen entre sí. Esto presta un sentido de orden y estructura al diseño.

Cuando haya establecido la altura de su línea en cada bloque de texto, encontrará que el cuadro delimitador de cada bloque de texto se alinea con las filas de la cuadrícula de diseño. Esto hace que la alineación sea mucho más fácil, ya que Sketch ajustará su texto a la cuadrícula. Sin embargo, si no define una altura de línea, Sketch la definirá por usted (se leerá como "automático" y probablemente no sea lo que desea).

Aquí está el ejemplo. Si su tamaño de fuente es 20px y su proporción es 1.5, lo que le da una altura de la línea base de 30px, entonces esta es la apariencia de su jerarquía tipográfica:

Tamaño de fuente base: 20px
Altura de la línea base: 30 px (relación = 1.5)

  • Texto pequeño: tamaño de fuente: 15 px, altura de línea: 15 px
  • Texto del cuerpo: tamaño de fuente: 20 px, altura de línea: 30 px
  • Texto H3 - tamaño de fuente: 30px, altura de línea: 45px
  • Texto H2: tamaño de fuente: 45 px, altura de línea: 60 px
  • Texto H1 - tamaño de fuente: 60px, altura de línea: 75px

Para el ejemplo de Alicia en el país de las maravillas, vamos a utilizar múltiplos de 12 para determinar las alturas de nuestras líneas, ya que la altura de nuestra línea base es 24 (24/2 = 12). Me aseguré de que mis encabezados se ajustaran a más de una línea para poder ver claramente el efecto que la altura de mi línea tiene en el texto.

La notación de tipógrafo tradicional muestra el tamaño de fuente en la posición del numerador y la altura de la línea en la posición del denominador (en negrita en el ejemplo anterior)

8. Sistema de rejilla horizontal

Si comienzas a usar tu nuevo y elegante sistema tipográfico sin una cuadrícula, terminarás rápidamente con un desastre en tus manos. El verdadero poder de esta secuencia de pasos es cuando crea sus cuadrículas de diseño utilizando los mismos números que utilizó para establecer su sistema tipográfico. Cuando trabajan juntos en concierto, sus diseños se verán más limpios y más organizados con mucho menos esfuerzo.

El primer paso es definir su cuadrícula horizontal, llamada cuadrícula de diseño en Sketch. El diseño basado en cuadrícula es un gran tema que solo voy a tratar brevemente, por lo que si desea obtener más información sobre el "diseño basado en cuadrícula" de Google

La cuadrícula de diseño predeterminada de Sketch para escritorio suele ser casi perfecta. Para aquellos de ustedes con experiencia en desarrollo web, se basa en el sistema de cuadrícula utilizado en bootstrap, que se basó en el clásico sistema de cuadrícula 960.

Hay 2 consideraciones principales al pensar en la cuadrícula de diseño horizontal. Abra la configuración de diseño desde el menú Ver> Lienzo para seguir.

  1. Ancho total del diseño: su ancho total depende de sus objetivos. En aras de la simplicidad, voy a asumir un diseño de ancho fluido (o 100% tan ancho como la mesa de trabajo). Asegúrese de que "Canalón en el exterior" esté desmarcado y haga que el ancho de diseño total sea un poco menor que el ancho de la mesa de trabajo. Por lo general, resta la altura de mi línea base, o el doble de la altura de mi línea base, del ancho total del diseño y luego vuelvo a centrar el diseño.
  2. Ancho del canal: el ancho del canal debe ser el mismo número que la altura de la línea base para las mesas de trabajo de tabletas y computadoras de escritorio, o la mitad de la altura de la línea para las mesas de trabajo móviles. Esto hará que sea más fácil lograr el mismo espacio entre los elementos, tanto horizontal como verticalmente.

Así es como se ve mi configuración de diseño para la mesa de trabajo de escritorio. Por lo general, opto por cuadrículas de ancho fijo en pantallas de más de 1024 px de ancho, ya que es más fácil controlar la medida horizontal.

Cuadrícula de diseño móvil

Para la mesa de trabajo móvil, hay una ligera variación. Como se trata de pantallas más pequeñas, su cuadrícula debe tener el ancho completo de su mesa de trabajo. Sin embargo, debe seleccionar "Canalón en el exterior" para obtener un margen de medio canalón a cada lado de la cuadrícula de diseño.

No empieces a presentar tu contenido SOLO todavía. Primero necesitamos establecer nuestra cuadrícula vertical.

9. Sistema de rejilla vertical

¡Ya casi terminas! El último paso es establecer filas de cuadrícula para ayudarlo a medir el espacio vertical entre los elementos.

Abra la configuración de diseño nuevamente y marque "Filas" en. La altura de su canaleta debe ser la mitad de su ancho de canaleta, y la "Altura de la fila" debe estar establecida en 1. La configuración debe ser la misma para las mesas de trabajo móviles y de escritorio.

La altura de su canaleta opcionalmente puede ser la misma que su ancho de canaleta (24px en este ejemplo), pero eso limitará el control de grano fino que tiene al reducir a la mitad ese número.

Diseño

Ahora que su sistema de cuadrícula está listo, el paso final es diseñar sus elementos y tipografía. Para su diseño horizontal, asegúrese de comenzar y finalizar elementos en columnas en lugar de canales.

Por varias razones técnicas que son demasiado complejas para el alcance de esta publicación, sepa que su diseño no siempre se traducirá tan claramente en código. No te estreses por esto; use la cuadrícula para tomar decisiones de manera más fácil y rápida, pero no permita que lo restrinja creativamente si tiene una buena razón para romper la cuadrícula.

Ley de proximidad

La consideración principal al decidir cómo espaciar elementos es un concepto de la Psicología Gestalt llamado ley de proximidad. Esta ley establece que los objetos que están cerca uno del otro se percibirán como un solo grupo. Puede usar este truco de percepción para su ventaja al acercar o alejar algunos elementos para implicar relaciones.

Por ejemplo, en el ejemplo a continuación, he usado 2 "bloques" para separar la mayoría de los elementos. Sin embargo, he duplicado eso entre elementos que deberían ser separados; por ejemplo, arriba de mis encabezados H2 y arriba y abajo de la cita en bloque. También estoy usando un solo bloque entre la cita de bloque y el texto del título, ya que el texto es pequeño y quiero dejar muy claro que la cita y el título están relacionados entre sí.

Use el cuadro delimitador del texto para alinear, en lugar de la línea de base del texto. Si está en un ilustrador en lugar de un boceto, puede ser más fácil alinear su línea base de tipo con la cuadrícula, pero en el boceto es mucho más fácil usar cuadros delimitadores para la alineación. Su método no importa demasiado mientras sea coherente.

Dibujé cuadros rojos sobre los bloques de texto para demostrar las relaciones de proximidad.

Terminando

La versión final está debajo, con todas las guías ocultas.

Si bien puede parecer mucho trabajo para una pequeña cantidad de texto, recuerde que ahora tiene una base sobre la cual construir. Puede usar el tamaño de fuente base y la altura de línea para crear una interfaz de usuario. Aquí hay una estructura metálica simple que armé usando el mismo espacio y medidas. Aunque demasiado simplista, no tuve que pensar demasiado en el diseño.

Una estructura alámbrica simple, basada en el sistema de cuadrícula de 18px / 24px que establecimos anteriormente

¿Puedes hacer esto mejor?

¿Tiene algún consejo adicional que pueda hacer que este proceso sea mejor o más rápido? Tenga en cuenta que esto es una simplificación excesiva y no está destinado a funcionar en todas las situaciones. Pero si tiene alguna idea sobre cómo ajustar este proceso para que sea más fluido, hágamelo saber.

¿Quieren más?

Si quieres más así, estoy colaborando con Zed Shaw, autor de Learn Python the Hard Way, para desarrollar un curso completo de diseño visual. Regístrese para recibir notificaciones sobre su lanzamiento aquí: Aprenda a diseñar de la manera difícil