No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Iconografía

18/23
Recursos

Los iconos son muy útiles para comunicar o resaltar características y funcionalidades de nuestros productos, podemos construir nuestras propias librerías de iconos personalizados o utilizar librerías como Font Awesome y completar los iconos que hagan falta si no tenemos un equipo tan grande.

Para definir las reglas y la documentación de una iconografía consistente debemos tener en cuenta los siguientes aspectos:

  • Grid: Las medidas y lineamientos que deben seguir todos los iconos
  • Shapes: Las formas o figuras que podemos utilizar
  • Size: Qué tamaño deben tener nuestros iconos para estar alineados con la tipografía y el resto de la plataforma
  • Styles: Cómo deben estar construidos visualmente nuestros iconos, podemos utilizar colores planos o podemos trabajar en iconos mucho más realistas, etc, lo importante es estar alineados con las reglas de nuestro sistema

Aportes 40

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Cuando no estandarizamos el uso de iconos, corremos el riesgo de romper el sistema de diseño ya que no respetamos las reglas básicas a nivel de alineación y tamaño 😰😅.

Los iconos podemos utilizar librerías de que ya existen por ejemplo (Fontawesome, Material Design, etc), otra es crear una libre ria desde cero y otra opción es utilizar una librería que ya existe pero necesitamos agregar iconos que necesitamos y no estén

Grilla: Nos va a servir para que sean iguales los tamaños y tengan un mismo espaciado…

Shapes: Definir las formas permitidas de nuestros iconos. (Iconos redondeados, sin lineas, etc) Esto sirve para cuando se tengan que crear iconos nuevos no rompan los lineamientos.

Tamaños: Es para estandarizar los elementos dentro de los componentes que hayamos definidos.

Syles: Es simplemente definir como van a ser, que tipo de caracteristicas van a tener (Lineales, con rellenos, etc)
Ademas definir como los integrantes del equipo de Design system como deben definir un nuevo icono y como hacen para agregarlo.

Martín Coronel
Diseño UX/UI

Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

Les comparto uno de mis sitios favoritos the noun project

Herramienta para gestionar y modificar tus iconos cuando estas diseñando interfaces, es basado en browser y tambien tiene una version para desktop

¡Enjoy it!

https://nucleoapp.com/

Si gustan, yo hice mi propia librería de iconos completamente gratis en Figma, lo dejé en el apartado de comunidad, lo pueden ver dando clic aquí. No lo consideren como spam, considérenlo como una ayuda para este curso o para cualquier tipo de proyecto de diseño.

Yo utilizo la librería de material design tiene muy buenos íconos

Apuntes: ### Iconografía

Puedes tomar 2 caminos:

  1. Usar una librería
  2. Crear tu iconografía. Para esto hay que tomar en cuenta lo siguiente:
    • Grid: Que todos los iconos tengan el mismo tamaño y espaciado.
    • Shapes: Formas que tendrán.
    • Tamaños: Estandariza el tamaño de los íconos.
    • Styles: ¿Qué estilos van a tener?

Ya sabes, documenta todo esto.

https://icomoon.io/ icomoon este sitio web ofrece iconos gratis y premium. muy útil para sitio web, aplicativos web,plantillas cms y etc…
mas información aquí

Mientras avanza más el curso noto lo complicado que sería no documentar un sistema de diseño 😰

Para quien le sirva les dejo estas 3 Webs donde pueden ver iconos, tal vez para maquetar en forma de practica o para utilizar como guía u motivación si quieren crear sus propios iconos.
Imagino que hay mejores formas, pero solo dejo mi granito de arena para quien no las conozca.

Ionicons
Icons8
unDraw

Por un momento pense que mi pantalla esta sucia 😐

¡Hola a todos!

Aquí una excelente página web de iconos:
https://www.flaticon.es/

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

Una buena herramienta para crear iconos custom es Fontastic.
http://fontastic.me/

Creo que este es el mejor final de vídeo que haya visto en Platzi xDDD

Me gusta mucho usar este sitio para inspirarme o descargar iconos, se las comparto https://www.flaticon.com/

Iconografía

Podemos usar iconos de librerías que ya existen como font awesome, crearla nosotros o hacer un mixed de ambos.

Grid

Tenemos que utilizar un grid para saber los espaciados que tienen y que estos sean uniformes

Shapes

Los shapes son las formas o figuras que puede tener nuestro icono (líneas, picos, etc)

Tamaños

Los tamaños son para estandarizar los elementos dentro de otros componentes y que no se salgan de su tamaño

Styles

Styles, es básicamente que estilo quieres: realista, funky, etc

Los íconos hoy en día son fundamentales a la hora de querer comunicar a través del diseño. Hay que tomar en cuenta que la gente no lee si no que escanea, esta es la razón principal por la que un ícono se vuelve fundamental ya que es una herramienta que ayudará al usuario a entender mejor las cosas.

Recuerden que la intención de los iconos es comunicar. Lo cual es ideal para sustituir palabras, obvio en textos no. Un ejemplo puede ser los iconos de redes sociales, en lugar de escribir Facebook o Twitter bastará con poner su icono respectivamente.

