Perfeccione su trabajo y estilo, y manténgase (realmente) organizado

Por Isabelle Hamlin , Gerente de Diseño, Marca y Experiencia

Los íconos son elementos dinámicos que se adaptan a las necesidades del usuario, ayudan a contar historias en consejos y tutoriales, y escalan para convertirse en parte de la voz de una marca. Como diseñadores, sabemos que cuando los íconos están claramente diseñados con símbolos comprensibles (y junto con una interfaz de usuario de apoyo) puede significar la diferencia entre que un producto sea utilizable o inescrutable.

A lo largo de los años, he diseñado miles de íconos que han guiado a millones de personas a través de las interfaces; durante ese tiempo, he seguido un conjunto constante de pautas y prácticas que han sido útiles en mi trabajo. En la Parte 1 , me concentré en el trabajo de preparación, desde la postura y el software hasta la forma, la belleza y el significado complementario, necesario para crear la base para comenzar el trabajo de diseño de íconos. Aquí, en la Parte 2, discutiré dónde enfocar su atención a medida que comienza el proceso de diseño.

Consideraciones de diseño

Antes de comenzar cualquier trabajo con vectores, tenga en cuenta el tamaño, la alineación y el estilo de los iconos. Si no gestiona estos detalles primero, será difícil crear conjuntos de iconos equilibrados.

Tamaño. Los tamaños de icono estándar para diseños densos son 16 x 16 px, 18 x 18 px, 20 x 20 px o 24 x 24 px. Por lo tanto, los íconos son más fáciles de alinear horizontal y verticalmente, piense en ellos en tamaños que se pueden dividir por cuatro y centrar en un lienzo rectangular.

Al elegir un tamaño, comience con un cuadrado y visualícelo al 100% para obtener una imagen precisa de cuán reducida deberá ser su obra de arte para que quepa dentro de él. Recuerde que cuanto más pequeño sea el ícono, más difícil será agregar insignias o transmitir un significado complejo.

Alineación. La simetría y el equilibrio harán que sus íconos sean más limpios, claros y consistentes, y el resultado serán formas de íconos que se pueden reutilizar cuando se agregan a su conjunto. Cuando estén completos, los formularios de iconos deben alinearse dentro de una cuadrícula de píxeles y no superponerse a los límites de la mesa de trabajo. Presionar los puntos de una forma vectorial para lograr una alineación perfecta requiere algo de paciencia, pero dedicar tiempo a estos detalles en una etapa temprana beneficiará su diseño a largo plazo.

Estilo. La mayoría de los íconos están delineados o rellenos. Los estilos de contorno funcionan bien en interfaces ligeras, minimalistas y modernas. Los íconos rellenos o de duotono se usan con mayor frecuencia en conjuntos de íconos complejos que requieren una diferenciación refinada entre íconos. Pueden agregar profundidad, peso, enfoque y contraste, por lo que pueden ser especialmente útiles en fondos oscuros.

Cuando use íconos rellenos, experimente usando una transparencia del color principal o un tono adicional que coincida con el tono transparente; A menudo coloco íconos en una fila con diferentes porcentajes de transparencia para evaluar qué valor se ajusta mejor). Finalmente, una combinación de estilos de contorno y relleno puede transmitir una acción, utilizando el estilo de contorno como estado predeterminado y relleno como el estado seleccionado.

Cada dirección de estilo tiene sus ventajas y desventajas, por lo que es mejor probarlas colocándolas en una interfaz de usuario para ver cuál se adapta mejor al tema de color, las opciones de tipo y el contraste. No todos los íconos funcionan bien rellenos y los íconos delineados pueden parecer "frágiles", así que experimente aplicando diferentes estilos a sus íconos y visualizándolos dentro del contexto del tema de la interfaz para ayudar a encontrar la mejor opción.

Formas de llave

Así como las letras a, e, g, n y o pueden definir la personalidad de un tipo de letra antes de trabajar en el resto de la familia de fuentes, hay ciertas formas que definen las proporciones de los estilos de iconos. Los círculos, rectángulos, cuadrados y triángulos son las formas principales que definen el tamaño de un icono y las líneas verticales, horizontales y diagonales. Dado que definen las líneas de base fundamentales para los conjuntos de íconos, determinar las relaciones entre ellos y su tipo de letra es un paso crucial antes de diseñar cualquier otra forma.

Debido al equilibrio visual más que numérico, los círculos siempre aparecerán más prominentes en dimensión que los rectángulos. El equilibrio visual es tan importante como la precisión numérica al crear formas de iconos; cambie el tamaño de los círculos para que las proporciones parezcan correctas cuando se colocan al lado o debajo de los rectángulos.

