Guidelines Winline

1.

Guidelines

2.

T A B L E
2
O F
C O N T E N T S
G U I D E L I N E S
Логотип
стр. 03
Элементы стиля
стр. 41
Фон
стр. 16
Кнопки
стр. 47
Шрифты
стр. 26
Форматы
стр. 67
Логоблок
стр. 32

3.

Logotype

4.

L O G O T Y P E
G U I D E L I N E S
Техническое описание
Основной логотип состоит из трех частей:
• Названия бренда, набранное белым
шрифтом
• Темно-серой подложки
• Основного знака - оранжевой окружности
4

5.

L O G O T Y P E
G U I D E L I N E S
Логотип быстро считывается благодаря
охранному полю. В данное пространство не
должны попадать посторонние элементы.
1R
1R
2R
1R
5
1R
Техническое описание
Минимальная ширина охранного поля равна
радиусу знака в логотипе.

6.

L O G O T Y P E
G U I D E L I N E S
Минимальная высота
20px
6
Минимальный размер логотипа по высоте
равен 20px. для стандартного разрешения
экрана.

7.

L O G O T Y P E
G U I D E L I N E S
Базовая версия - плоский двухцветный
логотип используется тогда, когда
технологически невозможно отобразить
дополнительную графику (засветы, тени).
C - 70
M - 64
Y - 61
K - 64
7
R - 44
G - 44
B - 44
Pantone
425C
C-0
M - 61
Y - 97
K-0
R - 255
G - 106
B - 19
Pantone
1585C

8.

L O G O T Y P E
G U I D E L I N E S
Одноцветная версия используется в случае,
если невозможно отобразить цветной
вариант. Например, в периодической печати
или офисной документации.
Также может использоваться при нанесении
методами тиснения и эмбоссирования.
Знак легко воспроизвести на металле или 3Dпринтере.
C - 70
M - 64
Y - 61
K - 64
8
R - 44
G - 44
B - 44
Pantone
425C
50% Black

9.

L O G O T Y P E
G U I D E L I N E S
Одноцветная версия используется в случае,
если невозможно отобразить цветной
вариант. Например, в периодической печати
или офисной документации.
Также может использоваться при нанесении
методами тиснения и эмбоссирования.
Знак легко воспроизвести на металле или 3Dпринтере.
50% White
9
100% White

10.

L O G O T Y P E
G U I D E L I N E S
Как нельзя использовать
плоский вариант логотипа
10
Запрещено произвольно
перекрашивать логотип
Запрещено менять пропорции
Запрещено менять порядок
элементов
Запрещено менять оригинальный
шрифт и использовать кириллицу
Запрещено любое использование
эффектов - тени, свечение,
выпуклости и т.д.
Запрещено использовать наклон

11.

L O G O T Y P E
Корректные варианты
логотипа
G U I D E L I N E S
Плоский логотип
Скевоморфный логотип
Используется в печатной продукции,
на сайте и в некоторых digital медиаформатах.
Используется в digital медиаформатах.
Скевоморфный логотип
Объемный 3D логотип
Используется в digital медиаформатах. Например, в рекламной
кампании «Легальный букмекер».
Используется в видео и некоторых
digital медиа-форматах.
Логотип видоизменяется в зависимости
от канала коммуникации и
маркетинговых активностей бренда.
11

12.

L O G O T Y P E
12
G U I D E L I N E S

13.

L O G O T Y P E
G U I D E L I N E S
Идентификатор бренда
Оранжевая сфера - отдельный графический
элемент брендинга, который может
использоваться только в контексте логотипа.
13

14.

L O G O T Y P E
G U I D E L I N E S
Унифицированный
логотип
В унифицированном варианте происходит
смешение плоской и скевоморфной
стилистики.
• Данный логотип имеет ряд преимуществ:
• Легко масштабируется
• Подходит для всех каналов коммуникации
• Быстро считывается
• Легко трансформируется под задачи
14

15.

L O G O T Y P E
15
G U I D E L I N E S
Плоский двухцветный
логотип
Скевоморфный
логотип
Логотип используется:
• В печати на маленьких форматах
• При печати на материале, на котором
невозможно корректно отобразить графику
• В digital форматах, где контентная область
меньше чем 200 px.
Логотип используется
• В полноцветной печати
• В видео графике
• Digital, когда контентная область больше
чем 200 px.

