nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy

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

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

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

Есть ли такой опыт в ваших компаниях и что вы рассказывали вашим дизайнерам? Может быть у вас остались доклады или ресурсы по моему вопросу?
  • Вопрос задан
  • 3728 просмотров
Пригласить эксперта
Ответы на вопрос 3
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
чтобы он понимал, как рисовать не надо, т.к. это будет проблематично для верстальщика.

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

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы