Часто в командной работе дизайнера и верстальщика возникают конфликты на почве непонимания друг друга. Верстальщик сетует на пляшущие отступы и заголовки. Дизайнер несет свою правду и говорит, что верстальщик не может нормально сверстать. Но никто из них не задумывается о том, что избавиться от этих конфликтов можно простым объяснением норм работы друг друга. Если вы хотите понять, как избежать этих конфликтов, добро пожаловать к прочтению.
Почему дизайнеру важно знать HTML и CSS
Нет, не подумайте, вовсе не обязательно знать все подробности Javascript, работы с npm, git или препроцессорами, достаточно основ, но все же знания должны быть. Итак, понимая HTML и CSS, вы:
- Избавитесь от упомянутого выше непонимания. Какой бы идеальный макет не выдал дизайнер, бывает так, что его креативы крайне сложно реализовать с точностью до пикселя. Тогда, либо дизайнер недоволен и не пропускает верстку, либо верстальщик приходит к дизайнеру с претензиями по поводу кривых отступов и невозможности реализации элемента.
- Упростите работу верстальщику. Например, работа по сетке позволит значительно упростить взаимодействие между сторонами.
- Будете понимать, насколько сложную задачу вы формируете и, если она слишком тяжелая, сделаете ее более простой.
Всего 3 пункта, но они сведут конфликты к минимуму или исключить непонимание полностью.
Что стоит делать дизайнеру?
Чтобы работа ладилась, и вы увидели результат, точно соответствующий ожиданиям нужно:
1. Показывать состояния объектов
Классический пример – не показан ховер-эффект. Как верстальщику догадаться, что задумал дизайнер, если это не отображено? Да никак. А если непонятно, работа будет сделана не так как задумано, а так как придумал верстальщик, дизайнеру это не понравится, в общем… Снова конфликт, снова потраченное время. Покажите состояние элемента простым способом – просто один из схожих объектов сделайте отличным от других и оставьте на нем курсор в виде руки. Так верстальщик поймет, что при наведении, должен работать вот такой эффект.
2. Типизируйте все, что нужно
Если заголовок написан с помощью Open Sans 1.2em, пусть все заголовки будут сделаны в таком же стиле. Это снизит нагрузку на верстальщика, ему придется меньше править CSS.
3. Создайте stylegide
Это может быть отдельный лист, в котором будут закреплены все типизированные элементы дизайна: все уровни заголовков, варианты кнопок, разделительные линии, блоки. Для лучшего понимания, оставьте комментарии к разделам стайлгайда.
Хотите работать в команде без проволочек и конфликтов? Заботьтесь не только о своей работе, думайте и о тех, кто будет использовать ваши макеты.
