Bueno, últimamente voy bastante liado así que no puedo escribir tanto como me gustaría. Aprovecho esta semana de relax en la que «sólo» me estoy peleando con el Zend Framework y haremos un esfuerzo e intentaré no enrollarme demasiado.
Siguiendo con el tema del diseño web y no morir en el intento… Aparte de la elección de los colores, nada como una buena selección de iconos para dar una buena apariencia y atractivo a una web.
Por que si es difícil la elección de un logotipo tal y como comentábamos en el anterior post, es igual de complicado realizar un conjunto de iconos que mantengan una misma apariencia y se ajusten a una «familia». Así que nuevamente me quito el sombrero ante un buen diseño de iconos.
Personalmente hace mucho que no intento meterme a diseñador gráfico más de lo necesario. Es preferible buscar entre los amplios catálogos de internet y no reinventar la rueda una y otra vez. Existen algunos conjuntos de iconos que seguro que los has visto repetidos en muchos lugares, con toda probabilidad con licencias Creative Commons o GPL que puedes utilizar en tus proyectos.
Algunas fuentes de iconos
http://www.iconfinder.com/. Este es uno de mis recursos favoritos. Incluye hasta un bonito buscador que nos permite localizar por la descripción del icono. Que necesitamos un icono de Facebook… Pues nada, a buscar. Y no sólo nos devuelve cientos de ellos, sino que además podemos consultar la familia completa a la que pertenece, con lo que podemos descargarnos la familia entera. Un recurso inestimable. Además podemos elegir entre distintos formatos y tamaños: PNG, ICO, SVG vectoriales…
http://www.dafont.com/. Otro de los mejores recursos que conozco, no sólo por la gran cantidad de tipografías que alberga, sino porque un buen número de ellas son «dingbats» o tipos de letras que están compuestas principalmente por gráficos. Si alguna vez necesitáis un juego de iconos original y la creatividad os invade necesitareis poca cosa: podéis utilizar el GIMP o el editor gráfico que prefiráis, instalaos alguno de estos tipos de fuentes y armaos de paciencia. Veréis como no es tan fácil como parece, pero con paciencia y una buena base seguro que obtenéis un juego de iconos original que colgar en vuestra web.
http://browse.deviantart.com/?q=icons+set. DeviantArt es una especie de navaja suiza del diseño. Da igual lo que busqueis: inspiración, fotografía, iconos, diseño de barcos… Cada día me sorprende más, ¡y llevo siete años visitándola! En cualquier caso si visitáis el enlace veréis qué variedad de iconos nos puede ofrecer.
Y sinceramente, la variedad de sitios es enorme. Pero con estos tres os puedo garantizar que tenéis un buen arsenal sino queréis acudir a los servicios de un Diseñador Gráfico profesional.
Formatos gráficos de los iconos
Generalmente los iconos hasta hace unos años solían ser en formato .GIF por el tema de las transparencias y porque generalmente no eran muy elaborados. Muchos incluso sólo tenían 4 bits de profundidad para ahorrar tráfico, aunque el .GIF admite 8 bits.
Naturalmente hoy en día eso ya no es aplicable. el .PNG se ha impuesto y podréis encontrar iconos de 512x512px fácilmente. El .PNG por un poquito más de peso nos ofrece 24 bits de color, transparencia e incluso un poquito de compresión (sin pasarnos) por lo que el peso tampoco es inconveniente. Así que la elección está clara.
Redimensionado de iconos
Esto debería de ser obvio pero los iconos no se deberían de redimensionar por HTML sino que debereis de ajustar la imagen al tamaño que lo queréis mostrar. Personalmente he visto muchos iconos de 128x128px redimensionados a 32x32px con el tradicional width y height en el tag <img> y eso da realmente una muy mala impresión. Por dos razones fundamentales:
Primero: Estás desperdiciando ancho de banda, dado que estás mostrando una imagen a 1/4 de su tamaño.
Segundo: En la actualidad los navegadores renderizan un poco mejor las imágenes y no se nota tanto, pero en muchos casos los iconos o imágenes redimensionados por este método muestran unos molestos dientes de sierra.
En cualquier caso esto está cambiando con la utilización de .SVG o diseños vectoriales que se adaptan a cualquier resolución.
Licencias e iconos gratuitos
Lo primero de todo seamos conscientes del trabajo que nos ahorra el poder descargar y utilizar un juego de iconos, aparte de que puede dar «mucha vida» a un diseño. Existen literalmente miles de diseños para descargar y utilizar gratuitamente.
También existen otros bajo las más variadas licencias, como la extendida Creative Commons y otras. Algunos autores se conforman con citar su trabajo, un enlace en un lugar visible o una mención en el aviso legal. ¿No os parece muy poco por tanto trabajo? Por ejemplo el juego de iconos sociales que utilizo en la web pertenece a Icontexto y estaré encantado de recomendarlo una y otra vez.
Si es una web para un cliente y queréis omitir dicho texto ya sabéis lo que tenéis que hacer: pasar por caja. O explicarle a vuestro cliente que ese trabajo no depende de vosotros y ofrecerle otro juegos de iconos gratuito. Realmente las licencias suelen ser asequibles, así que no seáis tacaños con vuestros diseños.
Como siempre se agradecen comentarios, ampliaciones, críticas y sugerencias. 😉
Autor:
Última actualización:
De acuerdo con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril de 2016, consiento que mis datos sean tratados bajo la responsabilidad de Oscar Gascón Arjol para recibir respuesta a consultas. publicación de comentarios del blog y que las conserve mientras haya un interés mutuo para ello. Me doy por informado que tengo derecho a revocar este consentimiento en cualquier momento y a ejercer los de acceso, rectificación, portabilidad y supresión de mis datos y los de limitación y oposición al tratamiento dirigiéndome por email a me@oscargascon.es. También estoy informado de que puedo reclamar ante la autoridad de control a www.agpd.es.