El uso creciente de dispositivos móviles para la navegación en Internet ha generado exigencias especiales a la de hora de programar y diseñar una página web, entre ellas, la necesidad de optimizar el contenido para reducir los tiempos de carga y, como consecuencia de la demanda, la navegación ha de ser mucho más sencilla e intuitiva. Como consecuencia, las tendencias apuntan cada vez más hacia un diseño minimalista, el llamado flat design (diseño plano). Basado en el clásico “menos es más”, este tipo de diseño se concentra en la funcionalidad de una página web y le resta importancia a la carga decorativa innecesaria, especialmente para controles y elementos funcionales de la web (p. ej. utilizar relleno en un editor de texto o usar un mezclador para controlar el sonido). Así, en vez de usar gráficos complicados, se utilizan pictogramas simples.
Estos iconos bidimensionales se caracterizan por el hecho de que representan la versión más reducida de una función esencial y de que pueden ser incorporados en forma de fuentes web en el código fuente de una web, así como en las interfaces de usuario. Con esto, el diseño plano le da la espalda al esqueumorfismo (skeuomorfism en inglés), un estilo de representación detallada que tiene como fin imitar objetos físicos para ayudarle a los usuarios a interactuar fácilmente con los controles digitales. Un ejemplo clásico de diseño plano consecuente es la interfaz de usuario optimizada para dispositivos móviles de Microsoft Windows 8:
Los iconos son una parte fundamental de toda página web: desde la lupa que aparece dentro del recuadro de búsqueda de un blog o el carrito de la compra en la parte superior derecha de una tienda online hasta el sobre junto a una dirección de correo electrónico. La función principal de los iconos es orientar a los usuarios e indicar funciones de algunos elementos y para completar procesos sin necesidad de utilizar palabras. Cada vez es menos común que los iconos sean integrados como mapas de bits o sprites CSS. Ahora, los desarrolladores web utilizan los conocidos icon fonts, es decir, fuentes que no están compuestas por letras, sino por iconos vectoriales.
A diferencia de las representaciones gráficas complejas compuestas por píxeles en un mapa de bits, los iconos vectoriales son escalables, no pierden su calidad y sus archivos son más pequeños que los de los iconos en mapa de bits. Además, las fuentes de iconos se pueden configurar individualmente a través de CSS (Cascading Style Sheets). Gracias a su carácter escalable, los iconos vectoriales son visualizados perfectamente y con nitidez en pantallas de gran tamaño y resolución, a diferencia de los gráficos en mapa de bits en un solo color (CSS3 permite degradados). Para utilizar icon fonts es necesario integrar la fuente completa, incluso cuando solo se utiliza un icono. En Internet se encuentran numerosos proveedores que ofrecen iconos vectoriales gratis, aunque también es posible crear fuentes de iconos personalizadas.
Con la gran oferta de iconos vectoriales gratis no es necesario invertir mucho para utilizar icon fonts en tu web. En Internet existen cientos de librerías con una amplia gama de soluciones de código abierto que ofrecen una impresionante cantidad de iconos vectoriales. A continuación, te presentamos los proveedores más populares
Por lo general, un desarrollador web no necesita utilizar todos los pictogramas de una fuente de iconos. En muchos casos, es posible combinar iconos de diferentes páginas web, por ejemplo, con la ayuda de generadores de fuentes web como Fontello, fontastic.me o IcoMoon App. Con la creación de una icon font propia solo se incluirán en la web aquellos iconos que realmente sean visibles, lo que tendrá un impacto positivo en la reducción de los tiempos de carga y optimizará la velocidad de navegación de una página web.
Generalmente, las icon fonts se definen con la ayuda de una clase CSS en el código fuente HTML. Para ello, es necesario incluir la respectiva fuente de iconos en la cabecera del documento HTML. Algunos proveedores han preparado incluso un archivo CSS estándar para facilitar tal labor. Siempre y cuando la fuente sea compatible, también es posible integrarla usando Bootstrap, el framework en CSS. Para profundizar en el proceso de integración de una fuente de iconos como clase en CSS en HTML, visita el artículo con el ejemplo de Font Awesome.
Las fuentes de iconos ofrecen grandes posibilidades de configuración, debido a que se cargan en su propia hoja de estilo (Stylesheet) y se recuperan mediante clases CSS predefinidas. A diferencia de los archivos de imagen basados en píxeles, la configuración de los pictogramas vectoriales puede ser definida e integrada directamente en el código CSS. Esto les permite a los desarrolladores web personalizar características como el tamaño, el color o la opacidad de los iconos dependiendo del diseño de la página web. Además, también es posible diseñar iconos con texturas o efectos de sombra.
En Internet se encuentran gran cantidad de textos con diferentes tipos de letra. La expansión del diseño web responsivo también influye en la tipografía web, ya que la representación de la letra debería ajustarse siempre a la pantalla del dispositivo que se usa para asegurar la legibilidad de los contenidos. Una tipografía capaz de responder a estos ajustes debe ser flexible y usar las fuentes que...
A menudo, se subestima a la tipografía web como parte fundamental del diseño responsivo de páginas web, a pesar de que la creación de fuentes adaptables no es ninguna ciencia inaccesible. ¿Cómo se aplican en la práctica? Y ¿qué fuentes web son las mejores para un diseño web responsivo? Te mostramos los aspectos técnicos fundamentales para la implementación de tipografía con CSS en una web...
La gran oferta de fuentes y familias tipográficas en Internet es cada vez mayor, incluyendo aquellas de código abierto que pueden ser descargadas de forma gratuita. La mayoría de estas fuentes web son adaptables, lo que las hace perfectas para su implementación en páginas web responsivas, es decir, aquellas que adaptan su visualización a diferentes dispositivos. Conoce algunas de las plataformas...
En general, los iconos se integran en HTML por medio de clases CSS y este principio puede visualizarse en una de las fuentes de icon fonts más utilizadas, es decir, Font Awesome. Esta contiene más de 600 pictogramas vectoriales y está concebida como una fuente de código abierto que llama la atención por su manejo sencillo y por las actualizaciones regulares. El pack de instalación contiene un...
¿Qué es una imagen vectorial? Este formato de imagen te permite cambiar el tamaño de un gráfico manteniendo su calidad. Esto es de suma importancia para los logotipos, que deben verse bien en una amplia gama de medios, desde una carta hasta una gran valla publicitaria. Sigue leyendo para obtener más información sobre qué son las imágenes vectoriales, cuándo se utilizan y qué programas puedes...
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
