Todo lo que necesitas saber sobre el diseño de iconos

Los íconos son pequeños pero poderosos, y es por eso que es importante que piense cuidadosamente en el diseño de íconos. Los diseñadores de todo el mundo serán testigos de la cantidad de creatividad y esfuerzo que implica crear un buen ícono. Esto se debe a que tiene que ser expresivo pero también simple al mismo tiempo.

Un fondo de iconos

Un diseño de icono es en realidad solo una pequeña imagen que representará un objeto o un programa. Son imágenes realmente simples que comunican un mensaje poderoso. Los iconos son muy fáciles de recordar por lo general, y también resultan ser una característica principal en casi todas las interfaces gráficas.

Dato curioso: El origen de la palabra icono proviene de la palabra griega 'eikona' que significa imagen. Los íconos digitales comenzaron a aparecer cuando aparecieron los primeros sistemas operativos GUI como Macintosh y Microsoft.

¿Cuáles son los diferentes tipos de iconos?

Hay tres tipos principales de íconos que debe conocer. Aquí hay una idea de cada uno de ellos y el tipo de impacto que aportan a la experiencia del usuario.

Iconos universales

Estos son íconos universalmente reconocidos. Por ejemplo, los íconos de búsqueda, impresión, inicio o carrito de compras son íconos de este tipo. Pero solo hay un pequeño problema. Los iconos universales son bastante raros. Cuando decimos raro, queremos decir que, aparte de los ejemplos que se dan aquí, la mayoría de los íconos son ambiguos y pueden diferir en significado según la interfaz.

Iconos con diferentes significados

Tal como sugiere el nombre, estos íconos tienen múltiples significados que podrían hacerlos conflictivos o contradictorios. Por ejemplo, los íconos que son un corazón y una estrella están en conflicto. La funcionalidad de estos dos íconos cambiará de una aplicación a otra y, en ocasiones, también pueden competir entre sí. Por eso, estos íconos se vuelven bastante difíciles de interpretar con precisión. Incluso en una aplicación, estos símbolos pueden volverse confusos cuando el usuario hace clic en ellos con la esperanza de obtener un resultado específico y, en cambio, obtiene algo más.

Íconos únicos

¿Cómo puedes describir un objeto único o una acción utilizando un icono? Usando un diseño de icono único. Pero es importante tener en cuenta que hay muchos ejemplos en los que esto ha fallado. Por ejemplo, el significado se perdió cuando Apple decidió representar su centro de juegos a través de un montón de círculos de colores. ¿Qué significan estos círculos y cómo se relacionan con el centro de juegos?

¿Qué formatos de iconos puedes usar?

Hay varios tipos de formatos de íconos que debe conocer cuando solicita un diseño de ícono.

• SVG: estos son gráficos vectoriales escalables y proporcionan el formato base perfecto. Debido a que es escalable, esencialmente significa que puede cambiar el tamaño del icono sin perder calidad.
• PNG: el formato gráfico de red portátil es la opción a seguir si desea una compatibilidad completa. Este es un formato de trama, lo que significa que se basa en píxeles y no se puede mejorar sin afectar la calidad. PNG funcionará en Word, PowerPoint y correos electrónicos. Se pueden agregar encima de cualquier fondo de color sin editar.
• ICO: el formato de ícono de Microsoft Windows es excelente si desea usar su ícono para cualquier aplicación de Windows o incluso como un favicon para su propio sitio web.
• ICNS: este formato se utiliza para fines muy específicos. Este es un formato específico de Apple que se puede usar con documentos y aplicaciones de Mac OS X.

Consejo de Kimp: mantenga el diseño de su ícono lo más simple posible. Trate de usar elementos del mundo real en su diseño que representen claramente su significado previsto. Por ejemplo, podría usar un gráfico de barras para indicar finanzas. Podrías usar una bolsa de trabajo para hablar en serio. Para ayudar a su diseñador a encontrar los íconos correctos, bríndeles todo el contexto que pueda. Hágales saber exactamente cómo se utilizarán sus iconos.

¿Qué hace que un icono sea eficaz o ineficaz?

Como ahora tiene una idea sobre los formatos de los íconos y los tipos de íconos, también veamos qué hace que un ícono sea efectivo o ineficaz. De esta manera, cuando trabaje con su diseñador, puede buscar estas propiedades.

