página-web-pasos-mejor-diseño-íconos

Este artículo discute un guía de seis pasos para diseñar íconos para páginas web. Los pasos siguen los principios básicos de consistencia, legibilidad y claridad. Estos pasos deben ser vistos como un guía, no una guía dogmática. Parte de ser un buen diseñador es aprender a romper las reglas y luego seguirlas.

En esta segunda parte, seguiremos el paso número dos hasta el final de la guía.

Empieza con figuras geométricas simples

Empieza tus diseños de íconos dibujando las figuras principales con círculos, rectángulos y triángulos simples. Aun si un ícono terminará siendo el más orgánico, empieza con las herramientas de forma en Adobe Illustrator. Cuando se trata de crear íconos, en especial para pantallas pequeñas, las modificaciones ligeras en los bordes que resultan del dibujo a mano crean una apariencia menos refinada. Empezar con formas formas geométricas básicas hará que los bordes sean más precisos (en especial en las curvas) y te permitirá ajustar la escala relativa de los elementos dentro de un diseño con rapidez, al igual que asegurar que sigas la cuadrilla y la forma.

imagen (Aquí tienes algunas figuras geométricas, dos triángulos y dos elipses que crean el ícono del corgi.)

Por números: bordes, líneas, esquinas, curvas y ángulos

Sin buscar que el diseño luzca mecánico o aburrido, las esquinas, curvas y ángulos deben ser matemáticamente precisos. En otras palabras, sigue los números y no trates de medir, a la vista, estos detalles. La inconsistencia en estos elementos puede dañar la calidad de un ícono.

Ángulos

En la mayoría de los casos, quédate con un ángulo de 45 grados, o varios, a partir de ese ángulo. Crea un antialiasing en un ángulo de 45 grados (los píxeles activos quedan alineados de extremo a extremo) para que el resultado sea definido y el diagonal perfecto de este ángulo sea un patrón fácilmente reconocible, algo que al ojo humano le gusta mucho. Este patrón reconocible crea consistencia en un set y unidad de íconos dentro de un solo ícono. Si tu diseño dictamina que debes romper esta regla, intenta hacerlo en mitades ( 22.5 grados 11.25 grados, etcétera) o en múltiplos de 15 grados. Cada situación es diferente, así que decide en cada caso. El beneficio de usar mitades de 45 grados es que cada paso en el antialiasing seguirá siendo igual.

imagen ( Acercamiento de antialiasing regular de ángulos de 45 grados.)

Curvas

Una de las áreas más notables que pueden degradar la calidad de un ícono y que puede significar la diferencia entre curvas profesionales y de mala calidad. Considerando que a la vista humana puede detectar mínimas variaciones de precisión, la coordinación mano-ojo no siempre puede lograr un buen nivel de precisión. Confía en las herramientas de formas y números para crear todas las curvas posibles en lugar de dibujarlas a mano.

imagen (Las esquinas dibujadas a mano producen resultados inferiores.)

Como vemos en la imagen «anterior» de arriba, las líneas dibujadas a mano crean curvas irregulares y eso daña la calidad del diseño.

imagen (Estas curvas muy precisas fueron creadas usando las herramientas bezier de Illustrator en lugar de manualmente.)

Esquinas

El valor común de una esquina redonda (o circunferencia) es de 2 píxeles. En un ícono de 32 x 32 píxeles, una circunferencia de 2 píxeles es lo suficientemente grande para ser visto como redondo, pero no suaviza las esquinas como para cambiar la personalidad del diseño (dando esa apariencia «burbujeante»). El valor que escojas dependerá de la personalidad que desees brindar al diseño. Ya sea que uses esquinas redondeadas, es una decisión estética que se debe tomar considerando todas las características del set.

imagen (Esquinas redondeadas con precisión.)

Habiendo empezado con formas geométricas, ahora hemos añadido un contorno de 2 píxeles, demostrando cómo las herramientas de formas, junto con la consistencia en detalles como las esquinas redondeadas, están mejorando el diseño.

imagen (El progreso hasta ahora.)

Esta versión mejorada muestra el punto esencial del nuevo diseño, con esquinas redondeadas a la perfección, curvas parejas y una base para los pesos de las líneas alrededor de las orejas.

Pesos de líneas

