Opta: Widget Style Guide by Asis Patel

Widget Style Guide Suitable for US and V3 Widgets

Last Update: 19 Nov 15

About This Document

Basic Rules This document offers detailed explanation about the design process behind each element. Ideally, you should be able to take these rules and build any widget. However, a common problem with Opta’s widgets is that there are many edge cases. Meaning there are many exceptions to these rules. Please use this document as a guide, but refer to the “Examples” document to see exact rules about specific elements.

Sizes All sizes in this documents are stated in Pixels (px) or Percentages (%). Any pixel measurements are taken from the @1x designs, where the screen resolution is 72dpi. Meaning for high resolution screens these measurements may need to be increased.

Last Update: 19 Nov 15

Contents

Keep It Simple..............................................p4 Colours.........................................................p5 Type..............................................................p10 Hover States.................................................p17 Spacing........................................................p19 Mobile Style Sheet Changes........................p24 Tables...........................................................p26 Stats.............................................................p31 Navigational Elements..................................p35 Buttons.........................................................p38 Tooltip...........................................................p39 Crests, Player Images and Icons.................p40

Last Update: 19 Nov 15

Keep It Simple

Basic Rules In order to keep the CSS to a minimum we’ve designed with the basics in mind. Anything that adds extra unnecessary CSS should be avoided. We’ve chosen to leave out the frills so our customers can build on top of our simplistic designs, meaning they don’t have to overwrite lots of rules that don’t match their brand. Here are some core principals, for example: • No rounded corners, simple square edges. • No drop shadows • No custom fonts, Arial, San-serif only.

Text

TEXT

• No capitalised text, keep it the same as the feed provides it. • Avoided borders, light background colours instead. • Limit the colour pallet, only use our select colours.

Last Update: 19 Nov 15

Colours

Simplifying the colour pallet We’ve tried to evolve the colour pallet by simplifying the range of colours, bringing meaning to the use of colour and standardising each hex value. For example the V2 hex, #F1F2F2 now becomes #F2F2F2 in V3. Where possible we’ve considered the WCAG Compliance Ratings. Ensuring all text is at least AA compliant. Here is our reference tool: http://snook.ca/technical/colour_contrast/colour.html Because the combination of White and Opta Blue isn’t compliant, we’ve tried to reduce the use of these colours together to a minimum. However there are some instances that this still occurs to make the product feel part of out brand. If we were to be 100% colour compliant, the entire pallet become a lot darker. As a compromise, we use the WCAG Ratings as a guide and have limited the main colours to shares of Opta Blue, and shades of Grey only.

Last Update: 19 Nov 15

Colours - Main Colours Blues Blues are used to highlight titles and UI elements that are ‘active’. The blue is only used to highlight the most important information.

Greys Greys are used for all other elements. This means attention isn’t drawn to secondary elements. Also helping the blues stand out.

Team Colours Because individual team colours can’t be defined via the feeds, there is one Home and one Away Team Colour. These need to be used whenever there is reference to a home/away team. If the team is neutral, Opta blue will be used instead.

Title Blue

#0D5F78

Active Blue

#117EA9

Opta Blue

#00AEEF

Text Grey

#404040

Dark Background

#5C5C5C

Sub-Text Grey

#808080

Table Title Background

#CCCCCC

Inactive Grey

#E6E6E6

Light Background

#F5F5F5

White

#FFFFFF

Home Team

#02A6A6

Away Team

#215454

Last Update: 19 Nov 15

Colours - Blues Blues in use

Title Blue (1) #0d5f78

Blues are used rarely to highlight key elements only. Title Blue: Used as a background colour for titles. The text colour will always be white.

Active Blue (2) #117ea9

Narrow Mode

Opta Blue (3) #00aeef

Normal Mode

(using mobile style sheet)

(using desktop style sheet)

Active Blue: Used for any active elements. E.g. current tab, selected option from a drop down etc. Opta Blue: Used for Widget Title background, buttons, links, graphs that do not show a home or away team.

Last Update: 19 Nov 15

Colours - Greys Greys in use Greys are used for the majority of the elements, in order to not draw attention to secondary UI elements. Text Grey: Primary text is always this colour (or white).

Text Grey (1) #404040

Dark Back/g (2) #5c5c5c

Narrow Mode

Sub-Text Grey (3) Table Title B/g (4) #808080 #cccccc

Inactive Grey (5) #e6e6e6

