Cuando se habla de diseño, debemos considerar el texto desde la perspectiva de un diseñador. El texto debe ser legible y legible al mismo tiempo que se ajusta al estilo del sitio web. Pero también debe relacionarse con una jerarquía de contenido.
La construcción de jerarquías es la? Gran imagen? de la composición de un sitio web. Pero a medida que pasa a la tipografía, también debe crear jerarquías relacionadas con un texto específico en la página. En esta pieza, explicaremos cómo crear relaciones con los encabezados y cómo usar espacios en blanco para hacer párrafos largos y fáciles de digerir.
Encabezados y espaciamiento
El contenido web normalmente se centra en solo un par de elementos de texto diferentes. Los encabezados van desde H1-H6, pero la mayoría de los sitios web solo usan H1-H4 como máximo. Independientemente de cuántos estilos de encabezado se utilicen, es su trabajo como diseñador crearlos para que la jerarquía se establezca claramente.
El espacio entre el texto es importante porque ayuda a definir el contenido de la página en sí. Cuando los usuarios encuentran un nuevo encabezado, esperan reconocer si el contenido está cambiando a un tema nuevo o si está dentro de un tema existente. La combinación correcta de tamaño, color y estilo del texto del encabezado ayuda a crear las expectativas correctas para los usuarios.
El espacio negativo entre el texto muestra cómo se relaciona el contenido de la página. Los encabezados con mucho espacio se consideran más dominantes, mientras que los encabezados más cercanos a los párrafos se consideran relacionados a través del contexto. Los márgenes inferiores después de los párrafos muestran la relación entre las líneas de texto y su ubicación en la jerarquía. Todo se relaciona con la creación de una jerarquía de contenido para distinguir visualmente entre el texto de la página.
Encabezando las relaciones
Cada encabezado debe reflejar su propio estilo único, que también complementa otros estilos de texto en la página. La creación de encabezados brillantes se hace más fácil con la práctica, pero los valores de espacio en blanco generalmente deben comportarse de la misma manera independientemente de los estilos de encabezado.
Square utiliza un diseño de página de inicio de inicio tradicional con muchas imágenes y bloques de texto. Los encabezados son un segmento particularmente interesante del diseño, ya que varían desde sobredimensionados hasta infinitamente pequeños. Sin embargo, el tamaño realmente no importa tanto como la relación con otro texto en la página.
Observe en la captura de pantalla anterior cómo los encabezados grandes utilizan espacios adicionales arriba y debajo del texto. Estos encabezados de sección transmiten visualmente la sensación de estar "por su cuenta". pero naturalmente también se agrupan en bloques más grandes de subtítulos y párrafos.
Cada bloque interno utiliza un texto de subtítulo que es mucho más pequeño. Estos encabezados internos tienen aproximadamente el mismo tamaño que el texto del párrafo, pero se destacan con el texto en negrita y un color más oscuro. Visualmente, es muy claro que estas líneas de texto en negrita siguen siendo encabezados (más abajo en el tótem visual).
La cantidad de espacio entre encabezados y párrafos también define qué párrafos pertenecen a qué encabezados. Del mismo modo, debe insertar mucho espacio entre los encabezados más pequeños y los encabezados más grandes. Nuevamente, el espacio negativo define la jerarquía tanto en el diseño visual como en la tipografía.
Como se explica en la guía gratuita Mejores prácticas de diseño de la interfaz de usuario web, recuerde estos puntos al crear encabezados de página:
- Una jerarquía visual debe ser evidente a través del uso de espacio, tamaño, color y / o estilo de texto. Esto debería ser visible incluso cuando se encuentre a una distancia de 3 a 5 metros del monitor. También puede utilizar la prueba de desenfoque gaussiano de 5 segundos para verificar la jerarquía.
- Mantenga cada subencabezado cerca de su primer párrafo secundario.
- Coloque los encabezados concisos cerca para transmitir ideas de manera más rápida y clara.
Párrafos largos
Sobre el tema del espacio en blanco contextual, está la cuestión de cómo diseñar en torno al párrafo común. Firme, confiable y encontrado en casi todas partes, el párrafo es la columna vertebral de la estrategia de contenido de cada sitio web.
Pero la forma en que se escribe el contenido varía según el estilo del contenido. Por ejemplo, una revista de noticias en línea utilizará diferentes estilos de párrafos que un blog de jardinería más pequeño. La cantidad de contenido, la longitud del contenido y el nivel de detalle entran en juego al estilizar los párrafos.
Trate de diseñar con texto lo suficientemente grande como para que se pueda leer claramente a 3 pies de distancia de la pantalla. El tamaño del texto es muy similar al espacio en blanco, ya que generalmente es mejor diseñar más grande que más pequeño. Sin embargo, ejercite la moderación y la moderación.
Si el tamaño del texto es demasiado grande, solo ocupará más espacio en la pantalla y requerirá más desplazamiento. Pero si es demasiado pequeño podría ser ilegible, o los visitantes experimentarán dificultades con el ritmo vertical cuando mueven sus ojos de línea a línea.
Dos cosas importantes a tener en cuenta son los márgenes de los párrafos y la altura de la línea (el espacio entre cada línea). El tamaño del texto en sus párrafos dicta ambos valores porque el espacio en blanco depende del tamaño.
Medium es una plataforma de blogs en línea que hace un correcto diseño de párrafos. El texto es nítido, legible y espaciado perfectamente. Como muestra el diseño de su párrafo, los valores de altura de línea deben ser lo suficientemente grandes para conectarse a la siguiente línea sin sentirse excesivo.
Tal como se recomienda en el libro electrónico Web Design Trends 2016, aquí hay algunas buenas reglas a seguir:
- Evite hacer que la altura de la línea sea más grande que una línea de texto típica.
- La unidad de fuente em es perfecta para crear tamaños uniformes en todos los navegadores.
- La altura de la línea a menudo debe ser un poco más grande que el tamaño de fuente.
- Pruebe un tamaño de fuente de 1em combinado con una altura de línea de 1.5em-1.75em.
El espaciado de los párrafos puede ser complicado, pero es un tema importante, especialmente para sitios web con gran cantidad de texto. El margen inferior del párrafo debe ser mucho más grande que una línea típica de texto. Los márgenes del párrafo inferior deben ser lo suficientemente grandes como para que pueda determinar visualmente cuándo ha finalizado un párrafo.
Una vez que descubres el tamaño del texto de un sitio web, se vuelve mucho más fácil jugar con los valores de altura de línea y calcular los márgenes para el espaciado.El objetivo aquí es la claridad y la estructura. Cada nuevo párrafo debe ser obvio sin ninguna duda. La clave es el espacio proporcional entre cada bloque de texto.
Como se mencionó anteriormente, generalmente es más seguro tener? Demasiado? Espacio en blanco en lugar de no ser suficiente. Simplemente evite usar cantidades colosales de espacio o terminará con una densidad de contenido muy superficial. Mantenga suficiente contenido en la página para que sea interesante, pero no tanto que sea abrumador.
Para obtener más información sobre el diseño de contenido en interfaces web, consulte esta pieza sobre cómo diseñar el párrafo perfecto.
Para llevar
El espacio negativo en la tipografía afecta directamente la composición general y los elementos de página más pequeños al mismo tiempo. Al diseñar la tipografía, el contexto es el rey.
Los párrafos encontrados en la página pueden necesitar márgenes más grandes que los párrafos encontrados en la barra lateral. Los enlaces en el encabezado podrían verse más suaves con un relleno adicional, pero los enlaces en el pie de página podrían verse más ordenados con muy poco relleno. No hay reglas sólidas, solo mejores prácticas a tener en cuenta.
También recuerde que la tipografía sigue su propia jerarquía al igual que la estructura de la página. Mucha práctica será la forma óptima de mejorar tus ojos para reconocer rápidamente los valores espaciales que se ajustan mejor a cualquier proyecto web dado.
Cuando se trata de diseñar con espacio, recuerde que el espacio como una calidad estética toma un segundo plano al espacio como herramienta de diseño. El espacio crea relaciones, define jerarquías y enfatiza el contenido; siempre tenga esto en cuenta al considerar cómo reducir el ruido visual.
Puede aprender más técnicas de diseño procesables en el libro electrónico gratuito Tendencias de diseño 2016 de UXPin. La guía de 185 páginas explica las 10 mejores prácticas con gran detalle. Encontrarás 165 ejemplos analizados de las principales empresas de hoy.
Diseño gráfico minimalista.
El diseño gráfico minimalista es una filosofía de crear algo en el que cada elemento tiene un propósito. Es simple, limpio y hermoso. Es altamente utilizable. Nuestra función explora diferentes enfoques y técnicas para el diseño gráfico minimalista (¡con muchos ejemplos inspiradores!)