UX and UI Design Guidelines

INTRODUCTION

The following guidelines will help you design and build a successful app to help enhance and heighten the fantasy experience for millions of fantasy players.

BASICS

Our intention here isn't to bog you down with a slew of restrictions. That being said, there are some hard and fast do's and don't's that we need to establish to make sure your app is compatible with our site and ensures a positive experience for the user, who is both our customer and yours. We'll cover those ground rules upfront in the next section.

Beyond that, think of these design guidelines as general suggestions and recommendations. Just keep in mind, the more your app can leverage our APIs and create a custom and smooth user experience, the better.

GROUND RULES

• Do not create any app or content that relates to or engages in any form of gambling.
• No pornography, profanity, or other material that could be deemed offensive.
• Do not include any advertising in your apps.
• Do not include any content, logos, or images that you don't own the rights to (We're looking out for you here — It's no fun to receive a cease and desist letter from someone who's content you've used without permission).
• Do not use and/or incorporate the CBS or CBSSports.com logos or any derivative, abbreviation and/or modification of such logos anywhere in your app. For more details concerning branding and promoting your app(s), please review the App Branding and Marketing Guidelines document.

A PERFECT FIT

The app you create should be less than the iframe width (790 px) to prevent horizontal scrolling.

GO EASY ON THE EYES

Since your app will display within an iframe on CBSSports.com, it's a good idea to use fonts and colors that complement our site. We know you may want to use colors and/or fonts that represent your own brand so we won't give you specifics. You'll get a feel for what looks right after spending some time browsing our fantasy leagues.

Also, we tend to use dark text on light backgrounds on CBSSports.com. It's recommended that you do the same so people won't have to adjust their eyes when going from a page in their league to your app and back.

LESS IS MORE

Please try and limit the amount of navigation elements. Because the iframe will live within our own products—which already have a fair amount of their own navigation— adding even more navigation could be confusing and distracting.

CONSERVE VALUABLE REAL ESTATE

While you are allowed to add brand elements at the top of your app, using your brand color, logo, and typography, we feel this may be unnecessary because your app logo and app name will appear on the page. Not only that, but you would be pushing the content further down the page.

Your app name and logo appear in the tab above your app.

If your own branded area is necessary, it should be no higher than 50 pixels.

UPWARD MOBILITY

There is a mobile version of CBSSports.com but many people also view the full site on their mobile device. While it may not be practical to completely optimize your app for all mobile browsers, it'd be a good idea to be aware of how your app looks when accessed from a mobile browser.

LINK BEHAVIOR

Strive to make your app a complete experience and limit external linking. Links that promote other sites and/or products off of CBSSports.com should not be included. Only links that apply to the app and help enhance the user experience —such as a Twitter or Facebook share-style link in a "smack talking" app — should be considered.

External links should always be secondary, not primary app navigation. When including them, make it clear that this is an external link to ensure the user expects a new browser to open and that they are leaving the site.

Whenever possible, we recommend linking player names to the respective player's page within fantasy leagues on CBSSports.com. The same goes for team names linking to team pages. This will help your app feel like a seamless extension of CBSSports.com

IT'S HIP TO BE SQUARE

First impressions count. Since your application logo is the first thing users will see of your app, make it count. This is an area you might want to give extra special attention.

When choosing a color for your app logo, keep in mind it might appear on either a light or dark background. That's not always an easy task but we'd hate for it to miss out on the attention it deserves. Adding a subtle border in a contrasting color usually accomplishes this.

When you upload your app logo, make sure the format is a PNG file with a transparent background. That way, you'll be sure that it will look good no matter what background color we place it over. JPG logo files are not recommended.

Recommended: example of a transparent PNG logo file.

Not Recommended: example of a JPG logo file with a solid white background.

Your logo must be a perfect square, 75px x 75px. We will be resizing to 25px x 25px in some instances, so make sure your design works well when resized.

Please review the App Branding and Marketing Guidelines document for additional logo design requirements.