Что должен знать веб-дизайнер?

0) GRID! - это первое и незыблемое правило слаженной работы дизайнера и верстальщика. Если в макете присутствует сетка 50% вопросов решается.
1) Основы HTML CSS. Чтобы дизайнер понимал поведение элементов на странице.
2) Проблемы рендеринга браузеров и проблему идентичности пикселя. Опять же образно.
3) Понимание mobile-first и desktop-first это решит проблемы с версткой отрисованных макетов в плане позиций элементов.
4) Принцип работы анимации js/canvas, чтобы понимать что хрен верстак сделает 7 красных перпендикулярных линий превращающихся в котенка.
​
Бывает дизайнер-Суперзвезда, который отдаёт 15 страниц макета и страницу, на которой прорисованы все базовые элементы: заголовки, списки, цитаты, таблички, формы с полями ввода, чекбоксами и кнопочками.

Сверстаешь такую страницу, а дальше все остальные пятнадцать страниц автоматически «собираются» пиксель-в-пиксель как на макете, только теги добавляй и новые стили дописывай. И в стилях при этом ничего не приходится обнулять, переписывать, идти на компромисcы.

И каждая страница макета согласуется с сеткой, которую выбрал для сайта дизайнер, и тебе не приходится подгонять размеры элементов от страницы к странице. А на полях макетов прорисованы разные состояния элементов.

И ты знаешь, что если в исходнике растровый слой, его надо нарезать картинкой, а если векторный — верстать, используя CSS. И каждый растровый элемент сайта или склеен в один слой, или является смарт-объектом. И нет в макете скрытых слоёв, которые не пригодились дизайнеру, а все растровые фоны даны с запасом на резину. И все шейпы попадают в пиксели. И тени на элементах в нормальном режиме наложения, а не каком-нибудь «Multiply». И вообще в слоях порядок.

Плюс ко всему этому прилагаются нестандартные шрифты из макета, чтобы верстальщик не искал их двадцать минут в интернете, и сторонние иконки, чтобы не нарезать их снова.
​
Взято отсюда