{"id":39,"date":"2015-02-10T10:44:38","date_gmt":"2015-02-10T16:44:38","guid":{"rendered":"https:\/\/www.uv.mx\/blogs\/hipermedios\/?p=39"},"modified":"2015-02-10T10:44:38","modified_gmt":"2015-02-10T16:44:38","slug":"fuente-de-iconos-como-herramienta-para-el-diseno-web","status":"publish","type":"post","link":"https:\/\/www.uv.mx\/blogs\/hipermedios\/2015\/02\/10\/fuente-de-iconos-como-herramienta-para-el-diseno-web\/","title":{"rendered":"Fuente de iconos como herramienta para el dise\u00f1o web"},"content":{"rendered":"<p style=\"text-align: left\">Tradicionalmente los iconos han sido considerados una buena manera de mejorar los dise\u00f1os de interfaz de usuario, porque proporcionan una taquigraf\u00eda visual que ayuda a la comprensi\u00f3n de un mensaje de forma clara y r\u00e1pida.\u00a0Sin embargo, actualmente el uso de iconos en sitios web est\u00e1 comenzando a mermar debido a distintas causas, que van desde su impacto en la experiencia de uso hasta las dificultades t\u00e9cnicas que implica mantener un set de iconos.<\/p>\n<p style=\"text-align: left\">Por ejemplo; la cantidad de iconos y las m\u00faltiples variaciones que puede tener en tama\u00f1o y color aumenta de forma considerable el trabajo necesario para mantener un portal. Cambios que pudieran considerarse simples como el color o el tama\u00f1o exige la creaci\u00f3n de nuevo set de iconos.<\/p>\n<p style=\"text-align: left\">El auge de pantallas de alta resoluci\u00f3n, principalmente en dispositivos m\u00f3viles, est\u00e1 exponiendo una desventaja m\u00e1s en el uso de iconos tradicionales y es que a mayor resoluci\u00f3n del dispositivo los iconos pierden su nitidez. Para contrarrestar este punto han surgido alternativas tales \u201ccrear un set de iconos de alta resoluci\u00f3n\u201d, pero esto solo duplica la carga de trabajo y la complejidad al momento de implementar este tipo de soluciones.<\/p>\n<p style=\"text-align: left\">Estudios recientes enfocados a la experiencia de usuario demuestran que el uso excesivo de iconos para la navegaci\u00f3n en un sitio impactan fuertemente la usabilidad de forma negativa, dado que las formas suelen ser dif\u00edciles de recordar y asociar a la acci\u00f3n con la que se esta relacionando.<\/p>\n<p style=\"text-align: left\">Otro escenario que impacta negativamente la experiencia de usuario es utilizar iconos para reemplazar etiquetas que indican una acci\u00f3n, como \u201cexportar\u201d, \u201cpublicar\u201d o \u201cguardar como\u201d o que hacen referencia a conceptos abstractos como \u201cbandeja de entrada\u201d, \u201dcolaboraci\u00f3n\u201d, \u201cactividades\u201d o \u201cforos\u201d.<\/p>\n<div id=\"attachment_46\" style=\"width: 323px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46\" class=\"wp-image-46\" src=\"https:\/\/www.uv.mx\/blogs\/hipermedios\/files\/2015\/02\/ToolbarCompare-11-1-2005.png\" alt=\"ToolbarCompare-11-1-2005\" width=\"313\" height=\"66\" \/><p id=\"caption-attachment-46\" class=\"wp-caption-text\">Las barras de herramientas de Outlook: 97 vs. Outlook 2003.*<\/p><\/div>\n<p style=\"text-align: left\">Un claro ejemplo son las barras de herramientas\u00a0de Outlook 97 que utiliza iconos para representar acciones lo que dificulta la ubicaci\u00f3n e identificaci\u00f3n de las posibles opciones del software.\u00a0Para la versi\u00f3n de Outlook\u00a02003\u00a0se decidi\u00f3 acompa\u00f1ar con etiquetas a los iconos haciendo m\u00e1s placentera la experiencia de usuario.<\/p>\n<p style=\"text-align: left\">Por estos motivos se recomienda reducir la cantidad de iconos al m\u00ednimo necesario y de ser posible siempre acompa\u00f1arlos con una etiqueta y un texto descriptivo.<\/p>\n<p style=\"text-align: left\">Para contrarrestar algunos de los puntos d\u00e9biles del uso de iconograf\u00eda en sitios web ha surgido la creaci\u00f3n y uso de \u201cFuente de iconos\u201d, estos iconos se diferenc\u00edan de los iconos tradicionales en varios aspectos, pero principalmente se puede acotar a lo siguiente:<\/p>\n<ul style=\"text-align: left\">\n<li>Su formato final es un gr\u00e1fico vectorial en lugar de una imagen compuesta de pixeles<\/li>\n<li>Los iconos en formato vectorial se agrupan en fuentes o tipograf\u00edas para su uso regular conocidas como fuente de iconos<\/li>\n<\/ul>\n<p style=\"text-align: left\">Un gr\u00e1fico vectorial es una imagen formado por un conjunto de formas geom\u00e9tricas ubicadas en una posici\u00f3n espec\u00edfica, esto permite escalar la imagen sin perder detalle. En contraste; una imagen tradicional est\u00e1 formada por una matriz de pixeles y una operaci\u00f3n como la reducci\u00f3n tama\u00f1o puede involucrar remover y modificar los p\u00edxeles de la imagen. Este tipo de operaci\u00f3n se considera destructiva porque se pierde calidad en la imagen y una vez realizada no es posible volver al tama\u00f1o original.<\/p>\n<p style=\"text-align: left\">Las fuentes de iconos; como su nombre lo indica, son una fuente compuesta por iconos en formato svg sobre la cual se pueden aplicar las mismas operaciones que sobre cualquier otra fuente, como el cambio de tama\u00f1o,color, rotaci\u00f3n, sombra, etc.<\/p>\n<div id=\"attachment_42\" style=\"width: 815px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-42\" class=\"wp-image-42\" src=\"https:\/\/www.uv.mx\/blogs\/hipermedios\/files\/2015\/02\/iconos-vs-fuente-de-iconos-1024x325.jpg\" alt=\"iconos-vs-fuente-de-iconos\" width=\"805\" height=\"256\" srcset=\"https:\/\/www.uv.mx\/blogs\/hipermedios\/files\/2015\/02\/iconos-vs-fuente-de-iconos-1024x325.jpg 1024w, https:\/\/www.uv.mx\/blogs\/hipermedios\/files\/2015\/02\/iconos-vs-fuente-de-iconos-300x95.jpg 300w, https:\/\/www.uv.mx\/blogs\/hipermedios\/files\/2015\/02\/iconos-vs-fuente-de-iconos.jpg 1659w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><p id=\"caption-attachment-42\" class=\"wp-caption-text\">Ejemplo utilizando imagenes compuestas de pixeles\u00a0vs una\u00a0fuente de iconos.<\/p><\/div>\n<p style=\"text-align: left\">Cuales son las caracter\u00edsticas y ventajas de las fuentes de iconos:<\/p>\n<ul style=\"text-align: left\">\n<ul>\n<li><b>Peso reducido:<\/b>\u00a0Una fuente de iconos ser\u00e1 mucho menor en peso que una serie de im\u00e1genes, especialmente si se est\u00e1n utilizando iconos con una resoluci\u00f3n mayor para satisfacer las necesidades de los usuarios con dispositivos de alta resoluci\u00f3n o \u201cretina\u201d.<\/li>\n<li><b>Tiempo de carga:<\/b> Una vez que se cuenta con la fuente o tipograf\u00eda completa es posible mostrar todos los iconos al mismo tiempo y con sus distintas variaciones en lugar de esperar la descarga de cada uno de ellos.<\/li>\n<li><b>Facilidad para modificar su tama\u00f1o:<\/b>\u00a0Una fuente de iconos se puede ajustar a cualquier tama\u00f1o. En una p\u00e1gina web basta modificar el \u201cfont-size\u201d en el la hoja de estilos. En comparaci\u00f3n un set de iconos tradicional tendr\u00eda que ser modificado de forma manual para cada icono.<\/li>\n<li><b>Flexibilidad:<\/b>\u00a0Efectos de texto pueden ser f\u00e1cilmente aplicados a los iconos, incluyendo colores, sombras y estados.<\/li>\n<\/ul>\n<\/ul>\n<ul style=\"text-align: left\">\n<li><b><b>Extensibilidad: <\/b><\/b>Las fuentes de iconos son m\u00e1s simples de modificar y extender, adem\u00e1s los cambios pueden aplicar en autom\u00e1tico a todos los sitios que est\u00e9 utilizando la fuente siempre y cuando se est\u00e9 referenciando a ella a trav\u00e9s de un url.<span style=\"font-size: 12px\">\u00a0<\/span><\/li>\n<li><b>Compatibilidad:<\/b>\u00a0Las fuentes de iconos son compatibles con todos los navegadores modernos y es posible dar soporte a navegadores antiguos en base a plugins o extensiones.<\/li>\n<\/ul>\n<p style=\"text-align: left\">Para impactar de forma positiva la experiencia de uso, se recomienda crear cada icono cumpliendo los siguientes criterios:<\/p>\n<ul>\n<li style=\"text-align: left\">Debe tener parecido a un objeto real<\/li>\n<li style=\"text-align: left\">Debe ser simple y limpio<\/li>\n<li style=\"text-align: left\">El formato final debe ser una imagen de\u00a0forma cuadrada y contar con un margen o espacio alrededor del icono<\/li>\n<li style=\"text-align: left\">Su forma debe ser legible\u00a0en tama\u00f1o peque\u00f1os, por ejemplo 30 x 30 p\u00edxeles<\/li>\n<li style=\"text-align: left\">En medida de lo posible debe de acompa\u00f1arse de un texto<\/li>\n<\/ul>\n<p>Por \u00faltimo los errores m\u00e1s comunes al momento de generar iconos son los siguientes:<\/p>\n<ul>\n<li>Iconos muy similares para acciones diferentes<\/li>\n<li>Iconos compuestos o demasiado complejos<\/li>\n<li>Iconos con distinto estilo visual<\/li>\n<li>Sombras o efectos de perspectiva<\/li>\n<li>Met\u00e1foras forzadas<\/li>\n<li>Texto en lugar de\u00a0imagenes<\/li>\n<\/ul>\n<p>Siempre hay\u00a0que recordar que generar e implementar una fuente de iconos realza el aspecto y optimiza la carga de nuestro sitio web.<\/p>\n<p>&nbsp;<\/p>\n<p>Fuentes:<\/p>\n<p>http:\/\/www.webdesignerdepot.com\/2013\/04\/how-to-turn-your-icons-into-a-web-font\/<\/p>\n<p>*http:\/\/blogs.msdn.com\/b\/jensenh\/archive\/2005\/11\/01\/487661.aspx<\/p>\n<p>http:\/\/uxmyths.com\/post\/715009009\/myth-icons-enhance-usability<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tradicionalmente los iconos han sido considerados una buena manera de mejorar los dise\u00f1os de interfaz de usuario, porque proporcionan una taquigraf\u00eda visual que ayuda a la comprensi\u00f3n de un mensaje de forma clara y r\u00e1pida.\u00a0Sin embargo, actualmente el uso de iconos en sitios web est\u00e1 comenzando a mermar debido a distintas causas, que van desde [&hellip;]<\/p>\n","protected":false},"author":1338,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-diseno-de-interfaz-grafica"],"_links":{"self":[{"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/users\/1338"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":0,"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uv.mx\/blogs\/hipermedios\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}