16.

Background

17.

B A C K G R O U N D
Двухцветный и скевоморфный
вариант логотипа используется на
белом фоне без каких-либо
дополнительных графических
элементов.
17
G U I D E L I N E S
При использовании логотипа на
темном фоне, когда цвет плашки
плохо считывается, добавляется
белая обводка.

18.

B A C K G R O U N D
х
G U I D E L I N E S
х
х
х
х
Толщина обводки
Толщина обводки равна толщине линий
типографических знаков в логотипе
18

19.

B A C K G R O U N D
х
х
G U I D E L I N E S
>х
х
Толщина обводки
Чтобы левая часть логотипа не
«перевешивала», расстояние между ней и
идентификатором увеличено
19

20.

B A C K G R O U N D
G U I D E L I N E S
Размещение
логотипа на фоне
Белая обводка добавляется при
использовании логотипа на неоднородном
фоне, когда цвет плашки плохо различим.
20

21.

B A C K G R O U N D
G U I D E L I N E S
Использования логотипа
на неоднородном статичном фоне
Логотип, размещенный на неоднородном фоне, не должен попадать в область,
где будет плохо считываться из-за:
Количества графических объектов вокруг
(замусоренность)
21
Резкого цветового перехода (засветы), где часть
логотипа будет «перевешивать» другую
Графических элементов, перекрывающих его

22.

B A C K G R O U N D
G U I D E L I N E S
Растровая текстура
карбона
Является фирменным фоновым
изображением бренда, использующимся
в digital-коммуникациях.
22

23.

B A C K G R O U N D
G U I D E L I N E S
Как использовать
Фирменная текстура должна использоваться
во всех digital коммуникациях:
• При размещении логотипа на текстуре
карбона к нему добавляется обводка
• Высота «стежка» карбона должна
совпадать с размером обводки логотипа
23

24.

B A C K G R O U N D
G U I D E L I N E S
Векторная текстура
карбона
Упрощенная текстура карбона, состоящая
из прямых линий, используется в печатной
продукции.
Толщина светлой и темной линии карбона
должна равняться толщине обводки
логотипа.
24
C - 67
M - 64
Y - 60
K - 53
R - 59
G - 56
B - 57
Hex
#3B3839
C-0
M-0
Y-0
K - 100
R - 35
G - 31
B - 32
Hex
#231F20

25.

B A C K G R O U N D
G U I D E L I N E S
Векторная текстура
карбона
Упрощенная текстура карбона, состоящая
из прямых линий, используется в печатной
продукции.
Толщина светлой и темной линии карбона
должна равняться толщине обводки
логотипа.
25
C - 65
M - 56
Y - 53
K - 29
R - 85
G - 87
B - 89
Hex
#555759
C - 70
M - 64
Y - 61
K - 64
R - 44
G - 44
B - 44
Hex
#2с2с2с

26.

Fonts

27.

F O N T S
G U I D E L I N E S
Roboto
аА
Наша цель – стать синонимом высшей степени надежности и
качества обслуживания на всемирном рынке букмекерских
компаний.
Мы хотим, чтобы именно Winline у любого игрока в мире
ассоциировался с букмекером, который платит всегда и без
вариантов.
Наборный шрифт
для digital media
Roboto представляет собой
шрифтовую гарнитура без
засечек
27
Основной шрифт для набора текстовых блоков
и верстки технической информации: Roboto
Начертание: Regular
АБВГДЕЖЗИКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдежзиклмнопрстуфхцчшщъыьэюя
1234567890

28.

F O N T S
G U I D E L I N E S
Roboto
аА
Наша цель – стать синонимом высшей степени надежности и
качества обслуживания на всемирном рынке букмекерских
компаний.
Мы хотим, чтобы именно Winline у любого игрока в мире
ассоциировался с букмекером, который платит всегда и без
вариантов.
Наборный шрифт
для digital media
Roboto представляет собой
шрифтовую гарнитура без
засечек
28
Основной шрифт для набора текстовых блоков
и верстки технической информации: Roboto
Начертание: Bold
АБВГДЕЖЗИКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдежзиклмнопрстуфхцчшщъыьэюя
1234567890

29.

