Design af Yahoos vinter-OL-ikoner

Bag scenen med Yahoos PyeongChang vinter-OL-ikoner 2018

Du har måske set nogle vinter-OL-spil, der sker i PyeongChang. Jeg havde en chance for at arbejde sammen med Yahoo for at oprette deres egen version af ikonet, som de bruger på deres platform nu, og jeg er glad for at kunne dele min proces lidt.

Åh, forresten, PyeongChang har deres eget fantastiske ikon-sæt - Yahoo besluttede dog at oprette deres eget sæt, fordi de har brug for ikonet fungerer i den lille størrelse (jeg taler 20px her).

Lær sporten at kende

Opvokset uden sne overhovedet, hele mit liv, jeg har ingen anelse om vintersport. Lad mig være fjollet et øjeblik, jeg vidste ikke engang, at der findes vintersport, jeg mener .. hvem havde forventet, at du kan udføre sådan aktivitet med en sådan mængde sne, ikke?

Anywho ...

Den første observation, jeg gjorde, var en grundig undersøgelse, hvor jeg så masser af indspillede vinter-OL 2014-kampe for 2014 for at få kontekst for hver sport. Ikke kun dette projekt involverer menneskelige figurer, ikonerne skal være enkle nok, så det fungerer på den lille størrelse og skal få den rigtige position til at repræsentere hver sport.

Byg det grundlæggende

Når jeg først har forstået sporten, begynder jeg at analysere de mest ekstreme indstillinger for hver sportsgren - med det mål at fange de fælles holdninger, der er lette nok til, at vores hjerne kan skabe en forbindelse mellem posituren med sporten.

Yahoo har et fantastisk designsystem til ikon for menneskelig figur, som jeg bruger og justerer lidt for at skabe en retningslinje for andelen og forenklet anatomi som reference.

At fange posituren

For at give dig en idé om processen, tager jeg et snowboard som et eksempel. Normalt starter det med en henvisning, og jeg tegner en masse ikoner meget løst og tager de bedste muligheder.

Afhængigt af sporten generelt er den bedste / mindeværdige position for vores hjerne, når atleten foretager et ekstremt / elegant træk.

På dette tidspunkt involverede klienten meget i diskussionsprocessen, gav feedback og validerede min tænkning bag hvorfor disse er den bedste kandidat til det endelige ikon.

Hurtige tip:

  • Arbejd ikke i en silo, hold diskussionen igang og få ofte feedback.
  • Start med lavtidelighed og tidsboks din efterforskningstid.

Udvikling af stil

Efter at vi havde neglet poserne, understregede Ryan (designdirektør) behovet for ikonerne til at løse både nyttelighed og stil med en kendetegn. Vi formede denne stil sammen, og det er et resultat af et fantastisk samarbejde!

Første udkast er for ensformigt og ikke flydende. Efter et par iterationer nævnte Ryan om den fluiditet, vi kan opnå på det koniske ben (hvilket er fantastisk).

Vi endte med at bruge koniske ben- og væskeformer til at formidle bevægelsen endnu bedre. Vi bruger også hvidområdet til at give mere klarhed om handlingen. Du kan se, hvordan stilen begynder at komme med på kunstskøjteloven (ovenfor). Vi bruger disse samme principper til alle ikoner, når det er muligt.

digitalisere

Når jeg har fået den afsluttede skitse, og Yahoos team er tilfreds med skitsen, springer jeg til Illustrator og begynder at digitalisere dem. Brug næsten den samme teknik, når du digitaliserer typografi, og sørg for, at hvert punkt er i den rigtige pixelplacering.

Undertiden er justering af små detaljer som det koniske ben en lettere justering at gøre på digitaliseringsprocessen.

fra venstre til højre: Skitse på iPad, vektoriseret udfyldning, vektorkontrol på gitterplacering

Endelig resultat

Det tog os to uger at arbejde sammen og færdiggøre dette ikonsæt. Dette ikonsæt bruges i øjeblikket i deres søgeplatform. Jeg håber, at jeg ved at dele denne proces kan inspirere nogle af jer, der elsker ikonet, til at begynde at lære og lave nogle ikoner.

Store rekvisitter til Ryan McCullah at hjælpe kunst med at dirigere dette projekt og hjælpe mig gennem processen med nogle ideer og gode feedback!

Vi optimerede dette ikonsæt til lille størrelse, det er det endelige resultat, der ser ud.

Værktøj

Jeg får ofte et spørgsmål om de værktøjer, jeg brugte, og i tilfælde af at du spekulerer på dem:

  • Procreate + iPad + æbleblyant
  • Adobe Illustrator
  • Macbook pro 15 "

Arbejde sammen

Beklager, desværre er jeg ikke tilgængelig før august 2018. Hvis du er interesseret i at samarbejde i fremtiden, kan vi holde kontakten eller bare sige hej til mig. hej [hos] buditanrim [dot] co

Mit ikonsæt: budicon.co
Dribbble: dribbble.com/buditanrim
Twitter: twitter.com/buditanrim

Alle billederne ovenfor er Yahoos intellektuelle ejendom. Brug ikke dette uden vores viden og tilladelse.