Las fases iniciales del diseño se centran en la composición y estructura de una página web y se trabajan mediante bocetos a mano. El objetivo es que se tenga una idea clara de dónde van a ir colocados los elementos, aunque aún no se sepa con exactitud el aspecto final de dichos elementos. Una vez avanzas a las siguientes fases, se vuelve más importante crear un sentido de jerarquía visual en tus diseños. Esta jerarquía le permite saber a los usuarios qué elementos son más importantes que otros.
En el diseño web, a la tipografía también se le puede aplicar jerarquía visual mediante el tamaño de la fuente, el estilo, la localización, etc. En este artículo mencionaremos algunos puntos que te ayudarán a comprender mejor cómo trabajar con jerarquía tipográfica.
Percepción del texto en un sitio web
La mayoría de usuarios no prestan atención al texto cuando recién ingresan a una página web. Usualmente notarán los colores, el logo, la alineación de los elementos y el aspecto de la tipografía. Tras notar estos aspectos generales podrían pasar a leer el texto.
Otro grupo de personas que tal vez ya hayan ingresado anteriormente al sitio web, sí que pasarán a leer el texto sin pensárselo dos veces. Ya han visto los otros elementos de diseño en el pasado, por lo tanto no se encuentran ante algo totalmente “desconocido”.
A tu sitio web ingresarán los dos usuarios que hemos mencionado previamente. Sin embargo, debes centrarte en los usuarios nuevos y tener como objetivo crear un diseño en el cual tus usuarios se sientan cómodos echando un vistazo al contenido. Para ello todos los elementos deben estar en armonía y ser legibles. Debes elegir la paleta de colores adecuada, de modo que no moleste a la vista de tus usuarios. Las diferentes páginas que conforman tu sitio deben tener cierto sentido de unidad y fluidez. Por suerte, ya existen ciertos patrones de interacción comunes a los que el usuario está acostumbrado, así que de cierta forma puedes hacer sentir bienvenido a un nuevo usuario.
Como diseñador debes saber que los colores e imágenes tienen un gran impacto en la percepción de un usuario sobre un sitio web. Así que debes hacer las decisiones de diseño adecuadas para atraer al usuario mediante formas y colores, si es posible evocando sentimientos. Una vez que el usuario echa un vistazo al contenido pasará a leer el texto que has incluido. Es importante que tanto el tono de comunicación como las palabras que emplees sean las adecuadas según tu público objetivo. Otro aspecto que debes cuidar es la jerarquía tipográfica.
En un sitio web, hay textos que para ti son más importantes que otros y quieres que el usuario también lo perciba. Conoces técnicas para destacar palabras, por ejemplo usando una tipografía con mayor puntaje, cambiando de color, colocando negritas, combinando tipografías diferentes, etc. Pero no sólo es importante tener en cuenta estas técnicas, sino también indicar qué contenido se relaciona con otro. Un ejemplo claro sería pensar en los títulos y el cuerpo de texto de una página de destino. El título siempre se encuentra más visible y es una frase que logre captar la atención del público. Por otro lado, el cuerpo de texto puede ser una frase que apoye el título o una breve explicación de lo que hace la aplicación o servicio que estás promocionando en esa página. Usualmente se relacionan entre sí porque son visibles en el primer pantallazo y se usa la misma tipografía o color de tipografía.
Hablar de jerarquías es pensar en cómo un elemento se relaciona con otro. Una cosa es conocer de técnicas y otra muy distinta es percibir estas relaciones entre los elementos y saber cómo aplicar esas técnicas para crear un contenido que se pueda leer con mayor fluidez, en donde el usuario pueda percibir inmediatamente qué elemento es más relevante que otro.
Localización del texto
El tamaño del texto y la localización son dos factores clave cuando se habla de jerarquía. Sabemos que un texto en un puntaje mayor destacará más y la localización del texto tiene que ver con la forma en la que los usuarios están acostumbrados a ver una página web. Además, recuerda que no sólo trabajas con texto, sino también con imágenes. Entonces debes hallar la forma que todos los elementos alcancen en la composición sin que ésta se vea desordenada. Recuerda que en una composición cada elemento que coloques influencia a otros y modifica el entorno de la composición en sí. En ocasiones te verás forzado a mirar a toda la composición para poder organizar los elementos de manera adecuada.
En este aspecto se vuelve esencial elegir una tipografía que te ayude a transmitir el mensaje de manera clara y que también contribuya con el ambiente que estás intentando darle a tu composición. Es recomendable elegir una tipografía que posea varios estilos, de esa manera puedes usar negritas o itálicas en tu texto sin romper con la personalidad de tu diseño.
Recuerda también que los bloques de texto largo suelen intimidar a los usuarios, así que puedes intentar dividir la información en viñetas o resumir la información. En caso no se pueda resumir, deberás idear una forma de que los bloques de texto se reduzcan.
La localización del texto también ayuda a crear una fluidez en la lectura. Por supuesto, mucho tiene que ver los otros elementos de diseño, por ejemplo, si comparten el mismo fondo u otros elementos parecidos, entonces el usuario entenderá que ambos bloques de texto guardan relación entre sí.
Los espacios en blanco y la jerarquía visual
Los espacios en blanco juegan un papel relevante en el diseño y permiten la legibilidad de nuestro texto y de todo la composición en sí. Si existe un gran espacio en blanco la composición ser verá vacía o incompleta. Por otro lado, si existen pocos espacios en blanco, la composición se verá desordenada y puede llegara confundir a tus usuarios.
Por supuesto, el espacio en blanco también cobra importancia cuando hablamos de jerarquía y de la creación de unidad. Los espacios en blanco ayudan a crear relaciones entre los elementos, es por ello que son importantes cuando se trata de jerarquía visual o tipográfica. Por ejemplo, los subtítulos deben estar localizados cerca de los párrafos de texto para dar a entender a los usuarios que estos dos elementos se relacionan entre sí.
Entender sobre espacios en blanco (y cómo trabajar con ellos) es una habilidad que adquirirás con el tiempo y con mucha práctica, por supuesto. Puedes aprender mucho simplemente analizando sitios web y cómo el espacio en blanco afecta la jerarquía tipográfica. Poco a poco, adquirirás una especie de “sexto sentido” para identificar cuando el espacio en blanco no se ha empleado correctamente.
