Logotipos e iconos: cómo crearlos y utilizarlos
Muchos editores de software no distinguen realmente entre su logotipo y su icono. Sin embargo, estos dos diseños tienen finalidades muy distintas y obedecen a reglas de diseño muy diferentes. Los iconos, en el sentido de representar un concepto informático, sólo se han utilizado realmente de forma sistemática desde 2005-2010, cuando su papel era relativamente anecdótico. En este tutorial de diseño gráfico, veremos cómo se puede aprovechar la diferencia entre estas dos representaciones gráficas para crear herramientas de comunicación pertinentes.
El logotipo
El logotipo está diseñado para representar a una empresa u organización. Transmite la imagen pública de la empresa a través de sus colores, formas y, a veces, su línea de base, que aclara el mensaje. Las empresas controlan muy de cerca este mensaje, ya que repercute en su propia actividad. Por tanto, el logotipo tiene una importante dimensión estratégica. Por último, la mayoría de los diseños gráficos se derivan del logotipo: carta gráfica, icono, plantillas de documentos o diseño de sitios web corporativos, por ejemplo.
Restricciones técnicas en el diseño de logotipos
El diseño de un logotipo debe seguir ciertas reglas para garantizar que sea atemporal, versátil, sencillo y profesional. He aquí las principales reglas que hay que seguir:
Dimensiones: un logotipo no tiene dimensiones estándar. Se suelen utilizar desde un mínimo de 128px hasta tamaños muy grandes (impresos en kakemonos, por ejemplo).
- Forma: los logotipos son horizontales el 80% de las veces, pero no hay una forma estándar. Pueden ser verticales o cuadrados. El formato horizontal tiene ventajas gráficas y facilita la colocación de una línea de base.
- Bordes: hay que evitar los bordes para no alterar el mensaje.
- Línea de base: tiene la opción de colocar un mensaje con un máximo de 5 palabras para que cualquiera pueda entender inmediatamente a qué se dedica.
- Compresión: la calidad del logotipo prima sobre su compresión. Por tanto, el logotipo original debe vectorizarse con Photoshop o Illustrator, por ejemplo, y luego exportarse en formato JPG o PNG de alta calidad.
- Fondos: el logotipo debe publicarse sobre fondos opacos para garantizar la integridad del mensaje. La mayoría de las veces el fondo es blanco.
- Colores: un logotipo atemporal debe construirse en torno a un máximo de 3 colores armoniosamente elegidos.
- Fuente: si debe utilizar una fuente, debe estar libre de derechos de autor. Utilice los siguientes sitios web para elegir un tipo de letra de calidad que cumpla sus requisitos legales:
- Font Squirrel : fuentes gratuitas para uso comercial
- DaFont: la referencia en fuentes gratuitas para uso personal y comercial
- 1001 Free Fonts : fuentes gratuitas
- FontPark: fuentes gratuitas
Cuándo utilizar un logotipo
Los logotipos se utilizan principalmente en las siguientes situaciones:
- Sitio web corporativo
- Encabezados y pies de página de documentos oficiales
- Firmas de correo electrónico
- Todos los materiales impresos o PDF
Iconos
Un icono es una representación gráfica de un servicio. La mayoría de las veces se encuentra en un entorno sobre el que no se tiene control gráfico. Puede ser una pestaña del navegador cuyo color o tamaño no cambia. También puede ser un mercado, un comparador, un canal de YouTube o un teléfono móvil. En todos los casos, es el diseñador del entorno quien decide la experiencia del usuario. Esta experiencia se maximiza cuando los iconos de todas las soluciones informáticas (SaaS, servicios, aplicaciones) están normalizados, de ahí la importancia de los iconos.
El uso masivo de iconos corresponde a los esfuerzos realizados por los diseñadores de sistemas operativos y mercados para ofrecer un entorno unificado. La hipercompetencia entre soluciones también incita a los editores a simplificar al extremo sus códigos de comunicación para ser más llamativos.
El icono también permite dejar de lado el mensaje que transmite la marca. Su presencia en un visual indica que se trata de usted, al tiempo que deja espacio para un mensaje más específico. Por eso puede utilizarse en un banner publicitario para dar prioridad a los mensajes.
Restricciones técnicas
Los iconos se diseñan con mayores restricciones que los logotipos:
- Tamaño: entre 16px y 256px: 256x256, 128x128, 64x64, 32x32, 24,24,16x16
- Forma: el cuadrado es estándar
- Bordes: los bordes son una opción. Sin embargo, es preferible dejar que el entorno (navegador, marketplace, etc.) decida cómo se delimita el icono.
- Línea de base: ninguna. Un icono no contiene texto.
- Compresión: el tamaño debe reducirse al máximo. Recuerde utilizar la función Archivo > Guardar para Web de Photoshop, que genera archivos de buena calidad con un alto nivel de compresión. Si no tienes Photoshop, utiliza un optimizador de imágenes como ImageOptim (MAC) o RIOT (PC).
- Fondo: deja el fondo transparente. Puede optar por el formato PNG, que ofrece degradados perfectos, o por el formato GIF, que tiene menos colores pero produce archivos muy ligeros.
- Colores: los iconos pueden ser más imaginativos que los logotipos, pero la sencillez es esencial.
Casos de uso de los iconos
- El Favicon. Es el icono disponible en la pestaña del navegador. Hay varios sitios donde se puede diseñar uno:
- Logaster
- FaviconGenerator
- Marketplace, comparador. En este caso, es necesario un icono grande para optimizar la calidad visual: 256px x 256px, por ejemplo.
- Teléfono móvil: icono de aplicación
- Escritorio del ordenador: lanzador de aplicaciones MAC, Windows o Linux
Aquí tienes otras herramientas relacionadas con los iconos que pueden resultarte útiles:
- Iconfinder: buscador de iconos gratuito y de pago
- IM Creator : creación de iconos
- Fontello: generador de fuentes para iconos.
- Flat Icon: buscador de iconos vectoriales.
- Material Design Icons: 750 glifos gratuitos y de código abierto de Google.
- Font Awesome: caja de herramientas de iconos para fuentes y CSS.
- Glyphsearch: metamotor de iconos.
- MakeAppIcon: genera iconos de aplicaciones de todos los tamaños en un solo clic.
- Endless Icons: colección de iconos planos gratuitos y otros elementos creativos.
- Ico Moon: este generador de iconos contiene más de 4.000 iconos vectoriales.
- The Noun Project: ofrece miles de iconos glifos de diversos artistas.
- Perfect Icons: herramienta de creación de iconos sociales.
- Doodle Set, Flat Set, Vector Line Set : iconos gratuitos .
- Icon Sweets: 60 iconos vectoriales gratuitos para Photoshop.
No dudes en compartir y comentar este artículo si te ha servido de ayuda o si quieres añadir algo más. ¡Feliz creación!
Artículo traducido del francés