Los iconos han sido, y siguen siendo, un elemento de gran importancia en diseño web ya que, además de por estética, si se usan correctamente, pueden aportar numerosos beneficios a una página web.

Pueden ayudar a separar visualmente los diferentes bloques de contenido, a aligerar secciones extensas, a aportar personalidad a un diseño… pero todo estos beneficios desaparecen si no se usan correctamente, o se abusa de ellos y se utilizan para reemplazar, en lugar de acompañar y enfatizar, los contenidos.

Algunos de los usos más beneficiosos de los iconos son:

Icono funcionalidadesAñadir funcionalidades:

En muchos elementos web los iconos sirven para reemplazar al texto, como por ejemplo en reproductores de audio o vídeo, donde estamos acostumbrados a ver iconos para iniciar y detener la reproducción, en lugar de palabras que lo hagan.

Icono AyudaAyudar a la comprensión:

Ciertos mensajes se entienden mejor si van acompañados de iconos. Por ejemplo, si nos aparece un mensaje de error al rellenar un formulario, el icono de alerta que acompaña al texto nos ayuda a entender que se trata de un error o aviso importante.

Icono interésDespertar interés:

Los iconos atraen la atención del usuario, por lo que usarlos acompañando a párrafos descriptivos es una buena opción. Llamarán la atención de nuestros visitantes hacia la zona en la que esté, e incitará a la lectura del párrafo al que acompaña.

Icono aligerarAligerar contenidos:

Si una de nuestras secciones web tiene demasiado texto, puede “agobiar” y disuadir de la lectura a nuestros visitantes. Sin embargo, al usar iconos junto a párrafos, dividiremos visualmente el contenido, ayudando a entender que hay diferentes apartados sin necesidad de leer los textos. Así, la sensación a primer golpe de vista será de algo mucho menos extenso y más fácil de leer.

Icono títulosEnfatizar títulos:

Los títulos de secciones, o de bloques de contenido, normalmente suelen tener un mayor tamaño de letra u otro color, pero acompañar al texto de un icono aumentará su peso visual y les hará destacar más.

Icono guiarGuiar la vista:

Al atraer la atención de los usuarios, los iconos pueden utilizarse para guiar su vista. Colocar iconos junto a textos que queremos destacar hará que nuestros lectores vayan de uno a otro según los hayamos colocado.

Icono enumerarEnumerar listas:

Ya sean de servicios, productos, herramientas o características, los iconos son los acompañantes perfectos de las listas. Nos ayudan a entender que lo que estamos viendo es una lista, y facilitan la separación visual y comprensión de los elementos que contienen.

Icono monotoníaRomper la monotonía:

Si variamos la colocación o tamaño de los iconos, romperemos la monotonía visual del diseño. Aunque debemos hacerlo teniendo cuidado de que la sensación general no sea de desorden o de un diseño descuidado.

Icono estiloAportar estilo:

Hay muchos estilos de iconos. Los hay que usan sombras y relieves, planos, lineales, en 3D… Usando un estilo concreto en todos nuestros iconos, aportamos personalidad a nuestro diseño, así que utilizando iconos que encajen visualmente con nuestra estética, conseguiremos una web con un diseño más corporativo.

Hay muchos motivos por los que utilizar iconos en nuestro diseño web, pero lo mejor es que ninguno de ellos sea hacerlo sin motivo ;)