En el mundo en constante evolución del diseño digital, los iconos desempeñan un papel crucial para mejorar la experiencia del usuario y la coherencia visual.
En Webflow, hace poco nos embarcamos en un cambio de marca y rediseño de nuestro producto, centrándonos en perfeccionar cada detalle. Conscientes de la importancia de estos elementos tan pequeños pero potentes, adoptamos un enfoque meticuloso para renovar nuestra iconografía.
En esta entrada del blog, comparto un vistazo exclusivo entre bastidores al proceso de diseño de nuestro nuevo conjunto de iconos. Como diseñador de producto que ha creado meticulosamente más de 800 iconos, voy a profundizar en las consideraciones, los retos y las decisiones creativas que dieron forma a nuestro renovado lenguaje visual. Desde lograr la perfección a nivel de píxel hasta garantizar la usabilidad y la claridad, sigue leyendo para explorar el arte y el oficio del diseño de iconos en Webflow.
El proceso de diseño de los iconos y consideraciones clave
Nuestro conjunto de iconos anterior abarcaba varios tamaños (12x12, 16x16, 20x20, 24x24... y así sucesivamente) y estos iconos solían estar rellenos, ser demasiado detallados y, a veces, incluir varios colores. Con el nuevo conjunto, nuestro objetivo fue simplificar todos los iconos tanto como pudimos para mejorar la legibilidad y reducir la variedad de tamaños. Lo redujimos a:
- 16x16 para la mayoría de los iconos de la interfaz
- 24x24 para los iconos de la barra lateral izquierda y la barra superior
- 64x64 para los estados vacíos de la interfaz
También decidimos optar por un enfoque de trazo en lugar de relleno para lograr un aspecto fresco y presentar un estilo coherente con nuestra tipografía de interfaz actualizada.
Durante este rediseño, tuvimos otras consideraciones. Un enfoque que exploramos fue utilizar un estilo más abstracto, haciendo que los iconos fueran menos literales y más simbólicos. Sin embargo, esto planteaba desafíos en cuanto al reconocimiento inmediato y la usabilidad, especialmente para los nuevos usuarios.
En su lugar, nos centramos en lograr la perfección a nivel de píxel y en garantizar que cada icono fuera nítido y claro, incluso en tamaños pequeños, lo cual es fundamental dada la forma en que se utilizan nuestros iconos. En cuanto a los extremos y las uniones de los trazos, hemos seguido un enfoque diferente, que acabaría convirtiéndose en parte de nuestro estilo característico en la iconografía. Tenemos esquinas redondeadas en el exterior mientras que las del interior son afiladas, tal como se muestra en la imagen de abajo.
El icono más divertido de diseñar
Nuestro conocidísimo cohete para el icono de "publicar" es realmente memorable. Publicar tu sitio es uno de los pasos más emocionantes al crear una página web, así que quería que este icono estuviera muy bien pulido y, al mismo tiempo, fuera sencillo y coherente con el resto de la biblioteca de iconos.
Inyectar una sensación de emoción y movimiento en un icono diminuto fue parte de la diversión. Diseñarlo con esmero requirió incorporar un simbolismo que capturara claramente la sensación de lanzar algo nuevo y emocionante. El desafío residía en equilibrar los aspectos lúdicos de un cohete y, a la vez, asegurar que siguiera siendo claro y funcional en tamaños pequeños.
Comunicar un concepto complejo con claridad
Nuestro icono de "sitio" es literalmente solo un rectángulo. A veces, el mayor desafío es resistirse a complicar demasiado una decisión de diseño. Un sitio puede ser cualquier cosa, pero siempre empieza con una página en blanco, por lo que decidimos que un sencillo icono de 16x16 píxeles sería la mejor decisión.
Los iconos que requirieron más iteraciones
Los iconos de "engranaje de ajustes", "ayuda de IA", "vinculación de datos" y "variable" son probablemente los que más me intimidaron durante el proceso de diseño. Nuestro principal punto de dolor fue equilibrar el peso visual con otros iconos, hacer que lo que representaban fuera súper claro y encontrar el equilibrio entre simplicidad y claridad.
Al principio, por ejemplo, queríamos que el icono de "vinculación de datos" ofreciera cierto nivel de diferenciación del resto de los iconos. Queríamos que se sintiera especial y que fuera más que un icono de más básico. Piensa en el símbolo de la tecla Comando de Apple: lo simbólico que es y cómo crea su propio significado en lugar de depender de un objeto de la vida real.
Tras casi 50 conceptos de iconos, decidimos no usar ninguno y seguir con el icono de más. Las iteraciones fueron necesarias para asegurar que cada icono fuera intuitivo y encajara a la perfección en el lenguaje de diseño del producto.
Evolución de los sistemas de diseño
En nuestro libro electrónico, descubre por qué los expertos apuestan por sistemas de diseño escalables y cómo imaginan el futuro de esta disciplina.
Favoritos que no llegaron a la versión final
Todavía me gusta el concepto de los iconos esqueuomórficos de "añadir panel" que diseñé. Combinaban con nuestros nuevos componentes gracias a su profundidad y sombras, pero, a fin de cuentas, eran difíciles de iterar y de entender a simple vista.
Estos diseños esqueuomórficos guardaban relación con otras partes de la interfaz, como los botones con sombras complejas, con el objetivo de crear una experiencia de usuario más táctil y atractiva. Sin embargo, su complejidad a menudo restaba claridad y dificultaba mantener la coherencia en todo el conjunto de iconos.
Asegurarse de que los iconos funcionen como un conjunto
La forma general de un icono puede variar desde un círculo a un cuadrado, o de un rectángulo alto a uno ancho. Empieza siempre con las siguientes líneas guía para que todos los iconos tengan el mismo peso visual. Además, reutilizar algunos elementos en todo el conjunto —como los mismos tamaños de flecha y otros patrones comunes como el signo más, la cruz y el lápiz de edición— ayuda a crear coherencia.
Logré la coherencia examinando constantemente los iconos en conjunto y ajustando la forma general, el grosor del trazo, las esquinas redondeadas y los extremos rectos. Esta meticulosa atención al detalle garantizó que, a pesar de la variedad, todos se sintieran parte de un conjunto cohesionado.
Consideraciones técnicas que tuve en cuenta al diseñar iconos
Perfección de píxeles
Asegurarse de que los iconos sean legibles dado su diminuto tamaño de 16x16px.
Transparencia
Algunos de nuestros iconos usan transparencia. Solo debes usarla si es necesario y no deberías emplear más de 2 tonos. Las partes transparentes deben usar el mismo token de color variable "text/active" para que el icono funcione en nuestro código.
Color
Por defecto, el color del icono debe establecerse en el token de color variable "text/active". Es muy raro que tengamos varios colores en nuestros iconos, así que no los uses a menos que sea estrictamente necesario.
Nomenclatura
Asegúrate de nombrar tus capas como "icon" y de aplanar/unir todos los trazados del mismo color antes de publicar. Este proceso evita confusiones cuando los diseñadores cambian el color del icono (Figma sobrescribe el estilo solo cuando los nombres de las capas coinciden).
Consejos para diseñadores que quieran crear un conjunto de iconos personalizado para su producto
Si te estás preparando para embarcarte en tu propia exploración del diseño de iconos o para crear un conjunto personalizado para la interfaz de un producto digital, aquí tienes algunos consejos a tener en cuenta.
Usa la función "union" de Figma para exportar código limpio
Al diseñar iconos en Figma, aprovechar la función "Union" puede agilizar significativamente tu flujo de trabajo. Esta herramienta te ayuda a crear exportaciones de código limpias y eficientes al fusionar varios trazados en una forma única y coherente. Esta función simplifica el proceso de diseño y garantiza que tus iconos sigan siendo editables y personalizables.
Por ejemplo, si estás creando un set de iconos con varios trazos y formas, usar la función de "unión" te ayudará a mantener la coherencia y reducir la complejidad al exportar archivos SVG para la web.
Desarrolla principios para expresar tu marca
Los iconos son una parte vital del lenguaje visual de tu marca. Unos iconos bien diseñados pueden comunicar la personalidad y los valores de tu marca con mayor eficacia. Crear un set de iconos único y coherente empieza por establecer principios de diseño que reflejen la identidad de tu marca.
Cuando empieces a diseñar tus propios iconos coherentes, sigue estos consejos:
- Define tu guía de estilo. Empieza por esbozar las características visuales que representan a tu marca. Esto incluye el grosor de los trazos, el radio de las esquinas, la paleta de colores y las formas generales. Por ejemplo, Webflow eligió un enfoque basado en trazos con esquinas redondeadas en el exterior y esquinas afiladas en el interior para alinearse con nuestra tipografía de interfaz actualizada.
- Crea primero los iconos clave. Diseña primero los iconos más distintivos o utilizados con frecuencia para establecer un punto de referencia visual para el resto del set. Pueden ser iconos fundamentales para la funcionalidad de tu producto o aquellos que encarnan la esencia de tu marca, como un logotipo único o un elemento distintivo. En nuestro caso, el icono del "cohete" para la función de publicación se diseñó con especial atención para transmitir emoción y movimiento.
- Apuesta por la perfección de píxeles. Logra nitidez y claridad en tamaños pequeños, algo fundamental para los iconos de interfaz. Asegúrate de que cada icono se alinee perfectamente con la cuadrícula de píxeles para evitar borrosidad o distorsión.
- Practica el diseño iterativo. Algunos iconos pueden requerir varias iteraciones para quedar perfectos. Iconos como el "engranaje de ajustes" o el de "vinculación de datos" suelen necesitar varias rondas de ajustes para equilibrar el peso visual y la claridad. Es un proceso de ensayo y error para encontrar el diseño óptimo que encaje a la perfección en el conjunto de iconos.
Al seguir estos consejos y principios, podrás crear un set de iconos personalizado que no solo cumpla su propósito funcional, sino que también refuerce la identidad de tu marca y mejore la interacción del usuario. Tanto si eres un diseñador experimentado como si estás empezando, adoptar estas prácticas te ayudará a crear iconos que sean visualmente atractivos y altamente funcionales.
