HTC Digital Style Guide

The creation HTC digital style guide initiated a process of defining and standardizing visual brand elements and UX patterns for HTC.com – a site that reaches consumers in over 50 countries and languages.

styleguide-photography

As the art director for the project, I was tasked with categorizing the elements that needed defining and working with designers to create clear and concise pages for each category. In some cases, we were able to simply interpret existing corporate brand guidelines for use on the web. In other areas we set about defining new standards where none existed for the unique challenges of digital media.

styleguide-logo_color

In most cases, auditing all current uses of an element – whether it be typography, colors, or call-to-action buttons – was a necessary first step. This was eye-opening in multiple ways. It helped to define the scope of our guidelines by exposing areas where standards were either nonexistent or simply misunderstood by design teams in remote locations. It also helped us to identify elements and patterns that were working well both functionally and in harmony with the brand, so that they could later be applied in other areas of the site. Pictured below is just a sampling of the almost seizure-inducing variations of homepage promotions that were live on various international sites at the time.

hp_tiles_audit

Audit of existing homepage promotions (yikes)

hp_tiles_size

Sample of guidelines for homepage promotions.

Using the corporate identity standards as our guide, paired with our expertise in digital visual and UX design, we were able to create an online style guide intended as a tool both our own internal team, but for agencies and design teams around the world to use in creating pages and marketing modules for our global and local web properties. This was effective in creating a good starting point for designers as well as vastly reducing the number of discordant messaging created by external teams.