Вёрстка для дизайнера. Что дизайнер должен знать?

Question

[Николай Шабалин]

Приветствую.
Так получилось, что я работаю с адекватными дизайнерами, которые сами понимают, что без некоторых знаний по вёрстке им не обойтись. Мы часто сталкиваемся с таким, что дизайнер разрывает колонки в адаптиве или им не всегда ясно, что ссылка в ссылке это не очень и пр.

Меня попросили поучить их вёрстке. Т.к. в вёрстке я очень давно, то для меня и так вполне всё очевидно, и я не понимаю на чём стоит заострить своё внимание. Вот теперь сижу и думаю, чтобы было полезно рассказать дизайнеру, чтобы он понимал, как рисовать не надо, т.к. это будет проблематично для верстальщика. Чтобы он имел базовые понятия о том, во что его дизайн превратиться.

Есть ли такой опыт в ваших компаниях и что вы рассказывали вашим дизайнерам? Может быть у вас остались доклады или ресурсы по моему вопросу?

Answer 1

[Ankhena]

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

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

Понимать дизайнер должен про возможные размеры экранов/браузеров, плотность пикселей, перестроение блоков на разных устройствах, бесшовные текстуры, геометрию в целом. Обратить внимание на моменты между точками изменения макета.
Отдельным пунктом, наверное, еще про возможности анимации.
Цвета: визуально-похожие цвета должны быть одинаковым цветом.
Расположение элементов и отступы - делать понятными, равномерными и логичными, для адаптива хорошо бы в зависимостях от разера шрифта или ширины, а не от балды.

Упростить работу верстальщика дизайнер может, написав стайлгайды и вменяемо разложив макет по слоям и граппам, еще прислав svg отдельными файлами, а не заставляя выковыривать их из фотошопа.
Требования к PSD-макетам как обычно, не со всем согласна, но почитать полезно.

Comments

[Николай Шабалин]

Дизайнеры хотят понимать вёрстку. Моя задача научить.
Спасибо за ответ. Есть пара дельных советов.

В вашей компании ничего такого не происходило? Может есть опыт?

[Ankhena]

Николай Шабалин:

Дизайнеры хотят понимать вёрстку.

Кроме описанных нюансов, я не вижу, чем обучение верстке дизайнеров отличается от обучения всех остальных.

Мне нравятся курсы html-академии. Одно время черпала там вдохновение для обучения студентов.

[Николай Шабалин]

Ankhena W: я просто думаю, что дизайнеру не обязательно знать, чем отличаются инлайновые элементы от блочных. Вот над такими моментами я и думаю, возможно и нужно.

[Ankhena]

Николай Шабалин: Зачем об этом думать прямо сейчас? Начните объяснять с начала. Будет интерес и понимание - продолжите.

Answer 2

[Ar jeck]

неплохое видео на эту тему

Comments

[Николай Шабалин]

Посмотрю. Спасибо! А в вашей компании ничего такого не происходило?

Answer 3

[Илья Дзенски]

Добрый день, Николай!

Здесь собрана подборка того, что необходимо знать дизайнеру: https://github.com/andrey-hohlov/psd-templates-req...

Также рекомендую дополнительно почитать мою статью о работе диз + верстальщик по ссылке: https://habrahabr.ru/post/330144/

Comments

[Николай Шабалин]

Приветствую. Ссылка на гитхаб не работает, поправьте пожалуйста.
За ответ спасибо.

[Илья Дзенски]

https://github.com/andrey-hohlov/psd-templates-req...
Лишняя точка в конце, исправлено в ответе.

[Николай Шабалин]

Илья Дзенски: Спасибо ещё раз. Ознакомлюсь