Los iconos fueron utilizados por primera vez por los antiguos griegos para representar deidades religiosas y figuras sagradas en imágenes dibujadas a mano.
La alfabetización era rara, por lo que la forma más fácil de difundir la enseñanza religiosa era a través de imágenes, no por escrito. Ha habido miles de representaciones icónicas de la Virgen María donde fue representada usando las mismas características reconocibles. Fue un acto deliberado para crear una sensación de familiaridad y reconocimiento para aquellos que eran religiosos.
Las innovaciones tecnológicas actuales han traído íconos al mundo digital donde se utilizan en la interfaz de usuario del sitio web. Los íconos del sitio transmiten un significado relacionado con su contenido y alientan a los usuarios a realizar acciones específicas.
Aunque se trasladaron a otros medios, los íconos del siglo XXI se diseñaron de acuerdo con los principios griegos antiguos: simplicidad, legibilidad y claridad.
¿Por qué son importantes los iconos en un sitio web?
Los iconos son los elementos clave de la composición de un sitio web. Son estéticamente agradables y pueden mejorar el diseño del sitio. Reemplazar páginas con una gran cantidad de texto con símbolos reconocibles facilita que el usuario comprenda el contexto de la página.
A medida que los usuarios de Internet acceden a sitios de todo el mundo, es probable que los visitantes del sitio tengan una comprensión diferente del contexto. Los íconos reconocibles pueden ayudar a los sitios web a superar las barreras del idioma, especialmente si están relacionados con el contenido del sitio.
Cómo diseñar un conjunto de iconos
Los íconos bien diseñados contribuyen a la satisfacción del usuario con el sitio. Ya sea que el ícono solicite a alguien que deje un comentario o vaya a otra página, hace que el sitio sea más fácil de usar.
Por esta razón, es importante comprender cómo crear un paquete de íconos que mejorará aún más la experiencia de la audiencia en su sitio web.
Especifique el propósito al que servirán sus íconos.
Lo primero que debe hacer al diseñar un conjunto de iconos es comprender completamente la tarea en cuestión.
Hágase preguntas relacionadas con el propósito de los íconos en su sitio. Desea saber qué representarán sus íconos o qué harán sus usuarios antes de crearlos.
Por ejemplo, si desea crear un paquete de íconos para un sitio web de servicio de alimentos, puede usar los íconos para atraer a los visitantes a realizar un pedido en línea o probar una de sus recetas. De cualquier manera, su ícono deberá estar especialmente diseñado para su propósito.
Una vez que sepa para qué serán sus íconos, querrá hacer una investigación relacionada con sus íconos.
Siguiendo con el ejemplo gastronómico, debes hacer una búsqueda para ver qué imágenes e íconos se asocian comúnmente con el set que pretendes diseñar. Tal vez haga una búsqueda en profundidad de sitios similares y descubra que el ícono de la cocina se usa comúnmente para representar recetas. Esto significa que querrá diseñar su ícono para que coincida con estos resultados, ya que sus usuarios crearán asociaciones similares.
También es importante en esta etapa decidir si sus íconos serán metafóricos o literales. Por ejemplo, crea un icono que es un tenedor o un icono relacionado metafóricamente con el tenedor.
Por ejemplo, un ícono de corazón generalmente se usa para indicar que le gusta o ama cierto contenido. El significado de este símbolo es comprensible y fácil de entender.
Sin embargo, el significado del ícono de la nube es más metafórico. No verá inmediatamente una foto de la nube y pensará que al hacer clic en el icono lo alentará a descargar archivos de bases de datos digitales en línea.
También es posible que desee esbozar ideas en esta etapa si desarrolla los conceptos durante su investigación.
Elige un estilo.
Una característica clave de los íconos bien diseñados es la consistencia estilística. Una vez que sepa cómo usará sus íconos, debe decidir un estilo consistente para su kit. Esto significa especificar el esquema de color, el grosor de la línea y la forma del borde.
También debe decidir si sus íconos serán delineados o sólidos y planos o tridimensionales. Para ilustrar estos conceptos, veamos un ejemplo con Kem Bardly Sobre conjunto de iconos
Tenga en cuenta que el esquema de colores es consistente en los seis íconos y que tienen la misma forma y tamaño sin importar lo que haya en el sobre. Estos íconos son simples y sólidos.
Este icono establecido por Iconos de fósforopor otro lado, está rayado, redondeado y sin relleno. El propósito de estos íconos es marcar sus funciones de chat y notará la consistencia del diseño: todos comparten el mismo tamaño, grosor de línea, forma de borde y color.
Tenga en cuenta que el paquete de iconos debe responder, lo que significa que debe ser compatible con cualquier dispositivo que utilicen los visitantes de su sitio. Por ejemplo, así es como el paquete de íconos de Phosphor crece y se reduce para adaptarse a diferentes tamaños de pantalla.
Los íconos diseñados con éxito también son reconocibles por todos los grupos de personas, independientemente de su demografía. Los usuarios visitan su sitio de todo el mundo y, si utiliza imágenes occidentales, no llegará a usuarios que no estén familiarizados con los símbolos occidentales. Puede perder tráfico si algunos usuarios no entienden sus íconos, especialmente si su objetivo es la navegación del sitio.
Aquí hay un ejemplo típico: la mayoría de los sitios web usan una «X» para informar a los usuarios que al hacer clic en el icono «X» se cerrará la página en la que se encuentran. El símbolo requiere poco contexto cultural y la mayoría de los usuarios del sitio web entienden su propósito.
Empieza a crear.
Ahora que ha finalizado su concepto y la guía de estilo de íconos, es hora de darle vida con su software de diseño de UX favorito. Si realizó bocetos en las etapas anteriores, debe usarlos como referencia al desarrollar sus diseños finales.
En línea con Material Design reglas de icononecesitas comenzar con la malla. Esto le ayudará a concentrarse en la forma, el tamaño y la disposición de los objetos con la ayuda de los iconos. Su proceso de diseño será más fácil si todo está correctamente dimensionado.
En esta etapa, creará diseños más detallados para que sus íconos sean lo más reconocibles posible. Por ejemplo, si está diseñando una rosquilla, debe verse como una rosquilla y reconocerse como una rosquilla. El ícono no debe ser solo un círculo con otro círculo dentro. En su lugar, considere agregar una chispa, la etiqueta estándar que identifica una dona.
Sin embargo, tenga en cuenta que demasiados detalles pueden ser confusos. Otra cosa acerca de los íconos bien diseñados es que son transparentes. Desea que su audiencia vea su ícono y reconozca de inmediato qué es. No desea que su proyecto esté demasiado ocupado.
Aquí hay un ejemplo de apariencia material a lo que se refieren como un ícono ocupado y demasiado detallado:
Al contrario de lo que ellos llaman un ícono brillante y simple:
Menos detalles gráficos hacen que sea más fácil de reconocer. El usuario puede ver el icono anterior y pensar en un barco pirata, no en su intención: un barco.
Ser original.
Si sus íconos son parte de la marca reconocible de su sitio web, solo deben verse como sus íconos. Echemos un vistazo a los iconos de Waze y Google Maps.
Waze y Google Maps son de naturaleza similar: ambos brindan orientación a los usuarios. Si bien sus servicios se superponen, sus íconos son exclusivos de su marca y, por lo tanto, reconocibles.
Prueba e implementa tus iconos.
Sus íconos probablemente pasarán por una serie de iteraciones antes de finalizar sus diseños. Sin embargo, después de completar el conjunto de iconos, es imperativo verificar que cumplan con los objetivos previstos.
Consulte al público objetivo de su sitio y obtenga sus comentarios sobre lo que ha creado. Hay una serie de técnicas de prueba de usabilidad que puede usar, pero sus pruebas deben evaluar cuatro elementos clave:
- Capacidad de búsqueda: ¿sus íconos se muestran claramente en su sitio?
- Reconocimiento – ¿Tus usuarios saben cuál es tu icono?
- Comprensibilidad: ¿saben los usuarios lo que hace el icono?
- Atractivo: ¿tus iconos son estéticos? ¿Mejoran los efectos visuales en sus páginas?
Después de probar la usabilidad de los íconos, ¡agréguelos a su sitio web!
Recursos para el diseño de iconos
Hay muchos recursos disponibles para ayudarlo con el proceso de diseño del conjunto de íconos para su sitio web. Puede usar estos recursos para obtener inspiración para otros íconos o descargar paquetes de íconos listos para usar que puede personalizar para su sitio web y las necesidades de su marca.
Material Design es una plataforma de Google de código abierto que proporciona información sobre tipografía, accesibilidad web y otras guías digitales. Puede descargar iconos y personalizarlos según las necesidades de su marca.
Streamline Icons viene con más de 30,000 íconos prediseñados que puedes descargar. Su paquete gratuito de «Íconos esenciales» contiene símbolos de uso común para funciones de correo electrónico y música, y su «Paquete definitivo» de pago incluye íconos de nicho como símbolos de viajes y ecología.
3. Núcleo
Nucleo le permite seleccionar, personalizar y descargar íconos en su aplicación. El precio varía según la cantidad de usuarios en su cuenta.
4. animaciones
Animaticons ofrece una descarga de íconos animados que pueden brindarle a su sitio web una experiencia de usuario única. Puede elegir entre cinco paquetes de íconos diferentes, el precio varía desde el gratuito: $ 5.
5. Recursos de diseño gratuitos
Free Design Resources ofrece varios paquetes de íconos para descargar y usar en el sitio, como los íconos de la barra de pestañas de iOS. Algunos kits son gratuitos, otros son de pago y los iconos se pueden filtrar según su compatibilidad con tu software de diseño favorito, como Illustrator, Figma o Sketch.
Los iconos son elementos esenciales de su sitio web.
En última instancia, los íconos bien diseñados son esenciales para crear una interfaz de usuario perfecta.
Desea que los visitantes de su sitio puedan disfrutar del tiempo que pasan en su sitio y realizar la acción que desean, ya sea comprar un producto o suscribirse a un boletín informativo.
Los íconos pueden ayudar a guiar a los usuarios a través de diferentes procesos, eliminando la necesidad de una gran cantidad de texto explicativo. Las imágenes reconocibles también facilitan que los usuarios de todo el mundo interactúen con su contenido.
Si se toma el tiempo de entender para qué serán los íconos en su sitio y los diseña con consistencia de estilo, sus visitantes estarán encantados, se divertirán tomando acción en su sitio y querrán regresar a él.
