Pautas para crear tu propio conjunto de iconos

La iconografía es una parte integral de cualquier proyecto de diseño de interfaz de usuario en estos días. Los iconos tienen la capacidad de comunicar ideas, funciones y significados en un lenguaje visual común. Examinemos la cantidad de trabajo que implica la creación de un conjunto de iconos, así como las fases lógicas que se deben seguir al hacerlo..

A los efectos de este artículo, trabajaremos con un conjunto de iconos que diseñé recientemente llamado Uicons.


Para descargar el conjunto de iconos al que se hace referencia en este artículo, visite www.uicons.co.

Paso 1: Investigación

La comunidad de diseño web ama los grandes recursos. De código abierto o no, hacen nuestra vida como diseñadores mucho más fácil. Antes de embarcarse en la creación de un conjunto de iconos, es una buena idea ver si existe uno que ya se ajuste a sus necesidades..

Así que el primer paso es verificar los conjuntos de iconos existentes; Usted podría ahorrarse tiempo y energía al no recrear lo que ya existe.


Paso 2: Colocación

La ubicación se refiere al punto de diferencia entre el conjunto de iconos propuesto y uno de los miles de conjuntos de iconos existentes que ya existen. Esto realmente sigue de nuestra fase de investigación; sin saber lo que ya está disponible, ¿cómo saber si hay una demanda o necesidad de hacerlo??

La elección de los estilos de íconos es muy amplia y tendrá que decidir qué estilo van a tener sus íconos. Ya sea que se trate de tonos mono, a todo color, multicolores, tridimensionales, dibujos animados, realistas, siluetas, dibujados a mano o píxeles, elija un estilo y manténgalos..

Antes de crear Uicons, encontré la necesidad / necesidad de iconos vectoriales de múltiples capas que fueran píxeles perfectos. Quería un conjunto de iconos que tuviera más profundidad y detalle que la mayoría de los conjuntos de iconos mono existentes, sin tener que usar iconos a todo color.

Entonces, una vez que haya encontrado un punto de diferencia y un estilo elegido, es hora de pasar a la fase de planificación.


Paso 3: Planificación

La planificación consiste simplemente en decidir qué iconos desea incluir en su conjunto. Deberá considerar a quién apelará su conjunto de iconos y luego crear una lista (mejor hacerla como una hoja de cálculo) basada en esos parámetros.

Un buen consejo es dividir su lista en subcategorías como medios sociales, tipos de archivos, transporte, etc. Además de mantener las cosas ordenadas, le resultará útil durante la fase de diseño, ya que marcar la lista a medida que avanza hará que completar su lista de íconos sea menos desalentador..

La etapa de planificación también es el momento perfecto para decidir en qué tamaño o tamaños ofrecerá sus iconos. Las dimensiones comunes son 16, 32 y 48 píxeles, sin embargo, estamos empezando a ver más y más conjuntos de iconos entregados en formatos escalables como .CSH (archivo de forma de Photoshop) y formatos de fuente. Más sobre formatos posteriores..

Durante la fase de planificación, es bueno reflexionar sobre la investigación anterior que realizó en la fase uno. Hay cientos de glifos e íconos que deben considerarse para un conjunto completo; no podrá recordarlos todos sin algún material de referencia..

Sé duro contigo mismo durante la fase de planificación. No tenga miedo de decir no a una idea o de eliminar la lista, ya que puede volverse ridículamente rápido. La creación de íconos de calidad requiere mucho tiempo y la creación de un conjunto de 5000 (por ejemplo) no solo llevará una eternidad, también es difícil para el usuario final administrar.

Durante los 4 meses que tardé en crear Uicons, me encontré constantemente eliminando y agregando a la lista hasta el lanzamiento. Incluso ahora, sigo pensando en qué iconos incluir en la próxima versión.


Paso 4: Diseño

Ahora debes tener tu lista llena de ideas para tus íconos de kick ass. Ahora estás listo para comenzar a diseñar.

Durante las fases 2 y 3 decidiste el estilo de tu icono. Su estilo específico afectará la aplicación o el método que use para hacer sus íconos..

En el caso de Uicons, estaba creando íconos escalables (vectores), que los usuarios podían cambiar de tamaño sin pérdida de calidad. La mayoría de los diseñadores utilizan Illustrator u otras aplicaciones de gráficos vectoriales, sin embargo, un programa vectorial puede dificultar su vida si está creando iconos de píxeles dibujados a mano. Elige la aplicación adecuada para el trabajo.

Ahora, cuando digo "inspiración", no me refiero al "plagio". Hazlo tuyo.

Los iconos son formas básicas dispuestas para hacer algo reconocible. Puede ser difícil imaginar todos sus iconos y visualizarlos desde cero. Afortunadamente, tienes la investigación que hiciste en la fase 1 y estás en posesión de una lista de puntos de referencia para inspiración visual.

