Работа в команде. Как создавать макет удобный для верстки

Разработка сайта — это трудоёмкий процесс, в котором участвует целая команда специалистов. Программисты, дизайнеры верстальщики и многие другие люди, которые участвуют в создании сайта составляют команду, а организация командной работы — это всегда непросто. Главное сделать так, чтобы тот, кто будет продолжать начатую одним из его коллег работу, не столкнулся с проблемами, вызванными ошибками в работе предыдущего специалиста. Каждое звено в цепи должно быть прочным и каждая качественно выполненная часть работы будет влиять на все остальные этапы.

В этой статье мы поговорим о связи двух звеньев этой цепочки, а именно дизайнер - верстальщик. Как сделать так, чтобы в работе над макетом сайта у верстальщика не возникало проблем?

Макет сайта можно назвать достаточно сложной системой, все детали которой должны быть расположены в определённом порядке, быть точно рассортированы, чтобы у вашего коллеги не возникло проблем в работе с таким документом.

Вот пример достаточно хорошей организации слоёв:

Весь контент распределён по группам, находится в определённых частях страницы, например в футере или хэдере, в информационной части страницы, и так далее. Все элементы находятся в своих папках, чтобы невозможно было перепутать описание товара с текстом кнопки. Иерархия слоёв и групп основана только на структуре страницы. При этом, у приведенного примера все же есть очевидный недостаток: слоям можно было бы дать более "осознанные" названия.

Чего лучше не делать, при создании макета сайта?

1. Не растрируйте слои
2. Не объединяйте слои друг с другом
3. Используйте только векторные инструменты
4. Не заливайте ничего градиентами, а также лучше не используйте те инструменты, результаты работы которых уже нельзя будет изменить на слое. Среди таких инструментов — заливка паттерном, обычные фильтры, и так далее. В данном случае лучше заменить эти инструменты процедурными аналогами
5. Когда трансформируете и накладываете фильтры на растровую графику, для начала сконвертируйте её в смарт-объект
6. Смарт-объекты всегда необходимы! Особенно, если собираетесь добавлять фильтр поверх одного из слоёв. Вы всегда сможете корректировать каждый из слоёв в смарт-объекте, а в случае растрирования такая возможность отсутствует
7. Выбирая пропорции и размеры, желательно делать их аккуратными, например 1000 пикселей, чтобы при вёрстке дизайна не возникало проблем
8. Гайдами в Photoshop намечайте только основные границы, не храните несколько вариантов дизайна в одном документе. Разработчику лучше сделать один слой, где дизайнер нарисует сетку, по которой нужно будет верстать

Есть ещё несколько советов по поводу того, как сделать верстальщика счастливым

9. При разработке макета, стоит учитывать адаптивность дизайна. То есть просчитать то, как сайт будет выглядеть на экранах с различным разрешением
10. Не скрывайте слои а удаляйте их, если они вам точно не понадобятся, дабы не усложнить работу верстальщику. Может случиться так, что видимым остаётся не тот слой, и вёрстка дальше идёт неправильно
11. Если в вашем дизайне много элементов, которые меняются или появляются при наведении курсора. То создайте отдельный макет, где будет показан вариант дизайна с такими активными элементами (ховерами)
12. Задумки, которые нельзя показать в макете, опишите подробно в тексте, чтобы верстальщик смог их отобразить
13. Лучше использовать только стандартные шрифты, чтобы увеличить вероятность того, что они будут видны у большей части пользователей.