¿Cuáles son los mejores tamaños para diseñar un conjunto de iconos utilizados para la Web?

Los íconos que he creado para un sitio web mío están empezando a desarticularse un poco en tamaño y estilo. Quiero pasar algún tiempo creando un conjunto de íconos estandarizados. Lo que más me preocupa es el enfoque para crear un tamaño que se pueda usar en todo el sitio, ya sea grande o pequeño.

Pregunta: ¿Cuál es el mejor tamaño para crear un conjunto de iconos para la Web? 24x24 y 30x30 parecen ser comunes, ya que son estándares para el diseño de materiales y el diseño de iOS. Así que podría elegir uno de esos; sin embargo, pueden ser bastante grandes para los íconos del sistema (por ejemplo, ícono de ayuda).

¿Se suele diseñar 1 tamaño (por ejemplo, 24x24) y luego cambiar el tamaño cuando sea necesario según la aplicación? Diga un ícono de ayuda grande versus un ícono de ayuda pequeño en un menú, por ejemplo, ambos basados ​​en el mismo ícono original de 24x24.

He visto un conjunto singular de íconos que vienen en tamaños de 18, 24, 30, 36, 42, 48 para cubrir una amplia gama de tamaños diferentes. ¿Es algo así como una práctica común? Donde esos no se dividen entre sí por igual, se necesitaría ajustar el ícono donde sea necesario para que caiga con precisión en la cuadrícula de píxeles y resulte en líneas nítidas en todos los tamaños.

Tengo curiosidad por saber cómo otros en la comunidad de diseño web abordan el diseño de íconos utilizados para la web.

Editar: olvidé agregar que estoy diseñando estos en Sketch, por lo que en formato vectorial, y para aclarar mi pregunta no se trata tanto de las mejores prácticas para diseñar el ícono real, sino más bien en un tamaño estándar (tamaño de lienzo del ícono si lo desea) ) del conjunto.

Respuestas (1)

Debe diseñar en un entorno basado en vectores para que sus diseños maestros sean independientes de la resolución. De esa manera, puede exportarlos a cualquier resolución que tenga sentido ahora, así como a cualquier resolución que sea relevante en el futuro. Aún mejor, manténgase en el dominio vectorial (es decir, SVG) para que los píxeles no dominen el proceso de diseño.

Es posible que necesite tener un conjunto de reglas para trabajar, como grosores de línea mínimos para que todo funcione bien en diferentes tamaños y en diferentes resoluciones, pero puede establecerlos con un poco de experimentación.

Además, es posible que deba tener variantes para pequeños, medianos y grandes (por ejemplo) con diferentes niveles de detalle, pero mantener todo como vectores hace que esto sea mucho más fácil de administrar.

Gracias por su respuesta. Edité un poco mi pregunta original para aclarar más mi pregunta. Seguro que estoy editando en una aplicación vectorial, y estoy interesado principalmente en el tamaño del lienzo en el que se debe diseñar cada icono del conjunto.