Как протестировать соответствие веб-интерфейса дизайн-макетам?

Да ты посмотри, какая хуйня вырисовывается! Сидит наш фронтендер, пыхтит, верстает, вроде всё по макетам, а потом открываешь — и пиздец, Колян, всё плывёт, как будто дизайнер на опиуме рисовал, а верстальщик с бодуна читал. А всё потому, что тестирование дизайна — это не «ой, вроде похоже», а жёсткая, блядь, сверка до пикселя.

Процесс и инструменты, без которых ты просто мудак:

1. Пиксель-перфект, ёпта!

   • Берёшь свой макет из Фигмы и накладываешь его поверх страницы, как грешную душу на сковородку. Плагины PerfectPixel или режим наложения в DevTools — твои лучшие друзья. Если блок съехал на два пикселя вправо — это не мелочь, это пиздец, товарищ! Отступы, размеры, выравнивание — всё должно быть как влитое, иначе дизайнер прилетит с криком «я тебя рожала?!».

2. Визуальные атрибуты — тут глаз алмаз.

   • Цвета: Ты думаешь, зелёный он и в Африке зелёный? А вот хуй там! Дизайнер выдумал #2E7D32, а ты впендюрил #2E7D31. Один символ — и уже не то, блядь. Пипетка в браузере — священный инструмент, не пренебрегай.

     /* Макет говорит: #2E7D32 */
     .primary-button {
     background-color: #2E7D32; /* А у тебя тут что, сука? Проверяй! */
     }

   • Шрифты: font-family, size, weight, line-height — это не просто слова, это буквы закона. Если интерлиньяж съехал, текст будет выглядеть, как будто его топтали.
   • Тени и скругления: box-shadow и border-radius — это как макияж. Сделал не по макету — получил клоуна, а не интерфейс.

3. Состояния элементов — где собака зарыта.

   • Кнопка — она же живая, блядь! Навёл курсор (hover) — должна подсветиться, ткнул (active) — ушла вдавленную, фокус получила — обвесилась рамкой. А если поле ввода с ошибкой, то оно должно кричать об этом цветом, а не скромно потупиться. Проверяй все эти состояния, а то пользователь нажмёт и нихуя не поймёт.

4. Кросс-браузерность — адская мука.

   • В Хроме красиво, в Сафари — пизда картинке. В Firefox тени съехали, а в Edge шрифты плывут, как говно в проруби. И да, на Windows и macOS одно и то же может рендериться по-разному, потому что мир несправедлив. Проверять надо везде, иначе получишь «а у меня не работает» от половины аудитории.

5. Доступность (A11y) — чтобы не быть мудаком.

   • Контрастность текста — это святое. Если седой дед или просто дальтоник не увидит надпись на твоей красивой кнопке — ты сосалка, а не разработчик. Юзай Lighthouse или axe DevTools.
   • Картинки без alt — это как анекдот без смеха. Слепой пользователь нихуя не поймёт.
   • Семантика, блядь! Заголовки h1-h6 должны быть по порядку, а не абы как. Это не только для роботов, но и для скринридеров.
   • Управление с клавиатуры. Если табом нельзя пройтись по всем интерактивным элементам — это пиздец и позор. Tabindex должен быть в порядке, а не как попало.

Вот так вот, коротко и без соплей. Сделал интерфейс — проверь его по всем этим пунктам, как святую библию. А то выйдет говно, а не продукт, и потом все будут спрашивать: «А кто, сука, верстал?».