Designing Yahoo’s Winter Olympics Icons
Behind the scene of Yahoo’s PyeongChang 2018 Winter Olympics icons
You may have watched some Winter Olympics games that are happening in PyeongChang. I had a chance to work together with Yahoo to create their own version of the icon that they’re using on their platform now and I’m happy to be able to share my process a bit.
Oh, by the way, PyeongChang has their own awesome icon set — However, Yahoo decided to create their own set because they need the icon works in the small size (I’m talking 20px here).
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?
The first observation I did was a thorough research where I watched lots of recorded 2014 Winter Olympics games to gain context for each sport. Not only this project is involving human figures, the icons have to be simple enough so it works on the small size and have to get the right pose to represent each sport.
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.
Yahoo have a great Design System for human figure icon in place that I use and adjust a little bit to create a guideline of the proportion and simplified anatomy as a reference.
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.
At this point, the client involved a lot in the process of discussion, giving feedback and validate my thinking behind why these are the best candidate for the final icon.
- Don’t work in a silo, keep the discussion going and get feedback often.
- Start with low-fidelity and time-box your exploration time.
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!
We ended up by utilizing tapered leg and fluid shapes to convey the movement even better. We also utilizing the whitespace to give more clarity of the action. You can see how the style start to coming along on the figure skating icon(above). We use these same principles to all icons whenever possible.
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.
Sometimes adjusting small details like the tapered leg is an easier adjustment to do on the digitalizing process.
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.
Big props for Ryan McCullah to help art directing this project and help me throughout the process with some ideas and great feedback!
I often get a question about the tools I used and in case you’re wondering about them:
- Procreate + iPad + apple pencil
- Adobe Illustrator
- Macbook pro 15"
All of the images above are the Intellectual property of Yahoo. Please do not use this without our knowledge and permission.