Claridad

El diseño de un ícono debe comunicar un mensaje inmediatamente cuando lo vea. Si la metáfora que usa en su ícono es desconocida u oscura, la gente estará confundida acerca de lo que significa. Por ejemplo, el ícono utilizado para Inicio es conocido por todos, eso es claridad. Ahora imagina lo que sucedería si el ícono de Inicio se representara como un círculo con un punto en el medio. Eso lo haría confuso, ¿verdad? Los iconos confusos son ineficaces.

Legibilidad

Una vez que haya ordenado el factor de claridad, ahora debe asegurarse de que el ícono sea fácilmente legible. Si observa el ejemplo a continuación, el primer ícono es difícil de entender porque los detalles son demasiado finos, lo que lo hace borroso. Un buen ejemplo de iconos pequeños bien hechos serían los de los mapas de Google, donde la legibilidad es excelente. Usar trazos más delgados, no dejar suficiente espacio y agregar demasiados detalles a los íconos pequeños los hará ineficaces porque perderán legibilidad.

Alineación del icono

El diseño de un ícono debe tener un sentido de equilibrio y esto se puede lograr alineando todos los elementos ópticamente. Esto significa que el diseño debe alinearse de acuerdo con la forma en que el espectador percibirá los elementos.

Brevedad de un icono

La brevedad del ícono se determinará en función de la cantidad de detalles que agregue. Mantén tus íconos tan simples como puedas y evita agregar líneas y detalles innecesarios que lo harán ilegible y borroso.

Consistencia

Si está realizando el diseño de íconos para una aplicación o una interfaz en particular, asegúrese de que todos sus íconos mantengan la misma consistencia. Si algunos íconos se ven más detallados o más nítidos que otros, pierde consistencia. Esto hará que la interfaz sufra en términos de experiencia de usuario.

personalidad del diseño

Una vez más, con la interfaz o aplicación para la que estás diseñando, debes asegurarte de que cada ícono represente la personalidad de la marca. Puede pasar de profesional a divertido y preppy según el estilo de marca y la voz que tenga. Esta es una parte muy importante de la información que debe proporcionar a su diseñador cuando diseñe íconos.

Su icono debe ser fácil de usar

Incluso después de que el dibujo se haya hecho en forma de 't', el ícono está lejos de estar completo. El ícono que hizo su diseñador necesitará pruebas y preparación antes de que pueda permitir que los clientes lo usen. Esta prueba y preparación garantizará que el ícono sea fácil de usar. Los signos de un ícono fácil de usar son que es:

• Bien organizado: aquí debe asegurarse de que su diseñador haya colocado archivos maestros para el diseño de manera bien organizada para que pueda consultarlos más adelante si es necesario. Puede solicitar que se coloquen en orden alfabético o en algún otro orden para que se puedan encontrar fácilmente cuando los necesite.
• Bien documentado: pídale a su diseñador que le comunique los principios clave de la familia de íconos y que también diseñe las reglas técnicas. También puede hacer pública esta documentación una vez que esté completa, para que las personas puedan consultarla si así lo desean.
• Probado: asegúrese de revisar esto con el diseñador. Haz que coloquen todos los íconos diseñados uno al lado del otro, lo que te ayudará a ver su consistencia y la relevancia que tienen.
• Compatible con herramientas personalizadas, como un administrador de iconos. Si puede proporcionar herramientas personalizadas que ayuden al uso de los íconos, debe hacerlos accesibles.

¿Qué debe incluir su informe para el diseño de iconos?

Considere todos los casos de uso

Sepa dónde se utilizarán sus iconos y qué tendrían que representar. También deberá diferenciar entre qué íconos necesitarán una metáfora y qué íconos se realizarán en función de objetos de la vida real. Una vez que tenga claros estos factores, puede comunicárselo a su diseñador a través del resumen.

Lluvia de ideas sobre conceptos y metáforas

Primero, haga una lista de todas las representaciones que se pueden usar para describir el ícono lo mejor posible. Los recursos como conjuntos de palabras y diccionarios son útiles para encontrar cosas como palabras clave, palabras similares y definiciones del concepto que desea transmitir a través de los íconos. Luego puede comenzar a simplificar estas ideas para que el ícono (que debe ser abstracto y simple) envíe el mensaje de manera clara y efectiva. Trate de realizar la mayor parte posible de la investigación y la lluvia de ideas por su cuenta, y luego obtenga el apoyo de su diseñador para el resto.

