Styles
Iconography

Iconography

En InfoJobs usamos tres tipos de iconos: Action icons, Champion icons y Hero icons. Los más sencillos a nivel formal son los action icons, evolucionan en su complejidad va en aumento hasta llegar a los hero icons. En está página podrás ver cómo debes construir cada familia de iconos y dónde utilizarlos.

Action icons

Usa este tipo de iconos para reforzar acciones que deba realizar el usuario, por ejemplo en botones o links. Ten en cuenta que debes usar los actions icons por defecto y, además de para reforzar acciones de usuario, también los debes aplicar en todas las situaciones en las que tengas que jugar con tamaños de icono pequeños.

  • Debes construir el icono sobre un grid de 200 x 200dp, y usar un trazo de 20dp.
  • Combina el acabado de los trazos. Puedes alternar bordes cuadrados y redondeados para dar más ritmo al icono.
  • Los action icons se suelen usar en botones o links. Si usas un texto junto al icono, este último siempre debe ser 2dp mayor.

Champion icons

Los iconos champion debes usarlos para acompañar al contenido. Sirven para comunicar nuevas funcionalidad y conceptos de negocio. Los puedes diferenciar de los action icons en que los champion no debes usarlos para representar acciones como abrir, guardar, enviar, etc. y su tamaño debe ser mayor, ya que su nivel de detalle también lo es.

  • Debes construir el icono sobre un grid de 240 x 240dp, y usar un trazo de 10dp.
  • Combina el acabado de los trazos. Puedes alternar bordes cuadrados y redondeados para dar más ritmo al icono.
  • Debido al mayor número de detalles de este tipo de iconos, recuerda no usarlos a tamaños demasiado pequeños.

Hero icons

Usa los hero icons para identificar y destacar apartados. Son mayores en tamaño, más complejos visualmente que los anteriores y explican “historias”. Úsalos en aplicaciones en las que quieras crear un gran impacto, y no abuses de ellos en una misma página.

  • Los hero icons tienen que descansar sobre una línea, que representa el suelo y estar dentro de una circunferencia.
  • El círculo más pequeño debe mostrar un action icon que resuma el concepto general que quieras transmitir con el icono.
  • No uses los hero icons en blanco y negro, aplícales un color corporativo en función al segmento al que quieras dirigirlos.