Énfasis en el diseño web

En muchos diseños web, la simple disposición de textos, imágenes, videos y cualquier otro elemento no es suficiente para conseguir que el usuario dirija la atención hacia los elementos que consideremos más importantes.

La atención de las personas que navegan por Internet es de apenas algunos segundos, lo que implica que el diseñador debe lograr captar la atención del usuario, que éste se sienta atraído y no se retire de la página en unos segundos. Este es uno de los motivos para emplear el énfasis en nuestros diseños.

Otro motivo para aplicar este principio del diseño es diferenciar elementos semejantes entre sí, resaltando aquellos que, dentro de su misma especie, se desee destacar de los otros.

Por ejemplo, si tuviéramos que incluir un texto con gran extensión, la atención del usuario seguramente no pasará de las tres o cuatro primeras líneas, por lo que la lectura deberá simplificarse y agregarse elementos destacados para que el lector pueda hacer una rápida recorrida.

Es muy probable que, tras esta breve recorrida empleando las ayudas aplicadas en el texto, el usuario considere que lo que allí se encuentra es lo que necesita y prosiga con una lectura más detenida del texto.
Lo mismo sucede con las imágenes. Una larga colección de imágenes similares difícilmente pueda atraer la atención de un internauta, por lo que será necesario destacar alguna o algunas de estas imágenes para que quien ingrese en nuestra página tenga una idea resumida del tipo de contenidos que allí encontrará.
El énfasis es uno de los métodos más adecuados para conseguir el necesario resaltado de algunos elementos de un grupo de elementos homogéneos. Pero también la tendencia a dar énfasis a demasiados elementos de la página web es un error muy común, sobre todo de diseñadores web inexpertos.

Clasificación de elementos según el énfasis

De acuerdo al énfasis que el diseñador emplee en los diferentes elementos que componen una página, éstos se pueden clasificar en tres grupos:

• Elementos dominantes
• Elementos sub-dominantes
• Elementos subordinados

Elementos dominantes

Son aquellos elementos que, dada su importancia respecto del resto de los contenidos, se destacan aplicando énfasis por encima del resto. A continuación mostramos un ejemplo de elemento dominante:

En este ejemplo, podemos apreciar dos elementos que por su énfasis pueden considerarse como dominantes: el título “creative services” y la imagen de la botella. Seguramente, al ver esta imagen, estos dos elementos hayan sido los primero en los que hayamos detenido nuestra atención, lo que ha sido el deseo del diseñador de la página. El mismo ha logrado este efecto gracias al correcto empleo del énfasis, consiguiendo colocar estos elementos en el primer plano de la composición.

Para lograr convertir a un texto como elemento dominante, el diseñador puede emplear varios atributos sobre los cuales aplicar la diferencia, como tamaño, color, tipografía, posición o una combinación de ellos.
En cuanto a las imágenes, al igual que con el texto, basta con variar algunos de los atributos de las mismas, como tono, color, tamaño, posición o una combinación de las mismas, para convertirla en uno de los elementos dominantes de la página.

Hay que destacar que la cantidad de elementos resaltados también resulta muy importante. Cuantos más elementos con atributos similares coloquemos en una página, menos se destacarán unos de otros. Si en la imagen anterior colocáramos una cantidad mayor de texto resaltado, el texto que es dominante dejaría de serlo ya que estaríamos haciéndolo homogéneo con otros elementos.

Elementos sub-dominantes

A la hora de interesar al visitante de la página, es necesario que luego de conseguir su atención gracias a los elementos dominantes, podamos guiarlo a través de los restantes elementos de forma tal que mantenga el interés en lo que exponemos y se interese por ver otros contenidos.

Para ello utilizamos otros énfasis menores que los de los elementos dominantes, pero mayores que los que empleamos en el resto de los elementos de la página. En el caso de los textos, podríamos definirlos como subtítulos y textos resaltados. En la siguiente imagen vemos una página web donde se ha distribuido el texto en varios párrafos, cada uno con su subtítulo.

