Iconos web: Consejos de diseño y uso

Son muchos los elementos que participan en una web y que son los responsables del buen funcionamiento de la misma. Todos ellos tienen que funcionar de forma aislada y tener un diseño especifico, pero claramente, para que la web tenga éxito tienen que trabajar en equipo.

Tenemos que saber las peculiaridades de cada uno de ellos, para llegar a un diseño que se adecue a las características que necesitamos, pero no hemos de olvidar que, a parte de esas características, tienen que estar perfectamente implantados en el diseño web.

De cómo la tipografía y por lo tanto los textos deben combinarse y diseñarse hemos hablado en numerosos artículos. La importancia de la legibilidad y el orden de los textos en el diseño web es algo que tenemos que tener muy claro a la hora de comenzar con el diseño web, pero también intervienen otros elementos gráficos que no podemos olvidar.

Por una parte están los botones, de los cueles hemos hablado en este articulo. Ellos serán los que nos guíen en cualquier proceso y también los encargados de llamar nuestra atención, por lo que su diseño no puede quedar libre y debe hacerse teniendo muy en cuenta la Experiencia de usuario.

Pero hoy vamos a hablar de otro elemento gráfico que se incluye en la mayoría de las webs y que muchas veces pasa desapercibido: los iconos.

Iconos hay de muchos tipos y clases y su diseño dependerá en gran medida del lugar que ocupen en la web (además podemos optar por iconos de un banco de imágenes o bien diseñarlos nosotros mismos). El tema es muy amplio, y podríamos estar hablando infinitamente sobre esto, pero en este caso, nos vamos a centrar en algunos iconos «generales» que suelen tener todas las web y vamos a ver las distintas formas de uso y diseño. Comenzamos!!

Iconos sociales

Hoy en día no hay web (o no debería de haberla) que no tenga sus correspondientes enlaces a sus redes sociales. Dependiendo de la importancia que queremos darle, hay varios lugares en los que podemos colocarlos. Es común verlos en la barra de menú, en la cabecera o en el footer. También podemos encontrarlas en la barra lateral.

El diseño de estos es muy especifico. Como cada red social tiene un icono característico, lo más recomendable es usar estos iconos, puesto que se hacen reconocibles fácilmente. De esta manera es común tomar los iconos de un banco de iconos, y no diseñarlos específicamente. Font Awesome es un buen banco para estos iconos (y además son muy fáciles de añadir en WordPress)

Ahora bien, que los tomemos de un banco de iconos no quiere decir que dejemos el diseño al antojo del que los dibujó. El diseño especifico que le demos, dependerá en gran medida del estilo y diseño de nuestra web. Podemos enmarcar los iconos en círculos o cuadrados, o dejarlos sin borde, que cambie el color cuando pase por encima o que se mantenga…

Las posibilidades son infinitas por lo que estas decisiones son las que tenemos que tomar teniendo en cuenta a su vez, como se comportan los demás elementos de la web.

Aquí os dejamos varios estilos de iconos sociales (aunque hay muchos más). La elección de estos debe ir siempre de la mano con el estilo web. Recordar que a menos que queramos que estos resalten por alguna cuestión, lo más recomendable es que se mimeticen con el diseño.

iconos-redes-sociales

Iconos navegación

Al igual que los iconos sociales están normalmente en todas las web, hay otros iconos que ayudan a la navegación que es recomendable que aparezcan. Aunque a continuación hablemos de algunos, puede haber muchos más dependiendo de la web y de las opciones que vaya a usar. Por ejemplo, nosotros en nuestra plantilla para WordPress Artie, hemos incluido algunos iconos específicos del tema «recetas», que obviamente no son comunes a otros temas.

De cualquier manera, los más comunes son, el icono del buscador, el del menú responsive (hamburguesa), iconos para la navegación entre artículos, o para las categorías y etiquetas…

Para estos casos podemos usar iconos de bancos de iconos como Font Awesome o linear icons o diseñar nuestros propios iconos. En este caso dependerá de la singularidad que deseemos darle a esos iconos. Quizá en el caso del buscador o la navegación entre articulos vayamos hacia algo más general, pero para los iconos de las etiquetas, queremos un diseño especifico…

En el caso de que queramos diseñar nuestros iconos y conseguir así nuestro propio banco para todos nuestros trabajos, tenemos que convertirlos a iconos web. Una herramienta de fácil uso para esto es «Iconmoon«. Solo hemos de tener cuidado en que todos tengan el mismo estilo y tamaño, pues si no en web, no se verían correctamente.

iconmoon-conversor-iconos-web

Lo importante, elijamos lo que elijamos, es tener en cuenta que son iconos que nos van a ayudar a navegar, pero que en ningún caso son primarios, por lo que hay que darles un diseño que mimetice con el resto, pero que no llame atención más de lo que debería.

iconos-web-personalizados

Podemos añadir todos los iconos que se nos ocurran, siempre teniendo en cuenta, si el icono es el botón en sí, o un refuerzo de la palabra que acompañan. Esto es importante sobre todo, si queremos ser creativos en este punto, y usamos algún icono, que no esté relacionado con la función. En este caso siempre es una buena idea poner una palabra que lo acompañe y que explique en cierto punto su uso.

Iconos específicos

Además de los iconos de los que hemos hablado que más o menos son comunes a todas las web, si quieres que tu web destaque entre las demás y tenga un punto de creatividad, siempre es una gran idea, el diseño de iconos específicos para la misma.

Ya puede ser para la sección de servicios, trabajos, o para los elementos del blog, pero cualquier icono que sea distinto y que tenga un punto de creatividad le dará a tu web esa originalidad, que además es tendencia.

iconos-personales-web

En este caso, como decía, mi recomendación es que para aquellos lugares específicos de tu web en los que desees poner iconos, sean específicamente diseñados para ti. De otra manera estarías perdiendo creatividad. Busca eso que te hace diferente y represéntalo con un icono!

Comentarios (1)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *