Сборка ставкиpredictmatch
В макете под шапкой матча стоят две панели — выбор предметов для ставки со счётчиком и подтверждение прогноза с кнопкой. На сайте вместо них составы команд и статистика.
Сверка веб-версии EzzzSkin с макетом
Семнадцать экранов: каждый снят в браузере при ширине 1600 и сопоставлен с мастер-компонентом из Figma по координатам. Сверялись размеры, отступы, промежутки, скругления, обводки, цвета и типографика — размер шрифта, начертание, межстрочный, регистр, цвет текста. Содержание надписей не сверялось: названия кейсов, команд и категорий приходят из админки.
17страниц
54расхождений
6сквозных
22по типографике
7по картинкам
9по составу
13цветов мимо
14страниц с чужим шагом
Чем мерил
Блоки из макета берутся с координатами и размерами, в странице ищется ближайший элемент с настоящим фоном или скруглением — прозрачные обёртки отсеиваются.
Чем проверял
Каждая находка вырезана с обеих сторон и просмотрена глазами. Промахи прибора, состояния выбора и разница меньше 4px выброшены.
Что не считал дефектом
Разную длину надписей, разный набор данных, выбранную вкладку против невыбранной и кнопку без средств на балансе.
слева — как на сайтесправа — как в макете
Расхождения по составу
Найдено просмотром разворотов «страница целиком против макета целиком». Это не про пиксели — это про то, что блок стоит не тот или не стоит вовсе.
Обложка сезонаezzpass
Правая половина шапки EzzzPass в макете занята обложкой сезона с персонажами. На сайте там пусто.
Заголовок страницыbuycoins
В макете страница открывается заголовком «ПОПОЛНИТЬ БАЛАНС». На сайте заголовка нет вовсе — сразу карточки способов оплаты.
Кнопки быстрых суммsteam
В макете под полем суммы стоит ряд кнопок 150 / 500 / 1.5к / 5к ₽. На странице Steam их нет — они есть только на пополнении баланса.
Подписи над полями формыbuycoins
На сайте подписи над полями крупные и белые, в макете — мелкие и приглушённые, а единица валюты вынесена внутрь поля справа.
Блок инструкции: номера и строкиcontracts
Кружок с номером в вебе выровнен по центру всей строки, поэтому у двухстрочного пункта съезжает вниз на 7px — в макете он стоит вровень с первой строкой. Фон кружка #3a404d вместо #303643. Промежуток между пунктами 16px вместо 12px, сам блок 531×236 вместо 491×204 при отступах 24px.
Карточка способа оплаты изнутриbuycoins
Снаружи всё сходится: 135 в высоту, скругление 16, фон #303643, отступы 12. Внутри в макете есть ещё одна обёртка с отступом 8px, в вебе её нет — поэтому логотип 112×79 вместо 95×75 и подпись прижата к краю карточки.
Шкала апгрейдаupgrade
Заливка круга в вебе почти чёрная — #273748 против #316a80 в макете, бирюзового свечения внутри нет. Насечки тонкие и стоят внутри дуги, в макете они толще и вынесены наружу; кольцо насечек 264 вместо 294, внутренний круг 208 вместо 223, внешнее 316 со скруглением 50px вместо круга.
Заглушка предмета в апгрейдереupgrade
Заглушка нарисована 120×120 вместо 206×100 — пистолет выходит вдвое мельче и развёрнут в другую сторону. Подпись под ним 12px/500 с межстрочным 12 вместо 16px/400 с межстрочным 20.
Типографика
Строки сопоставлены по координатам, а не по стилю — стиль здесь и есть предмет проверки. Дополнительная защита: строка из цифр не сравнивается со строкой из слов, иначе прибор ловит соседнюю.
Ссылки верхней строки шапки3 шт. на экране
размер14px→16pxмежстрочный18px→20px
Название и цена кейса13 шт. на экране
размер14px→16pxначертание500→400межстрочный18px→20px
Подпись карточки кейса
размер16px→14pxмежстрочный20px→18px
Текст вкладки меню
цвет текста#000000→#0e1526
Цена и название предмета15 шт. на экране
размер16px→20pxмежстрочный20px→28px
Цена и название предмета15 шт. на экране
размер14px→16pxмежстрочный18px→20px
Текст кнопки
размер12px→14pxмежстрочный16px→18px
Счётчик количества
начертание500→400
Подпись множителя4 шт. на экране
начертание400→500
Подпись «Скин для апгрейда»2 шт. на экране
размер12px→16pxначертание500→400межстрочный12px→20px
Подпись в ленте дропов2 шт. на экране
размер12px→14pxмежстрочный16px→18px
Подпись множителя
размер8px→16pxмежстрочный8px→20px
Текст вкладки меню
цвет текста#000000→#ffffff
Заголовок блока4 шт. на экране
размер20px→32pxмежстрочный28px→40px
Подпись в блоке2 шт. на экране
цвет текста#47deff→#ffffff
Текст кнопки
начертание500→400
Кнопка быстрой суммы4 шт. на экране
размер13.3px→14px
Подпись над полем суммы2 шт. на экране
размер16px→12px
Подпись над полем2 шт. на экране
размер16px→12px
Текст кнопки3 шт. на экране
размер12px→14pxмежстрочный20px→18px
Заголовок блока2 шт. на экране
размер11px→14px
Текст 16px в блоке10 шт. на экране
начертание400→500
Картинки и иконки
Каждая картинка сопоставлена внутри своего блока — по смещению от его центра, а не по месту на странице.
Картинка в ленте дропов7 шт. на экране
ширина96px→104pxвысота72px→64px
Картинка кейса19 шт. на экране
ширина206px→186pxвысота206px→187px
Картинка кейса
ширина206px→186pxвысота251px→187px
Картинка предмета в кейсе15 шт. на экране
ширина133px→154px
Логотип команды12 шт. на экране
ширина60px→44pxвысота60px→44px
Картинка кейса сезона4 шт. на экране
высота120px→140px
Иконка способа оплаты9 шт. на экране
ширина112px→95px
Сквозные элементы
Шапка, меню, лента дропов и подвал собраны один раз и стоят на каждом экране — поэтому каждое расхождение здесь умножается на одиннадцать страниц.
Карточка предмета7 шт. на экране
ширина160px→144pxвысота134px→144px
Отчего высота -10px: первый ряд внутри 110 вместо 120px — это -10px · ширина +16px: первый ряд внутри 136 вместо 120px — это +16px
Блок «онлайн»
ширина172px→160pxвысота56px→40px
Отчего высота +16px: остальные +16px даёт содержимое блока · ширина +12px: остальные +12px даёт содержимое блока
Лента дропов
ширина176px→160pxвысота744px→1072px
Отчего высота -328px: остальные -328px даёт содержимое блока · ширина +16px: первый ряд внутри 160 вместо 144px — это +16px
Полоса меню
ширина671px→647pxпромежуток12px→4px
Отчего ширина +24px: отступы 0/0 вместо 4/4 — это -8px; остальные +32px даёт содержимое блока
Блок статистики
ширина910px→870pxвысота173px→165px
Отчего высота +8px: четвёртый ряд внутри 262 вместо 258px — это +4px, ещё +4px по мелочи · ширина +40px: остальные +40px даёт содержимое блока
Кнопка2 шт. на экране
высота40px→44px
Отчего высота -4px: отступы 8/8 вместо 12/12 — это -8px; остальные +4px даёт содержимое блока · ширина +61px: отступы 12/12 вместо 16/16 — это -8px; остальные +69px даёт содержимое блока
Каталог кейсов
Своих расхождений: 7. Промежуток между секциями колонки: 16px против 64px.
card case20 шт. на экране
ширина206px→202pxвысота313px→275pxотступы0/0/0/0→12/0/0/0фон#1d2434→#1d2333
Отчего высота +38px: отступы 0/0 вместо 12/0 — это -12px; остальные +50px даёт содержимое блока · ширина +4px: первый ряд внутри 206 вместо 202px — это +4px
container20 шт. на экране
ширина206px→202pxвысота62px→70pxотступы8/12/12/12→8/16/16/16
Отчего высота -8px: отступы 8/12 вместо 8/16 — это -4px; промежуток 4 вместо 6 на 1 стыках — -2px; первый ряд внутри 18 вместо 20px — это -2px · ширина +4px: отступы 12/12 вместо 16/16 — это -8px; первый ряд внутри 182 вместо 170px — это +12px
Бейдж8 шт. на экране
высота36px→24px
Отчего высота +12px: отступы 10/10 вместо 4/4 — это +12px · ширина +24px: отступы 10/10 вместо 8/8 — это +4px; остальные +20px даёт содержимое блока
contest3 шт. на экране
ширина268px→274pxвысота164px→138px
Отчего высота +26px: первый ряд внутри 132 вместо 106px — это +26px · ширина -6px: остальные -6px даёт содержимое блока
Бейдж
высота28px→32pxотступы4/4/4/8→7/12/7/12
Отчего высота -4px: отступы 4/4 вместо 7/7 — это -6px; второй ряд внутри 20 вместо 18px — это +2px
contest
ширина220px→202pxвысота164px→138pxотступы16/18/16/12→20/16/20/16
Отчего высота +26px: отступы 16/16 вместо 20/20 — это -8px; остальные +34px даёт содержимое блока · ширина +18px: отступы 12/18 вместо 16/16 — это -2px; второй ряд внутри 102 вместо 82px — это +20px
Круглая кнопка
фон#1c2333→#282e38
Промежуток между секциями колонки
промежуток16px→64px
Страница кейса
Своих расхождений: 2. Промежуток между секциями колонки: 0px против 64px.
Карточка предмета15 шт. на экране
отступы12/12/12/12→16/16/16/16
Кнопка
фон#222837→#1d2333
Отчего ширина -12px: остальные -12px даёт содержимое блока
Промежуток между секциями колонки
промежуток0px→64px
Апгрейдер
Своих расхождений: 5. Промежуток между секциями колонки: 0px против 64px.
Кнопка множителя5 шт. на экране
ширина108px→114pxвысота46px→42pxфон#303643→#282e38
Отчего высота +4px: отступы 10/10 вместо 12/12 — это -4px; остальные +8px даёт содержимое блока · ширина -6px: остальные -6px даёт содержимое блока
Карточка апгрейда2 шт. на экране
скругление16px→24pxотступы10/8/10/8→24/24/24/24
Внешнее кольцо шкалы
ширина316px→306pxвысота316px→307px
Отчего высота +9px: остальные +9px даёт содержимое блока · ширина +10px: остальные +10px даёт содержимое блока
Насечки шкалы
ширина264px→294pxвысота264px→296px
Отчего высота -32px: остальные -32px даёт содержимое блока · ширина -30px: остальные -30px даёт содержимое блока
Внутренний круг шкалы
ширина208px→223pxвысота208px→223px
Отчего высота -15px: остальные -15px даёт содержимое блока · ширина -15px: остальные -15px даёт содержимое блока
Промежуток между секциями колонки
промежуток0px→64px
Контракты
Своих расхождений: 2.
Блок
ширина531px→491pxвысота244px→252pxпромежуток16px→24px
Отчего высота -8px: остальные -8px даёт содержимое блока · ширина +40px: первый ряд внутри 483 вместо 443px — это +40px
Блок инструкции
ширина531px→491pxвысота236px→204px
Отчего высота +32px: остальные +32px даёт содержимое блока · ширина +40px: первый ряд внутри 483 вместо 443px — это +40px
Предиктор
Своих расхождений: 8. Промежуток между секциями колонки: 24px против 64px.
Логотип команды12 шт. на экране
отступы0/0/0/0→4/4/4/4
Область команды в строке матча6 шт. на экране
высота52px→60pxотступы0/0/0/0→0/0/0/16
Кнопка10 шт. на экране
высота22px→32px
Отчего высота -10px: остальные -10px даёт содержимое блока · ширина -26px: остальные -26px даёт содержимое блока
Кнопка2 шт. на экране
высота22px→32px
Логотип команды6 шт. на экране
ширина60px→44pxвысота60px→44px
Отчего высота +16px: остальные +16px даёт содержимое блока · ширина +16px: остальные +16px даёт содержимое блока
Блок команд6 шт. на экране
ширина243px→308px
Переключатель разделов
фон#212837→#1d2333
Кнопка
фон#212837→#1d2333
Промежуток между секциями колонки
промежуток24px→64px
Страница ставки
Своих расхождений: 2. Промежуток между секциями колонки: 24px против 64px.
Карточка матча
ширина1024px→1072pxвысота155px→204pxскругление18px→24pxотступы14/12/16/12→24/24/16/24промежуток14px→24px
Блок команд
высота80px→76px
Промежуток между секциями колонки
промежуток24px→64px
Профиль
Своих расхождений: 1. Промежуток между секциями колонки: 28px против 64px.
Переключатель разделов
ширина1060px→854pxвысота48px→52pxпромежуток12px→0px
Отчего высота -4px: отступы 0/0 вместо 4/4 — это -8px; первый ряд внутри 48 вместо 44px — это +4px · ширина +206px: отступы 0/0 вместо 4/4 — это -8px; остальные +214px даёт содержимое блока
Промежуток между секциями колонки
промежуток28px→64px
EzzzPass
Своих расхождений: 5. Промежуток между секциями колонки: 48px против 64px.
Иконка награды3 шт. на экране
ширина40px→44pxвысота40px→44pxфон#3a404d→#303643
Отчего высота -4px: первый ряд внутри 16 вместо 24px — это -8px, ещё +4px по мелочи · ширина -4px: первый ряд внутри 16 вместо 24px — это -8px, ещё +4px по мелочи
Плитка награды4 шт. на экране
высота72px→84px
Отчего высота -12px: первый ряд внутри 28 вместо 40px — это -12px
Кнопка2 шт. на экране
высота36px→32px
Отчего высота +4px: отступы 8/8 вместо 7/7 — это +2px; остальные +2px даёт содержимое блока · ширина -7px: остальные -7px даёт содержимое блока
Вкладка меню
ширина124px→119pxотступы8/12/8/12→8/8/8/12
Отчего ширина +5px: отступы 12/12 вместо 12/8 — это +4px
Кнопка
фон#303843→#282e38
Отчего ширина -26px: остальные -26px даёт содержимое блока
Промежуток между секциями колонки
промежуток48px→64px
Пополнение баланса
Своих расхождений: 4.
Поле ввода2 шт. на экране
отступы8/16/8/16→12/16/12/16промежуток8px→0pxфон#343947→#303643
Чип фильтра4 шт. на экране
фон#343947→#303643
Форма оплаты
высота505px→440px
Отчего высота +65px: промежуток 0 вместо 32 на 1 стыках — -32px; остальные +97px даёт содержимое блока
Поле ввода
фон#343947→#303643
Пополнение Steam
Своих расхождений: 2. Промежуток между секциями колонки: 40px против 64px.
Поле ввода2 шт. на экране
отступы8/16/8/16→12/16/12/16промежуток8px→0pxфон#343947→#303643
Форма оплаты
высота344px→352px
Отчего высота -8px: промежуток 0 вместо 32 на 1 стыках — -32px; второй ряд внутри 96 вместо 76px — это +20px, ещё +4px по мелочи
Промежуток между секциями колонки
промежуток40px→64px
Рейтинг
Своих расхождений по элементам нет. Промежуток между секциями колонки: 32px против 64px.
Промежуток между секциями колонки
промежуток32px→64px
Задания
Своих расхождений: 4. Промежуток между секциями колонки: 32px против 64px.
Иконка награды3 шт. на экране
ширина54px→44pxвысота54px→44pxфон#1d2333→#303643
Отчего высота +10px: остальные +10px даёт содержимое блока · ширина +10px: остальные +10px даёт содержимое блока
card task desktop 2 шт. на экране
высота72px→56pxотступы8/14/8/14→0/0/12/0промежуток10px→0pxобводканет→1px #e9f0f3
Отчего высота +16px: отступы 0/0 вместо 0/12 — это -12px; первый ряд внутри 72 вместо 44px — это +28px
Блок
ширина589px→637pxвысота72px→288pxскругление18px→32pxотступы8/14/8/14→24/24/24/24промежуток10px→24px
Отчего высота -216px: отступы 0/0 вместо 24/24 — это -48px; остальные -168px даёт содержимое блока · ширина -48px: отступы 0/0 вместо 24/24 — это -48px
Переключатель разделов
высота48px→52pxпромежуток12px→0px
Отчего высота -4px: первый ряд внутри 40 вместо 44px — это -4px
Промежуток между секциями колонки
промежуток32px→64px
Рефералы
Своих расхождений: 1. Промежуток между секциями колонки: 32px против 64px.
Переключатель разделов
высота48px→52pxпромежуток12px→0px
Отчего высота -4px: первый ряд внутри 40 вместо 44px — это -4px
Промежуток между секциями колонки
промежуток32px→64px
Кешбэк
Своих расхождений: 2. Промежуток между секциями колонки: 32px против 64px.
Переключатель разделов
высота48px→52pxпромежуток12px→0px
Отчего высота -4px: первый ряд внутри 40 вместо 44px — это -4px
block cashback
высота196px→188px
Отчего высота +8px: первый ряд внутри 80 вместо 70px — это +10px, ещё -2px по мелочи
Промежуток между секциями колонки
промежуток32px→64px
История предметов
Своих расхождений: 3. Промежуток между секциями колонки: 28px против 64px.
Карточка предмета5 шт. на экране
высота274px→294px
Отчего высота -20px: остальные -20px даёт содержимое блока
Переключатель разделов
ширина858px→854pxвысота48px→52pxпромежуток12px→0px
Отчего высота -4px: отступы 0/0 вместо 4/4 — это -8px; первый ряд внутри 48 вместо 44px — это +4px · ширина +4px: отступы 0/0 вместо 4/4 — это -8px; остальные +12px даёт содержимое блока
Кнопка
промежуток8px→0px
Шаг между секциями колонки
В макете колонка контента везде собрана с шагом 64px. В вебе шаг свой почти на каждой странице — от нуля до сорока восьми. Отступ от полосы меню до первого блока при этом совпадает везде: 52px.
| Страница | На сайте | По макету | Разница |
|---|---|---|---|
| Каталог кейсов | 16px | 64px | −48px |
| Страница кейса | 0px | 64px | −64px |
| Апгрейдер | 0px | 64px | −64px |
| Контракты | 64px | 64px | совпадает |
| Предиктор | 24px | 64px | −40px |
| Страница ставки | 24px | 64px | −40px |
| Профиль | 28px | 64px | −36px |
| EzzzPass | 48px | 64px | −16px |
| Пополнение Steam | 40px | 64px | −24px |
| Рейтинг | 32px | 64px | −32px |
| Задания | 32px | 64px | −32px |
| Рефералы | 32px | 64px | −32px |
| Кешбэк | 32px | 64px | −32px |
| Хранилище | 28px | 64px | −36px |
| История предметов | 28px | 64px | −36px |
Цвета мимо макета
Сравнивались итоговые цвета после наложения прозрачности на фон предков — иначе полупрозрачная плашка читается как белая. Ниже только те, что близки, но не равны: заметить на глаз трудно, а от макета уводит.
| На сайте | По макету | Где | Применений | Страниц |
|---|---|---|---|---|
#4b69ff |
#3676ff |
градиент | 256 | 11 |
#383d4b |
#3a404d |
фон | 100 | 1 |
#303843 |
#303643 |
фон | 5 | 2 |
#e5c13a |
#e5d13a |
текст | 4 | 1 |
#3a404d |
#303643 |
фон | 3 | 1 |
#383d4b |
#303643 |
фон | 2 | 1 |
#f3fdff |
#ffffff |
градиент | 2 | 1 |
#1a2b46 |
#262c3b |
фон | 2 | 2 |
#243044 |
#262c3b |
градиент | 2 | 2 |
#2a3344 |
#303643 |
градиент | 2 | 1 |
#222a38 |
#262c3b |
градиент | 2 | 1 |
#1e2533 |
#1d2333 |
градиент | 2 | 1 |
#e5e5e5 |
#e9f0f3 |
градиент | 1 | 1 |
Первая строка — главная: синий градиент карточек уводит в фиолетовый на всех одиннадцати страницах, это 256 применений. Вторая — полоски редкости: взяты из палитры CS2 на полной насыщенности, тогда как в макете они приглушены вдвое.
Состояния
Наведение и нажатие проверялись отдельно на кнопках, вкладках, чипах фильтров и карточках.
| Состояние | Что происходит на сайте | Как должно быть |
|---|---|---|
| Наведение | ни один элемент не меняет ни цвет, ни размер | в макете заведены отдельные слои наведения |
| Нажатие | без отклика | нажатое состояние отрисовано |
| Чипы фильтров | курсор обычный, не «палец» | элемент кликабельный |
Свойство перехода transition: all на элементах прописано, но менять ему нечего — правил для наведения в стилях нет.