Ticketmaster Style Guide 2018

Date: May 2018
My Role: UI Designer

In May 2018, Ticketmaster launched their new brand style guide and asked the design team to implement it immediately into our existing products. Prior to the update, my team used Google Material Design as our product guide. The new guide changes included brand color updates, font, button sizes, and a new grid system to work with.

The fully updated guide can be viewed Here

 

New Grid Guidelines

We updated the grid to allow 16px gutters and margins on mobile, and 24px gutters and margins on desktop.

One challenge was designing our “right rail” for the Virtual Venue desktop experience. We had to change the size of our first iteration from 400px in width, to 354px in width to accommodate the new grid, and make life easier for the development team.


Buttons, Icons, Font

Our Font changed from Roboto to Averta with the update. Input fields changed from Google Material “lines” to the new Tm “boxes”. Also, buttons changed from static, set sizes, to dynamic based on the text being used.

 


 

Line Spacing

Some minor changes to the line spacing to be used, replacing prior numbers we used before (10px, 15px, 20px, 30px, etc…)

 

Screen Shot 2018-09-18 at 10.46.37 AM

 

styleguide

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s