Iconos
Definición de criterios de construcción de iconos para seguir escalando el sistema.
La universalidad y la intuición es fundamental al momento de crear un icono. Esto quiere decir que la forma que representa el ícono, debe ser reconocible por la mayoría de las personas. Ya sea una hoja de papel, un tacho de basura, un sobre, una casa, un avión de papel, un globo de texto, etc. Porque el contexto permitirá generar esa relación de la forma con el sentido de la acción o la representación.
Lenguaje Cercano
Las curvas y rectas expresan un lenguaje cercano, amigable y a la vez estructurado y organizado. Un punto justo entre símbolos cercanos, amigables pero con un lenguaje maduro.
- Contexto: Educación
- Cualidades: Claro, simple, preciso, consistente, eficiente, esencial e intuitivo.
Cambio de Estado
Para mantener un feedback evidente en las interacciones que realice el usuario, los
botones con iconos que deben mantener el estado seleccionado, cambian de un estilo
lineal a uno lleno.
Los iconos que incluyen una versión lineal y llena se caracterizan con:
- Ser parte de una acción seleccionable.
- Generalmente son botones que desencadenan una pagina nueva o sección.
- Se caracterizan por abrir hojas contenedoras de otras acciones y contenidos o módulos como diálogos.
- Algunos casos desencadenan acciones sin cambiar de página.
Los iconos que solo son lineales se caracterizan con:
- Generalmente son iconos que desencadena acciones que cambian todo la página.
- No son acciones en si mismas que se mantienen seleccionadas.
Líneas Guías
La construcción de los iconos comienza con las lineas base para diseñar según las proporciones necesarias para el icono en el espacio. Para eso existen dos lineas diagonales que se cruzan, luego un cuadro con laterales y esquinas curvas, y base y linea superior planas o rectas. Lo mismas características para las otras dos proporciones de formato rectangular horizontal y rectangular vertical.
Grilla de Base
Además de las lineas de construcción base, estas se enmarcan en una grilla de 32 x 32 pixeles, con margen de 2 pixeles para zona segura. Los iconos se deben diseñar dentro de estos 28 x 28 pixeles como zona segura y se exportan con esta zona blanca común, asi todos los iconos, independiente su morfología, mantienen el tamaño de 32 x 32 pixeles en total.
Grilla y Líneas Guías
La grilla sumada a las lineas guías permiten establecer criterios de diseño guiadas para considerar proporciones ópticamente similares para mantener una coherencia morfológicamente.
Formas Simples
Los laterales son curvos y la base con linea superior rectos, con estas dos variables, el criterio de diseño de los iconos se resume en estas 3 formas: rectángulo vertical, cuadrado y rectángulo horizontal.
Categorías de Iconos
Los iconos de Malta pueden utilizarse para representar acciones, comunicación y temas. Cada uno de estas categorías pueden variar entre iconos que permiten acciones puntuales para controlar el sistema, ya sea para navegar entre el contenido (icono lineal y lleno) como para manipular la interfaz.
Criterios de Diseño
Para el diseño de iconos, es importante considerar la construcción, la forma, la perspectiva y su versión lineal y llena para los casos que son requeridos:
Iconos llenos correctos:
- Las lineas aumentan de grosor y las formas que eran lineales quedan llenas de color.
- Las líneas en iconos con versiones llenas aumentan de 2 pixeles de esta grilla a 4 pixeles.
Iconos llenos incorrectos:
- Si el ícono en versión llena no queda bien o su forma se complejiza, se debe pensar resolver la forma tanto lineal como llena.
- En estos ejemplos, la linea debe aumentar en 4 pixeles según grilla de diseño. Solo la versión lineal es de 2 pixeles.
Iconos llenos correctos:
- Para el caso superior, la versión llena del reloj debe ser lleno completo porque no cambia su forma.
- La versión llena de la lupa, para mantener su comprensión, es mejor aumentar el grosor de su linea..
Iconos llenos incorrectos:
- En el caso del reloj lleno, es mejor utilizar su opción de color lleno, y las manillas calarlas con 2 pixeles de esta grilla. Ya que la versión lineal siempre va a ser menos evidente visualmente para el usuario.
- Si llenamos el círculo para la lupa, al igual que el reloj, la comprensión del ícono se distorsiona.
Iconos llenos correctos:
- La versión llena del engranaje (representa ajustes o configuración) debe agrandarse y no traspasarse literal del icono lineal.
- Lo mismo para la mano, su versión llena debe ajustarse ópticamente porque pierde su estilizada forma original.
Iconos llenos incorrectos:
- Opticamente un icono lleno se percibe mas pesado, con mayor presencia visual, es por eso que el circulo tiende a reducirse ópticamente.
- Si la mano se traspasa y llena literalmente el ícono tiene a perder cualidad. Eso debe revisarse al momento de crear un icono.
Iconos llenos correctos:
- Ya sea para simbolizar una hoja doblada (arriba) o un parte icono que va sobre otro, el corte debe utilizarse como se muestra en los ejemplos.
Iconos llenos incorrectos:
- Al incluir esta pestaña con el criterio de la hoja arriba, se comienza a variar en la forma como se construyen.
- Lo mismo para simular una parte del objeto con otra parte. La base del sombrero de graduación no debe estar vacio si no es extremadamente necesario.
Iconos llenos correctos:
- Para representar dos objetos traslapados, el que debe quedar detrás, se corta a unos 2 pixeles. Estas líneas quedan con los cortes redondeados.
Iconos llenos incorrectos:
- En caso contrario acá vemos que no hay un corte y puede percibirse como una sola figura abstraída, lo que distorsiona la comprensión del ícono.
Iconos llenos correctos:
- La letra A+ representa el aumento de los textos para una accesibilidad universal. La cualidad en las diagonales curvas de la letra permite pequeñas pero importantes coherencias.
- El computador en este caso se representa sin perspectiva.
Iconos llenos incorrectos:
- En caso de utilizar una letra para crear un icono, se deben modificar sus lineas consistentes con la grilla y linea base de diseño.
- Buscar una vista frontal de los objetos iconizados. Evitar las perspectivas en la construcción.
