Diseño de los íconos de los Juegos Olímpicos de Invierno de Yahoo

Detrás de la escena de los íconos de los Juegos Olímpicos de Invierno PyeongChang 2018 de Yahoo

Es posible que hayas visto algunos juegos de los Juegos Olímpicos de Invierno que están sucediendo en PyeongChang. Tuve la oportunidad de trabajar junto con Yahoo para crear su propia versión del icono que están utilizando en su plataforma ahora y estoy feliz de poder compartir un poco mi proceso.

Ah, por cierto, PyeongChang tiene su propio conjunto de iconos impresionante. Sin embargo, Yahoo decidió crear su propio conjunto porque necesitan que el icono funcione en tamaño pequeño (estoy hablando de 20 píxeles aquí).

Conozca los deportes.

Crecí sin nieve en absoluto, toda mi vida, no tengo idea de los deportes de invierno. Déjame ser tonto por un segundo, ni siquiera sabía que existían los deportes de invierno, quiero decir ... ¿quién hubiera esperado que pudieras hacer tal actividad con tanta nieve, verdad?

De todos modos ...

La primera observación que hice fue una investigación exhaustiva en la que vi muchos juegos de los Juegos Olímpicos de Invierno 2014 grabados para ganar contexto para cada deporte. No solo este proyecto involucra figuras humanas, los íconos tienen que ser lo suficientemente simples para que funcionen en el tamaño pequeño y deben tener la postura correcta para representar cada deporte.

Construye lo fundamental

Una vez que tengo suficiente comprensión del deporte, empiezo a analizar las posturas más extremas para cada deporte, con el objetivo de capturar las posturas comunes que son lo suficientemente fáciles para que nuestro cerebro haga una conexión entre la pose con el deporte.

Yahoo tiene un gran sistema de diseño para el icono de la figura humana que utilizo y ajusto un poco para crear una guía de la proporción y la anatomía simplificada como referencia.

Capturando la pose

Para darle una idea del proceso, tomaré el snowboard como ejemplo. Normalmente comienza con una referencia y dibujo un conjunto de iconos muy libremente y tomo las mejores opciones.

Dependiendo del deporte, en general, la mejor / memorable pose para nuestro cerebro es cuando el atleta hace un movimiento extremo / elegante.

En este punto, el cliente se involucró mucho en el proceso de discusión, dando retroalimentación y validando mi pensamiento detrás de por qué estos son el mejor candidato para el ícono final.

Consejos rápidos:

  • No trabaje en un silo, continúe la discusión y reciba comentarios a menudo.
  • Comience con baja fidelidad y cronometra su tiempo de exploración.

Desarrollo de estilo

Después de clavar las poses, Ryan (Director de Diseño) enfatizó la necesidad de que los íconos resuelvan tanto la utilidad como el estilo con una característica distintiva. Dimos forma a este estilo juntos y es el resultado de una gran colaboración.

El primer borrador es demasiado monótono y no fluido. Después de un par de iteraciones, Ryan mencionó sobre la fluidez que podemos lograr en la pierna cónica (lo cual es increíble).

Terminamos utilizando patas cónicas y formas fluidas para transmitir el movimiento aún mejor. También utilizamos el espacio en blanco para dar más claridad a la acción. Puedes ver cómo el estilo comienza a aparecer en el icono de patinaje artístico (arriba). Utilizamos estos mismos principios para todos los iconos siempre que sea posible.

Digitalizando

Una vez que tengo el boceto finalizado y el equipo de Yahoo está contento con el boceto, salto a Illustrator y empiezo a digitalizarlos. Usando casi la misma técnica al digitalizar la tipografía y asegúrese de que cada punto esté en la ubicación correcta de píxeles.

A veces, ajustar pequeños detalles como la pata cónica es un ajuste más fácil de hacer en el proceso de digitalización.

de izquierda a derecha: boceto en iPad, relleno vectorizado, verificación de vectores en la colocación de la cuadrícula

Resultado final

Nos llevó 2 semanas trabajar juntos y completar este conjunto de iconos. Este conjunto de iconos se está utilizando actualmente en su plataforma de búsqueda. Espero que al compartir este proceso pueda inspirar a algunos de ustedes que aman los íconos para comenzar a aprender y hacer algunos íconos.

¡Grandes apoyos para que Ryan McCullah ayude al arte a dirigir este proyecto y me ayude durante todo el proceso con algunas ideas y excelentes comentarios!

Estábamos optimizando este conjunto de iconos para tamaño pequeño, este es el resultado final.

Herramientas

A menudo recibo una pregunta sobre las herramientas que utilicé y en caso de que te preguntes sobre ellas:

  • Procreate + iPad + lápiz de manzana
  • Ilustrador Adobe
  • Macbook pro 15 "

Trabajar juntos

Lo siento, lamentablemente, no estoy disponible hasta agosto de 2018. Si está interesado en trabajar juntos en el futuro, podemos mantenernos en contacto o simplemente saludarme. hola [en] buditanrim [punto] co

Mi conjunto de iconos: budicon.co
Dribbble: dribbble.com/buditanrim
Twitter: twitter.com/buditanrim

Todas las imágenes anteriores son propiedad intelectual de Yahoo. No utilice esto sin nuestro conocimiento y permiso.