Un recordatorio rápido sobre las formas: apunte a formas que se puedan reconocer en segundos en un tamaño pequeño. Esto significa elegir formas que sean simples y familiares; las formas que son complejas serán difíciles de escanear y comprender. Puede probar cómo se traduce una forma reduciéndola y mirando rápidamente hacia otro lado y hacia atrás. Si te encuentras mirándolo durante demasiado tiempo, es una señal de que otros podrían tener dificultades para descifrar su significado. Recuerde siempre que buscar el ícono correcto en una interfaz de usuario puede generar frustración. Presiona por la claridad y usa metáforas que sean fáciles de reconocer.

Puntos de anclaje

Los puntos de anclaje son los conectores de una forma vectorial y el objetivo es tener el menor número posible. Las formas vectoriales pueden abarrotarse de puntos innecesarios que hacen que el escalado y los recortes a través de las operaciones de búsqueda de ruta sean una molestia.

Lo que desea son formularios limpios: escalan bien, tienen menos errores de redondeo después de la exportación (demasiados puntos de anclaje pueden interferir con la precisión decimal) y se ven más profesionales cuando se los entrega a otro diseñador. Reduzca y elimine los puntos vectoriales no utilizados y redundantes siempre que sea posible mientras conserva la forma original. La edición de puntos de anclaje requiere práctica. La buena noticia es que hay muchos ejercicios de vectores en la web para practicar la creación de curvas perfectas con la menor cantidad de puntos de anclaje posible.

Radio de esquina

Cuanto más redondea la esquina, más "amigable" es el icono. El redondeo de esquinas puede oscilar entre 0px y 4px para iconos de flujo de trabajo regulares. Experimente con diferentes formas de íconos y diferentes grados de redondez para ver cuál se adapta mejor a su estilo. Tenga cuidado: el radio no solo afecta la apariencia general, sino también la legibilidad.

Pesos de trazo, bordes y mayúsculas

Hay formas simples y sutiles de influir en la apariencia, la estética y el carácter de un icono. La apariencia de un trazo vectorial depende del contorno visible de la forma, que se puede modificar según el peso (el grosor de la línea), configurando el trazo del borde en el centro, dentro o fuera de la ruta (para experimentar con el tamaño óptico) , o definiendo cómo se verá un trazo cuando finalice (opciones de mayúsculas).

Peso del trazo. El tamaño del icono generalmente informa el grosor del trazo, pero hay cierta flexibilidad según el aspecto del icono: un estilo de icono más pesado y audaz generalmente requerirá un grosor de trazo de 2px; por el contrario, un ícono minimalista y reducido se beneficiará de un grosor de trazo más delgado de 1px o 1.5px. Sin embargo, dado que la interfaz de usuario, los íconos y las fuentes deben formar una unidad estéticamente agradable y admitir el enfoque en el contenido, lo mejor que puede hacer es colocarlos en la interfaz de usuario y experimentar. Mirar los iconos junto con las fuentes y los botones te dirá si están equilibrados.

Borde de trazo. El borde del trazo funciona como una especie de cable alrededor del cual se alinea el "aislamiento" del trazo, y puede alterar sutilmente la apariencia de un icono. Una vez que los trazos vectoriales se dibujan en su cuadrícula, use las opciones de Trazo de Illustrator (Ventana > Trazo) para modificar su alineación (interior, exterior o centrada). Su icono debería aparecer más o menos nítido según su elección: las formas redondas y naturales son más fáciles de dibujar con un trazo centrado y los cuadrados y rectángulos se benefician de la alineación interior o exterior.

Tapa de trazo. Definir la apariencia de los extremos de una ruta vectorial es otra forma de cambiar la estética de un ícono: use una tapa redonda para crear una apariencia amigable; una tapa trasera corta el trazo en ángulo recto, lo que puede hacer que los íconos se vean más precisos y formales; y una tapa que sobresale extiende el final de la carrera a la mitad del peso de la carrera, lo que puede suavizar la formalidad de una tapa a tope.

Herramienta Pathfinder de Illustrator

Una vez que esté satisfecho con la versión de trazo vectorial de su ícono, haga una copia y convierta esa versión copiada en una forma expandida o trazo de contorno (el término variará según el software). Los trazos que no se convierten en formas expandidas pueden causar problemas de representación, en navegadores y motores de representación, que cambiarán la apariencia visual de un icono.

Esencial para finalizar las formas de los íconos antes de comenzar el proceso de exportación, la herramienta Pathfinder combina todas las partes utilizadas para construir el ícono, resta los recortes necesarios y deja una forma intacta con una ruta única o compuesta. Esta será la versión de su icono que se exportará para su implementación. Dado que la herramienta Pathfinder es un acceso directo a un proceso de edición complejo, la mejor manera de comprender lo que sucede cuando se usa es aplicarla a formas de iconos simples.

Importante: mantenga intacta una versión de cada icono con su trazo vectorial. Le permitirá escalar el tamaño más fácilmente, ajustar el grosor del trazo o realizar cualquier otra modificación al reutilizar formas. Confía en mi palabra, es un dolor hacerlo después de haber expandido tus trazos.

Contraste y accesibilidad