Light Back/g (6) #f5f5f5

White (7) #ffffff

Normal Mode

(using mobile style sheet)

(using desktop style sheet)

Dark Background: the background colour for elements that need to be highlighted, but arenâ&#x20AC;&#x2122;t a title or active. Sub-Text Grey: Text colour for secondary information. Table Title Background: Table header background.

1 text, 5 back

5 1 text, 5 back

Inactive Grey: Used for inactive elements, but when/if clicked it would become active. E.g., other tabs.

Light Background: Used as a general background colour to define an elements area. Also alternated with white as the background for tables and rows of data. White: Used as a text colour and background colour for alternate rows.

5 7

Last Update: 19 Nov 15

Colours - Teams The home and away teams should only be represented by these two colours: #02A6A6 for home teams and #215454 for away teams. This is so that stats/graphs can be coloured in the ‘Home Team’ or ‘Away Team’ colour and the user will understand the context. Rather than having a key to explain this, the scoreboard will highlight each score in a coloured square. The center “V” will also be contained within a square, but the background will be white. Only the main score would be formatted in this way. For example, the Preview widget shows previous fixtures for both teams. Highlighting other home/away teams would lead to confusion.

Home Team

#02A6A6

Away Team

#215454

Normal Mode

(using desktop style sheet)

Narrow Mode

(using mobile style sheet)

Last Update: 19 Nov 15

Type

Type overview The majority of text follows two styles either: Title Copy or Body Copy (see General Rules). There should always be a valid reason when including additional sizes and styling changes. There are several edge cases where additional rules are required which we describe over the next couple of pages. All typography cases must follow these rules: â&#x20AC;˘ Fonts are either Arial or Arial Bold â&#x20AC;˘ Sizes increase slightly on mobile (usually by 2px)

Last Update: 19 Nov 15

Type - General These two categories define the majority of text that appears with in all widgets.

Title Copy (1) Always bold. Either 14px for desktop or 16px for mobile. Found in the following situations:

Narrow Mode

Normal Mode

1 16px

1 14px

(using mobile style sheet)

(using desktop style sheet)

2 12px

2 14px

• Widget Title (e.g. “Player Comparison-Prem...”) • Section Titles (e.g.. Attack, Defence, Distribution, General etc.)

1 16px

2 14px

• Graph Titles

Body Copy (2)

2 12px

Always regular. Either 12px for desktop or 14px for mobile. Found in the following situations:

2 12px

• Body Copy • Tabs • Buttons • Table Headers • Table Content

Mobile CSS

Desktop CSS

Title Copy: 16px Bold

Title Copy: 14px Bold

Body Copy: 14px Regular

Body Copy: 12px Regular

Last Update: 19 Nov 15

Type - Primary and Secondary This occurs normally when there are 2 separate bits of information that populate one table cell or area. The body copy rules are applied to the “Secondary Information”. “Primary information” now becomes more prominent that the body copy.

Narrow Mode

(using mobile style sheet)

Normal Mode

(using desktop style sheet)

Primary Information (1) Always regular. Either 14px for desktop or 16px for mobile. Found in the following situations: 1 • Player Names 14/16px • Team Names 2 • Tooltips 12/14px • Graph Axis Titles

Secondary Information (2) Always regular. Either 12px for desktop or 14px for mobile. Coloured “Sub-Text Grey”. Found in the following situations: • Player Names • Team Names • Tooltips • Graph Axis Units 12

Mobile CSS

Desktop CSS

Title Copy: 16px Bold

Title Copy: 14px Bold

Body Copy: 14px Regular

Body Copy: 12px Regular

Last Update: 19 Nov 15

Type - Team Names & Highlights Normal Mode

Headers Team names within the Scoreboard are often the most important information. Therefore this text should be the largest. On both mobile and Desktop, Team Names and Scores should be 20px in height.

Highlighting text (including teams)

(using desktop style sheet)

20px

Narrow Mode

(using mobile style sheet)

20px

Sometimes there is a need to highlight certain information. In this case the weight would become bold. For example, a match page refers only to the two teams. Customers might want to highlight these teams in the League Table widget on this page. Highlighted Text

Last Update: 19 Nov 15

Type - Stats Graphs and stats Graph titles: follow the rules of Title Copy. Stat titles: follow the rules of Body Copy.

Stat titles Graph titles

Axis titles: follow the rules of Primary Information, and Axis scales: follow the rules of secondary information. Big Stats: are either 28px on desktop, or 26px on mobile. These are always in Opta Blue.