F O N T S
G U I D E L I N E S
PF DIN TEXT COMP PRO
аА
Шрифт для заголовков
в печатных материалах
PF Din Text Comp Pro - рубленный
шрифт использующий для
заголовков. Преобладают прямые
линии и острые углы
29
НАША ЦЕЛЬ – СТАТЬ СИНОНИМОМ ВЫСШЕЙ СТЕПЕНИ
НАДЕЖНОСТИ И КАЧЕСТВА ОБСЛУЖИВАНИЯ НА
ВСЕМИРНОМ РЫНКЕ БУКМЕКЕРСКИХ КОМПАНИЙ.
МЫ ХОТИМ, ЧТОБЫ ИМЕННО WINLINE У ЛЮБОГО
ИГРОКА В МИРЕ АССОЦИИРОВАЛСЯ С БУКМЕКЕРОМ,
КОТОРЫЙ ПЛАТИТ ВСЕГДА И БЕЗ ВАРИАНТОВ.
Акцидентный шрифт для набора заголовков и
сообщений в рекламной коммуникации: PF Din Text
Comp Pro
Начертания: Bold Italic
АБВГДЕЖЗИКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдежзиклмнопрстуфхцчшщъыьэюя
1234567890

30.

F O N T S
G U I D E L I N E S
PF DIN TEXT COMP PRO
аА
Дополнительный шрифт
для печатных материалов
PF Din Text Comp Pro - рубленный
шрифт использующий для
заголовков. Преобладают прямые
линии и острые углы
30
НАША ЦЕЛЬ – СТАТЬ СИНОНИМОМ ВЫСШЕЙ СТЕПЕНИ
НАДЕЖНОСТИ И КАЧЕСТВА ОБСЛУЖИВАНИЯ НА
ВСЕМИРНОМ РЫНКЕ БУКМЕКЕРСКИХ КОМПАНИЙ.
МЫ ХОТИМ, ЧТОБЫ ИМЕННО WINLINE У ЛЮБОГО
ИГРОКА В МИРЕ АССОЦИИРОВАЛСЯ С БУКМЕКЕРОМ,
КОТОРЫЙ ПЛАТИТ ВСЕГДА И БЕЗ ВАРИАНТОВ.
Акцидентный шрифт для набора заголовков и
сообщений в рекламной коммуникации: PF Din Text
Comp Pro
Начертания: Bold
АБВГДЕЖЗИКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдежзиклмнопрстуфхцчшщъыьэюя
1234567890

31.

F O N T S
G U I D E L I N E S
ЗАПЛАТИТ.
БЕЗ
ВАРИАНТОВ
ЛЕГАЛЬНЫЙ
БУКМЕКЕР
Наша цель – стать синонимом высшей степени
надежности и качества обслуживания на всемирном
рынке букмекерских компаний.
Мы хотим, чтобы именно Winline у любого игрока в мире
ассоциировался с букмекером, который платит всегда и
без вариантов.
PF Din Text Comp Pro
Bold Italic
Шрифт для заголовков
PF Din Text Comp Pro
Bold
Шрифт для подзаголовков и коэффициентов
Roboto Regular
Наборный шрифт для digital media
Roboto Bold
Наборный шрифт для выделения значимой
информации в тексте
31
31

32.

Logoblock

33.

L O G O B L O C K
33
33
G U I D E L I N E S

34.

L O G O B L O C K
G U I D E L I N E S
1R
1R
2R
1R
1R
1R
34
34
2R
1R
1R
1R

35.

L O G O B L O C K
35
35
G U I D E L I N E S

36.

L O G O B L O C K
G U I D E L I N E S
1R
2R
1R
1R
36
36
1R
1R
2R
1R
1R
1R

37.

L O G O B L O C K
37
G U I D E L I N E S

38.

L O G O B L O C K
G U I D E L I N E S
1R
1R
2R
1R
1R
1R
1R
2R
1R
1R
38

39.

L O G O B L O C K
39
G U I D E L I N E S

40.

L O G O B L O C K
G U I D E L I N E S
1R
2R
1R
1R
1R
1R
2R
1R
1R
1R
40

41.

Buttons

42.

B U T T O N S
G U I D E L I N E S
Ранее используемые кнопки
Используются в digital media коммуникациях в форматах
баннеров, брендингов и др. материалов.
42
Используются в digital media коммуникациях в
форматах баннеров на сайте Winline.

