battle.net store style guide

blizzpad2.jpg

PROCESS

I did a teardown of the Front-End UI of the Battle.net store to obtain the raw data I needed to start. I sorted the information into the major categories: Layout, Navigation, Typography, Color, and UI Elements. After finishing the sort, I wrote descriptions for how to use the elements. Finally, I arranged the guide to have visual depth by using key art distributed across Battle.net. 

After many iterations, I was ready to apply the Blizzard secret weapon: Polish. Blizzard's commitment to quality inspired me to clean up the guide to be both usable and aesthetically pleasing.


backstory

This is definitely the funnest and most heart-wrenching project I've done in a while. It definitely is a cumulation of everything I've learned up until this point, especially since it is for a company I admire.

I went through five versions of this style guide, each time stopped by an unseen anomaly, each time starting over and coming onto something better. Thankfully, the more you do things the faster you get at them. Here's a version breakdown:

  • Version 1.0  - Initial Version.
  • Version 2.0 - V1.0 File Corruption. Respawn.
  • Version 3.0 - V2.0 SSD Died, Unrecoverable. Respawn.
  • Version 4.0 - V3.0 Almost done, but found a ton more elements and rules I missed. Respawn.
  • Version 5.0 - V4.0 Finished, Polish applied.

The coolest part was that I got feedback on it from Blizzard, so it was definitely worth the effort!


lessons learned

  • The more versions, the better.
  • SAVE EARLY, SAVE OFTEN.
  • Help those that don't know what you're talking about to understand the context.
  • Polish for delivery for print and digital.
  • If you're tenacious, hope is always on the horizon.

GAllerY