Cuando se trata de pesos de líneas, dos son ideales, pero tres son, algunas veces, necesarias. El objetivo es brindar jerarquía visual y variedad sin introducir mucha variedad y, por lo tanto, destruir la consistencia. Más de tres y un set pueden perder la cohesión. El beneficio de pesos de líneas de 2 y 4 píxeles que son múltiplos de 2 y, por lo tanto, escalan con facilidad. En la mayoría de los casos, evita líneas delgadas, en especial con glifos e íconos planos. A menos que crees, deliberadamente, íconos con «estilos de líneas», confía en la luz y las sombras en lugar de líneas para definir formas.

imagen (Este ícono de iPhone demuestra los pesos consistentes de línea.)

Usa elementos de diseño consistentes y acentos

Hemmo de Jonge de Dutch Icon brindó una brillante charla en Icon Salon 2015 en donde habló largo y tendido sobre este aspecto del diseño de íconos. En su proyecto de sistemas de íconos que ya lleva dos año para el gobierno holandés. Hemmo y sus socio de diseño incorporaron una marca en cada uno de lo íconos. No todos los íconos tienen la marca, pero la mayoría lo tienen. Este tipo de acento, usado con moderación, pero consistencia, en un conjunto de íconos, puede unir todo el set.

imagen (El uso de elementos de diseño comunes.)

En nuestro ejemplo del perro, se empleó un elemento de estilo común con la nariz en forma de corazón. La peculiaridad visual se usar un corazón en lugar de una nariz no solo une los íconos, sino también añade un elemento extravagante y comunica una afección para nuestros amigos de cuatro patas.

imagen (El uso de elementos de diseño común con los íconos de los perros.)

En muchos casos, incluso el los aspectos importante de un set de íconos son cambiados —el estilo, por ejemplo—, los elementos que crean la unidad estética pueden seguir unidos, como se ve abajo. Hemos recreado los mismos tres íconos en un estilo glifo en lugar de un estilo plano y siguen siendo consistentes en estética.

imagen (El uso de elementos de diseño común en nuestro íconos de perros, pero un estilo diferente.)

Usa detalles y decoraciones con moderación

Los íconos deben comunicar un objeto, idea o acción. Muchos detalles pequeños presentarán complejidad, lo que puede hacer que los íconos sean menos reconocibles, en especial en tamaños pequeños. El nivel de detalle que incluyes en un solo ícono o conjunto de íconos también es un aspecto importante de la unidad estética y reconocimiento. Una buena regla para determinar el nivel adecuada de detalles en un ícono o conjunto de los mismos es incluir la cantidad mínima de detalles necesarias para hacer que el significado sea claro.

imagen (Los detalles mínimos comunican lo que es el objeto.)

En la versión de arriba, estamos cerca a nuestro diseño mejorado. Los contornos negros alrededor de las orejas se han convertido en un área marrón cubierta de piel alrededor de las orejas. Las líneas negras al contorno de la cara desaparecieron, pero aún son detectables en el espacio de 2 píxeles encima de la marca blanca en la cara del corgi. Sin embargo, nota que seguimos teniendo algunos elementos de la versión «anterior», como la nariz plana.

Haz que sea único

El número de diseñadores talentosos que están creando sets de íconos de buena calidad, mucho de los cuales están disponibles gratis, parece están creciendo cada día. Desafortunadamente, muchos de estos diseñadores confían demasiado en tendencias o estilos de los diseñadores más populares. Como profesionales creativos, debemos ver fuera de la industria de los íconos, hacia la arquitectura, tipografía, diseño industrial, psicología, naturaleza y cualquier otro área donde se pueda encontrar inspiración. Ya que muchos sets de íconos lucen similar estos días, hacer nuestros diseños únicos es más importante que nunca.

imagen (La nariz en forma de corazón en la corgi hace que este ícono sea único y personal.)

En la imagen «después», tenemos un toque único en la nariz en forma de corazón que añade un toque de novedad y luz al diseño.

Estos pasos deben ser vistos como un punto de inicio, no una guía definitiva. No existe una forma definitiva para crear íconos. En este artículo, te presentamos lo básico de un enfoque consistente hacia el diseño, pero otros diseñadores tienen sus propias opiniones y técnicas. La mejor forma de ser un mejor diseñador es mirar las referencias posibles, leer mucho material, dibujar con constancia (cargar un libro de dibujo) y practicar, practicar y practicar.

imagen (La imagen de la izquierda muestra el ícono original. La imagen de la derecha muestra el ícono rediseñado, lo que complementa los principios de este artículo.

Este artículo fue originalmente publicado en Smashing magazine, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!

Deja una respuesta