Tratándose del uso de iconografía, se recomienda utilizar una librería de íconos existente y sobre esa personalizarla agregando íconos propios de tu marca, de otro modo, crear una librería iconográfica desde cero puede ser muy tardado y laborioso, sólo conveniente en equipos grandes donde un diseñador puede dedicarse de lleno sólo a crear nueva iconografía propia de la marca.

Un plugin que me gusta es “Material System” de google listo para usar en Figma

[me encanta esta iconografia] (https://iconsax.io/)

15. Iconografía

Al documentar vamos a definir los tamaños en un grid.

Luego vamos a definir un shape, son las restricciones que tendrán nuestros íconos.

Luego definir el style, que dirá cómo es la iconografía.

Recuerden: Sean claros y concisos!

cuando Rulótico nos dice que debemos tener una librería se refiere a que se puede conseguir gratis o de pago? pues solo conozco flaticon, iconfinder… algo más para agregar.

Gracias
Los iconos son muy útiles para comunicar o resaltar características y funcionalidades de nuestros productos, podemos construir nuestras propias librerías de iconos personalizados o utilizar librerías como [Font Awesome](https://fontawesome.com/) y completar los iconos que hagan falta si no tenemos un equipo tan grande. Para definir las reglas y la documentación de una iconografía consistente debemos tener en cuenta los siguientes aspectos: * Grid: Las medidas y lineamientos que deben seguir todos los iconos * Shapes: Las formas o figuras que podemos utilizar * Size: Qué tamaño deben tener nuestros iconos para estar alineados con la tipografía y el resto de la plataforma * Styles: Cómo deben estar construidos visualmente nuestros iconos, podemos utilizar colores planos o podemos trabajar en iconos mucho más realistas, etc, lo importante es estar alineados con las reglas de nuestro sistema

Los iconos bien diseñados pueden representar fácilmente actividades específicas, como correr, caminar o andar en bicicleta, de manera visualmente intuitiva.
Estos iconos no solo agregan un toque estético, sino que también facilitan la comprensión rápida de la información, haciendo que la interfaz sea más accesible y fácil de usar. Además, los iconos coherentes en todo el sistema de diseño proporcionan una sensación de uniformidad y cohesión, contribuyendo así a una experiencia del usuario más armoniosa y amigable.

Me parece increíble que Rulotico siempre encuentre una nueva forma de despedirse en cada clase

Sospechaba de la existencia de como crear los íconos, pero no esperaba esto 😛

MESSIRVE esta clase!

Como se utilzan los iconos en los sitemas de diseno? Como se estandarizan y que tengan el mismo lenguaje?
.
Varios caminos:

  • Uso de las librerias ya existentes como font awesome
  • Librerias personalizadas creadas desde 0 por nosotros.
    • Grid: regidos bajo una cuadricula
    • Shapes: Formas permitidas de los iconos
    • Size: Estandarizar el tamano
    • Styles: Como se ven, colores, lineas, realismo
  • Hibridas: uso de librerias existentes y agregarles iconos que consideramos para nuestro uso

**Notas sobre el tono y estilo:

Categorización de palabras: la idea es tener una librería que exprese la “personalidad” de la plataforma o marca y que sirva de referencia para todo el equipo que la desarrolla: -Buzzwords: palabras claves, propias de la marca, que sustituyen a otras de uso común. Por ej.: en Movistar no se habla de “ofertas” se dice “beneficios“ del Club. -Frases: frases cortas y estandarizadas que explican o comunican sobre la marca. Sirven para automatizar el proceso de creación sin tener que depender de un copywriter en todos los casos. -Objetivo: definir objetivo comunicacional. -Características: definen personalidad de marca. -Íconografía: definir si es propia o de terceros, las formas (shapes), tamaños y estilos. En la documentación se pueden dejar solo las referencias gráficas para que el equipo pueda crear sus propias formas.

Cuando se esta trabajando solo o son muy poquitos los diseñadores involucrados en el producto, la vieja confiable siempre será FontAwesome, muy rápidos de utilizar y en cada update van agregando más.

Me parece razonable, utilizare material design ya que todos los iconos tienen consistencia

Es super importante definir de manera clara y concisa la iconografía. Ya que es la manera en que nos comunicamos con el usuario y romper el diseño puede ser muy malo para nuestro producto.

no rompas las reglas!

Usamos iconos cuando las palabras no bastan. Muchas veces con esto podríamos a utilizarlos de las librerías que ya existen, pero también podemos utilizar una librería creada desde 0. Tambien hay una opción mixta donde utilizamos una librería construida y agregamos iconos que creamos que hacen falta.

Si creamos iconos necesitamos pensar en:

  • Grid: Son los espaciados que tienen sobre cada cosa.
  • Shapes: Son las formas o figuras que puede tener nuestro iconos.
  • Tamaño: Son para estandarizar los elementos dentro de otros componentes que ya tengamos definidos.
  • Styles: Como están hechos visualmente. si son realistas, si son dibujos o como están construidos visualmente.

Podemos usar referencias para darle ideas al equipo de como poder hacerlo.

Cuando no estandarizamos el uso de iconos, corremos el riesgo de romper el sistema de diseño ya que no respetamos las reglas básicas a nivel de alineación y tamaño 😰😅.

Me ha pasado mas que todo al trabajar con otros que al no saber la importancia de definir la iconografía de nuestro sistema hacemos un solo desastre.
Ahora con este curso eso va cambiar 💚