Íconos

Los íconos simbolizan conceptos abstractos y literales, y nos ayudan a representar una gran cantidad de ideas y tecnologías. Cada uno de nuestros íconos tiene un significado particular y un diseño uniforme, lo que nos permite comunicarnos de manera coherente y eficaz en toda la empresa.

Según el espacio disponible, tal vez necesite distintos tipos de íconos o ilustraciones.

Íconos de interfaz de usuario

Los íconos de interfaz de usuario (UI) son muy pequeños y se utilizan en las interfaces de los sitios web o los productos.

Íconos estándar

Estos representan un concepto único o la relación entre dos elementos.

Figuras miniatura

Se trata de ilustraciones pequeñas que representan un concepto sencillo.

Ilustraciones

Las ilustraciones tienen una estructura narrativa o representan una idea compleja.

Usamos dos clases de íconos: estándar y de experiencia del usuario. Los íconos estándar se utilizan en los diagramas, las infografías, las diapositivas y los materiales de marketing, mientras que los íconos de experiencia del usuario se usan en las interfaces.

El sistema de íconos que utilizamos es sencillo, claro y abierto. Todos los íconos tienen el mismo grosor y radio, muestran la parte frontal de los elementos, usan una perspectiva aplanada y están compuestos únicamente por figuras geométricas. De forma predeterminada, nuestros íconos estándar están disponibles en dos versiones (con relleno y sin relleno) y en tres colores (rojo, negro y blanco). Además, es posible elegir entre cualquier tono de la gama de colores de la marca.

Utilice los íconos estándar en los diagramas, las infografías, el contenido web, las presentaciones o los materiales de marketing. Se adaptan mejor a tamaños entre 32 y 100 píxeles.

Diseño de los íconos estándar

Nuestra biblioteca de íconos se va armando con el tiempo mediante la colaboración de todos. Si crea íconos nuevos, compártalos con nosotros. Para estar seguro de que los íconos que cree sean compatibles con el resto, utilice la plantilla y siga los lineamientos que aparecen a continuación.

1. Dibuje el ícono en un tablero de 36 píxeles. Extiéndalo hasta el margen interno, según sea necesario, para que la proporción y el tamaño de todos los íconos sea similar, pero deje el margen externo libre.

2. Todos los ángulos deben tener 0°, 45°, 90°; o bien, alguno de estos ángulos y 12° más o 12° menos. Usamos ángulos de 12° porque coinciden con los ángulos de las astas ascendentes y descendentes de nuestra fuente.

3. Primero, diseñe los íconos sin relleno. El grosor del trazo debe ser de 1,5. Asegúrese de que los extremos y las esquinas estén redondeadas.

4. Utilice únicamente figuras geométricas para definir la forma básica del ícono.

5. Use puntos y líneas rectas para agregar detalles. Deje un espacio de 1,5 puntos entre los trazos para crear apertura o mostrar profundidad. En el caso de las líneas formadas por puntos, use un guion de 0 puntos y deje un espacio de 2,5 puntos.

6. Las flechas pequeñas deben tener un ángulo de 90° y una longitud de 2 píxeles en cada extremo. Las flechas más grandes deben utilizar las mismas proporciones que las más pequeñas.

Diseño de los íconos con relleno

1. Si desea crear íconos con relleno, primero siga las indicaciones de la versión sin relleno y utilice el mismo color del trazo para rellenar los espacios libres. Asegúrese de que el tamaño del trazo sea siempre el mismo.

2. Pinte los detalles en color blanco.

3. Modifique el tamaño de los detalles para conservar el espacio de 1,5 o 0,5 puntos entre los elementos. Según el tipo de ícono, lo mejor será extender la línea.

Íconos de interfaz de usuario

El diseño de los íconos para interfaces que varían según la pantalla presenta un gran desafío, particularmente en lo que se refiere al tamaño y el ajuste. Las interfaces necesitan íconos que se entiendan con facilidad y que puedan visualizarse en tamaños muy pequeños. En estos casos, utilice los mismos principios para los íconos de interfaz del usuario que para los íconos estándar: ángulos de 12° y rectos, extremos y bordes redondeados y figuras geométricas. 

Nuestros íconos de interfaz de usuario son planos y sencillos, y se pueden distinguir a 16 pixeles. Por lo general, se usan en gris o blanco.

1. Comience con un tablero de 16 pixeles y un trazo de 1 punto. Deje un margen de 1 píxel alrededor del diseño.

2. Asegúrese de que el ícono encaje en una cuadrícula de 14 pixeles.

3. Tome como referencia los íconos estándar y use lo que necesite de los que ya tiene. Utilice solo los elementos esenciales que sirvan para identificar el ícono.

Íconos en patrones

Podemos usar los íconos en patrones para crear en poco tiempo gráficos visualmente atractivos e interesantes. Utilice los patrones como fondo o para rellenar espacios.

Enfoques en torno a los patrones

Para que sea más dinámico, pruebe cambiar uno o dos de sus elementos. Debe tener movimiento y ser llamativo, no aburrido ni monótono. 

Utilice un solo ícono, pero modifique su tamaño, color o relleno. 

Utilice una serie de íconos del mismo tamaño que tengan alguna relación entre ellos.

Agregue líneas que conecten los distintos íconos.

Pruebe distintos colores y tamaños.

Uso de los íconos

Los íconos deben ser bidimensionales y contener la menor cantidad de elementos de diseño posible.

No diseñe íconos complejos ni tridimensionales.

Las líneas de todos los íconos deben ser del mismo grosor.

No utilice diferentes grosores.

Utilice una imagen concreta que represente una idea abstracta.

No utilice íconos muy abstractos, para que el usuario pueda entender su significado.

Utilice un ícono para representar un solo concepto a la vez.

No combine dos íconos para ilustrar un concepto más complejo.

Modifique uno o dos elementos del patrón para crear movimiento y generar interés.

No utilice el mismo patrón sin realizar ningún cambio, ya que resultará aburrido y repetitivo.

Asegúrese de que el patrón que utilice sea sencillo y no interfiera con el texto.

No utilice un patrón que impida entender el mensaje.

Los íconos estándar generan interés visual y refuerzan los puntos principales en las presentaciones.

Gracias a los íconos de interfaz del usuario que aparecen en redhat.com, se puede navegar por nuestro sitio web de forma más rápida e intuitiva.