Hay mucho que decir sobre la accesibilidad en el software, pero la principal preocupación en el diseño de iconos es el contraste de color. Matt May, diseñador principal del equipo de Equidad de productos de Adobe, recomienda usar Contrast Checker de Adobe Color para ayudar a identificar problemas de accesibilidad y contraste desde el principio y crear un conjunto completo de colores que no colisionen, no solo para los íconos sino también para el texto. No confíes en tu percepción; muchas personas tienen deficiencias visuales leves más allá de la baja visión y el daltonismo.

Un último comentario sobre la accesibilidad de los íconos: nombrar sus íconos y complementarlos con contenido solo para lectores de pantalla puede marcar una gran diferencia para las personas que navegan por su aplicación o sitio web usando lectores de pantalla.

Exportar, archivar y compartir

Establecer un sistema de diseño sostenible para guardar, actualizar y compartir íconos, para usted y su equipo, no solo puede brindarle tranquilidad, sino que también puede ahorrarle horas de trabajo. Ese proceso variará de un equipo a otro, pero hay algunas cosas que debe tener en cuenta cuando comienza el proceso por primera vez.

Opciones de exportación: SVG, PDF, PNG. Una vez que haya finalizado su(s) icono(s), el siguiente paso es exportarlo al proceso de producción. La mejor regla a seguir al exportar es verificar qué formato se necesita con la persona que implementa los íconos para que pueda entregar el tipo de activo que garantizará el mejor rendimiento. SVG y PDF son formatos vectoriales escalables que se utilizan a menudo para aplicaciones web y móviles. Los PNG son mapas de bits planos que admiten transparencia, pero deben exportarse en tamaños escalados específicamente para la densidad de una pantalla (los marcos de trabajo más antiguos tienden a usar PNG, pero también son alternativas si un navegador no puede representar el SVG).

Nombrar archivos. Algunos conjuntos de iconos en los que trabajo contienen más de 1000 iconos. Existen algunos desafíos específicos para la documentación y el mantenimiento de grandes conjuntos de iconos, pero lo más importante es crear una estructura de nombres de archivos que admita la búsqueda y el uso compartido.

Me baso en una búsqueda conjunta de imágenes y texto, pero sigo nombrando mis archivos con la mayor precisión posible (con función de icono, tamaño y estado) para poder buscar con términos específicos. Como ejemplo, en lugar de usar el título "guardar", use "guardar_archivo_en_nube" para que pueda buscar usando guardar, nube o archivo. La asignación de nombres significativos a los iconos también puede mejorar los resultados del lector de pantalla. Como ejemplo, VoiceOver de Apple leería el nombre del archivo anterior como "guardar archivo de subrayado subrayado en la nube de subrayado" para que alguien que use un lector de pantalla sepa cómo escribir el nombre del archivo.

Sepa dónde se almacenan los archivos. Es fundamental conocer la ubicación del repositorio de iconos y quién tiene acceso a él. Y, dado que compartir y actualizar conjuntos de íconos más grandes en los equipos puede ser complicado, asegúrese de crear pautas de diseño sobre cómo modificar o agregar conjuntos de íconos de manera consistente. Y considere usar soluciones como Creative Cloud Libraries para hacer que sus íconos se puedan compartir más, para sincronizarlos automáticamente cada vez que se agreguen íconos y para que los miembros seleccionados del equipo puedan acceder a las copias. Cuando los equipos iteran rápidamente, esta forma de compartir puede ayudar a ahorrar mucho tiempo porque las formas vectoriales y otros elementos gráficos se actualizan automáticamente cada vez que se actualizan las bibliotecas.

Iconos de producción. Vuelva a verificar la implementación del ícono con el desarrollador para asegurarse de que la apariencia no esté escalada o alterada y tenga el color y el comportamiento correctos en los estados predeterminado, flotante y seleccionado. Luego, cree especificaciones y documentación sobre cómo debería verse el icono cuando se implemente con la interfaz de usuario.

El diseño de iconos es más relevante que nunca

Debido a que las imágenes se perciben y entienden más rápido que las palabras, las aplicaciones y los sitios web que combinan con éxito el texto y la iconografía para explicar por qué algo es importante mejorarán su conexión con sus audiencias. Sus experiencias también serán deliciosas, simplificadas y coherentes.

Hasta que descubra un método de diseño que funcione para usted la mayor parte del tiempo, sea paciente, continúe creando e iterando, y recuerde:

• Las formas más simples son a menudo las más difíciles.
• Establezca metáforas clave desde el principio para crear consistencia.
• Reutilice las formas con la mayor frecuencia posible para ahorrar tiempo y lograr un aspecto y una sensación coherentes.
• Hay una belleza tácita en la perfección de una curva Bezier.
• Al diseñar un conjunto de íconos básico, recuerde que los íconos tienden a volverse más complejos a medida que se expanden los proyectos, así que planifique el espacio para las insignias para que su conjunto se equilibre en el futuro.
• ¡No te rindas y diviértete, y la satisfacción que viene de diseñar hermosos íconos!