Encuentre referencias útiles

Invierte siempre en investigación para encontrar referencias de calidad. Lo más probable es que en algún lugar, alguien ya haya hecho una versión fantástica del ícono que desea diseñar. Si puede encontrar estos, también puede encontrar su inspiración. Cuando proporcione estas referencias a su diseñador, le resultará más fácil comprender su perspectiva.

Elige el estilo del icono.

Algunos de los estilos que son populares son glifo, plano, delineado, material y dibujado a mano. Cuando finalice con el estilo, deberá pensar en dos factores importantes. Uno sería la interfaz de usuario en la que se mostrarán y su estilo. El segundo serían los requisitos para esa interfaz, como si es Material o iOS.

Discuta en detalle con su diseñador

Asegúrese de que su diseñador mantenga la coherencia en todos los íconos que está diseñando. Para aclarar las cosas, pídales que hagan un boceto completo de todos los íconos que se van a hacer.

Después de aprobar los bocetos conceptuales de sus íconos, debe solicitar versiones vectorizadas. Luego, finalmente, obtenga algunas maquetas de sus íconos para que pueda ver si se adaptan bien a sus diversos casos de uso.

Ahora hemos repasado lo que debe incluir en su informe para que sus íconos se vean nítidos. Entonces, a continuación, repasemos las cosas principales que deben incorporarse en los íconos que diseñe, para que su resultado final sea perfecto. Asegúrese de discutir esto con su diseñador.

Lista de verificación para crear nuevos íconos

Su diseñador seguirá los pasos que se describen a continuación para crear el diseño de su icono.

Evita los iconos borrosos

Para que los íconos se vean nítidos, nítidos y extendidos, deben colocarse en píxeles. Esto eliminará cualquier hipo borroso.

Consultar medidas y peso

Le recomendamos que utilice la prueba de estrabismo para asegurarse de que todos sus iconos tengan el mismo peso y dimensiones. Básicamente, solo entrecierra los ojos y observa cómo aparecen tus íconos entre sí. Si se necesitan ajustes, asegúrese de obtener la ayuda de su diseñador. Un consejo aquí es usar un círculo perfecto y un cuadrado para asegurarse de que el peso sea el mismo en todo el conjunto de iconos.

Usando formas geométricas

Haga que su diseñador use formas geométricas que sean simples y firmes para dibujar sus íconos. Esto hará que los íconos sean claros y se vean estéticamente atractivos.

Evite los detalles excesivos

Elimine cualquier detalle que haga que sus íconos se vean recargados y pesados ​​cuando los revise con el diseñador. En cambio, mantenga solo los detalles básicos y simples, que harán que los íconos se vean limpios y claros. Los íconos son pequeños y pueden convertirse en una mancha con demasiados detalles.

mantener el espacio

Todos los detalles finos dentro de un icono necesitan un respiro. Si todos se pegan demasiado juntos, enturbiarán todo el diseño. Cuando mire los íconos, vea si todos tienen suficiente espacio para que los detalles sean claros y si su significado es claro para usted de inmediato.

Contraste en iconos

Asegúrese de que haya suficiente contraste de color en los iconos. El balance de blanco y negro debe ser perfecto. Si no hay suficiente contraste, los íconos no se verán claros.

Mira la unidad visual

Otro factor que deberías considerar es la unidad visual de un ícono. Lo que esto significa básicamente es que el peso de las líneas, los tamaños de las esquinas, la paleta de colores que se utiliza, el nivel de detalles incluidos y los elementos del diseño se mantienen constantes a través del conjunto completo de íconos. ¡Asegúrese de conversar sobre esto con su diseñador, ya que es mucho para seguir!

El diseño de íconos es divertido, pero difícil de hacer bien

Le hemos llevado a través de una gran cantidad de información para que pueda comenzar con el diseño de iconos. Es mucho para asimilar y familiarizarse, así que asegúrese de trabajar con un buen diseñador para que sus íconos sean perfectos. Y proporcióneles todos los detalles que necesitarán para comprender cómo se utilizarán sus íconos y quién los verá. Y muy pronto tendrá un gran conjunto de iconos que son fuertes, claros y fáciles de usar diseñados.