Es bueno jugar con ideas de diseño alternativas para tus íconos. Hay varias formas de representar una tienda, representar herramientas, representar cualquier cosa. Ser creativo. Además de ofrecer una presentación estándar del tema de su ícono, intente ofrecer una nueva perspectiva. Si todos los diseñadores de iconos presentaran las mismas ideas de la misma manera, el mundo de la interfaz de usuario sería bastante aburrido..

El hecho de que hayas diseñado algo no significa que tenga que hacer el corte final. Sé selectivo sobre lo que terminas liberando al público. En el caso de Uicons, alrededor del 10% de los iconos se dejaron en el piso de la sala de corte por una razón u otra..

La fase de diseño es obviamente la fase que más tiempo consume en todo el proyecto, por lo que es importante tener resistencia, poder de permanencia y consistencia..


Paso 5: Continuidad

No es realmente una fase dedicada, sino un enfoque primordial para su conjunto de iconos. En todos los puntos durante el proceso de diseño, debe ser consciente de mantener su conjunto de iconos consistente en estilo y apariencia. Si no está demasiado preocupado por la consistencia durante el proceso, la continuidad se convertirá en una fase dedicada a medida que revise todos los iconos de su estilo al final..

La mala atención a la consistencia puede llevar a pesos desiguales, tamaños incorrectos, perspectivas equivocadas o simplemente equivocadas. Después de cada ícono, retroceda un paso y vea cómo encaja con los que ya ha creado. Puede ser fácil elegir el que está fuera.


Paso 6: Entrega

Es posible que haya elegido entregar su conjunto de iconos en un formato vectorial como .EPS, .AI o .SVG, en cuyo caso ha eliminado una parte del trabajo del proceso. Puede ser incluso más inteligente y elegir liberar sus iconos como un archivo de fuente o como un archivo .CSH. Cualquiera de estas opciones hará que un diseñador experimentado, como su ícono, se fije aún más. Recorrer este camino requiere un poco más de esfuerzo, ya que tendrá que convertir sus íconos de Illustrator a otro formato, pero el trabajo adicional ofrece enormes ventajas..

Debido a mi punto de diferencia al diseñar Uicons, tenía un poco más de trabajo por delante en esta etapa. Mi deseo era crear iconos vectoriales de múltiples capas que fueran píxeles perfectos. Podría haber hecho lo de capas múltiples en Illustrator y dejarlas así para que las personas las copien y las peguen en Photoshop, pero quería vectores de píxeles perfectos en un programa de trama..

Photoshop es impresionante. Es decir, hasta que empieces a crear iconos. Por muchas buenas razones, Photoshop permite variaciones en el ancho de píxel. Puede tener medio píxel o incluso dos tercios si lo desea. Anti-aliasing como se llama, es ideal para fuentes y curvas de Bézier, pero puede frustrar cuando se trata de crear iconos de píxeles perfectos..

Uicons requirió importar múltiples formas vectoriales independientemente de Illustrator a Photoshop, alinearlas, cambiarles el tamaño y el estilo, y luego optimizarlas para la perfección de píxeles empujando las rutas incremento por incremento para terminar con bordes limpios.


Paso 7: Distribución

¡Felicidades por haber llegado tan lejos! No es una tarea fácil crear tu propio conjunto de iconos. Ahora que se ha realizado todo el trabajo duro, solo necesita lanzar sus iconos al público. En este punto, ya ha decidido si está ofreciendo esto como un conjunto de iconos gratuito para la comunidad de diseño o si desea un pequeño reembolso por las cientos de horas que ha pasado creando su conjunto de iconos asesino.

De cualquier manera, necesitas un escenario para que la gente pueda ver y descargar. La opción gratuita es la más fácil, ya que, literalmente, puede enviarlos a un grupo de sitios de recursos gráficos y blogs para publicarlos, sentarse y esperar las felicitaciones..

Sin embargo, si desea vender el conjunto de iconos de su asesino, tiene más trabajo por delante. La forma más fácil de venderlos es alojarlos en uno de los varios sitios de recursos de diseño como GraphicRiver. La descarga y el pago están a su cargo y usted tiene la ventaja del tráfico existente en su sitio..

Si es más proactivo, otra opción es crear su propio sitio web para mostrar y descargar sus íconos con precios modestos. Si este es el caso, hay excelentes opciones que lo ayudarán a encargarse de la descarga y el pago de las cosas..

Los servicios de entrega digital como Fetch y Quixly hacen que sea muy fácil vender su conjunto de íconos al encargarse del pedido, la descarga y el pago de las cosas. Solo necesitas diseñar y construir un sitio genial para mostrar tu trabajo. Todo lo pesado de la tecnología está a cargo..


Conclusión

La iconografía como cualquier lenguaje visual debe ser clara y concisa. Lo que sea que intente representar con íconos es simple y claro, y sus posibilidades de comprensión universal serán mayores.