Diseño de iconos en 2020: las tendencias clave
Los iconos pueden ser uno de los ejemplos de diseño más importantes y subestimados en su cartera. Aquí hay un vistazo al diseño de iconos con algunos ejemplos inspiradores.
Los elementos de icono se muestran en casi todas partes, pero a veces se producen como una ocurrencia tardía. Ese no debería ser el caso. El gran diseño de iconos puede ser distintivo y agregar delicadeza y estilo a un proyecto.
¡Echemos un vistazo a las novedades y lo que está de moda en el diseño de iconos en 2020!
Explore los elementos de Envato
1. Iconos de línea con formas de color
Los iconos de línea son siempre una opción popular, gracias a un estilo versátil que se ve bien con casi cualquier otro elemento de diseño. La tendencia agrega un poco más de interés visual con un toque de color, a menudo en forma de círculo o cuadrado, detrás del icono de línea.
La forma del color puede llenar una parte del diseño del icono de línea, pero la mayoría de las veces es simplemente flotando en el fondo. Este pequeño interés visual puede unir un conjunto de iconos, enfatizar el color de una marca o simplemente renovar un sitio antiguo de iconos de línea.
La parte difícil del diseño del icono es la ubicación y el tamaño del elemento de forma de color. Si es demasiado grande o demasiado brillante, puede quitarle el ícono. Si la forma es demasiado pequeña, corre el riesgo de que parezca un error.
Si bien no hay un tamaño perfecto, la mayoría de los íconos que usan esta tendencia mantienen la forma del color en aproximadamente un cuarto del tamaño completo del ícono.
2. Formas de iconos abstractos
¿No está seguro de qué icono representa su contenido? Una forma de icono abstracto podría ser la respuesta.
Más diseñadores están creando íconos de estilo abstracto para usar en sitios web. Lo bueno de este estilo, y la tendencia en general, es que los estilos abstractos crean una sensación de fantasía y maravilla que coincide con algunas de las tendencias generales más grandes en el diseño.
La clave para trabajar con formas abstractas es asegurarse de que no está replicando algo por error y que los iconos realmente son abstractos. (No intente crear íconos que sean similares a su logotipo, por ejemplo, podrían parecer errores). Para algo que realmente coincida, use la misma paleta de colores para íconos y materiales de marca.
3. Colores primarios
Las paletas de colores primarios son una opción audaz, brillante y atractiva para elementos de diseño pequeños.
Esta tendencia de diseño de iconos utiliza rojo, azul, verde y amarillo (junto con púrpura y naranja) para crear un conjunto básico de reglas de color. Lo que hace que este estilo funcione es un enfoque en el color para llamar la atención sobre los elementos pequeños en la pantalla. Los colores primarios también se destacarán de todos los brillos "materiales" que han dominado las paletas en los últimos tiempos.
Suaviza el diseño con degradados (o degradados de imitación ombre, como el ejemplo anterior) para evitar que la paleta de colores se vea demasiado elemental. No vaya por la borda cuando trabaje con colores primarios. Pueden ser un toque abrumador. Considere una paleta primaria silenciada o un esquema monocromático.
4. Iconos con iconos de fondo
Algunos íconos de tendencia tienen íconos propios. ¡Seriamente!
Para usos más elaborados de los íconos, no estamos tomando pequeños favicons aquí, los íconos se pueden apilar y superponer para crear más elementos artísticos.
Esta tendencia a menudo usa color y sombreado para diferenciar entre el ícono focal principal y los íconos de fondo. El ícono principal suele ser a todo color o un ícono relleno. Los iconos de fondo son casi siempre estilo de línea y pueden tener paletas de colores claros.
Puede crear este efecto con muchos kits de iconos prefabricados mezclando y combinando iconos de diferentes maneras. Cree profundidad e interés visual con iconos de un tema similar y manténgase solo con un puñado de elementos para evitar que la escena se vuelva demasiado ocupada. No tenga miedo de usar y reutilizar elementos y use los mismos íconos (línea alterna y relleno) en fondos y primeros planos.
5. Iconos bicolores
Otra tendencia de diseño de iconos que se basa en estilos de iconos de línea populares es crear elementos de dos colores.
Los iconos de dos colores se pueden construir sobre su paleta de colores existente o los colores de la marca o combinar casi cualquier otro par de colores. Cuando diseñe usando la tendencia de iconos, busque pares de colores que se destaquen del fondo en el que planea usarlos.
Cuando se trata del diseño, elija un color primario para la mayoría del icono. Use un color secundario para acentuar un elemento del icono. (Piense en usar el color primario para el 70% al 80% del diseño y el color secundario para el resto).
Esto crea un acento en el diseño del icono que ayudará a atraer la atención hacia el elemento de diseño y, con suerte, también sobre el contenido circundante.
6. Icono "Taquigrafía"
Si navega por cualquier tienda de aplicaciones, verá muchas marcas comunes: sobres para aplicaciones de correo, controles para aplicaciones de productividad, bloqueos para aplicaciones de seguridad.
Este icono abreviado proporciona un mensaje visual rápido que les dice a los usuarios qué hace la aplicación. Esta misma taquigrafía se aplica casi universalmente a todo el diseño de iconos. Si bien los diseñadores están experimentando con íconos en su propio estilo, existe una inclinación a usar íconos para un significado específico.
Y esto es algo bueno. Un icono debería ser fácil de ver y comprender de un vistazo. Un icono debe ayudar a los usuarios a saber qué deben hacer y cómo deben interactuar con el diseño. Esta abreviatura de ícono común es una buena evolución de cómo hacerlo.
7. Color brillante
Las opciones de colores brillantes han sido un gran problema en todos los aspectos del diseño. Eso no es diferente con los iconos. Un color brillante es una forma atractiva de atraer la atención hacia el ícono.
El color se usa de diferentes maneras cuando se trata de la tendencia del diseño de iconos:
- Como fondo con un icono de estilo de línea blanco o negro
- Para elementos de íconos a todo color con un aspecto más realista
- Para elementos de iconos con un diseño más plano, degradado o superbrillante
Las opciones de color populares en la familia brillante incluyen amarillos, azules, verdes y morados. Estos colores tienden a estar en el lado positivo y es popular crear una paleta de colores con tres o cinco tonos para un conjunto de iconos.
¿No estás seguro por dónde empezar? La paleta de materiales muestra colores que son una gran parte de la tendencia de diseño del icono de color.
8. Iconos en Logos
Tome nota de cuántos logotipos tienen íconos. Una vez que empieces a pensar en ello, no verás todos los pequeños íconos en el diseño del logotipo será difícil.
Lo bueno de un icono en un logotipo es que funciona con el nombre de la marca, y con algo de tiempo y valor de marca puede ser independiente. Piensa en el ejemplo anterior, Spotify. Aunque el proveedor de música no ha existido tanto tiempo (en el ámbito de las marcas), el círculo con tres líneas es altamente identificable.
El ícono funciona en color y sin él, una tecla de un ícono fuerte, y puede estar solo o con letras. Esta versatilidad facilita ver por qué los iconos son un elemento popular en el diseño de logotipos.
9. círculos
Los círculos son una de las formas más armoniosas. Y cuando se trata de diseño de iconos, son bastante populares. Desde iconos que están contenidos dentro de una esfera hasta círculos dentro de objetos, crear una marca de diseño usando círculos puede establecer la sensación correcta para los usuarios.
(¿Quieres saber más sobre los círculos en diseño? Lo tenemos aquí).
Parte de la influencia del círculo en el diseño de íconos podría relacionarse con algunas de las pautas establecidas por Google con Material Design. Todos esos botones circulares son perfectos para tocar en teléfonos móviles. Y esa misma filosofía se aplica al diseño de iconos. (Solo piense con qué frecuencia un icono es un elemento táctil o cliqueable).
La parte que puede ser un pequeño truco sobre esta tendencia de íconos son los círculos de malla en todos los lugares donde se usan otras formas. Los íconos de las aplicaciones tienden a ser cuadrados; Los perfiles de redes sociales son circulares (y cuadrados).
Al crear un ícono redondo, asegúrese de que el contenido del diseño del ícono sea fácil de entender en tamaños pequeños, ya que debe reducirlo a menudo para que quepa en otros lugares.
10. Diseño de iconos de estilo de línea
Los iconos de estilo de línea parecen ser la tendencia que nunca pasa de moda.
Parte de la razón es que este estilo de icono puede funcionar prácticamente en cualquier lugar en cualquier tipo de fondo. Muchos de los populares paquetes de iconos descargables a menudo incluyen un diseño de estilo de línea debido a esta versatilidad.
Es fácil ver esto en el ejemplo anterior. Cada icono es fácil de ver y comprender en prácticamente cualquier tamaño.
11. Elementos simples y representaciones
Como con la mayoría de las otras tendencias de diseño en 2020, la simplicidad también forma parte del diseño de iconos. Las formas simples y la geografía se combinan para crear representaciones casi sobre simplistas para iconos.
El resultado es un diseño bastante ingenioso que hace que los usuarios se vean.
En el ejemplo que usa los íconos de alimentos anteriores, cada ícono usa el hilo común de un círculo en el ícono. Esta puede ser la forma general del ícono en sí o una parte del diseño del ícono. Esta forma conecta cada icono entre sí en el proyecto.
12. Iconos con degradados
La tendencia del color degradado que se ha convertido en uno de los temas dominantes de 2019 también es un factor en el diseño de iconos. Desde gradientes simples en trazos de línea (como el ejemplo anterior) hasta colores de gradiente completo e iconos blancos sobre un fondo degradado, este esquema de color es popular.
Eso podría ser lo más atractivo del uso de gradientes en los íconos (y en general): hay muchas maneras diferentes de usar la tendencia. Puede agregar un degradado y aún no tener un proyecto que se parezca a otra cosa.
13. Concéntrese en colorear simple
Los diseñadores de iconos también están adoptando el enfoque opuesto con el color y se adhieren a paletas de colores simples, más limitadas y más básicas para estos pequeños elementos de diseño.
Usar una paleta limitada es una gran idea. Con un diseño tan pequeño, demasiado color o detalle puede abrumar el espacio rápidamente y causar tensión en el ojo.
No desea que los usuarios tengan que pensar qué es el ícono o qué significa el color. Limitar la cantidad de detalles, incluido el colorido elaborado, puede hacer que cada icono individual sea un poco más fácil de ver y comprender. Esto es más importante con los iconos que se utilizarán en los tamaños más pequeños.
14. Todo el estilo de la aplicación
Una de las razones por las que los iconos han crecido tanto en popularidad es que ya los estamos diseñando para casi todo. Desde iconos de aplicaciones hasta iconos de estilo de aplicación para favicons o iconos de escritorio, este estilo está prácticamente en todas partes.
Los iconos de estilo de aplicación tienen un estilo distinto casi propio. Esto incluye:
- De forma cuadrada
- Bordes redondeados
- Fondo coloreado (generalmente un color)
- Forma simple dentro del icono
- Mucho contraste entre el ícono y el color de fondo
- Sin texto o letras
15. Golpes gruesos y uniformes
No solo son populares los iconos de estilo de línea, sino que los iconos con trazos de línea gruesos son especialmente populares.
Diseñados a menudo para aplicaciones de un solo color, estos íconos se usan con frecuencia en blanco o negro sobre fondos de color o fotos.
Los íconos con trazos gruesos y uniformes se usan con mayor frecuencia por sí solos, como un ícono de carrito o de contacto. No se usan con frecuencia en una colección de iconos.
16. Los iconos planos siguen siendo populares
Si bien gran parte del enfoque duro en el diseño plano se ha evaporado, el diseño de iconos sigue siendo bastante plano (o al menos casi plano).
Esto probablemente se deba a la naturaleza súper simple del diseño plano y a la idea de que este aspecto puede integrarse con una serie de otros estilos con bastante facilidad.
Incluso mirando algunos de los ejemplos y tendencias de diseño de íconos presentados aquí, verá que muchos de ellos son planos. (Los iconos de estilo de línea son casi siempre planos, por ejemplo).
17. iconos emoji
Los emojis casi se han convertido en su propio idioma, una forma de comunicación más visual que cada vez es más aceptada.
El diseño de iconos también está adquiriendo un estilo emoji-esque. Estos íconos son identificables debido a un enfoque en la forma de la cabeza de una persona o criatura. (Los íconos de emoji inspirados en Star Wars anteriores son un gran ejemplo de cómo divertirse con el diseño de íconos).
Este estilo del icono podría funcionar muy bien para una página de contacto o para representar personas o personas en un diseño.
Cómo diseñar un mejor icono
Crear un buen ícono o conjunto de íconos es más que simplemente saltar a algunas de las últimas tendencias en diseño de íconos. Debido al pequeño tamaño de los iconos, la atención al detalle y la precisión son una parte importante del proceso de diseño.
Las reglas simples siguen siendo válidas para el diseño de iconos en 2019. Combine estas pautas con algunas de las ideas de tendencias anteriores para crear algo que le encantará:
- Comience con una cuadrícula
- Construir con geometría
- Crea una forma única
- Dé a los iconos mucho espacio
- Quédate con los colores de tu marca
- Usa divots consistentes
- Diseñe para el tamaño más pequeño que necesita
- No decorar
Pautas de diseño de iconos
Una buena manera de mantenerse al día con lo que está "dentro" es mirando los estándares gráficos y las guías de estilo. Cada vez que Apple o Google cambian su enfoque, también lo hacen los demás. En parte porque tienen que hacerlo y en parte porque el nuevo estilo a menudo refleja los tiempos y las tendencias en el diseño de iconos.
Puede encontrar pautas aquí:
- Iconos de aplicaciones de Apple
- Iconos de aplicaciones de Android
- Iconos de productos de diseño de materiales
- Iconos del sistema de diseño de materiales
Conclusión
Los iconos son una herramienta de diseño útil. Desde el uso como íconos de aplicaciones hasta marcas de sitios web o favicons hasta divots que se pueden usar en un logotipo o en un proyecto de diseño, el ícono es una marca que llegó para quedarse.
Enfoque el diseño de iconos de la misma manera que lo haría con casi cualquier otro proyecto, pero realmente piense en la simplicidad y el tamaño. Los íconos están hechos para mirar rápidamente y a menudo son pequeños. Esto puede tener un gran impacto en el diseño.
