Gracias a los fundamentos del diseño podemos conseguir que nuestra página web comunique exactamente lo que queremos.
Actualizada a enero de 2016
El diseño es un medio para comunicar un mensaje a un determinado público, y para conseguir un diseño web efectivo que comunique correctamente el mensaje que queramos transmitir, debemos poner diferentes fundamentos del diseño en práctica.
Uno de ellos es la jerarquía visual, es decir, la organización de los elementos de una web para hacer llegar el mensaje a su destinatario.
Este fundamento consiste en dar más peso visual a unos elementos que a otros, lo que ayuda a guiar la vista del usuario y le sugiere cuáles son los más importantes.
Para conseguir una buena jerarquía visual hay ciertos principios que debemos aplicar:
Tamaño
Jugar con los tamaños de los diferentes elementos que tengamos en nuestra web nos permitirá, fácilmente, atraer la atención hacia donde queramos. Por este motivo, de entre los fundamentos del diseño será uno de los más importantes.
Los elementos más grandes llaman más la atención. El tamaño es la forma más rápida y efectiva de atraer al usuario a un determinado elemento o lugar de la web.
Además, las personas relacionamos el tamaño con importancia, por lo que a mayor tamaño de un elemento, más importante creerá nuestro usuario que es, él y lo que contiene.
Por el contrario, los elementos más pequeños suponemos que son los menos relevantes, y por este motivo tendemos a ignorarlos.
Por otro lado, usar elementos de diferentes tamaños rompe la monotonía del diseño, lo que hará que nuestros visitantes no se aburran y se quieran marchar.
Color
El color es otro de los fundamentos del diseño que, para los diseñadores web, es de las herramientas más efectivas para atraer la atención y destacar ciertos elementos.
Los colores fuertes y brillantes son los que más pueden captar la atención del usuario, e incluso despertar su curiosidad, pero lo cierto es que la elección de los colores es un tema delicado ya que si estos son demasiado estridentes, pueden resultar molestos.
Los colores, además de tener la capacidad de atraer y destacar, transmiten emociones y ayudan a conectar con quienes los observan, por lo que no podemos elegir un color simplemente porque llame la atención sino que, además, debemos elegir un color que transmita lo que necesitamos y, por si fuera poco, que combine correctamente con nuestros colores corporativos. Todo esto sin olvidarnos de cuál es nuestro público objetivo.
Contraste
El contraste es otro de los fundamentos del diseño que nos puede ayudar a destacar lo que queramos en nuestra web.
Cuando estamos viendo algo con unos colores o tamaños de letra similares y, de pronto, nos encontramos con un cambio importante, entendemos que algo es diferente e inmediatamente capta nuestra atención.
En un esquema de color por ejemplo, si estamos viendo una paleta de colores fríos y en tonos pastel, y en un punto de la web vemos un color cálido y brillante, seguro que nos detendremos en él para averiguar por qué es diferente y qué contiene.
Cuando más drástico sea el cambio, más llamará la atención.
Repetición
La repetición ayuda a entender la importancia de cada contenido, por lo que este fundamento del diseño también conviene conocer.
Un ejemplo claro son los textos de una web. Si los textos explicativos los ponemos en seis párrafos con el mismo tamaño y color de letra, cuando el usuario vea un séptimo texto mostrado de la misma forma, sabrá que es un párrafo del mismo tipo.
Si por el contrario en algún punto encuentra un texto en otro color, entenderá que es un elemento diferente, como por ejemplo un enlace.
La repetición nos sirve también para romper la monotonía y evitar el aburrimiento del lector, por eso es recomendable y usar títulos destacados, negritas.
Proximidad
La proximidad es uno de los fundamentos del diseño que más nos pueden ayudar a jerarquizar contenidos e identificar los que son similares.
Si ponemos varios elementos unos cerca de otros, estaremos formando un grupo de elementos, por lo que se entiende que serán del mismo tipo.
Por el contrario, si separamos un único elemento del resto, estaremos dando a entender que es diferente.
Agrupar elementos nos ayuda a crear secciones y subsecciones dentro de una web, por ejemplo en un blog encontraremos una barra lateral con diferentes contenidos en su interior, por lo que cada uno de esos contenidos lo percibiremos como un grupo, y a su vez, todos ellos en su conjunto, como otro (la barra lateral en su totalidad).
Alineación
El lugar en el que coloquemos los elementos también les da más o menos importancia, por lo que la alineación será algo con lo que juguemos en nuestro diseño.
Los contenidos que van en la parte superior de una web suelen ser los más importantes, y de ahí que solamos encontrarnos con el logotipo, el menú principal de navegación, el carrito de la compra, etc.
Lo mismo ocurre en un blog, siendo el bloque de contenido central mucho más importante que el que esperamos encontrar en una barra lateral.
Aparte, la alineación puede utilizarse también para atraer la atención si en un momento dado cambiamos la alineación de los elementos.
Espacios en blanco
Dentro de los fundamentos del diseño, los espacios en blanco, pese a lo que pudiera parecer en un primer momento, son elementos de vital importancia para organizar contenidos y asignarles importancia.
Encontrarnos con un espacio en blanco en una web no implica que sea un espacio vacío.
El uso de espacios en blanco es algo habitual en diseño ya que ayuda a darle a todo el contenido una mayor organización y sensación de orden.
Si los espacios en blanco están usados correctamente, de un simple vistazo el usuario podrá identificar los diferentes bloques de contenido de nuestra web, reconociendo los que estén relacionados entre sí, e identificando los que sean diferentes.
Y ahora que ya conocemos algunas técnicas, a jerarquizar toca ;)
