Ad Platform Design System

As Verizon media Ad platform grows and evolves, it’s important that the design patterns and visual style are upheld to deliver a defined and cohesive experience. In order to achieve this, we need to have a single point of reference for all the patterns we use, so that everyone internally can refer to them. We also need a shared vocabulary of UI elements and code, to allow teams to communicate with each other in the most efficient way.

Introduction

Goals

Unify

Strong robust framework across product, devices, and input methods.

Multifaceted

A versatile tool with various features and functionalities which, facilitate users needs.

Efficient

Well-organized, productive and effective, practical and smart.

Clean & Simple

Uncluttered and minimal design with a great attention to details.




Design Principles

Focused

Powerful, Actionable, Multifaceted

Simple

Intuitive, Efficient, Human

Crafted

Clean, Modern, Elegant

UI elements

Iconography

Icons





UI elements

Components

Button

Button triggers a single action in a task flow. There are three types of button styles: primary, secondary and tertiary button. Use these in different combinations to guide users to continue and complete tasks.


Tab

Tabs are an easy way to organize content by grouping similar information on the same page. This allows content to be viewed without having to navigate away from that page.


KPI Bar

A key performance indicator (KPI) can be displayed as a single value, non-interactive chart. These charts are typically used as supplemental info in a case.


Drag & Drop

Drag and drop involves moving selected content from a source location to a destination. Drop Zones visually indicate to users where they may drag and drop components onto a page.





UI elements

Data Visualization

Gauge Chart

Gauges depict a percent difference between two timeframes for a single dimension using a single KPI, or the status of a single data point between the delivered values of the expected value.

Bubble Chart

GEO

Delivery elements

Delivery system

Our brand palette has three primary colors, red, black and white, which are used in the majority of Verizon Media communications.
Secondary colors serve as accent colors to highlight key information in communications. Our grays are used in very limited ways in print and digital.

PDF version

Application version