Big Stats

Stat titles

Axis titles Big Stats

Axis scales

Graph titles Stat titles

Big Stats

Last Update: 19 Nov 15

Type - Stats Graphs and stats

Graph titles

Graph titles: follow the rules of Title Copy. Stat titles: follow the rules of Body Copy. Axis titles: follow the rules of Primary Information, and Axis scales: follow the rules of secondary information.

Stat titles

Big Stats

Axis titles Axis scales

Big Stats: are either 28px on desktop, or 26px on mobile. These are always in Opta Blue. Stats: follow the rules of Body Copy, but are coloured to match the bar (Opta Blue, Home Team or Away Team)

Big Stats Stat titles Stats Stats

Last Update: 19 Nov 15

Type - Other There are some other instances where custom typography is used. Custom sizes are introduced to enhance the primary information, however they donâ&#x20AC;&#x2122;t match any of the examples shown on the previous pages. These cases are rare, but when they occur the typography should be defied on a case by case basis and added to the Component Library.

Last Update: 19 Nov 15

Hover States

When text (such as player or team names) becomes links, the colour of the text will change to Opta Blue (#00AEEF). On hover this text will stay Opta Blue, but become underlined. If secondary text becomes a link, it should remain the same colour. On hover this will also underline. If an area is clickable (e.g. table headers, drop-downs, select boxes etc.) on hover the background colour will change. Because the widgets styles are build in SASS, we can use the rule, if hovered, the background becomes 10% darker.

Last Update: 19 Nov 15

Hover States Background If an area is clickable (e.g. table headers, drop-downs, select boxes etc) on hover the background colour will change. Because the widgets styles are build in SASS, we can use the rule, if hovered, the background becomes 10% darker.

Title Blue

#0D5F78

Darkened: 10%

#00465F

Active Blue

#117EA9

Darkened: 10%

#006590

Opta Blue

#00AEEF

Darkened: 10%

#1AA5D9

Dark Background

#5C5C5C

Darkened: 10%

#434343

Sub-Text Grey

#808080

Darkened: 10%

#676767

Table Title Background

#CCCCCC

Darkened: 10%

#B3B3B3

Inactive Grey

#E6E6E6

Darkened: 10%

#CDCDCD

Light Background

#F5F5F5

Darkened: 10%

#DCDCDC

White

#FFFFFF

Matches Light b/g

#DCDCDC

Home Team

#02A6A6

Darkened: 10%

#008D8D

Away Team

#215454

Darkened: 10%

#083B3B

Last Update: 19 Nov 15

Spacing

Spacing is always one of three sizes: 1px, 10px or 20px. These are defined over the next few pages. During this section itâ&#x20AC;&#x2122;s important to understand terminology of the parts that make up a Widget. Widget: a series of components. Component: a series of elements. Component examples: a set of tabs, a pitch, timeline, a table, etc. See the component library for more examples. Element: a series of atoms. Atom examples: a team name, title, an icon, a team badge, etc.

Last Update: 19 Nov 15

Spacing - Components 20px 20px Double spacing is used in between different components that make up a widget. For example, the match header and the tabs. The title is a different element to the content so it needs a double space to distinguish this.

20px exception The header of a widget is classed as a component. This example shows spacings of 20px between the Widget Header and the Content. However there the majority of cases this looks much better with 0px spacing. Unless specified, itâ&#x20AC;&#x2122;s better to have no padding between the Widget Header and the Content.

Last Update: 19 Nov 15

Spacing - Elements 10px and 1px 10px 10px is the most common space used. Itâ&#x20AC;&#x2122;s used to separate elements that make up a component.

1px This is used when it makes sense for two elements to sit next each other within a component. However, they donâ&#x20AC;&#x2122;t directly relate to each other so a small gap is needed. 1px would be suitable to separate Tabs or Accordion Titles.

Last Update: 19 Nov 15

Spacing - All All together All together the spacing looks something like this.

Last Update: 19 Nov 15

Spacing - Widget Headers Te exception to all the rules is the widget header. If you were to follow the rules from the previous pages, the header is a component. The widget content is another component. So the spacing should be 20px. However the header needs to appear more connected to the widget content.

Narrow Mode

(using mobile style sheet)

Normal Mode

(using desktop style sheet)

1px

10px

Therefore, the space between the Widget header and the first component is always 1px. Appart from, when the first component is a select box. In this case itâ&#x20AC;&#x2122;s 10px to alow the dropdowns extra space to breath.

Last Update: 19 Nov 15

Mobile Style Sheet Changes

The customer has the ability to choose if they’d prefer to use the Mobile Style Sheet or the Desktop Style Sheet. The idea for the Mobile Style Sheet is to apply minor changes the widgets. Mainly to ensure clickable areas are large enough to be clicked with a finger and text is slightly larger so it’s easier to read on a smaller screen. As well as the change in font sizes, mentioned in the typography section, several elements increase in size from being 30px in height to 45px in height. Although the heights of elements change the spacing stays the same.

Narrow Mode Changes To save space the competition names, team names and player names will be displayed differently between Narrow and Standard Modes. When in Standard Mode, the format is chosen by the customer. However Narrow Mode, player names will display in “last_name” format. Competition and team names will display in “brief” format unless the customer has chosen “abbr”.

Last Update: 19 Nov 15

Mobile Style Sheet Changes The 45 to 30 rule This is the most common rule for responsive design. If in doubt, there is a good chance a element on mobile will be 45px in height and the same element on desktop will be 30px in height. This always applies to the following:

Narrow Mode

(using mobile style sheet)

45px

Normal Mode

(using desktop style sheet)

30px

• Titles • Drop-downs • Select boxes

45px

• Table headers and rows • Checklists • Buttons

45px 30px

30px

Last Update: 19 Nov 15

Tables Normal Mode

(using desktop style sheet)

Tables form many elements in V3 widgets. Which is why the next few pages outline in greater detail the rules regarding tables.

Narrow Mode

(using mobile style sheet)

Last Update: 19 Nov 15

Tables - Style 10px spacing The 10px spacing rule is always used on table content. The heights on desktop are 30px, but on mobile they increase to 45px.

Colours The header background colour is always the Table Title Background (#CCC). The odd rows are always white. The even rows are always Light Background grey (#F5F5F5). If itâ&#x20AC;&#x2122;s possible to highlight a row, either on hover or on click, the background colour of both odd and even rows should change to be 10% darker of the even rows (#DCDCDC)

Last Update: 19 Nov 15

Tables - Text alignment Left Text Alignment Text in tables is always left aligned. The only exception to this rule is when a table is showing a list of scores, where the following should happen: Home Team: right aligned Scores / divided: central aligned Away Team: left aligned

Last Update: 19 Nov 15

Tables - Sorting Sorting columns & hover states When a table allows columns to be sorted the following rules should be adhered: 1. Default style: No header cell will be highlighted to begin with. E.g. League Tables are sorted by â&#x20AC;&#x153;Positionâ&#x20AC;? but there is no need to highlight this column because it is conventional to see it in this order. Table Title Background #CCCCCC. 2. Hover states: On hover all header cells become 10% darker in colour. Table Title Background hover #B3B3B3, Active Header hover #006590. 3. On first click: The first click should sort the column into a descending order. The colour will change to active blue #117EA9. The arrowed icon would become visible on the clicked column. The icon would be white, with the bottom arrow solid, and the top arrow 50% opaque. 4. On second click: The data would switch to a ascending order. The arrowed icon would switch opacities, meaning the bottom arrow becomes 50% opaque, and the top arrow solid.

Last Update: 19 Nov 15

Tables - Overflow Overflow becomes scrollable We often have very large tables that need to work on small mobile sized screens. When this occurs the table should become scrollable. To indicate a table is scrollable there should be a black 30% opaque gradient on the left/right edges of the table where more data is hidden. This is 5px in width. Itâ&#x20AC;&#x2122;s common the top row and the far left are used as titles. If this is the case these should remain sticky as you scroll left/right or up/down through the stats. When you reach the end of the table the gradient should disappear.

Last Update: 19 Nov 15

Stats Narrow Mode

(using mobile style sheet)

Normal Mode

(using desktop style sheet)

There are several ways to represent stats using graphs or large callout text. This section outlines the style basics for each with examples of what should be used when.

Last Update: 19 Nov 15

Tabs and Accordians Pie chart and tool tip For instances where the total/successful stats are available. This should always be shown as a success rate. And visualised in a pie chart.

Narrow Mode

(using mobile style sheet)

Normal Mode

(using desktop style sheet)

For example, if we had the following data: total passes, successful passes, uscuccessful passes. This data should be represented as â&#x20AC;&#x2DC;successful passes %â&#x20AC;&#x2122;. The number stats are still important becasue they add context. But these can be hidden underneath a tool tip, as the % makes it much easier to comapare with other stats.

Last Update: 19 Nov 15

Tabs and Accordians Single Stat Bars When showing a single stat in a bar graph, the Stat Title and Stat Number should sit 10px above the bar itâ&#x20AC;&#x2122;s self.

Narrow Mode

(using mobile style sheet)

Normal Mode

(using desktop style sheet)

The bar should be coloured in Opta Blue, and the rest of the space filled with Inactive Grey. There is a 1px white divider at the end of the blue bar.

Home / Away team Stats When comparing the home team to the away team the total of the home and away statsshould fill 100%. Each bar is coloured in Home Team or Away Team colour. As is the number that relates to that bar. The bars are divided in the middle with a 1px white divider.

Last Update: 19 Nov 15

Tabs and Accordians Big Stats Numbers Sometimes it doesnâ&#x20AC;&#x2122;t make sense to show stats in a graph. In this case, highlight the stat with large text in opta blue. With the stat title sitting below.

Narrow Mode

(using mobile style sheet)

Normal Mode

(using desktop style sheet)

Last Update: 19 Nov 15

Navigation Elements

Tabs

Accordion

Select Box

Drop down

There are several differnet types of navigation to choose from. Check the Component Library to see examples of each of these in different situations. This section explains some of the finer details of each that my not be understood by the Component Library alone.

Last Update: 19 Nov 15

Tabs and Accordians Tabs and Accordion colours

Tabs

Accordion

The background colour of the active tab/open accordion is Title Blue, with white text. This is an exception to the Active Blue rule, set in the Colour section of this document. The reason these aren’t Active Blue is that the tab/accordion is used as a title for the content it displays. Inactive tabs and accordions have Inactive Grey as their background, with the text colour Text Grey.

Tabs Overflow When you have many tabs in a small space a more button should appear. The more button is visualised as a grey square with a ‘•••’ white icon inside. Clicking on this reveals the hidden tabs in a drop down. The drop down is floated right. The width is defined by the longest tab name.

Last Update: 19 Nov 15

Select Boxes and Dropdowns Select boxes

Select Box

Drop down

<select> boxes will use the browser’s native object. This is to ensure optimum performance on a mobile devices. However the style of these native elements stands out against the rest of the widgets design. Therefore a “mask” will be provided for these to match the widget design. Clicking on this mask will trigger the <select> box.

Drop downs Open drop are styled with Active Blue backgrounds and white text.

Inactive Select Box

Inactive drop downs have Inactive Grey backgrounds, with the text colour Text Grey.

Inactive Select boxes If a select box isn’t clickable (for example, it’s the second step a the process where the user hasn’t chosen the first select box yet) the entire “mask” should become 50% opaque. This is the same style applied to inactive buttons.

Last Update: 19 Nov 15

Buttons

Primary Buttons

Primary Button

Primary Buttons should always have a background colour of Active Blue (#117EA9), with white text.

Navigation Buttons

Secondary Button

Secondary navigation should always be have a Dark Background grey (#5C5C5C) and have white text.

Inactive Buttons If a button is not clickable, the entire button should be 50% opaque. This is the same style applied to inactive select boxes.

Inactive Buttons

Primary Button Secondary Button

Last Update: 19 Nov 15

Tooltip

For the V3 widgets, we have introduced a new Tooltip in the form of the “i” icon. This will offer users extra, non essential information. The style of any Tooltip should always the same. A solid white background, and a solid white triangle that aligns to the “i” icon, 10px spacing inside and a drop shadow. Note: tooltips can also appear by other elements (e.g. icons in the Timeline widget). The drop shadow is defined as follows: Colour: Black Opacity: 25% Offset-X: 0px Offset-Y: 2px Blur: 3px CSS: boxshadow: rgba(0,0,0,0.2) 0px 2px 3px;

Last Update: 19 Nov 15

Crests, Player Images and Icons

Here are a selection of icons and player / team images used in V3 widgets. The main change from V2 is that we have removed the ‘+’ and ‘-’ and replaced these with up and down chevrons. *Note* We could also include the match center icons in this section. However V3 widgets are currently using legacy icons from old products for this function. All the icons on the page are V3 onwards. As soon as we update or add new ones. They’ll be added here.

Last Update: 19 Nov 15