Верстакам на заметку: как проверить свою работу на соответствие дизайну

Я щас не буду открывать америку, и вообще ничего необычного не напишу. Это очень простой быдляцкий способ, который при этом непревзойденно эффективен.

Но сначала небольшая вводная. См. скриншот: слева типичный несложный дизигн, справа типичная уебанская вёрстка этого простейшего дизигна. Это настолько распространенный результат, что я вообще хуею над тем, что я сейчас пишу такие очевидные вещи. Однако верстаки и программисты мыслят сильно иначе. Большинство даже не видит разницы между шрифтами. «Работает и ладно» — основной критерий качества у кодеров.

1/ Шрифт — это не только гарнитура с кеглем, это еще и начертание, трекинг, интерлиньяж. Про функции оупен тайпа вообще молчу. На картинке справа верстальщик забил хуй на все эти составляющие, поэтому заголовок у нас выглядит толстым, абзацы тяжелые, а надписи в кнопках не разряжены.

2/ Дизайн — не только про контент, это еще и система расстояний между элементами. На картинке справа верстальщик забил хуй на отступы, поэтому кнопка прилипает к следующему абзацу, а поля были успешно проёбаны.

Самое хуёвое, что верстальщик как правило в упор не видит эти проблемы, и ни в какую не может их понять.

Собственно, лайфхак: скриншотим дизайн, скриншотим вёрстку, вставляем оба скриншота в фотошоп, делаем верхний скриншот прозрачным на 50% и смотрим — совпадают ли картинки? Если нет — задумываемся почему и правим код. Всё.