Designing Yahoo’s Winter Olympics Icons

Behind the scene of Yahoo’s PyeongChang 2018 Winter Olympics icons

Budi Harto Tanrim
Feb 16, 2018 · 5 min read
Image for post
Image for post

Get to know the sports

Grew up without snow whatsoever, all my life, I have no clue about winter sports. 🤡 Let me be silly for a second, I didn’t even know winter sports exist, I mean.. who would’ve expected you can do such activity with such amount of snow, right?

Image for post
Image for post

Build the fundamental

Once I have enough understanding of the sport, I start to analyze the most extreme poses for each sport — with the goal to capture the common poses that are easy enough for our brain to make a connection between the pose with the sport.

Image for post
Image for post

Capturing the pose

To give you an idea of the process, I’ll take snowboarding for an example. Normally it starts with a reference and I draw a bunch of icons very loosely and take the best options.

Image for post
Image for post
Depends on the sport, generally speaking, the best/memorable pose for our brain is when the athlete make an extreme/elegant move.
  • Start with low-fidelity and time-box your exploration time.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Style development

After we nailed the poses, Ryan (Design Director) emphasized the need for the icons to solve both utility and style with a distinguish characteristic. We shaped this style together and it’s a result of a great collaboration!

Image for post
Image for post
First draft is too monotone and not fluid. After a couple of iteration, Ryan mentioned about the fluidity we can achieve on the tapered leg (which is awesome).
Image for post
Image for post

Digitalizing

After I have the finalized sketch and Yahoo’s team is happy with the sketch, I jump to Illustrator and start digitizing them. Using almost the same technique when digitalizing typography and make sure every point are in the right pixel placement.

Image for post
Image for post
from left to right: Sketch on iPad, vectorized fill, vector check on grid placement

Final result

It took us 2 weeks to work together and complete this icon set. This icon set is currently being used in their search platform. I hope by sharing this process I can inspire some of you who love icon to start learn and make some icons.

Image for post
Image for post
We were optimizing this icon set for small size, this is the final result looks like.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Tools

I often get a question about the tools I used and in case you’re wondering about them:

  • Adobe Illustrator
  • Macbook pro 15"

Work together

I’m sorry, unfortunately, I’m not available until August 2018. If you are interested to work together in the future, we can keep in touch or just say hi to me. hello [at] buditanrim [dot] co


yellowstroke

Design ideas, product tips, icon tutorials, and stories…

Budi Harto Tanrim

Written by

Currently leading Design System and Design Practices @Bukalapak. Previously @Shopify. I’ve had an opportunity to work with Yahoo, Palantir, Marvelapp, DBS Bank.

yellowstroke

Design ideas, product tips, icon tutorials, and stories written from Budi Tanrim’s brain

Budi Harto Tanrim

Written by

Currently leading Design System and Design Practices @Bukalapak. Previously @Shopify. I’ve had an opportunity to work with Yahoo, Palantir, Marvelapp, DBS Bank.

yellowstroke

Design ideas, product tips, icon tutorials, and stories written from Budi Tanrim’s brain

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store