Cómo convertir rápidamente íconos aburridos en obras maestras originales

Los iconos son una parte integral de nuestros diseños. Son señales visuales para indicar varias acciones y pueden dar una identidad única a un producto. Pero con demasiada frecuencia elegimos celebrar su importancia descargando los mismos conjuntos de íconos y haciendo que cada ícono para cada sitio web se vea más o menos igual. Qué manera de tratar algo de tanta importancia.

Para abordar este problema, he creado una guía para ayudar a los diseñadores a agregar profundidad visual a sus íconos y hacerlos únicos para el producto que representan. Este tutorial está inspirado en gran medida en el influyente diseño de Google Material.

Principios de diseño de materiales de Google

Como dice Google, "el material es una metáfora". Toma prestadas señales visuales del mundo físico y crea un nuevo lenguaje visual para estandarizar todas sus interfaces. Los principios de Material Design son accesibles y se pueden aplicar rápidamente para mejorar el atractivo de las interfaces y la experiencia del usuario.

1. Use formas geométricas simples y colores llamativos

La tendencia del diseño plano inspiró Material Design, que también se basa en formas planas básicas. Seleccione con cuidado qué forma representa mejor el elemento que representa el icono.

2. Agregue profundidad con sombras sutiles

Una sombra paralela es una buena manera de engañar a la vista y dar una sensación de profundidad a su diseño, ya que estimula el efecto de la luz que se proyecta sobre un objeto.

Tenga en cuenta que la luz natural a menudo se simula como proveniente de la esquina superior izquierda.

3. Use tonos de color para reemplazar las sombras paralelas

Cada color se utiliza en varios tonos para simular la profundidad visual. Por ejemplo, en el ícono de Gmail, puede ver que se usan diferentes tonos de rojo para la forma de la M, y se usa un tono de gris más oscuro debajo de la tapa del sobre.

Cómo puede hacerlo usted también: Demostraciones paso a paso

Aplicaremos una versión simplificada del estilo Material Design y, para cada ícono, solo usaremos tres tonos del mismo color y mantendremos las sombras planas y cortas, en lugar del efecto común de "sombra larga".

Recursos

• Consulte el conjunto completo de iconos gratuitos de Google aquí.

Empecemos.

1. Icono de perno

Rompe el icono original en dos y haz que la parte superior parezca levantada. Puede lograr esto creando un efecto de sombra en la intersección de las dos formas. Use tres tonos de amarillo: más claro en la parte superior, uno más oscuro en la parte inferior y mantenga el tono más oscuro para la sombra.

2. Ícono de chat

En el ícono original, tenemos un toque de un efecto de sombra en el espacio entre las dos burbujas, ahí es donde crearás una sombra.

En la forma inferior, seleccione el punto que forma el ángulo recto en el espacio y muévalo hacia arriba a la izquierda hasta que forme un ángulo recto en la esquina superior izquierda.

Duplica la burbuja superior y mueve la copia hacia abajo y hacia la derecha. Seleccione la copia y la forma de burbuja inferior, use el "Buscador" para crear una división y mantenga solo la intersección con su copia anterior.

Ahora puede aplicar tres tonos de azul y dar el más claro en la parte superior, el más oscuro en el medio y el segundo más oscuro en la parte inferior.

3. Icono de marca de verificación

Crearemos un efecto de papel doblado.

Duplique el ícono y elimine los dos puntos adicionales en la parte superior derecha, luego en el extremo izquierdo para sacar dos piezas.

Duplica el pliegue izquierdo y muévelo sobre el derecho.

Intersecta las dos formas para crear el efecto de sombra. Luego aplique tres tonos de color manteniendo el más oscuro para la sombra, el segundo más oscuro para la pieza larga y el tono más claro para la parte superior.

4. Icono de bandera

Comience redondeando los bordes, luego extraiga la base de la bandera.

Para crear un efecto de plegado, traza dos líneas que se crucen en diagonal. Usando el "Pathfinder", divida la forma de la bandera con las líneas y aplique tres tonos de verde a la bandera mientras mantiene la base gris.

5. Icono de corazón

Duplica el icono del corazón.

Aislar la mitad izquierda de la forma.

Traza una línea diagonal hacia abajo, desde el punto superior derecho.

Superponga la forma resultante con el corazón, luego muévala hacia la derecha para restar la forma de la sombra. Aplica tus tres tonos de rosa.

6. Ícono de montañas

El espacio vacío dentro del ícono original indica dónde podemos colocar una sombra.

Crea las dos formas triangulares de cada selección.

Mueva una copia de la más pequeña a la derecha y extraiga la intersección resultante como la forma de la sombra.

Aplique tres tonos de marrón manteniendo el más claro a la izquierda, el segundo más claro al triángulo grande y el más oscuro a la sombra en el medio. Aplique un poco de radio de esquina para suavizar el resultado.

7. Ícono de personas

Seleccione y duplique la parte inferior de la persona a la izquierda. Alinee esa copia con la persona a la derecha. Ahora, seleccione las tres formas superpuestas y aplique la herramienta "Dividir" del panel "Buscatrazos". Ahora, implementa los colores para terminar.

8. Ícono cuadrado flotante

Seleccione la forma inferior y mueva su punto medio superior hacia arriba hasta que parezca un diamante.

Duplique la forma de diamante superior y mueva la copia hacia abajo 10 o 20 px.

Seleccione las dos formas inferiores y aplique la herramienta "Dividir" del panel "Buscatrazos".

De las formas intersecadas resultantes, solo conserve las dos piezas inferiores y elimine los puntos adicionales.

Envuélvalo aplicando tres tonos de rojo mientras asigna el más oscuro en el medio.

9. Icono de letra

Con la "Herramienta de selección directa (A)", elija el segundo punto más alto de la forma del sobre.

Agregue un punto en el segmento a su derecha usando la "Herramienta Pluma".

Ahora que tiene un punto adicional, puede remodelar ese espacio negativo para que parezca un papel levantando los dos puntos superiores y moviéndolos hacia la derecha y hacia la izquierda como se muestra.

Seleccione todo y aplique una división desde el panel "Pathfinder". Separe la forma de papel superior del sobre, luego duplique la parte del sobre sobre el papel para recortar la forma de la sombra antes de aplicar tres tonos de azul.

10. Icono de pastel

Aísle una versión duplicada de la parte inferior del pastel.

Reduzca su ancho moviendo los bordes izquierdo y derecho hacia adentro.

Mueva la forma resultante sobre el ícono original y extienda los puntos más altos para superponer la forma de glaseado.

Cree una división de todas las formas superpuestas con el "Pathfinder" y elimine los puntos adicionales al lado de la base de pastel angosta que creó anteriormente.

Complete su pastel aplicando un naranja claro al glaseado y la vela, un tono más oscuro a la base y un naranja aún más oscuro para la forma de la llama y el borde de la sombra.

Mejore la apariencia de su conjunto de iconos

La creación de iconos con el estilo de Material se puede lograr con sencillez. Solo necesita una buena combinación de formas geométricas bien pensadas, tonos de colores llamativos y un efecto de sombra paralela.

La buena noticia es que ni siquiera necesita crear todos los íconos desde cero, como hicimos en este tutorial. Puede comenzar con íconos planos gratuitos existentes y aplicar las técnicas simples que acaba de aprender.

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Los principios del diseño y su importancia
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Explorando los Principios Gestalt del Diseño
• Adobe XD vs. Sketch: ¿Qué herramienta UX es adecuada para usted?
• Los 10 entregables de UX que usan los mejores diseñadores