Lo hemos dicho antes y lo diremos nuevamente: para crear un sitio web hermoso, no tiene que ser un codificador experto o un diseñador gráfico experto. Hay muchas herramientas y recursos disponibles en línea para ayudarlo a crear un sitio que dejará a sus amigos, familiares y clientes pensando que contrató a un profesional.
Y aquí hay un recurso más que ayudará a que su sitio web pase de bueno a excelente: íconos. Los iconos pueden agregar un gran valor a su diseño general. En esta publicación, explicaré cómo encontrar y agregar fácilmente íconos a su sitio web.
¿Por qué los iconos del sitio web son importantes para su diseño?
Una palabra: comunicación. Los íconos ayudan a comunicar los mensajes principales de su sitio atrayendo la atención del visitante sobre el contenido más importante. Son como letreros de las calles que guían a los visitantes a donde deben ir.
Un simple icono de un teléfono puede hacer que sea más rápido y fácil para un cliente encontrar el número para llamar a su empresa. El icono de un mapa puede ayudar a alguien a encontrar rápidamente dónde se encuentra su tienda. Y el ícono de un carrito de compras hará que los clientes paguen y realicen una compra aún más rápido.
Los iconos también son beneficiosos para su sitio web porque:
- Son fáciles de reconocer. Si un nuevo visitante llega a su sitio, los íconos les permitirán escanear y absorber rápidamente el contenido.
- Son universalmente entendidos. Es fácil crear un sitio web multilingüe, pero los íconos también son una excelente manera de comunicar los mensajes principales de su sitio mediante el uso de imágenes que se entienden independientemente del idioma.
Sin iconos, esta parte del sitio web puede parecer un poco pesada.
En el ejemplo anterior, puede ver cómo algunos íconos simples mejoran todo el aspecto y los mensajes de su sitio.
¿Cómo eliges los íconos correctos del sitio web?
En primer lugar, no intentes ser demasiado creativo cuando selecciones iconos para tu sitio. Si está buscando un icono para representar «buscar», use el icono de lupa. Si está buscando un ícono para dirigir a las personas a su página de inicio, use el ícono de una casa. Quédese con los íconos comprobados que son de uso común, en lugar de crear los suyos propios.
No todos los contenidos de su sitio tendrán un ícono obvio que coincida. Elija una imagen que sea la más cercana al significado del contenido que representa. También es una buena práctica acompañar un ícono con texto si puede haber alguna ambigüedad. Lo más importante que debe recordar acerca de los iconos es que están destinados a complementar su contenido, no reemplazarlo.
Otra cosa a tener en cuenta al elegir un icono es la relevancia. Lamentablemente, una máquina de escribir, un tocadiscos o un casete de cinta pueden ser representaciones anticuadas para algunos de sus lectores más jóvenes.
Si no está seguro de si su icono es una representación precisa de su contenido, ejecute una prueba de usabilidad. Esto le dirá si las personas están entendiendo sus señales correctamente.
Este sitio de Jimdo utiliza con éxito iconos para complementar el texto. También hace que una sección del sitio que normalmente tenga mucho texto sea más atractiva visualmente.
Consejos para usar los iconos correctamente
Hay cuatro factores clave para recordar cuando se usan íconos:
Talla: Tendrás que jugar Ricitos de oro mientras configuras el tamaño de tus íconos. Asegúrese de que los íconos no sean tan pequeños que sean difíciles de ver, pero no tan grandes como para dominar todo lo demás.
Colocación: El uso de columnas es una forma organizada y poderosa de organizar iconos con texto. Dependiendo del diseño de su sitio, encontrará que los iconos pueden verse mejor a la izquierda del texto, encima del texto o debajo del texto. Cualquiera que sea su decisión, coloque todos sus iconos en la misma ubicación en relación con el texto.
Coloque todos sus iconos en la misma posición en relación con el texto. En el ejemplo anterior, la ubicación inconsistente hace que sea más difícil de leer.
Color: Intenta mantenerte en un color para mantener un aspecto fuerte y audaz. Un buen lugar para comenzar es usar un color que esté en su logotipo u otra marca. Además, tenga en cuenta que el color puede ser una herramienta muy poderosa y mejorar un llamado a la acción. Siga esta guía sobre la psicología del color para elegir el mejor color para sus iconos.
Consistencia: Elija iconos que tengan un aspecto similar. Eche un vistazo a cómo mezclar el estilo de los iconos puede interferir con el agradable efecto de diseño.
Es mejor usar iconos que tengan un estilo y color consistentes.
Dónde encontrar iconos de sitios web gratuitos
Hay toneladas de bibliotecas de iconos, muchas de las cuales le permiten usar iconos bien diseñados de forma gratuita o con atribución. He enumerado algunos favoritos a continuación.
Nota: Muchos de estos sitios le permiten descargar el icono en muchas versiones de archivo diferentes. Para obtener mejores resultados y mantener tiempos de carga rápidos para su sitio web, recomendamos PNG.
Iconmonstr
Iconmonstr tiene cerca de 3.000 iconos de sitios web para elegir.
Iconmonstr tiene cerca de 3.000 iconos para elegir para su sitio web.
¿Qué tiene de bueno?
- Es gratis.
- Puede personalizar el tamaño y el color del icono.
- Puede buscar iconos por categoría.
¿Qué no tiene de bueno?
- No puede guardar el tamaño y el color personalizados. Si crea un ícono y ajusta el tamaño y el color, asegúrese de anotar el tamaño y el código de color HTML que utilizó para aplicarlos a futuros íconos.
Flaticon.com
Flaticon.com tiene un enorme mercado de iconos de sitios web gratuitos.
Flaticon.com tiene un enorme mercado de iconos de sitios web gratuitos.
¿Qué tiene de bueno?
- Puede buscar iconos por categoría.
- En el sitio, puede guardar los iconos en «Mis iconos». Esto es útil durante el proceso de selección y hace que sea fácil regresar y encontrar iconos que le gusten o que ya haya usado en su sitio.
- Puede descargar iconos por tamaño.
¿Qué no tiene de bueno?
- Flaticon.com es gratis pero hay una advertencia; debes atribuir al autor. Si desea que su sitio esté libre de atributos, debe comprar un paquete mensual.
- Todos los íconos son negros. Para cambiar el color, deberá editar el icono usted mismo usando PhotoShop u otro programa de diseño.
Flaticons.net
Flaticons.net es otra gran fuente para encontrar y personalizar íconos.
Flaticons.net es un gran recurso que le permite personalizar el tamaño y el color de los iconos.
¿Qué tiene de bueno?
- Es gratis.
- Puede personalizar el tamaño y el color del icono.
- Puede crear un icono de dos tonos personalizando el fondo y los colores de los iconos.
- Puede buscar un icono o navegar por categoría.
¿Qué no tiene de bueno?
- Al igual que iconmonstr, no puede guardar el tamaño y el color personalizados.
Nota: Puede duplicar un color exactamente al encontrar su «código hexadecimal»; este es un valor numérico que identifica un color y se asegura de obtener una coincidencia perfecta. Para encontrar un código hexadecimal, use un complemento como ColorZilla o EyeDropper. Estas herramientas pueden combinar los colores en cualquier sitio web, incluido el suyo.
Otros recursos
¿Buscas algo un poco más único? Intente buscar «iconos vectoriales gratuitos» en sitios como freepik.com o Behance, donde muchos artistas comparten conjuntos de iconos gratuitos. («Vector» significa que obtendrá el ícono en un formato de alta calidad que se puede ampliar o reducir fácilmente. Es el estándar para el diseño web).
Si desea iconos que se ajusten a su marca, siempre puede recurrir a 99designs, donde puede obtener iconos personalizados para ajustarse al aspecto exacto que está buscando.
Cómo agregar un ícono a su sitio web Jimdo
Agregar un ícono es como agregar una foto a un sitio de Jimdo: use un elemento Foto. Agregue un elemento de Foto donde desee que esté el ícono, luego cargue el archivo .PNG del ícono. Puede cambiar el tamaño y ajustar la posición del icono en la configuración a continuación. Si desea que el ícono se vincule a otra página dentro o fuera de su sitio, haga clic en el ícono de vínculo y seleccione Enlace interno o Enlace externo.
Puede agregar fácilmente un icono a su sitio web de Jimdo utilizando el elemento Foto.
Conclusión: use íconos para mejorar el diseño y la legibilidad de su sitio
El experto en SEO Neil Patel sugiere que uno de los factores más importantes para mantener a los visitantes en su sitio es la legibilidad. Los iconos son una forma simple pero efectiva de hacer que su sitio web sea más legible. Solo recuerde elegir un ícono que comunique claramente y complemente el texto y siga los cuatro factores principales: tamaño, color, ubicación y consistencia.