En esta página web (lawebera.es), también encontrarán una gran cantidad de ejemplos de utilización de elementos sub-dominantes. Notarán que estos elementos resaltados colaboran en la visualización de los elementos importantes y facilitan la ubicación de cada sección. En una página donde todos los elementos resultan homogéneos, resulta extremadamente difícil ubicar cuales son los elementos más atractivos o importantes, por lo que la atención del visitante pronto se perderá, con grandes posibilidades de que el mismo abandone la página.

Elementos subordinados

Llamamos elementos subordinados a dos tipos de elementos. Unos son aquellas informaciones anunciadas por los elementos dominantes y sub-dominantes, como textos complementarios o ampliatorios. Otros son elementos que completan una composición de imágenes, embelleciendo la página o ayudando a resaltar a los elementos principales.

Estos elementos subordinados deben tener atributos de menor resalte que los de los tipos anteriores, de forma que la diferencia con aquellos colabore en resaltar su importancia.

El énfasis conseguido en los elementos dominantes y sub-dominantes depende en gran medida de la correcta utilización de los atributos de los elementos subordinados. En la imagen que empleamos en el ejemplo anterior, vemos que el tamaño de los textos subordinados es mucho menor, lo que permite que los subtítulos y títulos se destaquen.

Sin embargo, hay que tener presente que los elementos subordinados contienen información necesaria para completar el mensaje que se desea entregar, por lo que su legibilidad debe ser muy buena.

¿A qué dar énfasis y a qué no? ¿qué es lo realmente importante?

Precisamente, contestando a la segunda pregunta obtienes la respuesta a la primera. Cada página web tiene un objetivo, céntrate en ese objetivo a la hroa de crear su diseño y su estructura.

Por ejemplo, si estás vendiendo productos por internet, en la página de producto muy probablemente te interese destacar la foto del producto y su precio, si hay descuento te interesa que esté señalizado y sea bien visible para atraer la atención. Y por último y no menos importante, necesitas dar énfasis al botón de comprar, para incitar al visitante a realizar la transacción.

¿Cómo dar énfasis?

Hay varios recursos, en los que al final se resume prácticamente toda la magia del diseño web:

• Tamaño: cuanto más grande un elemento, más énfasis / importancia le estás dando. Aquí está muy relacionado el contraste de tamaño o escala.
• Ubicación: los usuarios navegan por la página desde arriba hacia abajo. Los elementos que necesiten ser enfatizados deben situarse arriba de tu web, preferiblemente antes del pliegue para asegurarte de que el visitante los verá sin necesidad de hacer scroll.
• Color: el uso del contraste del color de forma adecuada ayuda enormemente a jerarquizar la importancia de los elementos de una web. Pero hay que tener cuidado de no usar demasiados colores para mantener un diseño limpio y agradable.

Conclusión

La aplicación de diferentes grados de énfasis resulta de extrema importancia en el diseño web. Gracias a ello la página en construcción puede verse heterogénea, llamando la atención de los usuarios sobre aquello que puede hacer que el mismo decida quedarse viendo el resto de los contenidos o salir corriendo en la otra dirección.

El énfasis contribuye en gran medida también a la estética de la página. Veamos un ejemplo donde la aplicación de diferentes grados de énfasis son el elemento principal del diseño:

En este diseño se puede apreciar que la aplicación de diferentes grados de énfasis en el texto conforma la estética del diseño de la página. La utilización de diferentes tamaños, colores y tipografías hacen a la totalidad del diseño, además de dar el mensaje textual. A la izquierda aparecen los elementos dominantes, mientras que a la izquierda los elementos sub-dominantes conforman el logotipo, el menú y algunos subtítulos, mientras que los elementos subordinados completan el mensaje.

Además de dar un mensaje claro, cada tipo de elemento tiene importancia desde el punto de vista estético. Esto demuestra claramente que el énfasis que se da a cada elemento resulta importante, tanto en el diseño estético de la página como en la claridad del mensaje.