43.

B U T T O N S
G U I D E L I N E S
РЕГИСТРАЦИЯ
РЕГИСТРАЦИЯ
РЕГИСТРАЦИЯ
43
Обновленная форма
кнопки
Основой для обновленной формы кнопки,
которая будет использоваться во всех
форматах digital-коммуникации, является
плашка логотипа, закругленная с обеих
сторон.

44.

B U T T O N S
G U I D E L I N E S
Gradient
G
Link
Green
Light green
Hex #257e0a
Hex #54d02a
R - 37
G - 126
B - 10
R - 84
G - 208
B - 42
F
Flat
Green
Hex #257e0a
G
Hover
44
R - 37
G - 126
B - 10

45.

B U T T O N S
G U I D E L I N E S
Green
Hex #54d02a
R - 84
G - 208
B - 42
Link
Dark green
Hex #257e0a
R - 37
G - 126
B - 10
Hover
45

46.

B U T T O N S
Использование графических
элементов в digital
46
G U I D E L I N E S

47.

Style elements

48.

S T Y L E
E L E M E N T S
G U I D E L I N E S
Коэффициенты
Основой для форм отображения
коэффициентов является логотип.
48

49.

S T Y L E
E L E M E N T S
К плашкам с коэффициентами добавляется
обводка толщиной в половину толщины обводки
логотипа.
49
G U I D E L I N E S
При размещении коэффициентов на маленькой
рабочей области (меньше 200px), обводка не
используется, а плашки должны быть отличного
от фона цвета.

50.

S T Y L E
E L E M E N T S
G U I D E L I N E S
Коэффициенты
Для выделения наиболее значимого
коэффициента в печати, используется
закругленная с обеих сторон оранжевая
плашка.
50

51.

S T Y L E
E L E M E N T S
G U I D E L I N E S
Коэффициенты
В digital-коммуникациях значимый
коэффициент определяется формой плашки.
В состоянии «ховера» плашка окрашивается
в цвет градиента знака логотипа.
51

52.

S T Y L E
E L E M E N T S
G U I D E L I N E S
Коэффициенты
Выделение значимого коэффициента цветом
в состоянии «ховера» на небольших
форматах.
52

53.

S T Y L E
E L E M E N T S
Использование графических
элементов в digital
960x90px
960x50px
53
G U I D E L I N E S

54.

S T Y L E
E L E M E N T S
Дополнительные
элементы
Форма основного элемента логотипа
может трансформироваться в
тематические объекты (мячи, фишки,
разметка поля и т.д.)
54
G U I D E L I N E S

55.

S T Y L E
E L E M E N T S
G U I D E L I N E S
Как использовать
• Использование окружности в дизайне в
качестве акцентирующего элемента
• Использование окружности (круглого
элемента) в качестве секционного элемента
• Использование окружности в качестве
декоративного элемента
Акцент
55
Секции
Декорации

56.

S T Y L E
56
E L E M E N T S
G U I D E L I N E S

57.

S T Y L E
57
E L E M E N T S
G U I D E L I N E S

58.

S T Y L E
58
E L E M E N T S
G U I D E L I N E S

59.

S T Y L E
E L E M E N T S
Акцент
G U I D E L I N E S
Как использовать
• Использование окружности в дизайне в
качестве акцентирующего элемента
Секции
• Использование окружности (круглого
элемента) в качестве секционного элемента
• Использование окружности в качестве
декоративного элемента
Декорации
59

60.

S T Y L E
60
E L E M E N T S
G U I D E L I N E S

61.

S T Y L E
61
E L E M E N T S
G U I D E L I N E S

62.

S T Y L E
62
E L E M E N T S
G U I D E L I N E S

63.

Formats

64.

F O R M A T S
G U I D E L I N E S
150px
150px
64
Используемая графика
В форматах, где контентная область больше
150px по ширине и высоте, используется
скевоморфный логотип. По графике
ограничений нет.

65.

F O R M A T S
G U I D E L I N E S
150px
150px
65
Используемая графика
В форматах, где контентная область меньше
150px по ширине или высоте, в целях
облегчения считывания рекламного
сообщения, необходимо использовать
плоский логотип и 2D элементы - плашки,
иконки и т.д.